Add new sections and rearrange blocks as you go. Use sections to add new columns in your email and blocks to add content such as images, text, or buttons. With the Email Drag & Drop Editor, styling emails is easy and fast, something our customers love and appreciate.
Topics covered in this article:
Sections are what we use to structure your email in the editor. Sections allow you to divide your content and serve as a container for your content blocks. You can add new sections, delete sections as you style the email, and style the different sections in your email individually.
Here is how sections work:
In the Global Styles settings, you can manage the color scheme of your email; you can also add a universal background color and add a border to your email.
There are 27 different color schemes available; choose one that best suits your needs. Sections and blocks can still be customized even if there is a specific color scheme selected.
The background color option lets you select one specific color for your email background, choose from the colors available or add your color hex code. Additionally, individual sections and blocks can be assigned their own background color.
You can change the background to full width or a framed width background in the email border option. The full-width background does not have additional styling options. In the framed background option, you can add or change the following:
The Show Sections option allows you to view all of the sections in your email, select Hide Sections, to remove the section names. From this screen, you can also click on any block to edit.
Separate from sections, blocks are what will hold and show your content email content. Blocks can be used as design elements and also functionalities. Use blocks to add images or buttons as well as text. Each content block has different styling options.
To add a block to your email, click on the desired block, and drag it to a section in your email.
The following are the blocks available in the email editor.
With these blocks, you can upload an image or select from images already in your gallery. To use any of these blocks, drag it into your email, then you have two options to add your images:
An image block will add an image to your layout, while the Image Card block will add an image and text within a frame.
Here you see an image block on the left and an image card block on the right.
Use the image block when you need to add a simple image. Use the image card block when you need to add a description to your image. If you move this block, the description will move as well.
To learn more about what you can do with individual image blocks and how to add images, click here.
May interest you:
There are three types of Image Caption blocks:
To learn how to add an Image Caption block, click here.
An image caption block is a block that allows you to add text within the same image block. The main difference between caption blocks and image card blocks is that the image caption block has no frame or container. You can adjust the padding to the edge of your layout, as in the example below (caption block at left, image card block at right).
You can add text to your email through the text blocks. To use any of the text blocks, simply drag it to the desired place. Once there, click on it and replace the default text with yours.
Text block. This block adds a text container box to your layout.
Boxed Text. This block adds a frame around the text container.
To edit your text, use the toolbar located above your email. There you will find the common text editing options. You also have other editing options, such as converting text to an anchor, adding a link, an image, or even linking a document.
If you have text you’d like to copy and paste to your email, we recommend you use the Pasteoption. Using this option removes any hidden characters in your text that could interfere with your text design.
To add source code, click on the code icon, and paste in your code.
If you don’t see the options mentioned above, please click on the More options icon from your toolbar.
By clicking on the text block, you will see the customization options at the left.
In the Container tab, you will be able to set the background color, the padding, and the border for the boxed text block.
Use the Content tab to adjust the line height and, if needed change the number of columns.
As any text editor, you have the basic format tools. Find everything you need to customize your text in the upper bar (bold, italic, underline, strikethrough, text color, font type and size).
Here you can also use the alignment options and add a numbered or bulleted list.
Videos are very effective visual tools. Through video, you can show the qualities of a product or the reasons why they should choose you instead of other competitors. Don’t miss out on the opportunity to use videos on your email.
To learn how to add a video to your email, click here.
Use dividers to create spaces between blocks or sections in your email. Dividers don’t have to be blank spaces. To add a divider block, drag it into the desired section.
The CTA (call to action) is the most interesting part of your email. Buttons can be used to entice subscribers to visit a landing page.
To add a button, drag it to the desired location. On the left panel, you will see the options to customize your button. To learn more about the editing options for buttons, please see our glossary. Keep reading to configure the button Content.
The social media blocks are essential. Our editor offers you two types of blocks to add your social networks. To use any of the blocks, drag it to the place of your choice.
The social follow block allows you to add your social media icon or the icon plus the text. This block will allow you up to 20 different services, including Facebook, Twitter, Whatsapp, Linkedin, YouTube, Pinterest, RSS, Vimeo, TripAdvisor, among others.
The social share block will allow you to add: Facebook, Twitter, Linkedin, Myspace, and Instapaper. This block will allow users to share your email with the mentioned social networks directly.
Which to use?
If you want to redirect your email recipients to your social networks, use the Social follow button. So they can click on the desired social media and like it or add it to their preferences.
Now, if you want the users to share your content, use the Social Share block.
To learn how to use container settings, go to the glossary.
Follow these instructions to add a service in both blocks:
Additionally, when hovering your mouse on a social icon, you have the option to move it or delete it.
The navigation bar can be used to direct your email recipients to other parts of your email with an anchor, or it can be used for external links.
How to add a navigation bar
How to customize a navigation bar
To learn about the Container tab, please go to the Glossary.
The Ecommerce block can be used to promote and sell products in your emails.
The Ecommerce block includes the following:
To use the product block, click on the block and drag it to a section in your email.
To customize your Ecommerce block, follow the steps below.
If you prefer not to use any of the block elements, simply toggle them off on the Content tab.
Here are a few examples of how the Ecommerce block can be used and styled.
Here are some examples of how you can optimize your emails with the use of Sections.
We started by adding a navigation bar in the header section. The title in this example uses the left sidebar section, then in the second column, we added the images and text using image card blocks. Finally, in the bottom left side column, we added social media icons and requested subscriber feedback.
Here we created an email using one and two-column sections. We also added a framed background and used the border-radius option in the global settings to emphasize the email’s body.
In this last example, we created an email using multiple column sections. We used a divider to show space between sections. As you can see throughout the email, we used image blocks, text blocks, button blocks, social media blocks, and a video block.
The container settings will vary depending on the block you are editing.
With this option, you can set the background color of an element. To use it, click on the color circle and select a color from the color bar. If you have the Hex code, paste it directly into the box. Click on Save when done. The reset option will return the item to its original appearance.
Border and line style
Some elements have the border option available. You can set a color border by clicking in the color circle, then select a color from the color bar. You can use Hex codes here too. For the border style, choose from the nine available line styles and then add a thickness from 0 to 99. just change its color to transparent or the thickness of the line to zero. The reset option will return the item to its original appearance.
Some elements have the corner radius option available. This option sets how rounded the corners of an element could be. You can set the radius from 0 to 20. When done, you can check on the Apply radius to all buttons on the block; this will make all of the buttons have the same radius.
The gutter size is an option available in some blocks like the navigation bar, social follow, and social share block. This option defines the space between one element and another. To set the gutter size, slide the green point from 0 to 20.
Padding and Margin
Paddings and margins usually are options available under the Content tab. Both are relative to the space surrounding an element. You can set the padding or margin by sliding the bar from 0 to 100 or by adding a number from 0 to 99 in the margin box.
The alignment option is relative to the position of an element. You can set it by clicking on the desired alignment options; center, left, right, bottom, or top.
The line-height option is only available for a text block, and it’s used to define the height between two inline elements. The options available are Single, 1.25, 1.5, and Double.
The hex code Is the value that represents a color. This code starts with a pound sign (#) and is followed by six characters; for example, #CFCFDA the characters could be numbers or letters. Hex codes can be used to add branding colors. If you are not sure what your hex code colors are, you can use design software or a color picker online.