Статьи

Как создать всплывающее окно выхода с плагином Layered Popup для WordPress

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

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

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

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

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

Всегда есть причина каждого всплывающего окна, которое вы активируете.

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

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

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

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

Мы будем использовать плагин Layered Popups для создания всплывающих окон для сайта WordPress.

Первым шагом будет загрузка плагина с Envato Market . Если у вас нет учетной записи, просто перейдите на страницу регистрации и создайте ее. Зайдя на сайт, вы можете приобрести плагин на странице продукта .

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

Теперь войдите в свою учетную запись WordPress. Перейдите в Плагины> Добавить новый и загрузите ZIP-файлы. Затем нажмите « Установить сейчас» и после завершения установки нажмите « Активировать сейчас» . Теперь вы готовы начать создавать свои всплывающие окна.

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

Многослойная панель всплывающих окон

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

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

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

Слоистых всплывающих окон поставляется с более 30 демо-всплывающих окон, чтобы вы начали. Вы можете найти их через Layered Popups > Popups . Чтобы иметь возможность активировать любой, просто нажмите на кнопку +, и ваше всплывающее окно будет запущено.

Демо-версия слоистых всплывающих окон

Остальные всплывающие окна можно найти в подменю « Библиотека всплывающих окон».

Библиотека всплывающих окон Layered Popups

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

В некоторых случаях вы можете просто создать собственное всплывающее окно. К счастью, вы можете сделать это с помощью опции « Создать всплывающее окно» . Чтобы начать, нажмите Создать всплывающее окно .

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

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

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

Если вы хотите, чтобы всплывающее окно имело наложение, выберите и нажмите кнопку «Наложение», а затем заполните остальные сведения о наложении, такие как непрозрачность, цвет и анимация.

Опции всплывающих окон для новых пользователей

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

Каждый элемент всплывающего окна называется слоем, поэтому вы просто нажмете « Добавить слой» и выберите тип содержимого, который вы хотите видеть во всплывающем окне.

Добавить типы диалоговых слоев Layer

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

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

Разработка всплывающих окон

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

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

Параметры элементов формы

Определите элементы формы и сохраните всплывающее окно.

Этот раздел содержит параметры Double Opt-In и Admin Notification

Двойной выбор — дополнительный шаг в процессе подписки, когда пользователь должен подтвердить свой адрес электронной почты. Здесь мы заполним, какое сообщение вы хотите, чтобы ваш пользователь получил после подписки.

Варианты двойного выбора

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

Уведомление администратора позволяет вам указать, хотите ли вы получать отправленные контакты по электронной почте.

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

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

Параметры интеграции, включая ключ API MailChimp

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

Всплывающие окна из кампании

Чтобы создать кампанию, перейдите к A / B Кампании> Создать новую кампанию . Введите название кампании, выберите нужные всплывающие окна в этой конкретной кампании и сохраните изменения.

Создать новую кампанию

Мы настроили всплывающее окно, но до сих пор оно не было активировано на сайте. Чтобы сделать его активным, просто перейдите в Layered Popups> Targeting . Но перед этим вам необходимо знать следующее:

  • Как отображается всплывающее окно — это определяет, какое событие вызовет всплывающее окно. В нашем случае это будет OnExit.
  • Когда отображается всплывающее окно — указывает даты, когда оно будет отображаться.
  • Где отображается всплывающее окно — здесь указывается, где оно будет отображаться. Это может быть на домашней странице, в определенных сообщениях или любом другом месте.

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

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

Настройте цель всплывающего окна

Теперь, когда ваше всплывающее окно активно, вы можете просмотреть, сколько людей видели ваши всплывающие окна, с помощью статистики кампании.

Статистика всплывающих кампаний

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

Пока вы здесь, ознакомьтесь с некоторыми другими всплывающими плагинами, доступными в CodeCanyon.

  • WordPress
    Сравнение лучших выходных всплывающих окон для WordPress
  • Плагины для WordPress
    20+ лучших плагинов для WordPress
    Нона Блэкман