Drag and Drop template editor: Drag and Drop Editor

Last Updated: Oct 03 2014 04:06 am EDT

The drag-and-drop editor is a newly designed editor that makes building your email campaign newsletters even easier.


Like the previous editor, the editor is divided into a number of different sections:

  • Blocks
  • Images
  • Text
  • Template
  • Options
  • Plain text


In addition, there are a number of other features that you can access:

  • Campaign Preview
  • Save
  • Undo/Redo


Blocks


Blocks different kinds of content within your email newsletter. There are 10 kinds of blocks:

  • Title
  • Text
  • Picture
  • Social Media Links
  • Social Profile Links
  • Button
  • Horizontal Divider
  • Video
  • RSS
  • Dynamic Content


To add a block, simply click on it, hold the mouse button, and drag it down to your newsletter. A line will appear indicating where the block will be dropped if you let go of the mouse button.

For more information about adding blocks to your newsletter, see the support topic, “Frames and Blocks.”

Images


The Images Tab display a carousel of the images and folders otherwise accessible through the Moxie Manager. For more information about adding images to your email campaign, see the support topic, “Images.”

Text


The Text Tab displays default settings for different kinds of text—paragraph, Title 1, Title 2, and Custom.

For each kind of text, you can specify the following to be applied, by default, to new text blocks that are added to the newsletter:

  • Text style—use the drop-down to select the font family
  • Text size—use the arrow keys to increase or decrease the font size in pixels
  • Color—click on the color drop-down to open the color selector where you can choose a color or enter a hexadecimal value
  • Styling—click on the bold, italic, or underline to set the style
  • Line height—use the drop-down to select the line height
  • Alignment—use the drop-down to select the text alignment
  • Link Style—use the drop-down to select the font family for hyperlinks
  • Text size—use the arrow keys to increase or decrease the font size in pixels for hyperlinks
  • Color—click on the color drop-down to open the color selector where you can choose a color or enter a hexadecimal value for hyperlinks

Template

The Template Tab allows you to specify settings for four different template areas:

  • Background
  • Header
  • Body
  • Footer

Background

For the background settings, you can specify the following:

  • Background color—for each of the areas (header, body, footer), click on the drop-down to open the color selector window through which you can choose a color or enter a hexadecimal value
  • Color—use the drop-down to select a color for the entire newsletter
  • Image—click the Add Image Icon to open the Image Manager to select a background image for the block. For more information about the image manager, see the support topic “Images”remove an image by clicking on the Remove Image Icon.
  • Repeat—set the background image to repeat or not
  • Image placement—use the drop-down to set where the image should be placed within the block

Header

  • Background color—Use the drop-down to open the color selection pop-up. This enables you to select a color or type in a hexadecimal value.
  • Image—click the Add Image Icon to open the Image Manager to select a background image for the block. For more information about the image manager, see the support topic “Images.” You can also remove an image by clicking on the Remove Image Icon.
  • Repeat—set the background image to repeat or not
  • Image placement—use the drop-down to set where the image should be placed within the block
  • Block border—use the drop-down to select where you want borders to appear. The default is “all.”
  • Border color—Use the drop-down to open the color selection pop-up. This enables you to select a color or type in a hexadecimal value.
  • Border thickness—use the arrows on the drop-down to select a value of border thickness. This is a WYSIWYG control so you will see the effect on the block immediately.
  • Border style—use the drop-down to select a style for the border line
  • HTML—click on the HTML icon to work directly with the block's HTML code. When you are finished making changes, click on the Change Button to commit your HTML code to the block.
  • Padding—use the drop-down to select where you would like padding and then enter a value. Padding represents blank space between the header contents and the header border
  • Alignment—use the drop-down to select where the header contents should be aligned
  • Width—enter a width for the header
  • Shadow—use the drop-down to select the shadow color. This will open the color chooser from which you can pick a color or enter a hexadecimal value.

Body

The body settings are the same as the header settings.

Footer

The footer settings are the same as the header settings.

Options

The Options Tab allows you to specify some additional settings and carry out a number of additional functions for your campaign:

  • Send images as attachments—check this box to send images as attachments.
  • Attach a file—click the Attachment Icon to attach a file to your newsletter. This could be a PDF version.
  • Spam Check—click the SpamAssassin Check Icon to perform an assessment of your campaign's spam worthiness. Although this won't guarantee that your email won't get caught in spam filters, it can provide a good understanding of the likelihood that your email campaign will land in user's inboxes.
  • Email—email a copy of your newsletter to the default email address on your account
  • Print—print a copy of your newsletter
  • PDF—print a copy of your newsletter to PDF

Frames

For more information about using frames to create the structure of your newsletter, see the support topic, “Frames and Blocks.”

Campaign Preview

You can preview your newsletter by clicking the appropriate icon:

  • smartphone
  • tablet
  • browser

Save

To save your newsletter, click the Save Icon to the left of the Blocks tab.

Undo/Redo

You can undo and redo actions by clicking on the appropriate icon next to the save icon to the left of the Blocks Tab.