How to create multi-column HTML emails

When creating an email, you may want to create it with multiple columns, providing an easy way for your readers to see the main content of your message as well as quick excerpts or headlines to link to your website, social media channels, or other references.  Using Soapbox Mailer, you can create multi-column e-mails with one of two strategies.

For any approach to creating multi-column HTML emails, there is one key concept to the layout design and development:  using HTML tables.  Our documentation here assumes you understand some of the basics of writing HTML, and the concept of tables, rows, and cells.

Body Content within the HTML Body, coupled with the Email Template

In this approach, you'll be using the WYSIWYG editor within the Campaign's Edit HTML Body button.  When creating a new email,  you'll want to create your Email Template simply, storing only the header, footer, CSS, and other general design elements within your email.  The actual columns of your email would be stored within your WYSIWYG editor.

When creating the body of your HTML email within the WYSIWYG editor, you can choose the Table button (top row, fourth section from the left, right button) to insert a table into your message.  Once you click the button, you simply need to choose the appropriate number of columns and rows for your HTML email.

Alternatively, you can manually create the HTML (or copy/paste it from elsewhere) using the Source button in the WYSIWYG editor.

With these two options, you can create as many columns as you wish within the body of your HTML email (though we typically recommend sticking to no more than two columns for readability).

All content of the email within the Email Template

In this approach, you'll be using the Email Template tab to create the full design and content of your HTML email.  By doing this, you'll keep the content of your Edit HTML Body button in the Campaign empty, and have the Email Template provide all of the design.

When creating a new email, you'll create a new Email Template that contains the full contents of your HTML body.  You'll use HTML to create this Email Template, and using HTML tables, you'll be able to create your columns as necessary.

All merge fields for the campaign will need to be placed directly within the Email Template (since you won't be using the Edit HTML Body button).

Seem a little complex and looking for assistance in creating your customized newsletter template?  Send us a support ticket, and we'd gladly provide a quote for assisting you.

Happy emailing!