Drag and Drop Element Descriptions and Instructions

Follow

The basics of each element is provided below. The Element Editing Control Descriptions and Instructions page provides detailed information on how to edit and work with each element.

Full-Width Element -

  • Adds a section that spans 100% of the email's width.
  • Admins can be split into columns by changing the Number of Cells from One to Two.
  • Admins can change how the cells stack in mobile (Left to Right or Right to Left).
  • Admins can define primary and secondary color choices.
  • Multiple full-width elements can be added to the template (useful if different sections of the template should be a different color).

Box Element -

  • This element is ideal for grouping and styling elements together.
  • With a Box, admins can add borders, background color, padding and margin to any element or group of elements.
  • Admins can save a Box to Favorites (covered later in the documentation) the content of your box as a Complex element to use in other templates.
  • Admins can drag and drop any element inside of a Box except for the Full-Width Element.

Column Element -

  • Use the Column element to add 2 or more (max. 5) columns at the same time.
  • In the Column Content tab you can:
    • select any column with a simple click
    • reorder columns with drag and drop
    • resize and fix width of the selected column,
    • Equalize space,
    • Add and Remove (if at least 3 are present) columns.
  • Admins can save to Favorites (covered later in the documentation) the content of your Column as a Complex element for later use in other templates.
  • With the Reorder on mobile function, admins can decide if you want to transform the columns into one column on the mobile view.
  • Admins can drag and drop any element into a Column (except for the Full-Width Element.

Title Element -

  • When admins double click on the Title element, a simple text editor will hover over it. All basic text formatting options are available in this menu.
    • Adjust the font style with the B, I, U icons
    • Remove formatting
    • Change text alignment (left, middle, right, justified)
    • Change heading style (h1, h2, h3)
    • Change font type, size, color and background color
  • In the Typography settings in the element editing control, admins can adjust the properties of your Title element including font type, size, color, line height, link style and color.

Text Element -

  • When admins double click on the Text element, a simple text editor will hover over it. All basic text formatting options are available in this menu.
    • You can adjust the font style with the B, I, U icons
    • Remove formatting
    • Change text alignment (left, middle, right, justified)
    • Change heading style (h1, h2, h3)
    • Change font type, size, color and background color
    • Numbered list / Bulleted list
    • Add or remove URL
  • In the Typography settings in the element editing control, admins can adjust the properties of your Text element including font type, size, color, line height, link style and color.

Image Element -

  • When admins double click on the Image element, the Image gallery will pop up so the image can be inserted.
  • In the element editing control on the right, you can add link (URL) and alt text to your image and also change the alignment (left, center, right) and size.
  • If the original width of the image is larger than 240px, but you resized it to a smaller size in the desktop version, you are able to make it full width on mobile with the Fluid on mobile switch.

**NOTE: Use 600px wide images for best reader experience on mobile.

Button Element - 

  • When admins double click on the Button element, a simple text editor will hover over it. All basic text formatting options are available.
  • In the element editing control options on the right, admins can add a link (URL), adjust the button radius, change the alignment (left, center, right) and size.

**NOTE: Versions of Outlook that do not support border-radius will display rounded buttons as square.

Complex (Favorite) Element (equal to Saved Content) -

  • When a Complex element is added to a template, a new window opens and admins are prompted to select one of the previously saved complex / favorite element.
  • The item admins selected from the pop up is added to the template.

**NOTE: If the complex element is changed after adding it to a template, the saved Complex element is not modified.

Divider Element -

  • The Divider element allows admins add horizontal lines or white space to the email template.
  • In the element editing control options on the right, admins can adjust the link style, spacing and background settings.

Image + Text Element or Text + Image Element -    

  • These elements allow admins to easily add both an Image and Text block to the template at the same time.
  • The difference between the two elements is whether the Image will be on the left or the right.
  • Basic Image and Text settings are available in the element control options on the right. 

Image Group Element - 

  • The Image Group element helps admins add 2 - 5 images at the same time.
  • Under the Image Group content tab, admins can choose the layout, add, remove or reorder images.

Social Follow Element -

  • The Social Follow element allows admins to add links to social profiles in the email template by simply dragging and dropping the element.
  • Default icons can be circles, rounded, or squares.
  • Facebook, Twitter, LinkedIn, email, and Google+ are supported.
  • Remember to populate the URL!

  Code Element - code_element.png

Have more questions? Submit a request