Newsletter: Drag & Drop Builder

Newsletters > Create Newsletter
Newsletters > Themes/Templates

Drag & Drop Builder

While its full name is Drag & Drop Newsletter & Template Builder, we’ll be referring to it as the Drag & Drop Builder.

This is the Drag & Drop Builder (WYSIWYG editor), where you can drag and drop blocks to create a newsletter template. You can access it when creating or editing both a newsletter and a template. It supports right to left languages.

When you’re on the Create Newsletter page, if you have a pre-made template that was created or imported in Themes/Templates, you can select it and click the Load Template button to have it display there, ready to be edited and used for your newsletter. Editing it on the Create Newsletter page in the Drag & Drop Builder does not edit the actual template in Themes/Templates, so feel free to modify it before sending the newsletter. The Load Template function is unavailable when creating or editing a template.

Drag & Drop Builder Usage

This is the panel toolbar, which contains buttons that grant you additional features and enables you to configure some aspects of the blocks. Starting from the left, here are the different functions:

• Three responsive views: Preview how your newsletter template will look in Desktop, Tablet, and Mobile versions. It instantly resizes it.
• View components: Hide or unhide the dashed lines between elements in order to have a clean preview.
• Preview: One clicked, all icons and buttons of the builder disappear from view, giving you a preview of your template. To exit the preview, click the top left eye slash icon that appears.
• Fullscreen: Instantly maximizes the builder to take over the full view of your browser, giving you more space to be creative.
• View code: Lets you view your template’s code. Note that you cannot edit the code here. See tips below for how to edit the code.
• Import template: Import your template as HTML code.
• Toggle Images: Clicking this button hides and unhides images from the canvas for your own view only, in order to be able to clearly see your text.
• Undo: Keep clicking the button to undo changes.
• Redo: Keep clicking the button to redo changes.
• Empty canvas: Erase everything on the Drag & Drop Builder to start fresh.
• Open Style Manager: Edit your component by adding CSS Classes and by choosing the State (Hover, Active, Even/Odd), and also by editing the Dimension (width, height, margin, padding), Typography (font and text configurations and alignment), and Decorations (background and border configuration).
• Settings: Edit your component settings, such as the ID, Title, and Alt text. For links, you’ll also find the href and Target settings.
• Open Layer Manager: View a diagram of all your blocks, allowing you to hide, unhide, and drag to move them up or down.
• Open Blocks: View all the available blocks that you can add to the canvas.

The builder works by first displaying the Open Blocks section, where you can drag and drop blocks onto the empty canvas. Once placed, these blocks are referred to as components.

To organize your template, add columns and rows by adding sections in Open Blocks. While the initial choice of the number of columns per row is limited due to the limited number of Section blocks, you can indeed have more columns by adding, for example, 1/2 section to an existing 1/2 section. This increases the number of columns per row. Experiment with different blocks to come up with a template that works for you.

Then, at any time, simply drag blocks to those sections to fill them up.

Clicking on a component, such as the image in the above example, displays 4 icons. From the left, those let you select its parent element, move it, duplicate it, or delete it.

When you click to edit text, you’ll see a small toolbar appear with some text editing tools. From the left, you have bold, italic, underline, strikethrough, link, and wrap for style.

If you don’t want to use the Drag & Drop Builder when creating newsletters, we added a setting in Configuration > General that lets you disable it.

It is important to note that the Drag & Drop Newsletter & Template Builder is only for our paid users. While it is not enabled in the free/lite version of our Newsletter plugin, you can enable it by purchasing it and adding your serial key.

Get WordPress Newsletter plugin

Drag & Drop Builder tips:

1. In addition to using the undo button to undo, use the shortcut ctrl+z or cmd+z.
2. In addition to using the redo button to redo, use the shortcut ctrl+shift+z or cmd+shift+z.
3. When creating a template, whether you add content in the Visual Editor or in the Drag & Drop Builder, after saving, you can find your content in either one. For example, if you add content in the builder and you save, then after saving you’ll find it also displayed in the visual editor, and vice versa. So, edit it in either one, save, and continue editing in the other after saving.
4. You can add content blocks to an empty canvas without having section blocks there.
5. You can select a background color for a section, to color that section, and not just for blocks. Select the section, click on the Open Style Manager button, click on Decorations, and then choose a background color.
6. While you cannot edit the Code of your template from the builder itself, there are 2 separate ways to do so:
   1. Open the View code modal, copy the code, edit it somewhere, then import it by pasting it in the Import template modal.
   2. Click on the Drag & Drop Builder button to temporarily and instantly disable it, and then click on Code to edit the code. Once done, click on the Drag & Drop Builder button.
7. In Create Newsletter, if you have content in the TinyMCE editor (the Visual editor) that you’d like to move to the Drag & Drop Builder, then go to the Code tab, copy everything there, click on Drag & Drop Builder, click on the Import template button and paste it there.