Introduction to Drag & Drop Builder

Drag & Drop Builder allows you to create beautiful and fully responsive newsletters simply by dragging and dropping text boxes and images. Simply drag and drop sections and content blocks into your layout and rearrange them to customize the look and feel of your newsletter. In this tutorial, you will learn the basic skills needed to use the builder.


To open Drag & Drop Builder

1. Open the app and go to the Create Newsletter section, then select the Templates step at the bottom.

2. Select Start from Scratch to open Drag & Drop Builder with a blank slate. You can also select a built-in template in the Gallery tab.


Using the builder

Working with Drag & Drop Builder is straightforward: first, you drag a content element (a block or a section) in the newsletter body. Then, you enter the content itself and apply styling and (or) design settings.

Adding blocks

1. Select the Blocks tab.

2. Drag and drop the selected block in the newsletter body.

3. Click on the block to select it. In the block editor on the right, select one of the three properties tabs:

  • Content: enter texts, links, specify image locations etc.

  • Style: specify background, alignment, padding, and other options (depending on the block type). By  default , the block will inherit style settings from the Design tab However, if you modify the selected block's style in the Style tab, those settings will override Design settings.

Note: the available tabs and their features depend on the block type. Some blocks, for example, spacer or divider, have no tabs whatsoever.

4. After you've configured the block, click Save to save changes.

Block types

Below you can find details about each block type available in Drag & Drop Builder.

Block Type Description Block Unique Options
Title A block for <H1> text background color, link URL, font family, font color, font size, line height, text alignment, style, padding, dynamic block
Subtitle A block to <H2> text background color, link URL, font family, font color, font size, line height, text alignment, style, padding, dynamic block
Text A block of multiple lines of text rich text editor, inherit editor background, background color, font family, font color, font size, line height, text alignment, style, padding, dynamic block
Image A block to insert or upload an image Image URL, link URL, Alt text, background color, automatic resize, full width on mobile, alignment, padding, dynamic block
Video A block to insert a video (thumbnail auto-generated for YouTube videos only) Video URL, background color, automatic resize, full width on mobile, alignment, padding
Button A block of button and the link to a webpage or a file to download button text, link URL, Background Color, font family, font color, font size, border radius, alignment, style, button size, padding, dynamic block
Divider A visual divider, or horizontal line, between blocks border style, thickness, line color, width, alignment, padding
Spacer Extra spacing between blocks spacing (height)
Social Social icons so recipients can follow you or your company on social networks. icon set (7 designs), 9 social media icon options (Facebook,Flickr, Instagram, LinkedIn, Twitter, Vimeo, Yammer, Youtube, Glassdoor) all of which can be fully customized to match your individual branding and design. You can remove unnecessary icons or add more.
Html A block of your custom HTML scripts to further personalize your campaign HTML editor

Adding sections

A section acts as a block container. You can add up to 5 different blocks in one section. Note, however, that you cannot drop one section inside another.

To add a section:

1. Select the Sections tab.

2. Drag and drop the selected section layout in the newsletter body.

3. To configure section settings, click on the section. The editor will open on the right. Similarly to the block editor, it has two tabs:

  • Style: configure background properties, paddings, borders etc. By default, each section inherits style settings configured in the Design tab. However, if you modify the selected section's style in the Style tab, those settings will override Design settings.

4. After you've configured the section, click  Save to save changes.

Saving sections

You can save your custom section to quickly retrieve it in your next newsletter. For more information, see Saved Sections.


Design

The Design tab contains default settings for a newsletter body, as well as for frequently used block types such as Title or Button. By default, blocks and sections inherit their design settings from this tab. However, if you make changes to block or section settings in the Style tab, those settings overwrite Design settings.

You can modify the default settings in the Design tab and save them as a custom theme that you can quickly apply to your next newsletter. For more information, see Using themes.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.