How to create a multi-column email layout

Content based off of post by Ana Escobedo

Last updated: September 2017

 

Many organizations wish to use a multi-column layout for email blasts to replicate the look and feel of a traditional newsletter.

To recreate this look:

1. Go to your Email blast > Body.

2. Select the table icon in the content editor.

Table icon

3. Create a table with one row and two columns. Set the width to 100%.

Insert Edit Table

4. Click “Insert.”

5. Once the table is inserted, click inside one of the cells. Then click on the “Table cell properties” icon.

Edit_cell_properties.png

6. Set the cell width to 50%. Select “Update All Cells in Table” from the bottom drop down menu. Click “Update.” 

Edit cell properties insert

7. Click Save and preview.

Customize your multi-column layout using both the table and cell editor. You are able to adjust:

  • Borders
  • Padding
  • Colors
  • Images

These changes can be applied to the table or an individual cell. Once you have your layout finalized, you can re-use the format by cloning the email and inserting new content.

Clone your email by going to “Clone.” 

Clone an email

Enter a slug for the cloned version you are creating.  

Clone slug

Click “Clone.” 

You will be taken to the settings of your new email blast. Continue to add recipients, change the content, and send your new blast. 

 


Responsive email tips:

From time to time emails show up as stretched or squished in different ways on various devices. This can happen if the dimensions of the image or table is set to fixed pixel dimensions. For example if your image is too small for the email, it may look something like this:

 

Bad_email.png

As you can see, Sally (the Giraffe) doesn't look very good. To fix this issue, feel free to use these tips:

  1. Wrap the email in a table that is 100% of the viewport. To do this in an email that you have already created, you would need to create a table (as described here) with a 1 column by 1 row layout. Next, set that table to a width of 100% with the height setting empty (blank).
  2. Set the dimensions of the image to be a responsive style such as 100%, 50% or 25%. These percentages will adjust the image based off of the size of the viewport of the email. For example, if you set the image dimensions to be 25%, the image would take up 25% of the viewport of the device the user is viewing the email on. You can find the dimensions setting for the image by selecting the image first. Then, click on the "Insert/Edit image" button and select the "Appearance" tab. You can find the "Insert/Edit image button here: insert_edit_icon.png
  3. If you are having trouble getting images to be center side by side, just throw them in a table! For example, you would create a 2 column by 1 row table. Click within the left column and click on the icon that says "Table cell properties". From there, change the width of the column to 50%. Next, click on the right column and change the width to 50%. Finally, select each image and set them to be 100%. This will force the images to be 100% of their container which in this case is set to a width of 50% for each column.

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.