Building Complex Emails
Creating complex and visually appealing emails often requires a structured approach.
Last updated
Creating complex and visually appealing emails often requires a structured approach.
Last updated
Since most email clients rely on HTML tables for layout (due to email client compatibility), you'll need to use nested tables to build the background and structure your content. Below is a step-by-step guide:
Step 1: Build the Background of Your Email
The first step is creating the foundational structure for your email’s background. If your email has distinct color sections, for example:
Grey at the top
Red in the middle
Black at the bottom
You’ll need to create a single-column, three-row table to represent these sections.
How to Insert the Background Table:
Click on "More Rich"
Insert a single-column table with three rows.
Adjust the background color of each row using the background color button in the editor. To do this, hover over each cell and click "Cell Background"
Step 2: Add Nested Tables for Content Structure
Once the background is in place, add tables inside each row to define the content layout. This is especially important for structuring text, images, and other content. Always insert spacer columns (empty cells) for consistent spacing between elements.
Example: If a section requires an image with some text to appear side by side, you’ll need to:
Insert a three-column row within the corresponding background row.
Use the middle column as a spacer between the left and right columns.
Adding Nested Tables:
Select the desired background row.
Insert another table (e.g., a three-column table) within the row.
Adjust column widths for spacing by click on the column outline.
Step 3: Add Content to Each Section
Now that your structure is ready, you can populate the tables with content:
Text: Use the text editor to format your copy (e.g., bold headers, aligned paragraphs).
Images: Use the Insert Image button to add images to specific table cells. Make sure to define image sizes for better rendering in various email clients.
Buttons: Create clickable call-to-action buttons by using our Insert Email CTA function.
Step 4: Preview and Test Your Email
Once your email is built:
Preview it within the editor to ensure all elements are aligned correctly.
Test your email across multiple email clients (e.g., Outlook, Gmail, Apple Mail) to ensure compatibility. We would reccomend using Litmus.
Use Spacer Columns: Always insert spacer columns (empty cells) for consistent spacing between elements.
Avoid Absolute Positioning: Email clients don’t handle CSS positioning well. Stick to table-based layouts.
Inline Styling: Use inline styles for maximum compatibility, especially for fonts, padding, and colors.
Clean Imported HTML: If you insert HTML from other sources, be sure to thoroughly clean the code. Many email builders inject their own classes and styles, which can conflict with your design and cause rendering issues across email clients.
Save as a Template: Once you're happy with your email, save it as a template for future use! This will save time and ensure consistency in your email campaigns.
By following these steps, you’ll be able to create professional and visually appealing emails that render correctly across all email clients.
