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

Content

You can select a new content element from the content block to add to your message. On the right-hand side, you have the option to conveniently drag and drop various elements such as buttons, images, text blocks, transparent or solid dividers, and more into the message area.

For even more flexibility, consider using Custom Blocks and Dynamic Custom Blocks.

Custom Blocks allow you to design and reuse email elements across multiple campaigns, maintaining consistency and efficiency. Dynamic Custom Blocks enable you to incorporate up-to-date content such as product details or articles into your templates.

Style

Provides styling options for email settings, text, buttons, links, and web fonts, allowing comprehensive customization across various elements of the email template. Additionally, you can utilize Theme Settings to tailor the overall look of your email.

Layout

The layout block enables you to add structure to your email template. You can drag and drop the selected structure onto the email editor area and adjust its properties. You can add or remove rows and columns, adjust the spacing between the elements, and other options that will help you achieve the desired layout of your email template.

Layer

The Layer tab allows you to organize and manage the different elements in your email template. This feature is especially useful when working with multiple nested elements, as it provides a clear overview of the hierarchy and lets you adjust the arrangement or order of child elements.

To improve navigation within complex templates, the email editor includes intuitive tools that enhance efficiency:

Show Block Paths: A visual breadcrumb trail is visible at the top of the editor. Clicking on any breadcrumb jumps directly to the corresponding block, making it easier to navigate between layers.
Show Previous Level Icon: This icon allows you to return to the parent block of a selected element with a single click, simplifying layer management.

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:

Block	Description
Column	The Column block enables you to create multiple columns in your email message. You can choose the number of columns, adjust the width and spacing of each column, and add other elements within each column.
Wrapper	The Wrapper block is a container element that groups other elements together. You can use it to organize and style different elements in your email message, such as columns or sections.
Section	The Section block allows you to add a full-width section to your page with customizable background colors or images. You can add additional content blocks within the Section block, such as text, images, and buttons.
Text	This element allows you to add text to your email template with formatting options, such as font, size, text color, alignment, and spacing.
Image	This block allows you to upload an image in your email template. You can upload your own images and customize the image's size and alignment.
Button	With this element, you can easily add a button to your email template. The button's appearance and functionality can be fully customized, including text, color, size, and alignment. Additionally, you can specify the destination URL to which the user will be directed after clicking the button.
Divider	This element allows you to place a horizontal line or an invisible divider between other content components in your email template. You can choose between a solid or transparent divider and adjust its size and style to fit your message design.
Spacer	The block lets you add space between other elements in your email template. You can adjust the height and width of the spacer to create the desired amount of space.
Navbar	Navbar is a content block that you can use to create a navigation menu where you can customize the menu items.
Social	A block that allows you to add social media icons to your email template. You can choose which social media platforms to include and customize the color and size of the icons.
Hero	It is a full-width content block that you can use as the main section of your email message. You can add images, text, buttons, and other elements to create an eye-catching and engaging message.
Table	The Table block allows you to insert a table into your email template. You can define the number of rows and columns and customize the table's appearance, including cell padding, borders, and background colours. This block is helpful in organizing and presenting data in a structured format.
QR code	This block enables you to add a QR code to your email template. You can generate a QR code that links to a specific URL or contains other information, such as contact details or a coupon code. QR codes can be customized in terms of size, alignment, colours and types of dots. Don't forget to save the code's content using the ‘save as image’ button before finalizing the campaign. Remember: using different colour combinations may affect the QR code's readability. We recommend testing different colour combinations in the preview before sending the email to ensure it works for the end users.
Image with text	The Image with Text block combines an image and a text element in a single block. You can customize the layout, spacing, and alignment. This block is useful for creating visually appealing sections that include both imagery and descriptive text.
Video	The Video block allows you to embed a video in your email template. You can link to videos hosted on platforms, and customize the video’s thumbnail, size, and play button. This block helps make your email content more dynamic and engaging by incorporating multimedia elements. Remember to use the 'save as image' button to save the changes before saving the campaign.

Text block

When you add a text block to your template, you can click on it to access the toolbar, which offers a variety of text editing tools, including font family, font size, basic formatting options (bold, italic), text alignment, numbered and bullet lists, font color, links, and more.

Remember: Changes made through the toolbar have a higher priority than those made in the settings tab and will override them. The settings tab applies styles (e.g., size, color, font) to the entire text block, while the toolbar applies styles directly to the selected text with higher priority. To reset styles and reapply settings tab changes, use the "Remove Format" option in the toolbar.

Adding links

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

Configuration of text block

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

Dimension	Allows setting the height and padding of the text block
Color	Allows choosing the color of the text and background
Typography	Includes several options to customize the font of the text, including: Font: you can choose from a list of available font families for your text; Font size: you can adjust the size of the text in pixels; Line height: you can adjust the space between lines of text; Style: you can adjust the weight or thickness of the text; Letter spacing: you can adjust the space between individual letters of text; Font style: includes options for normal (standard font style) or italic styles (italicized version of the selected font). Align: allows you to choose the alignment of the text, with options for left, center, and right alignment;
Extra	Class name: a class for an element that can be used to apply CSS styles to multiple elements at once.
Display configurations	Iterations (repeat for) and condition (show/hide logic) settings are described here.

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.

