Editing email styles
Editing an element
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.
Selecting an element
To select an element in the Email Designer interface, you can either:
- click directly in the email,
- or browse the structure tree available from the options located in the left Palette .
Browsing the structure tree enables you to make a more accurate selection. You can select either:
- the whole structure component,
- one of the columns that compose the structure component,
- or only a component that is located inside a column.
To select a column, you can also do the following:
- Select a structure component (directly in the email or using the structure tree available from the left Palette ).
- From the contextual toolbar , click Select a column to choose the desired column.
See an example in this section .
Adjusting style settings
- 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.
About padding and margin
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.
- Use padding to set margins on the left and right sides of an image.
- Use top and bottom padding to add more spacing to a Text or a Divider component.
- To set borders between columns inside a structure element, define padding for each column.
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:
- Apply a background color to the body of your email if required by your design.
- In most cases, set background colors at the column level.
- Try not to use background colors on image or text components as they are difficult to manage.
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. 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.
Example: adjusting vertical alignment and padding
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.
Adding inline styling attributes
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.
Switching to mobile view
You can fine-tune the responsive design of an email by separately editing all style options for mobile display. For example, you can adapt margins and padding, use smaller or bigger font sizes, change buttons, or apply different background colors that will be specific to the mobile version of your email.
All style options are available in mobile view. The Email Designer style settings are presented in the Editing email styles section.
- Create an email and start editing the content. For more on this, see Designing an email content from scratch .
- To access the dedicated mobile view, select the Switch to mobile view button.The mobile version of the email is displayed. It contains all the components and styles that were defined in desktop view.
- Edit independently all style settings such as background color, alignment, padding, margin, font family, text color, and so on.
- When editing any style setting in mobile view, the modifications are only applied to the mobile display.For example, reduce the size of an image, add a green background and change the padding in mobile view.
- You can hide a component when displayed on a mobile device. To do this, select Show only on desktop devices from the Display options . You can also choose to hide this component on desktop devices, which means that it will be displayed on mobile devices only. To do this, select Show only on mobile devices . For example, this option enables you to display a specific image on mobile devices and another image on desktop devices. You can either set this option from the mobile or desktop view.
- Click again the Switch to mobile view button to go back to the standard desktop view. The style changes you just made are not reflected.The only exception is the Style inline settings. Any style inline setting change is also applied to the standard desktop view.
- Any other change to the structure or the content of the email such as text edits, uploading a new image, adding a new component, etc. is also applied to the standard view.For example, switch back to mobile view, edit some text and replace an image.Click again the Switch to mobile view button to go back to the standard desktop view. The changes are reflected.
- Removing a style in mobile view takes you back to the style that was applied in desktop mode.For example, in mobile view, apply a green background color to a button.
- Switch to desktop view and apply a grey background to the same button.
- Switch again to mobile view, and now disable the Background color setting.The background color defined in desktop view is now applied: it turns grey (not blank).The only exception is the Border color setting. When disabled in mobile view, no border is applied anymore, even if a border color is defined in desktop view.
The mobile view is not available in fragments .