Элементы и их настройки

Адаптивная разметка

При добавлении элементов адаптивной разметки для них будут доступны следующие атрибуты и настройки:

• HTML тег
• ID — идентификатор элемента
• Заголовок при наведении
• Cellspacing — расстояние между ячейками
• Cellpadding — внутренний отступ ячеек
• Border — толщина границы
• Border color — цвет границы
• Цвет фона
• Ширина секции

подсказка

Чтобы увидеть окно "Атрибуты и настройки", выберите элемент адаптивной разметки, наведите курсор на зеленую иконку в левой части контейнера и в всплывающем окне кликните иконку "Настройки".

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

Стандартная разметка

Для элементов стандартной разметки также доступно добавление ячеек и изменение процентного соотношения их ширины:

Для ячеек стандартной разметки можно установить:

• ID — идентификатор элемента
• Заголовок для отображения при наведении курсора
• Цвет фона
• Ширина контейнера
• Выравнивание содержимого по горизонтали и вертикали

Элементы

Текст в таких элементах как заголовок, текст, кнопка, ссылка можно редактировать с помощью WYSIWYG редактора:

Редактор WYSIWYG для текстовых элементов

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

В панели возможно:

• использовать инструменты форматирования (курсив, жирный / подчеркнутый / зачеркнутый текст);
• добавить ссылки;
• добавить переменные персонализации.

Аналогично вы можете редактировать текст на элементах Кнопка:

подсказка

Параметры отображения текста, а также поведение ссылок и кнопок настраиваются в правой части редактора и описаны в этой статье.

С помощью меню переменных вы можете добавить в шаблон данные профиля и логические условия для персонализации контента:

Для подстановки данных кастомных полей профиля используется выражение {lead.custom_field} с полным названием пользовательского поля данных.

Подробнее о каждом элементе:

Заголовки

При добавлении элемента "Заголовок" для него будут доступны следующие атрибуты и настройки в правой части редактора:

• ID — идентификатор элемента.
• Заголовок для отображения при наведении курсора.

Текст

При добавлении элемента "Текст" для него будут доступны следующие атрибуты и настройки в правой части редактора:

• ID — идентификатор элемента.
• Заголовок для отображения при наведении курсора.

Ссылка и блок со ссылкой

При добавлении элементов "Ссылка" для них будут доступны следующие атрибуты и настройки в правой части редактора: ID — идентификатор элемента. Заголовок для отображения при наведении курсора. Ссылка для перехода. Режим открытия ссылки — в текущем или новом окне.

Изображение и Изображение со ссылкой

При добавлении элемента "Изображение" для него будут доступны следующие атрибуты и настройки в правой части редактора: ID — идентификатор элемента. Заголовок для отображения при наведении курсора. Альтернативный текст (значение атрибута alt). Ширина и высота в процентах. Ссылка на изображение в платформе или в сети.

Чтобы открыть галерею изображений платформы, дважды кликните мышью на элемент "Изображение". В галерее доступен поиск по имени файла и по пользовательским тэгам.

С помощью формы в верхней части вы можете загрузить новое изображение со своего рабочего компьютера: перетащите файл мышью или кликните по форме и укажите нужный файл.

Когда вы нашли нужное изображение, откройте его и кликните "Вставить". Любому изображению вы можете назначить тэги или удалить при необходимости.

После этого вы сможете настроить отображение добавленного изображения в меню Стилей элемента в правой части редактора. Работа со стилями описана в следующем разделе.

Разделители

Разделители позволяют визуально отделять элементы друг от друга.

Для разделителя вы можете установить размер в пикселях и выбрать цвет:

Для скрытого разделителянастраивается высота в пикселях:

подсказка

Элемент "Скрытый разделитель" — это невидимый блок, растягивающийся на всю ширину ячейки.

Когда вы используете элемент "Разделитель", то вы добавляете в свой шаблон два невидимых блока, а также горизонтальную линию, занимающую всю ширину ячейки. Эту линию можно модифицировать: изменять цвет и толщину.

Кнопка

