The Message Editor (Email Designer view only) includes a Zones tab that houses the building blocks that you use to construct your messages and templates.

When creating a message or template, you'll use this tab to:

• Drag and drop Zones and Layouts onto the "canvas" to build the structure and content of your template or message.

TIP: This article is dedicated to Layouts. If you want to learn about Zones, check out Message Editor Zones and Layouts.

Watch the video

Watch a short video that highlights the redesigned Zones iconography and the new, pre-configured Layouts options.

How to add & work with Layouts

TIP: Use the Columns Layout to build a "skeletal" structure that Zones can then be added to. The other Layout types (Thumbnail, Card, and Image) come prepopulated with placeholder content, making them an efficient option if this content suits your needs.

Drag and drop a Layout onto the "canvas" to insert it. Which Layouts you add, and where you add them, determines the structure of your message.

TIP: When building your structure, we do not recommend nesting Layouts but instead stacking them; essentially, don't create "deep" layers of content that will become unwieldy for you to manage and difficult for your users to understand. 

Once placed, a Layout's design elements appear on the canvas, ready for you to work with. For example, adding a Thumbnail as we did above results in two-column row comprising four elements: image, text headline, body text, and a button.

Click to select an element, which then allows for it to be moved around the canvas, edited, copied, and deleted.

Configure a Layout's design

Upon selecting a Layout, the Design tab becomes active, as shown below.

• Use the Design tab to configure a Layout's properties, such as its Theme, background color, padding and width, and font family.
• Check out the Navigation Bar > Design tab section of the Message Editor Overview article to learn more. 

Available Layouts

Let's take a look at the various Layouts you can use to structure your message.

TIP: When building your structure, we do not recommend nesting Layouts but instead stacking them; essentially, don't create "deep" layers of content that will become unwieldy for you to manage and difficult for your users to understand. 

Columns

Adding columns is a great way to separate your message content and add visual appeal by making your message easier to scan and read.

Drag and drop the Columns Layout to the location in the message where you'd like to insert one or more parallel columns. Once placed, you can choose how many columns it will have. Note that each column:

• can be customized with unique borders, padding, and background colors.
• can host any of the other Zone/Layout options (e.g., text, images, an RSS feed).
• can host additional columns by adding another Columns Layout to it.

Columns can enhance the layout of your messages. Experiment with different column structures to see what works best for your message content.

Thumbnails

These two Layouts insert an image and associated headline, body text, and button.

• Content is presented in a row, with the image either to the left or right.
• Recommended image dimensions are 250 x 250px. Stick to these dimensions as closely as possible for the best result; larger images will not be scaled down and may stretch and "break" the Layout.

Card Rows

These three Layouts insert an image and associated headline, body text, and button.

• Content is presented in a card format, with the image at top and associated content below.
• Recommended image dimensions:

• 1 card: 630 x 250px
• 2 cards: 300 x 300px each
• 3 cards: 200 x 200px each

Stick to these dimensions as closely as possible for the best result; larger images will not be scaled down and may stretch and "break" the Layout.

Image Rows

These three Layouts simply insert image placeholders without any associated text or button content.

• These image placeholders are presented in a row.
• Recommended image dimensions:

• 2 images: 300 x 300px each
• 3 images: 200 x 200px each
• 4 images: 150 x 150px each

Stick to these dimensions as closely as possible for the best result; larger images will not be scaled down and may stretch and "break" the Layout.

Working with images

Upon selecting an image and choosing Edit, the Insert Image dialog displays. This is where you choose an image to display and manage its settings via the Preview and Properties tabs.

For detailed information on how to insert, manage, and configure images, see Message Editor Zone - Image.

Working with text

Upon selecting a headline, text, or button and choosing Edit, the WYSIWYG editor displays. This is what you'll use to insert and format text, among other features such as images, tables, personalization, and more.

For detailed information about each of the WYSIWYG editor's formatting options, see Message Editor Zone - WYSIWYG.