Email Builder: Structures
The Email builder is one of the tools you can use to create your email. It is a drag-and-drop tool. The components you can drag and drop onto your email canvas are called 'structures'.
Structures are predefined layout placeholders for your content. Instead of an empty canvas, you can use them to structure your design. Moreover, using structures will make your email responsive to various screen sizes and devices.
Outlining your design
A structure is a canvas component with a predefined layout. In other words, it will order the content of your email in columns. After adding the structure to your email you can freely insert any content type from the Elements section in the navigation panel on the left.
The way you outline your design with structures has a big impact on the responsiveness of your email. The width of your structures is automatically scaled to the width of the screen your email is read on. If your structure contains multiple columns, they will be stacked on top of each other on a mobile device.
This means that if your first column contains two images and your right column contains two text elements within the same structure, your email will first show the two images and then the two texts on a mobile device. In this example it’s best to use a different structure for every article.
Every structure and every content element can individually be removed or duplicated using the icons on the bottom right on a structure. The order of the structures in your email can be rearranged by simply dragging them around using the handlebar on the left. A purple line will appear to indicate where the structure will be moved to upon release.
Structure style (Structure settings)
After clicking on a structure, you are able to configure it using the Structure style panel that will appear on the right. The exact settings you will find here may differ depending on the amount of columns your structure has and if you are currently viewing the desktop version of your e-mail or the mobile version.
All settings you find on this panel will be grouped three sections : Layout, Columns and Visibility and can be configure separately for Desktop and for Mobile using the tabs on top. The settings panel will always stay in sync with your current view. If the mobile version of your structure has settings that are different from it's desktop counterpart, it will be indicated with a dot.
Layout
Column size in the layout section allows you to set the width of each column of your structure by dragging the column divider left or right. If you have chosen a single column structure Column size will not be visible.
Content background color and Row background color allows you to set a color that will be applied to only this specific structure. If no color has been set, the colors configure in the Email style settings will be inherited automatically. For a better experience it is recommended to configure your Brand kit and setup your Email style first.
Margin can be used to add white space between your structures. In this margin the Email background color will be visible if no Row background color has been set.
The Apply to all sides toggle allows you to set separate values for each side, if needed.
Columns
In the Columns section you will be able to specify a background color, the vertical alignment, margins and border style for each of the columns. Margins and borders can either be configure for all sides at once or for each side separately with the Apply to all sides toggle.
The margin can be used to add white space between your column edge and your content. The Content background color of your Email style will be visible in this white space if no specific color has been set for the column and structure.
Visibility
In the visibility section you are able to control if a structure will be hidden on desktop or mobile. By default a structure will be visible on both versions of your message.
When you hide a structure it will be faded on the canvas in that view and it's elements will no longer be editable.
You are also able to disable column stacking in this section when in the mobile view.
