Инструкция
Как изменить стандартный шаблон поп-апа
Кастомизация формы для сбора подписчиков и увеличение её эффективности
Поп-ап — это всплывающая форма, один из способов сбора подписчиков. В платформе Mailganer есть более 20 уже готовых шаблонов поп-апов для решения разных маркетинговых задач.
Вы можете редактировать их по своему усмотрению: менять текст, загружать новые картинки и так далее. Рассказываем, как изменить любой из стандартных шаблонов поп-апа.
Как выбрать шаблон
Шаг 1. Откройте нужный список и зайдите в раздел «Сбор подписчиков». Выберите нужную вкладку с поп-апом и посмотрите все доступные шаблоны.
Шаг 2. Выберите нужный шаблон и нажмите на кнопку «Применить шаблон».
Он появится в редакторе ниже — и вы можете изменять его как угодно.
Чтобы редактировать состояние поп-апа после успешной подписки — перейдите во вкладку Success Message.
Как поменять текст
В редакторе
Выделите курсором заголовок, подзаголовок или другой текст, который нужно изменить — и просто напишите новый.
Выделите курсором заголовок, подзаголовок или другой текст, который нужно изменить — и просто напишите новый.
В коде
Нажмите на кнопку «Источник» на панели инструментов — вам откроется HTML-код формы подписки, где текст выделен белым цветом.
Нажмите на кнопку «Источник» на панели инструментов — вам откроется HTML-код формы подписки, где текст выделен белым цветом.
В нём вы можете свободно редактировать текст, выбрав нужную строчку кода.
А после — переключиться обратно (ещё раз кликнуть на «Источник»), чтобы посмотреть результат.
Как поменять изображение
Выделите фоновое изображение в редакторе и перейдите в настройки картинки, нажав на кнопку «Изображение» на панели.
Загрузите новую картинку на сервер во вкладке «Загрузить» (рис. 1).
Рекомендуемая ширина = 800 пикселей.
Затем перейдите во вкладку «Данные об изображении» и удалите значения ширины и высоты (рис. 2)
Рекомендуемая ширина = 800 пикселей.
Затем перейдите во вкладку «Данные об изображении» и удалите значения ширины и высоты (рис. 2)
Готово — в редакторе изменилось фоновое изображение поп-апа.
Как поменять цвет кнопки
Шаг 1. Скопируйте эту строчку кода:
.mg button, .mg .mg-p a { background-color: #000000 !important; }
Шаг 2. Откройте HTML-код в «Источнике» и добавьте строчку перед закрывающим тегом </style>.
#000000 = код нового цвета (в примере — чёрный).
#000000 = код нового цвета (в примере — чёрный).
Перейдите в визуальный редактор, чтобы посмотреть внесённые изменения. Если всё сделано правильно — цвет кнопки в форме поменяется на заданный.
Добавление нового поля ввода и использование пользовательских переменных
Если нужно добавить в форму новое поле для сбора данных по любой переменной списка — нужно в селекторе input использовать name = "название переменной".
Использование пользовательских переменных в форме
Например, у вас есть переменная {{shoe_size}} = размер обуви. Чтобы эта переменная заработала в форме — нужно добавить в код следующую конструкцию:
<input type="text" name="shoe_size" placeholder="Введите ваш размер обуви"/>
Тогда в форме появится новое поле:
Использование пользовательских переменных в форме
Например, у вас есть переменная {{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 настройте или измените условия показа обновлённой формы, и тоже нажмите на кнопку «Сохранить».
Не забудьте нажать на кнопку «Сохранить» под окном редактирования поп-апа, чтобы изменения заработали.
В шаге 3 настройте или измените условия показа обновлённой формы, и тоже нажмите на кнопку «Сохранить».
Есть вопрос по работе с формами подписки? Напишите в поддержку support@mailganer.ru