Стили элемента

Центральная кнопка в правой части редактора открывает меню стилей выделенного элемента. Набор настроек и атрибутов может меняться в зависимости от элемента. Основные стили остаются доступными для всех элементов и записываются в атрибут style HTML разметки, так что вы сможете легко настроить шаблон, который будет одинаково хорошо отображаться во всех почтовых клиентах.

Классы и состояние

В верхней части меню вы можете назначить элементу определённый класс стилей, а также переключить состояние — для добавления эффектов при наведении или нажатии.

---

Основные

В основных стилях задаётся расположение элемента в письме: Float — выравнивание блочного элемента по правой или левой стороне контейнера. Display — inline, block, inline-block или flex — режим отображения элемента. Position, Top, Left, Bottom — режим расположения и смещение элемента сверху, справа, слева и снизу.

---

Размеры

В секции Размеры настраиваются следующие параметры отображения: Width, Height — ширина и высота элемента. Max width, Max height — максимальные ширина и высота элемента. Margin — внешняя граница элемента. Padding — внутренний отступ от границы элемента.

---

Типографика

В секции Типографика расположены параметры отображения текстовых элементов: Text align — выравнивание текста по левой, правой стороне контейнера, по центру или по ширине. Font family — семейство шрифтов текста. Font size — размер шрифта. Font weight — толщина шрифта. Letter spacing — расстояние между буквами. Color — цвет в rgb или hex. Line height — высота строки Text shadow — добавление тени для текста с настройкой цвета, горизонтального и вертикального сдвига, размытия:

---

Стиль

В секции Стиль настраиваются параметры границы элемента, фона и тени элемента: Border radius — скругление всех углов границы элемента. Background color — цвет фона элемента. Блок Border radius — настройки скругления для каждого угла границы элемента. Блок Border — толщина, стиль и цвет границы элемента. Box shadow — добавляет внутреннюю или внешнюю тень элемента. Вы можете настроить смещение, толщину и размытие тени, а также выбрать цвет: Background image — добавляет фоновое изображение для элемента. Вы сможете выбрать изображение из галереи или загрузить с компьютера, настроить размер, повторение, и положение фона элемента:

---

Дополнительно

В дополнительных параметрах вы можете настроить анимацию элемента при переходе в разные состояния. Здесь вы можете настроить AMP элементы, например, карусель изображений. Transition — добавьте анимированный переход, настроив режим и длительность. Perspective — перспектива отображения. Transform rotate, Transform scale — настройки вращения и увеличения элемента по трём осям координат.