Как открыть всплывающую форму WordPress при нажатии на ссылку или изображение

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

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

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

Запустить всплывающую форму WordPress по клику не так сложно, как вам кажется. В этой статье мы покажем вам, как это сделать.

Что такое всплывающая форма «по клику»?

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

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

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

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

Почему всплывающие формы по клику настолько эффективны?

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

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

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

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

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

Установка и активация OptinMonster

Во-первых, вам нужно будет зарегистрироваться на OptinMonster аккаунт. Вам понадобится учетная запись Pro (или выше). Это даст вам функцию MonsterLinks™, которая позволяет создавать всплывающие окна по клику.

Далее вам нужно установить и активировать плагин OptinMonster на вашем сайте WordPress. Это позволит вам подключить ваш аккаунт OptinMonster к вашему сайту WordPress.

За помощью обратитесь к нашему пошаговому руководству по установке плагина WordPress.

После активации плагина вам нужно будет подключить свой аккаунт. Вы должны автоматически перейти на страницу приветствия. Если нет, просто нажмите на ссылку OptinMonster в вашей приборной панели WordPress.

Нажмите «Подключить учетную запись» и следуйте инструкциям на экране.

Создание первого всплывающего окна по клику

После того как вы подключили свой аккаунт OptinMonster к сайту WordPress, вы можете приступать к созданию всплывающего окна по клику. Нажмите кнопку «Создать новую кампанию» в верхней части экрана:

Вы попадете прямо на сайт OptinMonster.

Тип кампании уже должен быть установлен на Popup. Если ее нет, просто нажмите на Popup, чтобы выбрать ее.

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

Наведите курсор на шаблон и нажмите кнопку «Использовать шаблон».

Теперь вам будет предложено ввести название вашей кампании. Если вы используете OptinMonster на нескольких сайтах, убедитесь, что вы выбрали правильный сайт. При необходимости введите новый веб-сайт. Затем нажмите «Начать создание», чтобы создать всплывающее окно.

OptinMonster автоматически загрузит выбранный вами шаблон.

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

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

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

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

Чтобы добавить ссылку на изображение, нажмите на него и прокрутите вниз до пункта «Добавить ссылку на изображение»?’ с левой стороны.

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

Подключение всплывающего окна к списку адресов электронной почты

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

Нажмите кнопку ‘+ Добавить новую интеграцию’ в левой части экрана.

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

Примечание: Инструкции по интеграции отличаются для каждого сервиса email-маркетинга. Если вы застряли, OptinMonster предлагает список подробных руководств по интеграции электронной почты.

Настройка всплывающего окна на появление при нажатии

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

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

Нажмите на кнопку, чтобы скопировать код MonsterLink™. Он вам понадобится в ближайшее время.

Запуск всплывающего окна при нажатии

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

После этого нажмите кнопку «Сохранить» в верхней части экрана.

Далее вам нужно будет запустить кампанию на вашем сайте WordPress.

Перейдите в панель управления WordPress и нажмите на ссылку OptinMonster. Нажмите кнопку Обновить кампании.

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

Добавление ссылки на ваш сайт

Теперь вам нужно добавить специальный MonsterLink™ на ваш сайт. Если вы не скопировали это поле ранее, вы можете получить его, вернувшись к настройкам Display Rules для вашей кампании на сайте MonsterInsights.

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

MonsterLink — это HTML-код, поэтому его нужно вставить в пользовательский HTML-блок.

Нажмите кнопку (+), чтобы добавить новый блок. Блок Custom HTML находится в разделе Formatting, или вы можете найти его с помощью строки поиска. Нажмите на него, чтобы создать блок.

Теперь скопируйте MonsterLink в этот блок. Это должно выглядеть примерно так:

Вы можете изменить слова ‘Click Me!’ к любому тексту, который вы хотите использовать для вашей ссылки. Мы будем использовать «Нажмите, чтобы получить БОНУС 10 советов»!’

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

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

Совет: Использование MonsterLinks не ограничивается только текстовыми ссылками. Вы также можете использовать MonsterLink с кнопками призыва к действию, изображениями, баннерами или навигационными меню на вашем сайте.

Мы надеемся, что это руководство помогло вам узнать, как вызвать всплывающую форму WordPress по щелчку мыши. Вы также можете ознакомиться с нашим руководством о том, как ускорить ваш сайт WordPress, и с нашим руководством по SEO для WordPress.

Источник: www.wpbeginner.com