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.
- Dynamic: set up Item Picker or Dynamic Content to personalize content automatically.
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.
- Dynamic: specify Section Visibility, Item Picker, Dynamic Content and Dynamic Content population layout here.
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.