Email Design Components

Drag-and-drop components are the content building blocks for your email. To enable a component click and hold on the component then drag it over to the block on your stage where you would like that content to exist. Below is a description of each component:

Buttons

Using a button for your call to action draws significantly more attention it, makes it easier for a reader to take the conversion action and ultimately results in an increased number of conversions.

You can learn more about styling your buttons here.

Dividers

Dividers are important to further segment content sections inside of your email design. Using dividers correctly will allow the user to better identify sections and react to the content that they are most interested in. The divider component will render a horizontal line or provide additional vertical spacing between content sections.

You can learn more about styling your dividers here.

Image

To insert an image into your email, begin by dragging the image component onto your stage. The image above will display in the window containing the image component. Click to add Image to activate the image editing screen inside of the control panel and to prompt the Asset Library into a model.

To insert an image URL, close the Asset Library. The control panel remains activated and will list two options. Select "Import From URL" to prompt a field form, which allows you to input the URL where the image is located. Input the URL and select Save & Close. The image will display on the stage and the Image Edit controls will be prompted inside of the control panel.

Select "Add A New Image" to prompt the Asset Library. Once an image has been selected, the control panel will be activated with the image editing options.

Text

When dragged onto the stage, the text component will display a standard message. Select the text on the stage to activate editing on the control panel.

The Text Component will default to Global Styles. You may use the formatting option to designate the header classes defined by the Global Styles. Additional text editing options are available when exceptions to your standards are required.

Social

The Social edit panel displays Facebook, Twitter, Google +, LinkedIn, and Email channels to your emails. The Channel Config tab sets and manages the links to those social channels and customized labels. If the label fields are left empty, the button will display no text.

Button Styles embody the same controls as a button except you may choose how you want your social icons to display. For example, the 'color' option allows you to display social icons in your brand colors and 'light' will display your buttons in white with black icons.

Image and Caption

This combines both the Image and Text components into one experience. Drag the Img + Caption component onto the stage and select the rendered display to actively edit in the control panel. Img + Caption component manages both image and text editing on the same editing control panel. You can find more information on the Image and Caption components here.

Note: The qualities of this component are not responsive. The Image + Caption will scale appropriately down to fit the viewing screen.

Image Group

This combines two image components into one experience. Drag the Image Group component onto the stage and select the rendered display to actively edit in the control panel. Image Group component manages two images in the same editing control panel. You can learn more about the Image Group options here.

Note: The qualities of this component are not responsive. The Image Group will scale appropriately down to fit the viewing screen.