Drag and Drop template editor: Actions With Content Blocks

Last Updated: Oct 20 2014 07:28 am EDT


Frames and blocks are the fundamental building elements of your email newsletter. Where frames represent the structure of your campaign, blocks represent the content.

Frames

A frame is a container for blocks. Frames help you build the structure of your email campaign by specifying columns and locations for blocks. Once you drop a frame into your newsletter, you can drop one or more blocks into the columns to build out the campaign. For example, you can place a two-column frame into your campaign and in one column place a text block and in another place an image block. In another example, you can place multiple frames different column frames on top of each other and then nest additional frames within those.

Note: You can nest two levels of frames. For example, you could drop a three-column frame onto your email campaign and then drop another two-column frame into one of the three columns.

Placing Frames

Frames are easily placed within your email campaign newsletter by dragging the structure you want and dropping it into the main content area. 

When you drag a frame onto the main content area, a black line will appear. This line represents the space between containers.

If you wish to add frames inside of an existing frame (say between two blocks), the line will change to blue indicating the space between blocks.

Settings

To access the settings for a frame, simply hover your mouse on the frame you wish to edit. A set of dark-gray icons will appear in the upper right corner of the frame. Click on the settings icon to specify the following:

  • 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
  • Rounded corners—click in the text box to display a slider through which you can chose the level of rounded corners to have on the image
  • 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
  • Spacing—use the drop-down to select where you would like spacing and then enter a value. Inner padding represents blank space between the frame contents and the frame borders
  • Outer Spacing—use the drop-down to select where you would like spacing and then enter a value. Outer spacing represents blank space between the frame borders and the frames around it.
  • Vertical align—use the drop-down to specify vertically where it should align the blocks that are placed in the frame
  • Hide in mobile version—check this box to hide this frame when the email is rendered on a mobile device.
Note: To access the settings of the initial frame (that frame in which you placed all of your other frames and blocks), place your cursor inside the main content area but not on top of any other blocks or frames. A set of icons will appear on the right-hand side of your newsletter for the initial frame.

Blocks

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

  • Title
  • Text
  • Image
  • 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.

Once you have placed a block, you can carry out a number of functions by hovering over the block and clicking on the appropriate icon:

  • Edit—click this icon (or double-click on the block) to edit the contents within the block
  • Settings—click this icon to specify the block's settings. For more information about block settings, see the appropriate section in this help topic.
  • Copy—click this icon to make a copy of the block
  • Delete—click this icon to remove the block. You will be asked to confirm the deletion before the block is removed.
  • Move—click and hold this icon to drag the block up or down. A blue line will appear. Simply release your mouse button to move the block immediately above the blue line.

Placing Blocks

 

Blocks are easily placed within your email campaign newsletter by dragging the block you want and dropping it into a frame. 

 

When adding a block to a frame, a blue line will appear indicating the where the block will be placed. 

 

Note: If you want to drop a block between two frames, a new single-column frame will be automatically created to hold the new block (as illustrated in the screenshot above).

The line represents the bottom of the block. So if you want to place a block on the top of another block (as illustrated in the screenshot above), the blue line should be at the top of the block on which you wish to place the new content.

 

Block Settings

When you access a block's settings, you can make the following modifications. The explanation of features below moves from left to right.

  • 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
  • Rounded corners—click in the text box to display a slider through which you can chose the level of rounded corners to have on the image
  • 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.
  • Inner Padding—use the drop-down to select where you would like padding and then enter a value. Inner padding represents blank space between the block contents and the block borders
  • Outer Padding—use the drop-down to select where you would like padding and then enter a value. Outer padding represents blank space between the block borders and the blocks around it.

If you are working with an image block, you can also specify the following:

  • Image 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
  • Alt—enter “alternate text” for when the image cannot be displayed
  • Width—enter a width for the image
  • Align—use the drop-down to select how the image should be aligned within the block
  • URL—enter a URL to which the image should navigate when clicked

Title

A title block enables you to place a title in your newsletter. This is great for a masthead or to separate sections.

Text

A general block for entering text.

Image

A block for entering images.

Social Media Links

A block for placing social media links so that users can share your email content on their favorite social networks. For more information about adding social media links to your content, see the support topic, “Social Media Links.”

Social Profile Links

A block for placing links to your social media profiles so that users can follow you or your company on their favorite social networks. For more information about adding social profile links to your content, see the support topic, “Social Profile Links.”

Video

A block for adding video.

RSS

A block for adding a news feed in RSS format to your newsletter. For more information about adding RSS blocks, see the help topic “How do I add RSS to my Newsletter?

Dynamic Content

A block for adding conditional content to your newsletter. This is a great way to personalize your emails by addressing it to the recipient's first name. For more information about adding conditional content, see the help topic “How do I add Dynamic Content to my Newsletter?