Benchmark Email Help Center

or chat with:

smart support, our Benchmark Email expert powered by AI

chat now

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

Email Sections and Blocks

Drag & Drop Editor Updated on March 16, 2023

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

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


Blocks

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.

More Text Block Options

Spell Check

The Benchmark Spell Check feature checks your content to ensure that the spelling in your email is correct. The language for the Spell Check will default to your account’s preferred language. You can change the language or turn off the Spell Check feature in the email’s top menu bar.

To see the Spell Checker in action, open any text block and begin writing. Misspelled words are underlined in red. You can right-click on the word to select the correct spelling or to ignore the warning. The More option will open another list of words available. 

IMPORTANT

Right click not working: Some operating systems have default settings for right-click gestures. Check your mouse or trackpad settings if right-clicking does not prompt the spelling suggestions.

CONSIDER

Choosing the Ignore option saves the preference during that instance. If you close the block and return to it later, the misspelled word will show as misspelled.

The Spell Check feature is currently available in the following languages.

  • English
  • Spanish
  • Deutsch (German)
  • Italian
  • Portuguese (BR)
  • French

Easy Paste

Copy and paste your content from other sources using the Easy Paste feature. The Easy Paste feature makes copying and pasting content from other sources like your website, Google, and Microsoft Documents fast and easy. You can remove the original formatting or keep it to match your other pages.

To use the Easy Paste feature, follow the steps below.

  1. Copy your content from one of your sources.
  2. Then Paste the content to one of your email’s text blocks.
  3. In the popup window, select Keep or Remove format.
    • Remove format, removes inline styles, and keeps some formatting like bold, italics, indentation, numbered lists, and URL links.
    • Keep format, preserves the styling and structure of the original content. Easy Paste will only preserve email-safe HTML and remove unsafe invalid, proprietary styles, attributes, and tags within the contents code.
  1. When you are done with your content, click Save.

IMPORTANT

  • Fonts that are not email-safe will default to Arial font.
  • The Easy Paste feature does not support images.
  • You can use the Text Block Tool Bar or the block’s Code Editor if more styling is needed.
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.

SUGGESTION

  • You can add PERSONALIZED DATA in your emails within your text blocks, click here to learn more. To find the FONTS AVAILABLE to use in your emails, click here. For landing pages, you can use Google fonts; click here to learn more.
  • Also, you can ADD LINKS to your text blocks.
  • If you need more information about text on landing pages, click here.

CONSIDER

Sometimes, 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, 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 in your email.

CONSIDER

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:
    • You can add a link by clicking on the link option in the text editing bar.
    • 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

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

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:
  1. Now, click on a link in the navigation bar. The link options will be displayed on the left panel.
  2. 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.
  3. 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.
  1. Use the vertical and horizontal alignment options to format your bar. The gutter size determines the space between each link.
  2. 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


Ecommerce Block

The Ecommerce block can be used to promote and sell products in your emails.The Ecommerce block includes the following:

  1. Image placeholder 
  2. Product description 
  3. Product price 
  4. Button section

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. 

  1. Start by adding a product image. 
  2. Add a product description; this should be short and descriptive. 
  3. Update your product price. 
  4. Then, customize the product button with the following.
    • Button text.
    • Button URL, add a URL where your contacts can go to complete their purchase.
    • Lastly, style the button to fit your brand’s identity. To save you repetitive work, you can set the same styling to all of the buttons in your email. To learn more about the button styling options, click here.
    • If you prefer not to use any of the block elements, simply toggle them off on the Content tab.
  5. When finished, click Save and then Save and Next or simply click outside the email to save your work. 

Here are a few examples of how the Ecommerce block can be used and styled.

Example 1
Example 2
Example 3

Back to blocks menu


Shopify Product Block

To get started, click and drag the block to the desired section in your email.

To use the Shopify Product block, you’ll need an active paid Shopify account. Upon using this block for the first time, you will need to integrate Shopify with your Benchmark account. To learn how to integrate your Shopify store with Benchmark, click here.

Once you have successfully integrated your Shopify account with Benchmark, you’ll see a list of your available Shopify products.

drag shopify block

Select one of your available products. The blocks will automatically fill in the product information using the details in Shopify.

The Shopify Product block includes the following:

  1. Product Photo
    • The product photo is pulled from the Shopify product URL. This image will not be saved in your Benchmark Image Gallery. However, If the image is modified using the Benchmark Image editor, the modified image will save as a new image in the Image Gallery.
  2. Product Description
    • The product description will pull the product title from Shopify.
  3. Product Price
    • The product price is the assigned price amount from the Shopify store.
  4. Product Button
    • The Product button automatically links to the product URL in your Shopify store.

Important

  • If your Shopify account is not the admin account, you’ll need Product Permissions. To learn more about Shopify User Permissions, click here.
  • You can only connect to one Shopify store at a time. Using the Change Store option removes any previous store products.
  • The Shopify product details are automatically filled with the information provided by Shopify. Therefore, any details changed in Benchmark will not update in Shopify.
  • If a product has already been selected for an email or landing page and is later updated in Shopify, the product details will not automatically update in Benchmark.
  • Archived products will not show in your available product list.
  • Track clicks from a Shopify Product URL in an email using the Email’s report.
  • Duplicating a block allows you to keep any formatting previously added to the original block. However, if you select a different product the previous formatting is removed and you’ll need to reformat.

Here are a few examples of how the Shopify Product block can be used and styled.

Example 1
Example 2
Example 3

Back to blocks menu


 

 
Saved Block

Cut your design time using Saved blocks. Saved blocks can be saved and stored to reuse in future designs.  The block’s styling, text, and images will be saved when you save the block. Once the block is added to your design, you can modify the content, and the original saved block will remain unchanged.

To save a block, hover over the block in your design and click on the save block option. Give the block a name and click Save and Close.

To use a Saved Block

  1. Drag the Saved Block onto your email design and drop it in the desire section.
  2. Select a block to use, and continue editing the block or save and close.
    • Hovering over each saved block will show a preview of the block’s content.

Deleting Saved Blocks

  1. Drag the Saved block to any section in your design. You will see a list of your previously saved blocks on the left side.
  1. Click on the trash bin icon and confirm your choice by selecting the Delete option.

If there are no saved blocks left, you can delete the Saved Block from your design.

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


 

Glossary

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

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

Alignment

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 any questions, please contact our support team.