Email visual editor guide

This article will guide you through creating the body of your email using the intuitive Visual Editor. The Editor simplifies the email template-building process, as it eliminates the need to write HTML code. With just a few clicks, you can produce professional-looking email templates that meet your specific needs.

Overview

To begin using the editor, you'll notice that it's separated into two main sections: the primary main editor window on the left and the properties panel on the right. Typically, you can add content elements to the editing section by dragging and dropping them onto the editor window and then adjust them using the options available in the properties panel.

Properties Panel

Block

Layer

The Layer tab allows you to organize the different elements in your email template. This feature is handy when you have multiple elements in your email and you need to manage the child's arrangement or order.

Configuration

This tab offers various customization options that enable you to modify the block's appearance, properties, and other settings. By clicking on the Configuration tab, you can access the available settings and adjust them to suit your specific needs.

Some of the settings you can modify include:

• Dimension: this allows you to adjust the size of the block according to your preference;
• Color: this enables you to choose the color of the block or modify it using custom colors;
• Typography: you can customize the font family, font size, line height, letter spacing, text decoration, font weight, and font style of the selected text block;
• Align: you can choose the alignment of the block (left, center, or right) to fit your layout design;
• Extra: some blocks have additional options, such as image settings or button styling, which can also be modified from the Configuration tab.

---

Content Blocks

The Content block comprises a variety of tiles that correspond to different types of content that you can include in your email message. The following content elements are available:

---

Text block

When you add a text block to your template, you can click on a text content block to access the toolbar, which provides access to a variety of text editing tools, including font family, font size, basic formatting options like bold and italic, text alignment, numbered and bullet lists, font color, and links, among others:

Adding personalization

To personalize the text content, simply click on the attribute picker icon, which will display a list of all available attributes you can choose from. You can then select the attribute you want to use, and it will be inserted into your email content. When the email is rendered, the attribute will be replaced with its corresponding value from the customer's profile, if available. 

Remember: An empty string will be inserted if the attribute is not known for a particular customer. To avoid sending empty strings, it is advisable to segment your audience based on the attributes that are known. This way, you can ensure that only customers with relevant attribute values receive personalized content.

Learn more: about how to handle multi-value compound attributes using iterations.

Adding links

Links can be added by selecting the text and clicking on the link button in the toolbar:

The pop-up window for the “Link” button allows the user to give the link details.

• the destination URL to which the user will be directed after clicking the text;
• the "Target" toggle refers to the behavior that should occur when the link is clicked:
  • when the "Target" toggle is turned on, it means that the link will open in a new tab or window when clicked;
  • when the "Target" toggle is turned off, the link will open in the same tab or window as the email template when clicked
• the "Underline" applies or removes an underline from the link text.

Configuration of text block

These configuration options allow you to fully customize the appearance of the text block in Visual Editor.

---

Image block

Once you add an image block to your email template, you can easily upload your own image and customize it by adjusting its size, alignment, and alternative text. Additionally, you have the option to add a link to the image, allowing you to link the image to a landing page or website, for instance.

Remember: images in SVG format are not supported. We recommend using .jpg or .png formats instead.

Adding personalization

By using attributes that hold image URL dimensions, you can tailor your email content with personalized images in emails.

Simply click on the attribute picker icon, which will display a list of all available attributes you can choose from. Using dynamic product URLs in your email campaigns allows you to display the exact products that the recipient has expressed an interest in, increasing the likelihood of a conversion. 

To handle multi-value compound attributes, you can utilize iterations. Learn more about them below in this section. 

Warning: it is necessary for the attribute used in the image to hold the image URL; otherwise, the recipient may receive an email with a broken image.

Learn more: about how to handle multi-value compound attributes using iterations.

Configuration of image block

---

Button block

When you add a button block to your template, you can customize the text, font, font size, font color, background color, border color, border radius, padding, and alignment of the button. You can also add a link to the button, which is helpful if you want to link the button to a landing page or website.

Adding personalization