При добавлении элемент а "Кнопка" для него будут доступны следующие атрибуты и настройки в правой части редактора: ID — идентификатор элемента. Заголовок для отображения при наведении курсора. Ссылка для перехода. Режим открытия ссылки — в текущем или новом окне.

Видео

При добавлении элемента "Видео" для него будут доступны следующие атрибуты и настройки в правой части редактора:

• ID — идентификатор элемента.
• Заголовок для отображения при наведении курсора.
• Ссылка на видео.
• Изображение для препросмотра видео — из платформы или ссылка.
• Ссылка для перехода по клику.
• Ширина и высота плеера.

Списки

Для маркированного списка можно указать ID и заголовок, а также выбрать тип меток: круг, диск или квадрат:

Для нумерованного списка можно настроить тип нумерации — римские или арабские цифры — или латинские буквы:

Пример шаблона

Визуальный редактор	Предпросмотр

Блоки

Блоки — это контейнеры, уже содержащие в себе определенные элементы.

Блоки облегчают работу с шаблоном, поскольку представляют собой некие заготовки для пользователя платформы, которые тот, с большой долей вероятности, использует практически в каждом своем Email сообщении. Если вам надоело повторять одно и то же монотонное действие раз за разом, то самое время воспользоваться блоками.

Текст

Блок "Текст" — это контейнер, который включает в себя заголовок h1 и параграф.

Внешний вид	Атрибуты и настройки

Изображение с текстом

Блок "Изображение с текстом" — это таблица, состоящая из двух ячеек. Левая ячейка включает в себя изображение, а правая — заголовок h1 и параграф.

Внешний вид	Атрибуты и настройки

Текст с изображением

Блок "Текст с изображением" — это таблица, состоящая из двух ячеек. Левая ячейка включает в себя заголовок h1 и параграф, а правая — изображение.

Внешний вид	Атрибуты и настройки

Меню

Блок "Меню" — это таблица, состоящая из 4-х ячеек одинаковой ширины.

Каждая ячейка включает в себя ссылку, которую вы можете настроить в панели Атрибуты и настройки. Там же у вас есть возможность изменить внешние и внутренние отступы между ячейками, настроить ширину границы и общую ширину элемента, а также задать цвет фона.

Внешний вид	Атрибуты и настройки

Социальные сети

Блок "Социальные сети" — это контейнер, включащий в себя 8 изображений со ссылками на социальные сети.

Для каждого элемента блока "Социальные сети" вы можете задать свою ссылку для перехода, добавить альтернативный текст, настроить изображение, а также изменить ширину и высоту элемента.

Внешний вид	Атрибуты и настройки

AMP блоки

AMP-письма — это технология, которая позволяет маркетологам встраивать интерактивные элементы, такие как карусель и аккардеон в свои письма. Пользователь, в свою очередь, может посмотреть данные, даже не открывая новую вкладку для посещения веб-сайта. В платформе Altcraft доступны следующие APM блоки:

Карусель

Карусель — это блок, включающий в себя несколько слайдов. Карусель позволяет нескольким фрагментам контента занимать одну и ту же область пространства на странице или экране.

Настройки AMP карусели задаются в меню стилей элемента. Вы можете задать ID элемента, установить его высоту и добавить слайды, для которых установить изображения и ссылку для перехода. Изображение можно выбрать из галереи или загрузить с компьютера. Также можно указать ссылку на изображение в сети:

Аккордеон

Аккордеон — это блок, состоящий из нескольких вкладок с элементами. Каждый элемент может быть «развёрнут» или «раскрыт» при определенном действии со стороны пользователя (клик, наведение курсора). Вы можете добавлять в секции любые элементы.

Такой элемент интерфейса как аккардеон не только помогает пользователям быстро перемещаться по материалам, но и позволяет дизайнеру пользовательского интерфейса включать большие объемы информации в ограниченном пространстве.

Настройки AMP аккордеона задаются в меню стилей.

Выделите блок (зелёное меню) и добавьте необходимое количество секций. Секции можно отображать открытыми или закрытыми по умолчанию. Затем добавьте в секции нужные элементы:

Если вы разобрались, как добавлять и настраивать различные элементы в шаблоне, то осталось последнее — стилизовать элементы.