Last week, we talked about the Email Editor in general. This week, we are going to be discussing the one tab of the editor that governs all the Styling options that are available for Email templates, from borders, to padding, to background colors, everything can be found in the Style Manager, which looks as follows when opened:
As you can see, the Style Manager contains three different subcategories that allow you to only show the options that you really need and prevent unnecessary searching and scrolling.
The options are as follows:
- Dimension. Contains all the size and padding options.
- Typography. Contains the options for text, font, and font colors.
- Decorations. Contains the options for background color, borders, etc.
We’ll go through them one by one, starting with the Dimensions.
The Dimensions allow you to edit the size of the selected component, as well as the empty space around the component itself, which is called the ‘padding’.
The width and height of most components will be set to ‘auto’, which means that it will automatically scale to fit into the room available with the content within the component. Images, for example, will be scaled to the room available automatically.
If you wish to insert your own width or height, you can do so in pixels or percentages of the width of the space available.
The padding is the space that is added between the border of the component and the actual content of the component. An example:
And another to show the difference:
Next in the Style Manager would be the Typography.
The typography allows you to control all the parts of any text available in the selected component, just like you are used to from text editors.
The option ‘Weight’ allows you to set how bold the text should be, ‘Letter spacing’ how much space there is between individual letters, and ‘Line height’ governs how much space there should be between two lines of text. This is especially relevant with bigger font sizes.
The font color can be set using rgb, hexcode, typing the color your wish to use, or you can open a color picker by clicking on the colored square next to the input box.
Finally, there are the Decorations.
The decorations allow you to set the colors and border for selected components. The Border radius will govern how rounded a border will be when it is implemented, with a greater radius translating to rounder corners.
The border width and style allow you to decide what kind of border will be put around the selected component, if any.
Of course, the styling options that are available for the different content blocks may differ. An image won’t have the Typography options available, for example! We advise that you experiment and look at the different blocks to find what is possible for your emails!
Next week, we will discuss two of the other tabs in the email editor: the Settings Menu and the Layer Manager, after which we will look into several of the blocks available to build the emails with!