Element styles

The central button on the right side of the editor opens the styles menu for the selected element. The set of settings and attributes may vary depending on the element. Basic styles remain available for all elements and are written to the style attribute of the HTML markup, so you can easily configure a template that will display consistently across all email clients.

Classes and state

At the top of the menu, you can assign a specific style class to the element and switch its state — to add hover or click effects.

---

Basic

The basic styles section sets the element position in the email: Float — aligns a block element to the right or left side of the container. Display — inline, block, inline-block, or flex — the element's display mode. Position, Top, Left, Bottom — positioning mode and element offset from top, right, left, and bottom.

---

Size

The Size section configures the following display parameters: Width, Height — element width and height. Max width, Max height — maximum element width and height. Margin — outer element spacing. Padding — inner spacing from the element border.

---

Typography

The Typography section contains text display parameters: Text align — text alignment to the left, right, center, or justified. Font family — text font family. Font size — font size. Font weight — font thickness. Letter spacing — spacing between letters. Color — color in rgb or hex. Line height — line height. Text shadow — adds a text shadow with color, horizontal and vertical offset, and blur settings:

---

Style

The Style section configures element border, background, and shadow parameters: Border radius — rounds all corners of the element border. Background color — element background color. Border radius block — individual corner rounding settings for each corner of the element border. Border block — border thickness, style, and color. Box shadow — adds an inner or outer element shadow. You can configure shadow offset, thickness, and blur, as well as choose a color: Background image — adds a background image to the element. You can select an image from the gallery or upload from your computer, configure size, repetition, and background position:

---

Additional

In the additional parameters section, you can configure element animation when transitioning between states. Here you can also configure AMP elements, such as an image carousel. Transition — add an animated transition by configuring the mode and duration. Perspective — display perspective. Transform rotate, Transform scale — rotation and scaling settings along three coordinate axes.