Access the attribute picker from the configuration settings tab to personalize the button. From there, you can select the desired attribute, which will be inserted inside the button. When the email is rendered, the attribute will be replaced with its corresponding value from the customer's profile, if available.

Remember: An empty string will be inserted if the attribute is not known for a particular customer. To avoid sending empty strings, it is advisable to segment your audience based on the attributes that are known. This way, you can ensure that only customers with relevant attribute values receive personalized content.

Configuration of button block

By customizing the configurations of the button block, you can create a button that matches your brand and fits seamlessly into your email template.

---

Social block

When you add a social media block to your template, you can choose which social media platforms to include, such as Facebook, Twitter, LinkedIn, Instagram, or any of your wish. You can also customize the color and size of the icons.

Configuration of social block

---

Additional configurations to all types of blocks

To customize the content displayed to different segments based on their behavior or information provided, you can utilize the "Condition" feature in our Visual editor.

You can add iterations and conditions to all of the blocks in Emails by setting the additional configurations to them.

How to add iterations to content blocks?

Iterations can effectively solve various use cases, including displaying recently viewed products, highlighting abandoned baskets, suggesting recommended products, or replenishing products. Iteration enables you to dynamically populate the content of a block with data from a data source.

To demonstrate the usage of iteration, follow these steps:

1. Enable iterations using a toggle for iteration.

2. In the data source field, insert the ID of the multi-value compound or non-compound attribute. For instance, it could be forms_submitted or all_products_purchased (note that these examples are provided for illustration purposes and will differ from the attribute IDs in your CDP).

3. Specify the item name that you will reference within the iteration (e.g., "product," "item")

4. Set the limit and mock quantity fields according to your requirements.

5. To incorporate the multi-value compound attributes into your email content, use the item name followed by the dimension ID of the attribute enclosed within curly brackets. For example, {{item_name.dimension_id}}. In the case of non-compound multivalue attributes that do not have dimensions, you can refer to the attribute in the email content by using double curly brackets with the item name (e.g., {{product}}).

Assuming you have this multiple compound attribute and its attribute ID and dimension ID are:

Your configurations for using iterations to blocks might appear as follows:

Iterating Column Blocks with Children

Using iterations, you can dynamically populate column blocks and their children, such as product images, names, prices, and more. Follow these steps to achieve this dynamic content display:

1. Begin by adding a column block to your content page.
2. Populate the column section with image and text elements or any other content required.
3. Go to the Layer section and locate the column block. Click on it to access its configurations. 
4. Determine the number of columns needed and set the width of the column block accordingly (e.g., set 33% for a three-item limit).
5. At the bottom of the column block configurations, enable iteration. Fill in the data source field, item name, limit, and mock quality fields the same way as described above.
6. Go to the column children section and fill them with attributes iterated using the item name followed by the dimension ID of the attribute enclosed within curly brackets. For example, {{item_name.dimension_id}}.
7. Check the preview of the email to see how your email will look with the iterated columns.
8. Send a test email to ensure the personalized content is populated correctly on various email clients and devices.

How to add conditions to content blocks?

The "condition" configuration allows block behavior customization based on specific criteria. This involves setting a variable path and operator for the block.

By setting these conditions, the block will behave differently depending on whether the variable path meets the specified criteria.

When implementing conditions, you have the option to use either a single-value noncompound attribute or a single-value compound attribute along with its dimensions. However, it's important to note that conditions do not support multi-value attributes.

In the example below, we used the ID of a compound attribute "user," which includes two dimensions, "name" and "email." By defining such conditions, the block will be visible to customers whose name is equal to (==) “Ryan” and whose email address is equal to “abc@gmail.com.” This level of customization helps ensure that users receive content relevant to their specific needs and preferences.

Extra configurations to content blocks?

This configuration enables the application of custom CSS styles to the selected block by specifying a CSS class name that can be utilized for further customization.

Remember: the Content Blocks we have covered in detail are just a selection of what is available in the Drag & Drop Builder. You can further explore the other content blocks by experimenting with them, dragging and dropping them into the message area, and interacting with their various configuration options to understand their behavior better.