# Оформление
# Предустановленный дизайн
Чтобы настроить дизайн попапа, нужно зайти в его настройки и выбрать вкладку "Шаблон". Здесь вы получаете возможность отредактировать внешний вид попапа по заранее предустановленным параметрам.
Экран настройки состоит из двух частей:
- Слева — Отображение внешнего вида попапа
- Справа — Две вкладки: "Содержание" и "Оформление"
# Вкладка "Содержание"
Обратите внимание
Настройки применяются сразу же, поэтому вы будете видеть, что включили/выключили на превью с левой стороны
| Название | Описание |
|---|---|
| Основные | |
| Название | Название попапа внутри системы REES46 |
| Расположение попапа | 5 вариантов расположения попапа на экране |
| Промокоды | Выбор промокодов из раздела "Рассылки/промокоды" |
| Событие вызова | Выбор из списка доступных событий, иницирующих вызов попапа |
| Экран отображения | Название экрана, на котором необходимо показывать попап. Оно так же должно быть в API-запросе |
| Дата начала | Задать дату начала действия попапа |
| Дата окончания | Задать дату начала действия попапа |
| Лицевая сторона | |
| Заголовок | Включает/выключает заголовок попапа |
| Картинка | Включает/выключает возможность добавления картинки |
| Основной текст | Включает/выключает основной текст |
| Текст подтверждения | Включает/выключает текст подтверждения после подписки |
| Задняя сторона | |
| Уведомление об успешной подписке | Включает/выключает уведомление об успешной подписке |
| Отображение последних 3 товаров | Включает/выключает отображение 3 последних просмотренных товаров на задней стороне |
# Срок действия попапа
Настройки Дата начала и Дата окончания позволяют задать период действия попапа. По завершении этого периода, он больше не будет показываться клиентам.
Таким образом можно избежать демонстрации неактуальных предложений. Заданные в настройках даты сравниваются с текущей.
- Если заданная дата пока не наступила, попап не будет показан клиенту
- Если установленная дата окончания уже прошла, попап также не будет запущен или автоматически выключится
- В остальных случаях попап будет запускаться, даже если задать только один из параметров: начало или окончание
# Редактирование текста
Чтобы отредактировать текст попапа, достаточно по нему кликнуть и появится окно редактора.
Возможности редактора:
| Кнопка | Описание |
|---|---|
| B | Жирный текст |
| I | Курсивный текст |
| U | Подчеркнутый текст |
| # | Вставка ссылки |
| L | Выравнивание текста по левому краю |
| C | Выравнивание текста по центру |
| R | Выравнивание текста по правому краю |
# Вкладка "Оформление"
Обратите внимание
Данная вкладка нужна для дополнительных настроек (цвет текста, размер шрифта и т.д.)
Обратите внимание
В "Галерее" две предустановленные темы — Светлая и Темная.
Они не редактируются.
Редактируемые темы
Созданные и настроенные пользователем темы показаны в разделе "Мои темы".
Их можно редактировать после создания.
# Создание новой темы
Шаг 1
Выбираем в "Галерее" одну из предустановленных тем — Светлую или Темную.
Шаг 2
Нажимаем кнопку "Редактировать" справа от названия темы.
Шаг 3
В появившемся окне задаем имя новой теме.
Шаг 4
После создания новой темы, перед вами откроется редактор темы.
# Редактирование темы
Обратите внимание
Редактор темы состоит из двух редакторов:
Базовый редактор
В нем есть только предустановленные настройки.
CSS редактор
Предназначен для пользователей, разбирающихся в верстке и предоставляет полную свободу по настройке внешнего вида темы.
Важный момент
Переключение между Базовым и CSS редактором ведёт к тому, что будут утеряны настройки в том редакторе, в котором вы изначально находились.
Поэтому при редактировании темы нужно выбирать лишь один редактор и не переключаться на другой.
Если нужно две темы, созданных отдельно в Базовом и CSS редакторах, то для этого нужно создать две разные темы и править каждую в своём редакторе.
В рамках данного руководства будет разбираться работа только в "Базовом редакторе".
# Базовый редактор
При редактировании темы все производимые изменения сразу же отображаются на превью с левой стороны.
Список доступных настроек.
| Название | Описание |
|---|---|
| Название темы | На ваше усмотрение |
| Цвет текста | Задаётся цвет текста заголовка и описания под ним |
| Размер заголовка | Задается размер текста в заголовке попапа |
| Цвет заголовка | Задается цвет заголовка блока |
| Размер шрифта | Задается размер шрифта под заголовком |
| Цвет фона | Задается цвет фона попапа |
| Выравнивание текста | Предусмотрено выравнивание по левому краю и по центру |
| Основной цвет | Задается цвет кнопки "Подписаться" и чек-бокса |
| Размер текста в форме | Задается размер текста на кнопке "Подписаться" и в поле ввода email |
После того, как все настройки произведены, вы можете сохранить тему, сбросить до "стандартного шаблона", либо удалить, в случае ненадобности.
Обратите внимание
Чтобы созданная тема применилась к попапу, необходимо во вкладке "Оформление" выбрать нужную тему и нажать кнопку "Сохранить".
# Собственный дизайн
Если возможности базового редактора не позволяют сделать подходящий под стиль сайта попап, предоставляется возможность сверстать собственный дизайн под ключ.
Для этого нужно зайти в настройки попапа, открыть вкладку "Шаблон" и в самом низу нажать кнопку "Открыть в HTML".
С левой стороны будет текстовый редактор, с правой — перечень рекомендаций по верстке.