Configuration of image block

Image and settings	Here, you can set the following: upload an image to the block: to upload a file to the template, click on the upload button in image configurations. The image file should have format .jpg, .jpeg, .png, .gif, etc. use link to the image that will be presented in email Additionally, you have the option to include a link that will redirect users when clicked. Remember: the maximum file size allowed for upload is 500 kb.
Dimension	Allows you to set the width and height of the image. You can also adjust the padding of the image, which is the space between the image and the surrounding content. To align the image, use the align option. You can choose from three options: left, center, or right.
Border	Allows configuring the border around the image: the "border" option allows you to set the border width. the "border radius" option allows setting the degree of roundness on the corners of the image border (e.g., 10px).
Extra	Class name: a class for an element that can be used to apply CSS styles to multiple elements at once.
Display configurations	Iterations (repeat for) and condition (show/hide logic) settings are described here.

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.

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.

Content	Allows setting name of the button and the link of a landing page or website.
Dimension	Allows you to adjust the basic settings for the button, such as its width and padding. You can also set the inner padding of the button, which is the space between the button's text and the button's edges.
Typography	This feature enables you to customize the font style of your text, including font family, size, weight, height, letter spacing, and alignment. Additionally, you can add text decoration, such as underline, overline, line-through, blink, and inherit (to inherit settings from parent), to enhance the appearance of your text.
Border	Here, you can adjust the border properties of the button. In addition to "none," the "Border" configuration for the button block may also offer options for border styles such as solid, dashed, dotted, double, groove, ridge, inset, and outset. The "Border radius" configuration allows you to adjust the roundness of the button's corners from fully squared (0px) to more rounded (max 20pt)
Extra	Class name: a class for an element that can be used to apply CSS styles to multiple elements at once.
Display configurations	Iterations (repeat for) and condition (show/hide logic) settings are described here.

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

Setting	Allows choosing between a vertical or horizontal layout for your social icons and their alignment.
Typography	Enables you to customize the font style of your text, including font family, size, weight, height, font style, color, and background color spacing. Additionally, you can add text decoration, such as underline, overline, line-through, blink, and inherit (to inherit settings from parent), to enhance the appearance of your text.
Social item	This configuration refers to each individual social media icon displayed within the block. For example, if the social block includes icons for Facebook, Twitter, and Instagram, then there are three social items within the block. Each social item can be configured individually to include the associated social media profile URL and adjust the icon.
Dimension	These settings refer to the dimensions and padding of the social block's icon and text. You can adjust the width and border radius of the icon, as well as the padding around it. Similarly, you can adjust the padding around the text, both on the top/bottom and left/right sides.
Display configurations	Iterations (repeat for) and condition (show/hide logic) settings are described here.

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 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.

Connector

or/and

Variable

the data point that will be evaluated by the condition.

For example, the variable path could be the user's location, which can be used to tailor the content of the email based on their geographic location.

Variable operator

the logical comparison that will be performed on the variable path.

This can be an equality check, a greater-than or less-than comparison, or any other logical operator that evaluates the data.

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.

In addition to the basic condition configuration, you can also use Liquid syntax for more complex, dynamic customization within content blocks. Liquid syntax enables you to add conditional logic, loops, and personalized text directly in text blocks, allowing for greater flexibility in tailoring content to user attributes. This approach is especially useful for creating multi-layered conditions or displaying unique messages based on specific user data. For a more detailed guide on using Liquid syntax, click here.

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 (for example for design consistency).

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.

Enhancing Design Consistency

When configuring email templates through Theme Settings, you can enhance your brand's identity and optimize user experience by utilizing customizations such as user styles and breakpoints.

You can enhance the appearance of your email templates by applying custom styles using User Styles in Theme Settings. User styles enable you to define unique fonts, colour palettes, button styles, and spacing to maintain consistency with your brand's visual identity. Here's an example of how to create and apply a custom CSS class to a section element:

1. Go to the Styles section of the content page:

2. In the User Styles section under Theme Settings, define the styles for the some class, e.g. myClass:

.myClass {
    background-color: #007bff; /* Modern blue background */
    color: #fff; /* White text */
    padding: 12px 20px; /* Balanced padding */
    border-radius: 6px; /* Smooth corners */
    font-family: 'Roboto', sans-serif; /* Modern font */
    font-size: 16px; /* Readable font size */
    text-transform: uppercase; /* Uppercase text */
    border: 2px solid #007bff; /* Blue border */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease; /* Smooth background transition */
}

3. Use this class name from Step 2 as the class for any element you wish to have those settings. The section element with the myClass class will now have a red background, white text, padding of 10px, and rounded corners. Experiment with different properties and values within the myClass styles to achieve the desired visual effect while maintaining consistency with your brand guidelines.

Additionally, setting breakpoints, e.g. 480px for mobile devices, ensures that your emails adapt seamlessly to different screen sizes. This includes optimizing layouts for mobile by stacking columns, adjusting font sizes, and scaling images appropriately.

By leveraging these features within Theme Settings, you create visually appealing emails and improve readability and engagement across various devices, ultimately strengthening the impact of your email campaigns.