БЛОГ 2410

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

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

Предлагаем обсудить, чем мы можем вам помочь. Забронируйте 15-минутную консультацию.

Поделиться статьей

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

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

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

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

Добавление всплывающей формы на ваш сайт
Добавление всплывающей формы на ваш сайт Изображение с сайта wpbeginner.com

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

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

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

Пример всплывающей формы по щелчку
Пример всплывающей формы по щелчку Изображение с сайта wpbeginner.com

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

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

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

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

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

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

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

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

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

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

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

Для получения справки см. Наше пошаговое руководство по установке плагина WordPress.

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

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

Подключите свою учетную запись OptinMonster к своему сайту WordPress
Подключите свою учетную запись OptinMonster к своему сайту WordPress Изображение с сайта wpbeginner.com

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

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

Создайте новую кампанию в OptinMonster
Создайте новую кампанию в OptinMonster Изображение с сайта wpbeginner.com

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

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

Оставьте Всплывающее окно выбранным для типа вашей кампании.
Оставьте Всплывающее окно выбранным для типа вашей кампании. Изображение с сайта wpbeginner.com

Затем выберите шаблон кампании. Вы сможете изменить его внешний вид позже. Мы собираемся использовать базовый шаблон для этого урока.

Выбор базового шаблона для всплывающего окна при нажатии
Выбор базового шаблона для всплывающего окна при нажатии Изображение с сайта wpbeginner.com

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

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

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

Дайте своей кампании название и нажмите, чтобы начать строительство
Дайте своей кампании название и нажмите, чтобы начать строительство Изображение с сайта wpbeginner.com

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

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

Редактирование заголовка всплывающего окна в OptinMonster
Редактирование заголовка всплывающего окна в OptinMonster Изображение с сайта wpbeginner.com

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

Удаление поля имени из всплывающего окна
Удаление поля имени из всплывающего окна Изображение с сайта wpbeginner.com

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

Представление Успех, которое посетители увидят после ввода адреса электронной почты.
Представление Успех, которое посетители увидят после ввода адреса электронной почты. Изображение с сайта wpbeginner.com

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

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

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

Добавление ссылки на всплывающее изображение в OptinMonster
Добавление ссылки на всплывающее изображение в OptinMonster Изображение с сайта wpbeginner.com

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

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

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

Добавление новой интеграции электронной почты в OptinMonster
Добавление новой интеграции электронной почты в OptinMonster Изображение с сайта wpbeginner.com

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

Выберите поставщика услуг электронной почты из раскрывающегося списка.
Выберите поставщика услуг электронной почты из раскрывающегося списка. Изображение с сайта wpbeginner.com

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

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

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

Правила отображения по умолчанию в OptinMonster
Правила отображения по умолчанию в OptinMonster Изображение с сайта wpbeginner.com

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

Переключение правил отображения, чтобы ваше всплывающее окно использовало функцию MonsterLink
Переключение правил отображения, чтобы ваше всплывающее окно использовало функцию MonsterLink Изображение с сайта wpbeginner.com

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

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

Теперь перейдите на вкладку «Опубликовать» и установите для кампании статус «Активная». Вы также можете проверить или изменить веб-сайт, к которому привязана ваша кампания.

Как изменить статус вашей кампании onclick popup
Как изменить статус вашей кампании onclick popup Изображение с сайта wpbeginner.com

Как только вы это сделаете, нажмите кнопку Сохранить вверху экрана.

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

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

Обновите список кампаний на панели инструментов OptinMonster
Обновите список кампаний на панели инструментов OptinMonster Изображение с сайта wpbeginner.com

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

Список кампаний OptinMonster в панели управления WordPress
Список кампаний OptinMonster в панели управления WordPress Изображение с сайта wpbeginner.com

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

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

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

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

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

Добавление пользовательского блока HTML в WordPress
Добавление пользовательского блока HTML в WordPress Изображение с сайта wpbeginner.com

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

MonsterLink в блоке HTML
MonsterLink в блоке HTML Изображение с сайта wpbeginner.com

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

MonsterLink с настраиваемым текстом
MonsterLink с настраиваемым текстом Изображение с сайта wpbeginner.com

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

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

Всплывающая форма по щелчку в действии
Всплывающая форма по щелчку в действии Изображение с сайта wpbeginner.com

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

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

Свяжитесь с нами.

Узнайте, чем мы можем быть для вас полезны.

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

Агентство веб разработки.

Услуги программирования и веб разработки по фиксированной цене. Специализация: WordPress, разработка B2B решений и создание кастомных скриптов.

WordPress

Разработка шаблонов, плагинов, интернет магазинов на WooCommerce, создание сайтов

Подробнее

B2B решения

CRM, ERP, внутренние системы, автоматизация, калькуляторы, SaaS и индивидуальные решения

Подробнее

Программирование

Разработка кастомных скриптов, API, интеграции, Zapier, Integromat, автоматизация

Подробнее

Подписка

Безлимитные услуги графического дизайна и веб разработки по фиксированной цене

Подробнее