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

/

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

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

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

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

Добавление всплывающей формы на ваш сайт

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

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

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

Пример всплывающей формы по щелчку

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подключите свою учетную запись OptinMonster к своему сайту WordPress

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

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

Создайте новую кампанию в OptinMonster

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

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

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

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

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

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

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

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

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

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

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

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

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

Удаление поля имени из всплывающего окна

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

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

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

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

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

Добавление ссылки на всплывающее изображение в OptinMonster

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

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

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

Добавление новой интеграции электронной почты в OptinMonster

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

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

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

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

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

Правила отображения по умолчанию в OptinMonster

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

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

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

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

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

Как изменить статус вашей кампании onclick popup

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

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

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

Обновите список кампаний на панели инструментов OptinMonster

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

Список кампаний OptinMonster в панели управления WordPress

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

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

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

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

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

Добавление пользовательского блока HTML в WordPress

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

MonsterLink в блоке HTML

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

MonsterLink с настраиваемым текстом

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

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

Всплывающая форма по щелчку в действии

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

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как использовать динамическое заполнение полей в WordPress для автоматического заполнения форм

Вы хотите использовать динамическое заполнение полей в WordPress для автоматического заполнения форм на вашем сайте? Динамическое заполнение полей

Как разрешить участникам редактировать свои сообщения WordPress после одобрения

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

Как встроить карты Bing в WordPress

Вы хотите встроить Bing Maps на свой сайт WordPress? Если вы ищете альтернативу Google Maps, то Bing Maps - правильный кандидат для вас. Подобно Google Maps, вы можете использовать

Как добавить бесплатный чат в WordPress (простой способ)

Вы ищете решение для добавления бесплатного живого чата в WordPress? Добавление функции живого чата на ваш сайт позволяет вам взаимодействовать с