Need a hand? We've got you covered.

Knowledge Base Home aero-right Templates & Editor aero-right Email Sections and Blocks

Email Sections and Blocks

Templates & Editor Updated on August 26, 2021

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:

  1. The plus option provides five different types of columns that can be added to the email layout; there is no limit to the number of sections your email can have.The sections available are:
    • One column
    • Two Column
    • Three Column
    • Two columns with a left sidebar
    • Two columns right sidebar
  2. The pencil opens the style settings for that specific section. You can assign a background color and a border to a whole section or per column if you use a multiple-column section.
    • A section’s style settings can also be opened by clicking anywhere outside within the area of that section.
    • Please note that content blocks can be styled individually in that block settings.
  3. The up and down arrows allow you to reorder your sections throughout the email.
    • Every section except for the pre-header and footer sections can be moved up or down, and no other sections can be placed above the pre-header or below the footer section.
    • The footer block that holds your subscription links can be moved throughout the email; however, we recommend keeping the footer block in your email’s footer section. Keeping the footer block in the bottom section of your email can give your subscribers an easy way to unsubscribe or manage their email preferences.
  4. The trash bin deletes a section. Anytime you delete a section, any previously added content, such as blocks or styling, will also be deleted; the delete option can not be reversed. To help you avoid losing precious content, you will be asked to confirm your delete option.


Back to the top



Global Styles


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.

Color Schemes

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.

Background Color

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.

Email Border

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:

  • Border
  • Border color
  • Border size
  • Corner Radius
    • Apply the corner radius to the preheader and footer of the email.
Show Sections

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.


Back to the top




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.



Image block & Image card block


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:

  1. Drag & Drop an image from your computer. If choosing this option, make sure the block is open before dropping the image.
  2. Browse for a file. Choosing this option lets you select from an image already in your gallery. You can also upload new images or use images hosted on other websites. If you have an image URL, click on the Insert Image from URL option and paste in the image URL.
  3. Once you have your image in your email layout, you will see a left panel with some options to customize your image.

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.

Which to use?

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:


Back to blocks menu


Image Caption Blocks


There are three types of Image Caption blocks:

  • Right text block
  • Left text block and,
  • Bottom text block

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


Back to blocks menu


Text Blocks


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 blocks available

Text block. This block adds a text container box to your layout.

Boxed Text. This block adds a frame around the text container.

Text with images. If you need to add images with text, you can use image card block or the image caption blocks.

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.

Copy and Paste

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 paste as plain text:
  1. Click on the text block.
  2. In the upper bar, click the paste icon (Depending on your screen size, this icon can be under the More options).

  1. Paste the text in the popup, then click Insert.
  2. In the left panel, click Save & Close.
Source Code

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.


Text blocks format

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.

In addition you can attach links, anchors, images, videos, files and use the merge options.


You can add PERSONALIZED DATA to your emails within your text blocks. Learn here how.

Click here to find the FONTS AVAILABLE to use in your emails campaign. For landing pages you can use google fonts, click here to learn more.

Also, you can ADD LINKS in your text blocks. Click here to know more.

If you need more information about text but in landing pages click here.


Note: In some instances, you’ll see the TinyMCE logo when editing a text block. TinyMCE is a 3rd party we use to make our Drag and Drop better and faster. The logo will not appear in your emails, but only when you are editing a text block.




Back to blocks menu


Video block


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.


Back to blocks menu


Divider Block


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.

Discover all the divider possibilities here.


Back to blocks menu



Button Block


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.

  1. In the button text area, add text for your button. Make your text catchy to attract your subscriber’s attention.
  2. First, select the Link Type URL, then add the URL in the Website URL box. Note this could be an external URL or also an area in the same email. There are two ways to add links:
    1. You can add a link by clicking on the link option in the text editing bar.
    2. Or select the link type in the button block content option. Note: To add an anchor, you have to create the anchor first.
  3. Use the text toolbar to style your text or to add a link.
  4. If you have multiple buttons on your email, you don’t have to go one by one to customize them. Customize one button and then simply check the Apply styling to all buttons. The rest of the buttons on your email will copy the same styling.



Back to blocks menu


Social Follow & Social Share Block


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:

  1. Drag the desired block or click on an existing social block in your layout.
  2. In the left panel, go to the Content tab.
  3. Click on the Add a service dropdown menu, select a service, and then click on the plus icon next to the box.
  4. In your layout, click on the new service icon recently added. The options to customize will display on the left panel.
  5. Add a link URL and customize your icons. When done, you can use the Apply radius to all buttons in the block option to add the same radius to all the buttons.



Additionally, when hovering your mouse on a social icon, you have the option to move it or delete it.



Back to blocks menu


Navigation Bar Block


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

  1. Drag and drop the navigation bar icon into your layout. Most users prefer to show this bar header of the email.
  2. By default, your navigation bar will look something like this:
  3. Now, click on a link in the navigation bar. The link options will be displayed on the left panel.
  4. Add the link type you need and customize it. You can remove links by clicking on the Remove link option inside the link you need to remove.
  5. By clicking on a link, you can also modify the color and appearance of the dividing border. This border is optional if you don’t want it, just change its color to transparent or the line’s thickness to zero.

How to customize a navigation bar


To learn about the Container tab, please go to the Glossary.

  1. To add a link, simply click on the plus icon. To customize the link, click on it, and the link options will display on the left panel. You can add up to six links. There are two link options; text or image; you can choose any option. To learn more about the different link types, click here. 
  2. There are three types of layouts available for your navigation bar links. You can combine images and text. Click on all styles and choose the one that best suits your design.
  3. Use the vertical and horizontal alignment options to format your bar. The gutter size determines the space between each link.
  4. Mobile Styling allows you to choose between the default option, vertical stack, and vertical stack and center. You can decide how you want your design to look on a mobile device.


Back to blocks menu


Email Examples


Here are some examples of how you can optimize your emails with the use of Sections.

Example 1

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.



Example 2

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.



Example 3

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.



Back to the top




The container settings will vary depending on the block you are editing.

Background color

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.

Corner Radius

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.

Gutter Size

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.

Line Height

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.

Hex Code

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.


Back to the top


If you have questions on how to use sections or a specific block, please contact our support team via Email, LiveChat, or Phone.


Did this answer your questions?
You already voted!

Can't find what you're looking for?

Submit a Ticket

view ticket history