Как изменить стандартный шаблон поп-апа

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

Вы можете редактировать их по своему усмотрению: менять текст, загружать новые картинки и так далее. Рассказываем, как изменить любой из стандартных шаблонов поп-апа.

Шаг 1. Откройте нужный список и зайдите в раздел «Сбор подписчиков». Выберите нужную вкладку с поп-апом и посмотрите все доступные шаблоны.

Шаг 2. Выберите нужный шаблон и нажмите на кнопку «Применить шаблон».

Он появится в редакторе ниже — и вы можете изменять его как угодно.

Чтобы редактировать состояние поп-апа после успешной подписки — перейдите во вкладку Success Message.

В редакторе

Выделите курсором заголовок, подзаголовок или другой текст, который нужно изменить — и просто напишите новый.

В коде

Нажмите на кнопку «Источник» на панели инструментов — вам откроется HTML-код формы подписки, где текст выделен белым цветом.

В нём вы можете свободно редактировать текст, выбрав нужную строчку кода.

А после — переключиться обратно (ещё раз кликнуть на «Источник»), чтобы посмотреть результат.

Выделите фоновое изображение в редакторе и перейдите в настройки картинки, нажав на кнопку «Изображение» на панели.

Загрузите новую картинку на сервер во вкладке «Загрузить» (рис. 1).

Рекомендуемая ширина = 800 пикселей.

Затем перейдите во вкладку «Данные об изображении» и удалите значения ширины и высоты (рис. 2)

Готово — в редакторе изменилось фоновое изображение поп-апа.

Шаг 1. Скопируйте эту строчку кода:

.mg button, .mg .mg-p a { background-color: #000000 !important; }

Шаг 2. Откройте HTML-код в «Источнике» и добавьте строчку перед закрывающим тегом </style>.

#000000 = код нового цвета (в примере — чёрный).

Перейдите в визуальный редактор, чтобы посмотреть внесённые изменения. Если всё сделано правильно — цвет кнопки в форме поменяется на заданный.

Если нужно добавить в форму новое поле для сбора данных по любой переменной списка — нужно в селекторе input использовать name = "название переменной".

Использование пользовательских переменных в форме

Например, у вас есть переменная {{shoe_size}} = размер обуви. Чтобы эта переменная заработала в форме — нужно добавить в код следующую конструкцию:

<input type="text" name="shoe_size" placeholder="Введите ваш размер обуви"/>

Тогда в форме появится новое поле:

Во время редактирования поп-апа вы можете полностью изменить выбранный готовый шаблон, используя следующие идентификаторы:

id="mg-mailer-email" — поле для ввода имейла

id="mg-mailer-name" — поле для ввода имени

id="mg-mailer-phone" — поле для ввода телефона

id="mg-mailer-email-button" — кнопка подписки

id="mg-form-error" — текст ошибки при вводе емейла

id="mg-close" — крестик закрытия поп-апа

id="mg-hard-close" — кнопка скрытия поп-апа навсегда (больше не показывать)

{{espLink|safe}} — ссылка на папку «Входящие» почтового ящика

Пример использования идентификаторов:

<div class="mg">
   <img class="mg-bg-image dsktp" src="https://mailganer.com/static/widget/bg/16-dsktp.jpg" width="800" />
   <div id="mg-close"></div>
   <div class="mg-h1">Хотите экономить на покупках?</div>
   <div class="mg-p">Подпишитесь на нашу рассылку и станьте участником супер распродаж, акций и скидок!</div>
   <div class="mg-wrapper-form">
      <form>
         <input id="mg-mailer-email" placeholder="Введите ваш email" />
         <button id="mg-mailer-email-button">ПОДПИСАТЬСЯ</button>
         <div id="mg-form-error"></div>
      </form>
   </div>
   <div class="mg-footer">Вы можете отписаться в любое время</div>
   <div id="mg-hard-close">Спасибо, мне это не интересно</div>
</div>

Мы взяли вот такой готовый шаблон:

И заменили его на такой:

Важно: сохраняйте все изменения!

Не забудьте нажать на кнопку «Сохранить» под окном редактирования поп-апа, чтобы изменения заработали.

В шаге 3 настройте или измените условия показа обновлённой формы, и тоже нажмите на кнопку «Сохранить».