Skip to main content

Add blocks panel (advanced)

Simon Walsh
  • Updated

The Add blocks panel allows you to add HTML elements by clicking and dragging blocks onto your email template.

It is divided into two sections, Layout (columns and grids) and Content (text, buttons, images and links).


Quick links:

Layout

Content

 

Layout 

Layout blocks build the structure of an email template.

Drag and drop blocks from this panel onto your email template to get started.

Layout.png

1 Column

A block consisting of a table with one column.

2 Column

A block consisting of a table with two columns.

3 Column

A block consisting of a table with three columns.

 

4 Column

A block consisting of a table with four columns.

List

A responsive, pre-defined 2-column block containing an image, subtitle and text.

Grid

A responsive two-column grid consisting of an image, subtitle and text. Add/remove elements as necessary.

 

How to duplicate table rows

A HTML table is like an onion with layers.

From outmost to inmost layer: Table > Table body > Table row > Table cell.

The table will duplicate differently depending on what layer is selected.

  1. Select the table cell that is to be duplicated.

  2. Click the up arrow icon Up_icon.png repeatedly until the text under the Classes field of the Styles panel shows: Selected: Table row

  3. Select the Duplicate icon Duplicate_icon.png

    Duplicate_table.gif

How to add another column

  1. Select the table cell that is to be duplicated.

  2. Click the up arrow icon Up_icon.png repeatedly until the text under the Classes field of the Styles panel shows: Selected: Table cell

  3. Select the Duplicate icon Duplicate_icon.png

Content

Content blocks populate an email with content (such as text, images and buttons).

Drag and drop blocks from this panel onto your email template to get started.

Content.png

Text

A basic text block with the paragraph class set as default.

When copying and pasting text from another source, remember to select the clear formatting icon Clear_formatting.png. This is because pasting from text editors such as Word may introduce unwanted styling to your template.

Add a class to the element once you've added it to ensure visual consistency with the rest of the email. See Email template builder: Styles panel for more information.

Paragraph

A group of two text blocks with heading-2 and paragraph class set as default.

Button

A linked button with options to (configurable in Settings panel):

  • Open in new window
  • Open in same window
  • Track clickthrough
  • Other styling options (Colour, font, size, etc.)

Image

  1. Drag the Image content block onto your email template

  2. Double click on the image placeholder

  3. Paste the URL of the image (this must be publicly hosted in order to be used within an email template) and click Add image

  4. Click on the image which appears beneath the URL you have entered to add it to the image block

  5. Options to stylise or resize your newly added image are available in the Styles panel

In order for an image to be supported by most email clients, it should be in either PNG or JPEG/JPG format.

Link

    1. Double-click link to edit link text and further customise text (left)

      Further customisation does not affect other links with the same link-default link

    2. Customise via Styles panel

If you'd like to track link clicks, you'll need to specify this in the Styles panel once your link is selected. Simply tick the Track clickthrough? box and total and unique clicks will then be reported in the Performance tab of a flow using this template

Divider

A grey line that visually divides sections within an email.

Social links

  1. Drag the Social links content block onto email template

  2. Customise using the Styles panel

To add a link

  1. Select social icon, and paste relevant links into the URL field (on the Styles Panel).

To delete irrelevant social icons

  1. Select social icon, and ensure the table cell is selected

  2. Select the trash icon