Skip to content

Оформление

Предустановленный дизайн

Чтобы настроить дизайн попапа, нужно зайти в его настройки и выбрать вкладку "Шаблон". Здесь вы получаете возможность отредактировать внешний вид попапа по заранее предустановленным параметрам.

Вкладка шаблон

Экран настройки состоит из двух частей:

  1. Слева — Отображение внешнего вида попапа
  2. Справа — Две вкладки: "Содержание" и "Оформление"

Вкладка "Содержание"

Обратите внимание

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

НазваниеОписание
Основные
НазваниеНазвание попапа внутри системы NCE
Расположение попапа5 вариантов расположения попапа на экране
ПромокодыВыбор промокодов из раздела "Рассылки/промокоды"
Событие вызоваВыбор из списка доступных событий, иницирующих вызов попапа
Экран отображенияНазвание экрана, на котором необходимо показывать попап. Оно так же должно быть в API-запросе
Дата началаЗадать дату начала действия попапа
Дата окончанияЗадать дату начала действия попапа
Лицевая сторона
ЗаголовокВключает/выключает заголовок попапа
КартинкаВключает/выключает возможность добавления картинки
Основной текстВключает/выключает основной текст
Текст подтвержденияВключает/выключает текст подтверждения после подписки
Задняя сторона
Уведомление об успешной подпискеВключает/выключает уведомление об успешной подписке
Отображение последних 3 товаровВключает/выключает отображение 3 последних просмотренных товаров на задней стороне

Срок действия попапа

Настройки Дата начала и Дата окончания позволяют задать период действия попапа. По завершении этого периода, он больше не будет показываться клиентам.

Таким образом можно избежать демонстрации неактуальных предложений. Заданные в настройках даты сравниваются с текущей.

  • Если заданная дата пока не наступила, попап не будет показан клиенту
  • Если установленная дата окончания уже прошла, попап также не будет запущен или автоматически выключится
  • В остальных случаях попап будет запускаться, даже если задать только один из параметров: начало или окончание

Редактирование текста

Чтобы отредактировать текст попапа, достаточно по нему кликнуть и появится окно редактора.

Редактор текста

Возможности редактора:

КнопкаОписание
BЖирный текст
IКурсивный текст
UПодчеркнутый текст
#Вставка ссылки
LВыравнивание текста по левому краю
CВыравнивание текста по центру
RВыравнивание текста по правому краю

Вкладка "Оформление"

Обратите внимание

Данная вкладка нужна для дополнительных настроек (цвет текста, размер шрифта и т.д.)

Вкладка оформление

Обратите внимание

В "Галерее" две предустановленные темы — Светлая и Темная.

Они не редактируются.

Редактируемые темы

Созданные и настроенные пользователем темы показаны в разделе "Мои темы".

Их можно редактировать после создания.

Создание новой темы

Шаг 1

Выбираем в "Галерее" одну из предустановленных тем — Светлую или Темную.

Шаг 2

Нажимаем кнопку "Редактировать" справа от названия темы.

Шаг 3

В появившемся окне задаем имя новой теме.

Шаг 4

После создания новой темы, перед вами откроется редактор темы.

Редактирование темы

Редактирование темы

Обратите внимание

Редактор темы состоит из двух редакторов:

Базовый редактор

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

CSS редактор

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

Важный момент

Переключение между Базовым и CSS редактором ведёт к тому, что будут утеряны настройки в том редакторе, в котором вы изначально находились.

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

Если нужно две темы, созданных отдельно в Базовом и CSS редакторах, то для этого нужно создать две разные темы и править каждую в своём редакторе.

В рамках данного руководства будет разбираться работа только в "Базовом редакторе".

Базовый редактор

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

Список доступных настроек.

НазваниеОписание
Название темыНа ваше усмотрение
Цвет текстаЗадаётся цвет текста заголовка и описания под ним
Размер заголовкаЗадается размер текста в заголовке попапа
Цвет заголовкаЗадается цвет заголовка блока
Размер шрифтаЗадается размер шрифта под заголовком
Цвет фонаЗадается цвет фона попапа
Выравнивание текстаПредусмотрено выравнивание по левому краю и по центру
Основной цветЗадается цвет кнопки "Подписаться" и чек-бокса
Размер текста в формеЗадается размер текста на кнопке "Подписаться" и в поле ввода email

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

Обратите внимание

Чтобы созданная тема применилась к попапу, необходимо во вкладке "Оформление" выбрать нужную тему и нажать кнопку "Сохранить".

Собственный дизайн

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

Для этого нужно зайти в настройки попапа, открыть вкладку "Шаблон" и в самом низу нажать кнопку "Открыть в HTML".

С левой стороны будет текстовый редактор, с правой — перечень рекомендаций по верстке.

html редактор