Делаем всплывающие окна с помощью Popup Maker на WordPress

Делаем всплывающие окна с помощью Popup Maker на WordPress

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

Делаем всплывающие окна с помощью Popup Maker на WordPressВ нашем примере будем создавать с помощью плагина Popup Maker модальное окно с  видеороликом. Окно должно открываться при нажатии на кнопку, однако, этот плагин позволяет легко настроить и автоматическое появление окна.

Установите и активируйте плагин Popup Maker. После активации плагина перейдите во вкладку Popup Maker -> Add New.

В открывшейся странице мы будем создавать модальное окно. Давайте пройдемся по пунктам настроек:

Делаем всплывающие окна с помощью Popup Maker на WordPressПервое поле – название всплывающего окна – оно отображается только в плагине во вкладке Все окна. Ниже расположено поле заголовка – введенное значение отобразится в верхней части всплывалки.

Далее в основном поле вводим содержимое окна – текст, изображения и т.п. В общем, делаем наполнение по желанию. В нашем случае это ссылка с Youtube в виде <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nKJieUJt_8g” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>.

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

В разделе Triggers мы настраиваем триггеры, запускающие открытие нашего окна – по нажатию ссылки/кнопки или же через определенное время после загрузки страницы. Также в этом разделе с помощью cookies можно настроить, как часто будет показываться окно. Например, если вы настроили запуск всплывалки через 2 с после загрузки страницы, окно будет появляться на каждой странице, и путешествовать по сайту станет невозможно. Чтобы это предотвратить используют cookies.
Делаем всплывающие окна с помощью Popup Maker на WordPressВ разделе Targeting можно настроить условия показа модального окна (на главной странице или на странице результатов поиска, или на 404, или же на всем сайте). Отключить при необходимости показ на мобильных устройствах или планшетах.

Делаем всплывающие окна с помощью Popup Maker на WordPressВ разделе Отображение настраивается собственно внешний вид окна. Здесь можно выбрать тему оформления. Более того, каждую из тем можно откорректировать на свой вкус без знаний css (можно настроить фон модального окна, размеры и цвет шрифтов, тени, отступы). Также в разделе выбирается нужный размер окошка, включая минимальные и максимальные значения ширины окна. Значение «Auto» — автоматически подбирает размер модального окна. В случае публикации видеоролика это лучший вариант. Выбирается тип и скорость анимации при открытии модалки. Также очень гибко настраивается расположение окна на экране.

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

Когда сделали все необходимые настройки, кликаем на кнопку «Опубликовать». Таким образом мы создали всплывающее (модальное) окно.

 


 

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

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

Для того чтобы узнать class-идентификатор вашего модального окна переходим в Popup Maker -> All Popups.

На открывшейся странице мы видим два класса, которые являются идентификаторами созданного нами модального окна, в нашем примере это popmake-106 и popmake-primer-vsplyivayushhego-okna. Использовать можно любой из них.

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

В примере будем использовать класс popmake-106.

Открытие модального окна при клике по ссылке:

<a href=”#” class=”popmake-106″>Открыть всплывающее окно</a>

Открытие окна при нажатии кнопки:

<button class=”popmake-106″>Открыть всплывающее окно</button>

Открытие окна при нажатии на картинку:

<img src=”popup-maker-icon.png” class=”popmake-106″ />

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

Приблизительно такое всплывающее окно в результате у нас отобразится:
Делаем всплывающие окна с помощью Popup Maker на WordPress

Поделиться

Добавить комментарий