In the Email Designer, when selecting an element, several options specific to the type of content selected are displayed in the Settings pane. You can use these options to easily change the style of your email.
To select an element in the Email Designer interface, you can either:
Browsing the structure tree enables you to make a more accurate selection. You can select either:
To select a column, you can also do the following:
See an example in this section.
Select an element in your email. For more on this, see Selecting an element.
Adjust the settings according to your needs. Each selected element offers a different set of settings.
You can insert backgrounds, change sizes, modify horizontal or vertical alignment, manage colors, add padding or margin, and so on.
To do this, use the options displayed in the Settings pane or add inline styling attributes.
Save your content.
The Email Designer interface allows you to quickly adjust padding and margin settings.
Padding: this setting enables you to manage the space that is located inside an element’s border.
Margin: this setting enables you to manage the space between the element’s border and the next element.
Depending on your selection (structure component, column or content component), the result will not be the same. Adobe recommends setting the Padding and Margin parameters at the column level.
For both Padding and Margin, click the lock icon to break synchronization between top and bottom or right and left parameters. This enables you to adjust each parameter separately.
Text alignment: place the cursor of your mouse on some text and use the contextual toolbar to align it.
Horizontal alignment can be applied to text, images and buttons - currently not to the Divider and Social components.
To set vertical alignment, select a column inside a structure component and choose an option from the Settings pane.
When it comes to setting backgrounds with the Email Designer, Adobe recommends the following:
Below are the available background settings that you can use.
Set a Background color for the whole email. Make sure you select the body settings in the navigation tree accessible from the left Palette.
Set the same background color for all structure components by selecting Viewport background color. This option enables you to select a different setting from the background color.
Set a different background color for each structure component. Select a structure in the navigation tree accessible from the left Palette to apply a specific background color only to that structure.
Make sure you do not set a viewport background color as it may hide the structure background colors.
Set a Background image for the content of a structure component.
Some email programs do not support background images. When not supported, the row background color will be used instead. Make sure you select an appropriate fallback background color in case the image cannot be displayed.
Set a background color at the column level.
This is the most common use case. Adobe recommends setting background colors at the column level as this allows for more flexibility when editing the whole email content.
You can also set a background image at the column level, but this is rarely used.
You want to adjust padding and vertical alignment inside a structure component composed of three columns. To do this, follow the steps below:
Select the structure component directly in the email or using the structure tree available from the left Palette.
From the contextual toolbar, click Select a column and choose the one that you want to edit. You can also select it from the structure tree.
The editable parameters for that column are displayed in the Settings pane on the right.
Under Vertical alignment, select Up.
The content component displays on top of the column.
Under Padding, define the top padding inside the column. Click the lock icon to break synchronization with the bottom padding.
Define the left and right padding for that column.
Proceed similarly to adjust the other columns’ alignment and padding.
Save your changes.
You can underline a link and select its color and target in the Email Designer.
In a component where a link is inserted, select the label text of your link.
In the component settings, check Underline link to underline the label text of your link.
To select in which browsing context your link will be opened select a Target.
To change the color of your link, click on Link color.
Pick the color you need.
Save your changes.
In the Email Designer interface, when you select an element and display its settings on the side panel, you can customize the inline attributes and their value for that specific element.
Select an element in your content.
On the side panel, look for the Styles Inline settings.
Modify the values of the existing attributes, or add new ones using the + button. You can add any attribute and value that is CSS-compliant.
The styling is then applied to the selected element. If the child elements do not have specific styling attributes defined, the styling of the parent element is inherited.