In this article, we will guide you on how to build your emails with Drag and Drop Editor when you create a Campaign

Automation email editor and Campaign email editor are pretty the same so you can read this guide if you are design either.
To start with, go to your newsletter campaign, then click edit your email.

Here is the Drag and Drop editor page:

- At the left menu, AVADA support various content blocks and elements to drop into your email template
- In the right column, you can do all settings of the selected element on email template. For example, when I click on an image element on email template > it will show corresponding settings of that image on the right column (see image below)

So let get started to explore the content/items that you can add to a newsletter email!



There are available items to make email design easier by dragging and dropping it to the position you want.



Or, you can also click "Plus" button to insert more element next to a certain block:





1. Basic blocks



1.1 Heading, Text

Enter text at the Content tab. Customize the font, background color and padding in the Style tab



To add personalization, click "Content" tab and select the variable to insert into your email



1.2 Image

Drag and drop the image into your email template and upload image from your computer or insert a link to it.



After uploading a photo successfully, you can edit the display and add the link for the image at the Content tab
Alt: Enter the Alt text you want to add to the image
Link to: Enter the link for the image
Auto size: Check if you want to auto-size for photos

Or edit the photo Alignment on the Style tab

1.4 Button

Drag and drop a button into the position you want on email content:



At the Content tab you can change button text and add link for button



-- When your email has a coupon code, you can select the This is discount link feature at the button to allow customers to click the button, it will automatically fill the coupon code at the checkout. When enabling this feature, in the Link to field you just need to enter the URL of the shop



- At the Style tab
Font family: Choose a font for the button text
Background color: Select a background color for the button
Text color: Select a color for the button text
Font size: Customize the font size for the button
Border radius: Customize border for the button
Alignment: Customize button display position on email

1.5 Space

Drag and drop space item to where you want to add space. Then customize the Space height in Settings



1.6 Coupon

Drag and drop the coupon to the position you want to display at the email. Please note that for each email, you can add one coupon code block only.
If you want to add several static codes (fixed codes), you just need to type the code into email content (same as typing text).



After adding the block, you can edit the display of your coupon block in the Content and Style tab on the right side of the screen

To choose coupon code for the block:
Step 1: Click Open settings button at the Content tab then display a popup for you to choose coupon code



Step 2: There are 2 types of coupons: Static coupon and Dynamic coupon



For Static coupon, you need to enter the coupon code manually and then click Save
For Dynamic coupon, click Select at the corresponding coupon you want to select. If there is no coupon, click New coupon to create a new one

GUIDE: How to create coupon in AVADA

How to customize display for coupon code at the Style tab:

- Border width: Customize the width of the border coupon code
- Border color: Select a color for border
- Font size: Customize the size coupon code
- Alignment: Customize the display position for the coupon code

1.7 Row

The row is a block that allows you to split the email into several collums. After adding the Row, you can add other blocks to the rows that you have selected.







1.8 Divider

Divider will break your email template into different parts in case you want it to be clear and good-looking.
Drop the Divider into the position you want and edit the length, color at the "Styles" tab



1.9 Video

With video block, you can add the video thumbnail and insert a youtube link to it.
When customers click on the video on your email, they will be directed to another window with your video played.



After adding the block, you need to enter the Youtube video link in the Content tab on the right side of the screen.



1.10 Social

Drag and drop the social button to the place you want to add the social link to the email. Edit social button at Content and Styles tab.







At the Content tab:
- Click Add icon button to add icon to add
- The corresponding URL can be added at each icon

At Styles tab, you can choose the style of icon to display

2. Pre-header

Pre header is the block that allows you to add a view in browser functionality. Currently, AVADA supports 2 types of pre-headers. When the customer clicks on this pre-header line at the email, the customer can view the content of email in his browser.

After adding the block, you can edit the existing content in Content and Styles tab on the right side of the page:



3. Header

Header is a block that allows you to add a header template to your email. Currently, the app has various header templates to save you time to design emails.

After adding a header, you can edit the content of your header in the Content and Styles tab on the right side of the screen:



4. Footer

Similar to Header, Footer block has many designing option for you to choose.
After adding the footer, you can customize the content in the Content and Style tab on the right side of the screen



5. Product

Product is the block that allows adding product list to email. You can add products manually or load products from your shop. The function that auto browses products from your shop is only available in Pro plan.



After adding the product block from the left menu, you can edit the products at the Content and Styles tab on the right side of the screen.

How to upload/edit your product list?
You can add products manually by clicking edit existing sample products and editing photos, information and adding links for the product.



If you are on AVADA Pro plan, you can add a product by clicking Browse product in the edit section of each product. When adding a product in this way, the app will automatically get the information and link of that product.



At the Style tab, you can customize the color for the product list and corresponding buttons.



In addition, the app also has a Dynamic Product block that allows automatic retrieval and display of products with 2 types: Bestsellers and New products. You can customize the type and quantity of products you want currently on the Content tab. Each email can only add 1 Dynamic product block.



6. Dynamic



If you add this block to your email, it will auto get the product information to show when you send the real emails.



We support 3 types of product:
- Best sellers
- New products
- Certain collections

You can choose to show how many items here.



Notice: If you are edit an Automation email, at Dynamic blocks, you can find some more blocks like this:

- Line items or cart items are the products in order (after purchase) or products in cart (before purchase) can be add to your email and it will auto get the products information to show in real emails

- AVADA Photo Reviews is the items and review content after customer submit a review and it need to be integrate with AVADA Photo Review app to show this block.



7. Content

There are various content blocks for you to choose from.

After adding a content block, you can edit the it in the Content and Styles tab on the right side of the screen



8. Simple

Simple provide image blocks with different designs for you.

Similarly you can edit and change block layout at the right column.



9. Call to action

Call to action block contains Image background + Text + CTA button which create the same feeling like when you access a website. This CTA will definitely make your email look more familiar and professional.



10. Other modules

You can add other content block that are pre-made to your emails if you find it suitable



11. Saved blocks

You can save the blocks that have been designed to be used for other emails
- Step 1: Click the button as shown in the block you want to save



Step 2: Enter a name for the block then click Save. Review the saved block at Saved Block

Was this article helpful?
Cancel
Thank you!