poptimizer Docs

Темы оформления

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

Зачем нужны темы

Без тем приходится настраивать стили каждого элемента вручную: цвет заголовка, цвет кнопки, стиль полей ввода. С темами вы:
  • Экономите время — стили настраиваются один раз
  • Поддерживаете единый стиль — все попапы выглядят согласованно
  • Быстро меняете дизайн — обновили тему, изменились все попапы
  • Соответствуете бренду — фирменные цвета везде одинаковые

Как это работает

1
Создать тему
Выберите пресет и цвета
2
Настроить стили
Шрифты, кнопки, поля
3
Выбрать в попапе
В настройках редактора
4
Готово!
Стили применены везде
  1. Вы создаёте тему и настраиваете её под свой бренд
  2. В редакторе попапа выбираете тему
  3. Заголовки, тексты, кнопки и формы автоматически получают стили из темы
  4. При желании отдельные элементы можно настроить вручную

Как создать тему

  1. Откройте Темы в боковом меню (иконка палитры)
  2. Нажмите «Создать тему»
Страница тем Скриншот: Страница «Темы» с кнопкой создания новой темы

Шаг 1: Выберите основу

Начните с готового пресета:
  • Светлая — классическая светлая тема с хорошей читаемостью
  • Тёмная — современная тёмная тема для стильного вида
  • Брендовая — нейтральная база с акцентом на ваш фирменный цвет
Выбор пресета темы Скриншот: Шаг 1 — три карточки с пресетами тем и превью каждого

Шаг 2: Основной цвет

Выберите цвет вашего бренда. Он будет использоваться для кнопок и акцентов:
  • Выберите из готовых цветов
  • Или укажите точный цвет через палитру
Выбор основного цвета Скриншот: Шаг 2 — палитра цветов и превью темы справа

Шаг 3: Название

Дайте теме понятное название: «Корпоративная», «Летняя акция», «Тёмная для лендинга».
Название темы Скриншот: Шаг 3 — поле ввода названия и финальное превью
Нажмите «Создать тему» — готово!

Как применить тему к попапу

  1. Откройте попап в редакторе
  2. Кликните на пустую область (не на компонент), чтобы открыть настройки попапа
  3. Найдите поле «Тема» в панели справа
  4. Выберите нужную тему из списка
Выбор темы в редакторе Скриншот: Панель настроек попапа с полем «Тема» и списком доступных тем
После выбора все элементы попапа получат стили из темы:
  • Заголовки и тексты — цвет и шрифт
  • Кнопки — цвет, скругление, тень
  • Поля ввода — стиль рамки, фон, цвет текста

Что настраивается в теме

Цвета

Цвет
Где используется
🎨Основной
Кнопки, акценты, ссылки
🔮Вторичный
Дополнительные элементы
📝Текст
Все тексты по умолчанию
🖼️Фон
Фон попапа (если выбран «Из темы»)
🔲Рамка
Границы полей ввода

Типографика

Для каждого типа текста настраивается: цвет, размер шрифта, насыщенность (жирность) и межстрочный интервал.
Заголовок (H1)32px
Главный заголовок попапа
Подзаголовок (H2)24px
Второстепенные заголовки
Текст (P)16px
Основной текст, описания
Мелкий текст14px
Подписи, дополнительная информация

Стиль кнопок

  • Скругление углов
  • Цвет фона и текста
  • Толщина и цвет рамки
  • Тень (нет, маленькая, средняя)

Стиль полей ввода

  • Скругление углов
  • Цвет фона и рамки
  • Цвет текста, подписей и плейсхолдеров

Общие настройки

  • Скругление — базовое скругление для всех элементов
  • Отступы — базовый размер отступов

Тема или ручные настройки

Каждый компонент в редакторе имеет переключатель «Оформление»:
  • Из темы (по умолчанию) — компонент использует стили из выбранной темы
  • Кастомное — показываются поля для ручной настройки
Переключатель оформления Скриншот: Настройки компонента с переключателем «Из темы» / «Кастомное»
Это удобно, когда нужно:
  • Выделить один заголовок другим цветом
  • Сделать особую кнопку с нестандартным дизайном
  • Настроить конкретное поле иначе, чем остальные

Библиотека тем

Все созданные темы хранятся в разделе Темы. Здесь можно:
  • Редактировать — изменить настройки существующей темы
  • Дублировать — создать копию для экспериментов
  • Удалить — убрать ненужную тему
Библиотека тем Скриншот: Страница со списком тем в виде карточек

Доступность

Темы доступны на тарифах Pro и Business

Примеры использования

Бренд-бук

Создайте тему с фирменными цветами компании:
  • Основной цвет — цвет логотипа
  • Шрифт — фирменный шрифт
  • Скругление — в стиле дизайн-системы
Все попапы автоматически соответствуют гайдлайнам.

Сезонные акции

Создайте отдельные темы для разных периодов:
  • «Чёрная пятница» — тёмная тема с яркими акцентами
  • «Новый год» — красно-зелёная палитра
  • «Летняя распродажа» — яркие солнечные цвета
Переключайте тему в попапах по сезону.

A/B тестирование дизайна

Создайте две темы с разными стилями кнопок:
  • Тема A — яркие кнопки с тенью
  • Тема B — минималистичные кнопки без тени
Сравните конверсию и выберите лучший вариант.

Несколько брендов

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

Часто задаваемые вопросы

Если я изменю тему, изменятся ли существующие попапы?
Да! Все попапы, использующие эту тему, автоматически получат новые стили. Это и преимущество (быстрое обновление), и повод быть внимательным.
Можно ли использовать разные темы для разных попапов?
Да. Каждый попап может использовать свою тему или работать без темы вообще.
Что будет, если удалить тему?
Попапы, использовавшие эту тему, потеряют привязку. Компоненты с настройкой «Из темы» будут использовать стили по умолчанию.
Можно ли использовать свой шрифт?
Сейчас доступен шрифт Inter. Поддержка кастомных шрифтов планируется в будущих обновлениях.
Следующие шаги: