The Style Manager menu lets you set the attributes of the Grids and Elements that you’ve added to your canvas. Though the drag and drop editor is very easy and intuitive, it is still good for you to have some basic understanding of HTML to properly use this feature. A good resource is W3Schools.com. Not all elements support the exact same attributes. Knowing ahead of time which HTML element supports which attribute will save you time and headaches. If you need assistance, you can always contact your Customer Success Manager any time.
Click on any Grid or Element in the canvas. You’ll note that the Style Manager menu automatically opens.
- Classes — Here’s where a little understanding of Cascading Style Sheets (CSS) helps. The drag and drop editor automatically assigns a class name to each element. Classes allows you to set the properties of an element (e.g. the font family, font size, color, etc. of a paragraph) and then have that exact same setting applied to other elements having the same class name. CSS is a real time savor when you want to create email content that is consistent from top to bottom.
- Dimensions — This sub-menu allows you to set the width, height, margins and padding of Grids. Do not use this setting to define the dimensions of images. If you do, you will affect the mobile-friendly rendering of your email. Best practices always recommends that images be sized to the proper dimensions before you use them in your email.
- Typography — This sub-menu allows you to set the font family, size, color, spacing, horizontal alignment, line height, weight, and other styles of an Element.
QUICK TIP! Grids are HTML tables, and tables are considered “containers.” The attributes you set for the container apply to everything that it contains. For example, if you want to horizontally center an Image inside of a Grid, then set the Text Align property of the Grid to center.
Another best practice of mobile-friendly email design is to place all content within a 600-pixel wide table and display it centered within the screen. The drag and drop editor lets you easily do this. Just place one Grid inside of another Grid. Set the Text Align property of the outer Grid to center, and set the width of the inner Grid to 600 pixels. Now, place all other Grids and Elements inside the inner Grid for a perfectly centered, 600-pixel wide layout.
- Decorations — This sub-menu allows you to set the background color of an element. It also lets you show a Grid having a border with rounded corners. Use this setting to make a Grid appear as a button (remember to place the Grid inside a Link Block element).