All Collections
Communication
Send Communications
Classic email editor documentation
Classic editor, how to create a multi-column email layout
Classic editor, how to create a multi-column email layout

You can replicate a traditional multi-column layout for email blasts in NationBuilder.

Updated over a week ago

Table of Contents

Create a multi-column email layout

Go to your Email blast > Content.

1. Click on the + Add dropdown menu and select Table.

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

3. Click OK.

4. Click Save and update preview and the preview of the content will update.

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.

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:

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 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 + Add dropdown menu and select Image

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.

Did this answer your question?