This article...
- Explains how to create a Custom Layout in Template Designer.
- Details the elements and sections you can add when designing a Custom Layout.
- Describes the customization options (e.g., style properties, borders, and padding).
- Discusses how to manage (e.g., save, cop, edit, delete) custom layouts.
- Explains how custom layouts can be used across templates and made available for future messages.
Template Designer offers many different layouts that you can add to your design. However, if you need more control, you can also create Custom Layouts. By creating custom layouts, you have the freedom to design layouts specific to your organization’s needs.
Create a Custom Layout
To create a Custom Layout:
- On the Design > Build tab, expand the Custom Layouts category.
- Click Create Custom Layout.
This opens the Layout Editor.
- Give your Custom Layout an appropriate name in the Layout Name field. This name represents this Custom Layout when adding it to a template or message, so be sure the name describes the purpose.
- Drag and drop content types to create a unique message content layout that you can use in your template or as an option in a Message Content layout.
This process is described in the sections below.
The Layout Editor has two tabs: Design and Properties.
Design tab
The Design tab is where you'll do most of your layout and design work. These elements use the same properties as their corresponding layouts. Similarly, as a best practice, you’ll have greater control over your design if you use Sections to structure your Custom Layout.
You can add the following elements:
Section | Image with Text | Text with Headline |
Text | Image | HTML Content |
YouTube Video | Divider | Quick Links |
Icon Set | Social Share | Button |
Dynamic RSS |
Properties tab
The Properties tab lets you set properties for the entire custom layout canvas. Much like sections in your template, the Properties tab allows you to divide your custom layout into columns and to add stylistic elements to your design.
Columns
The Columns sub-tab lets you subdivide your custom layout. You can select between one and five columns, and you can set their proportions using the Column Dimensions slider.
Check the Stack Columns in Mobile Version checkbox to let your columns render differently in the mobile version of you mailing.
Style
The Style sub-tab lets you modify the stylistic properties (color, padding, etc.) in your custom layout.
- Use Default Background - If checked, your custom layout uses the background color set in the Theme menu. If unchecked, you can use the color picker to select a unique color for the layout's background.
- Border - If checked, your section applies a border with several possible settings.
- Border Style - Click the dropdown to select a solid, dashed, or dotted border.
- Border Size - Click the dropdown to set the border size in pixels (1 – 10).
- Border Color - Click to use the color picker to select a unique color for the layout’s border.
- Apply Border To - Check the corresponding checkbox for each side (top, bottom, left, and right) that uses the border.
- Padding - Click the dropdown list to set the padding around your section (0 – 30 pixels).
- Apply Padding To - Check the corresponding checkbox for each side (top, bottom, left, and right) that applies padding.
- Vertical Align - Click the dropdown list to set a vertical alignment option (top, middle, or bottom).
Custom Layout example
Below is an example of a custom layout that uses the following elements:
- Three sections
- Two text areas (one for the title, one for the story content)
- An image
- A divider
Manage your Custom Layouts
Let's check out a few ways you can manage your existing Custom Layouts.
Saving
When you're ready, click Save Layout at the top right to save your layout to the Custom Layouts menu.
Copy, edit, and delete
Click the gear icon to access these options.
- Copy - This opens the Layout Editor where you’ll name the copy in the Layout Name field. Additionally, you can freely edit the copy.
- Edit - To edit your layout, select Edit.
- Delete - This prompts you with a confirmation message; click Delete to confirm or Cancel to exit.
Copy a Custom Layout from another template
If you want use a Custom Layout from a different template:
- Expand the Custom Layouts category and click Copy Custom Layouts.
- Click the Templates dropdown and select the template that contains the Custom Layout that you want to copy. The available layouts display as icons below the dropdown.
- Click to select the custom layouts that you want to copy (selected layouts are highlighted green).
- Click Copy Layouts.
The copied layouts now appear in the Custom Layouts menu of the template that you are working on.
Using your Custom Layouts
All Custom Layouts that are available in a template are available for messages that are built on that template. This applies equally to layouts that were:
- created within the template and
- copied to it.
All you have to do is assign the Custom Layout to a Message Content Area. Then, when you or someone else creates a message, that layout is available from the Add Content button.