Как бесплатно и быстро добавить всплывающее окно на сайты WordPress

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

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

Почему вы должны использовать всплывающее окно на бизнес-сайте?

На изображении ниже показан пример всплывающего окна бизнес-сайта. Выглядит здорово, не правда ли?

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

• Продвигайте важную информацию, продажи и маркетинговые кампании,…
• Призыв к действию, увеличивайте конверсию
• Привлечь

Добавьте всплывающее окно в WordPress с помощью плагина Popup Builder

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

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

По завершении выполните следующие действия.

Шаг 1. Выберите тип всплывающего окна

Теперь на панели инструментов появится подменю Popup Builder . Перейдите туда, нажмите « Добавить новости» и выберите один из 4 типов всплывающих окон.

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

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

Шаг 2. Добавьте контент во всплывающее окно

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

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

Добавить контент во всплывающие окна Facebook

В интерфейсе для создания всплывающих окон Facebook вам необходимо заполнить эту информацию:

1. Сообщение, которое появляется во всплывающем окне. Вы должны использовать предложение с призывом к действию, чтобы побудить читателей к взаимодействию. Также стоит добавить изображения, баннеры, чтобы было красивее.
2. Вставьте URL-адрес Facebook.
3. Выбирайте макет для всплывающего окна по прихоти. В принципе, эти раскладки не так уж и отличаются. Таким образом, вы можете опробовать их и выбрать свой любимый.
4. Щелкните здесь, чтобы скрыть кнопку «Поделиться», если хотите.

И вот что у меня есть:

Добавить контент во всплывающие окна с изображениями

Здесь вам просто нужно загрузить изображение или вставить ссылку на изображение. Этот плагин поддерживает JPG, PNG и GIF.

Это красивый баннер, который я сделал самостоятельно для кампании «Черная пятница» на моем веб-сайте:

Добавить контент во всплывающие окна HTML

Добавление содержимого во всплывающее окно HTML аналогично написанию сообщения в редакторе WordPress Gutenberg. Вы можете вставлять изображения, видео, таблицы, кнопки, цитаты… или любой другой контент, который поддерживает редактор WordPress. Интерфейс похож на редактор Гутенберга, поэтому он довольно дружелюбный и родной.

И это мое всплывающее окно HTML на передней панели:

Добавить контент во всплывающие окна подписки

Здесь у нас есть довольно много контента, который нужно заполнить и настроить для вашей формы подписки. Однако больше всего вам нужно обратить внимание на поля формы, такие как Имя , Фамилия , Электронная почта , и настроить их Заполнитель и Обязательное поле .

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

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

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

Перейдите в Конструктор всплывающих окон> Все подписчики, чтобы управлять подписчиками.

Вы даже можете отправлять электронные письма подписчикам на вкладке « Рассылка новостей».

После добавления к нему содержимого прокрутите вниз. Вы увидите много других параметров настройки. Давайте рассмотрим каждый вариант в шагах 4, 5, 6.

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

Настройте расположение дисплея

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

Вы можете выбрать « Везде», чтобы отображать его на каждой странице, в публикации, в тегах, настраивать или отображать в определенном месте по вашему желанию. Вы также можете щелкнуть всплывающую подсказку (?), Чтобы получить более подробную информацию.

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

Настройте условия отображения

В разделе « События всплывающих окон » выберите время появления всплывающего окна (когда веб-сайт загружается в течение нескольких секунд, когда пользователи щелкают где-то и т. Д.). Этот плагин поддерживает следующие условия отображения:

• При загрузке : всплывающее окно автоматически появится через несколько секунд (вы можете добавить количество секунд на вкладке « Задержка ») с момента завершения загрузки сайта.

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

• При щелчке : аналогично разделу « Установить с помощью класса CSS », но вам не нужно использовать идентификатор всплывающего окна, чтобы установить «кнопку», чтобы включить его.

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

Если вы выберете Custom CSS , заполните созданный вами класс в разделе Custom Class .

После этого добавьте класс всплывающего окна в CSS нужного компонента.

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

Это результат на передней панели:

• Щелчок при наведении: при наведении курсора на компонент появится всплывающее окно. Вы можете сделать то же самое, что и в разделе « По щелчку ».

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

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

Более того, в разделе « Размеры » отрегулируйте его ширину и длину, выбрав « Пользовательский» режим или « Адаптивный», чтобы размер автоматически соответствовал его содержанию.

Шаг 5. Настройте другие дополнительные параметры

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

Например, вы можете выбрать способ закрытия всплывающего окна в разделе « Параметры закрытия». Есть много способов закрыть его, например, нажать Esc или добавить кнопку закрытия… Выберите один или несколько, на ваше усмотрение.

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

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

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

Это плавающая кнопка на веб-сайте:

Или вы можете отключить его, нажав Отключить .

Наконец, нажмите « Опубликовать», чтобы сделать это.

Итак, вы завершили свое всплывающее окно после 6 шагов от базовых до расширенных настроек. Вы хорошо поработали!

Последние слова

Как видите, добавить всплывающее окно в WordPress не так уж сложно. Вам просто нужно немного набраться терпения при настройке дисплея, вот и вся тяжелая работа!

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

Удачи!