Работа с блоками и элементами в конструкторе
Формируйте структуру веб-страницы или email-письма в визуальном конструкторе с помощью пустых блоков, библиотеки блоков или базовых элементов.
Перетаскивайте их на рабочую область из меню слева: для этого нажмите на блок или элемент левой кнопкой мыши и не отпуская перемещайте его на рабочую область.
Рекомендуем периодически сохранять вручную изменения в двух местах: в визуальном конструкторе и на шаге сценария, в котором работаете, чтобы не потерять внесенные изменения (нажимать кнопку Сохранить сначала в визуальном конструкторе, потом на шаге сценария).
Далее в инструкции разберем основные настройки и особенности, на которые стоит обратить внимание при работе в визуальном конструкторе.
Основные настройки для веб-страниц или Email-писем находятся в левом меню в разделе Стили страницы. После того, как вы проверите эти значения и при необходимости скорректируете, можно переходить к добавлению контента на рабочую область.
При выделения блока или элемента появляются иконки управления: вы можете скопировать или удалить выделенный блок или элемент (иконки справа), переместить в другое место на рабочем поле (икона сверху с точками на синем фоне).
Каждый блок можно настроить — скрывать отдельные элементы, менять их внешний вид, добавлять другие элементы и наполнять своим контентом. Эти настройки выставляются в меню слева и могут отличаться для разных элементов.
Стили настраиваются отдельно для десктоп и мобильной версии. Переключайтесь с помощью иконок в меню слева и задавайте нужные значения для элементов и блоков.
По-умолчанию значения в мобильной версии наследуются с десктоп-версии. Когда вы начинаете их изменять, сверху у настройки появляется дополнительная надпись на сером фоне с названием поля, которое изменено, и крестиком. Это означает, что выделенный блок или элемент имеет другие настройки на мобильном (не как на десктоп-версии).
Если вы нажмете на крестик рядом с названием поля в мобильной версии, то введенные данные будут удалены, и начнут применяться значения с десктоп-версии.
Вы можете установить цвет и фон для каждой колонки, а также отступы. Для этого выделите блок на рабочей области и в меню слева зайдите в настройки колонок рядом с полем ширины.
Для блоков можно задать или отключить адаптивность, чтобы блок отображался, как в дизайне макета письма на мобильных устройствах. Для этого передвигайте переключатель, включая и отключая перестроение колонок друг под друга в мобильном разрешении.
Переключатель переноса колонок находится в настройках десктоп в меню слева, где вы задаете общие настройки колонок.
Базовые элементы Заголовок и Текст имеют схожие настройки. Вы можете выставить нужную гарнитуру, цвет, размер, отступы и видимость элемента отдельно для десктоп и мобильной версии. Эти настройки находятся в левом меню.
Чтобы изменить начертание части текста или полностью текста цвет, или добавить ссылку, нужно выделить текст и в дополнительном меню рядом с текстом выбрать нужное.
При добавлении ссылки в текст выделите его, выберите нужный тип ссылки, основные настройки и задайте url перехода. После этого нажмите Применить.
Вы можете подставить данные клиента в элемент, который содержит текст, например, это базовые элементы: Текст, Заголовок, Кнопка и другие при создании веб-страницы или email-письма.
Подробнее о том, что такое переменные и как с ними работать смотрите в инструкции.
Для добавления данных клиента поставьте курсор в то место текста, где должна быть переменная. В меню слева в блоке «Переменные и смайлы» нажмите кнопку «Выбрать».
После этого выберите какие именно данные или шаблон нужно использовать и нажмите на него.
Вы можете скорректировать данные, которые стоят по-умолчанию, и название, которое видно в текстовом блоке. Для этого нажмите на рабочем поле на переменную (она выделена серым фоном) и в дополнительном окне введите нужное название или поправьте код. После этого нажмите кнопку Сохранить.
Обратите внимание: подстановка переменных будет работать при запуске сценария, при нажатии кнопки Тестировать данные не будут подставляться. Для тестирования корректности подстановок вы можете запустить сценарий на email-адреса тестировщиков с помощью фильтра на первом стартовом шаге.
Вы можете добавить базовый элемент изображения в нужную колонку блока или сразу на рабочую область. Изображение добавляется в настройках десктоп, поставить отдельное изображения для мобильной версии можно через настройку скрытия элемента (Показывать на декстопе или мобильном).
Ширина изображения задается в процентах от ширины колонки, в которой находится и может быть разной для десктопа и мобильной версии, для этого двигайте ползунок и задавайте нужное значение.
Кнопки на лендингах и в email-письмах используются для призыва к действию, например, перехода по ссылке, подписки или перехода на сайт. Тип кнопки может быть «Переход по ссылке» или «Отписаться от рассылки». Если вы выберете «Отписаться от рассылки», то подставится переменная отписки.
Вы можете использовать линию в качестве разделителя между другими элементами или блоками.
Если вам недостаточно блоков и базовых элементов, вы можете добавить свой HTML-код в редактор кода визуального конструктора. Не забудьте предусмотреть адаптивность блока при создании кода.
После подготовки контента проверьте отображение лендинга или email-письма в различных браузерах и на мобильных устройствах.
Для веб-страниц нужно запустить сценарий и перейти по сформированной ссылке.
Для email можно протестировать в сценарии на шаге Email или запустить сценарий на email-адреса тестировщиков. Некоторые почтовые сервисы самостоятельно изменяют размер шрифтов, и элемент из-за отступов и размера шрифта может перестать входить в размер контейнера. Тогда нужно вернуться к настройке блока и элемента: проверить отступы (могут быть и у блока и у элемента) и шрифт, при необходимости их скорректировать.