Composer Guide
This is a guide to the elements that make up Composer. These structures and components are the building blocks for beautifully designed, fully-responsive emails.
.gif)
This is a guide to the elements that make up Composer. These structures and components are the building blocks for beautifully designed, fully-responsive emails.
The best place to start when designing a new template or message is the Settings tab, located in the sidebar. Begin by selecting a Font Family to apply as a default for your message, then choose a Background Color.
1-Column
The only mobile option for a single column layout is to scale on mobile. Content placed inside structures will automatically scale to fit.
2-Column
There are both desktop and mobile layout options available for 2-column structures. Control the column widths by selecting the Layout button. Mobile options include: Scale, where the columns remain side-by-side, and Stack/Stack Flip, which allow you to select which column should stack on the top on mobile. This is helpful when creating Z-curve layouts.
3-Column
Mobile options for 3-column structures include Scale or Stack. Another helpful option that is also found under Mobile Layout is Align Content on Mobile. Depending on the design, content may need to be aligned one way on desktop and another on mobile.
4-Column
Mobile options for 4-column structures also include: Scale, Stack, and Wrap, which displays on mobile as a 2x2 grid.
6-Grid
Although very similar to a 3-column structure, 6-grid offers the additional mobile layout of Wrap to stack in a 2x3 grid, as well as Scale or Stack.
Each structural element added to the design forms a row, which has several options that can be adjusted. When the row is selected, these can be found under Properties in the sidebar. Row Background Color and Content Background Color can be changed, as well as the top and bottom Spacing, and Border.
Row Background Color
Content Background Color
Spacing
Border
These basic content elements have dynamic styling controls that allow for full customization to create unique, on-brand messages.
Navigation
Add a bar of links to serve as secondary calls-to-action to your site . On mobile, navigation links can Wrap to a new line or Stack. Navigation is the only component that can hide or show on desktop or mobile by selecting Layout. As a best practice, we suggest hiding navigation from the top on mobile to save on real estate. Duplicate the nav bar in the footer to display on mobile.
Images
Select Browse to upload images from your computer to the Media Library or select Image Source to enter an image URL from the web. Link an image by adding a Link URL. Adjust the width or add padding to create space around images. Images will automatically scale to fit.
Buttons
Every email should have a clear goal and call-to-action. The most important calls-to-action should be easy for readers to find. The button component makes it easy to match your brand and call attention to actionable links.
Text Box
Use the text component toolbar to style text using traditional WYSIWYG controls including bold, italic, underline, strikethrough, and letter spacing.
💡 Hint: Try the keyboard shortcuts!
Composer has far more font families to choose from than other builders, including the most popular Google Fonts.
Some examples include:
and many more!
Text boxes can be aligned left
Create text lists with bulleted or numbered lists.
Composer Structures
Content Components
Social Icons
Link to social sites with these popular icons. Add custom social icons that are unique to your brand.
Dividers
Organize content for your readers with dividers. You know what they do.
.png)
