Home -> Уроки WordPress -> Как в WordPress создать модальное (всплывающее) окно

Как в WordPress создать модальное (всплывающее) окно

Как в WordPress создать модальное (всплывающее) окно

Здравствуйте, друзья! Предлагаю поговорить о создании в WordPress модальных окон. Всплывающие (модальные) окна ощутимо расширяют возможности сайта. У вас есть сообщение или объявление, которое должен увидеть каждый посетитель вебресурса? Нужно сделать заметной проводимую акцию? Хотите сделать всплывающую форму регистрации на сайте или форму расшаривания контента в социальных сетях? Создайте модальное окно!

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

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

Алгоритм создания в WordPress модальных окон

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

  1. Установите плагин Popup Maker. Активируйте его. Напоминаю: устанавливать плагины мы учились в этом уроке.Как в WordPress создать модальное (всплывающее) окно
  2. Найдите в боковом меню слева админпанели раздел Popup Maker и перейдите в его подраздел Add Popup.Как в WordPress создать модальное (всплывающее) окно
  3. Открылся редактор модальных окон. Впишите название окна в поле вверху страницы (название будет отображаться только в админпанели – пользователи его не увидят).
  4. Придумайте заголовок окна (будет виден пользователям) и впишите его в поле над кнопкой Добавить медиафайл.
  5. В блоке Conditions выберите в выпадающем меню страницами (категории), на которых будет появляться окно. Если плагин должен работать на всех страницах сайта, выберите  Формат:All.
  6. Добавьте в большое поле под панелью инструментов текст, изображения, видео или аудио – любой контент, который будет показываться во всплывающем окне. В рассматриваемом примере я добавил код видео с YouTube (добавление видео на сайт WordPress мы изучали в этом уроке).Как в WordPress создать модальное (всплывающее) окно
  7. В блоке Triggers находятся настройки ручного или автоматического открытия (самоактивации) всплывающего окна. В нашем примере я выбрал значение Click Open.
  8. Укажите ниже размер всплывающего окна (в пикселах или процентах). При выборе варианта Auto плагин подберет размеры модального окна автоматически.
  9. Отметьте чек-бокс в строке Отключить фон, чтобы за всплывающим окном была видна страница сайта (рекомендую).
  10. Настройте тип и скорость анимации (не обязательно: по умолчанию уже выставлены оптимальные значения).Как в WordPress создать модальное (всплывающее) окно
  11. Настройте положение окна на экране. Изначально плагин позиционирует его по центру вверху.
  12. Значение свойства z-index, установленное по умолчанию, обычно в изменении не нуждается.
  13. Выберите варианты закрытия всплывающего окна. Отметьте «птичками» чек-боксы в строках Click Overlay to Close (окно закроется при клике на фон вокруг него), Press F4 to Close (окно закроется клавишей F4), Press ESC to Close (окно закроется клавишей ESC). Чтобы не раздражать посетителей сайта головоломкой с закрытием модального окна, рекомендую отмечать все пункты.Как в WordPress создать модальное (всплывающее) окно
  14. Нажмите Опубликовать. Поздравляю, модальное окно создано!Как в WordPress создать модальное (всплывающее) окно

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

Чтобы изменить дизайн созданного модального окна, перейдите в подраздел Theme раздела Popup Maker бокового меню админпанели (слева).Как в WordPress создать модальное (всплывающее) окно

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

Как настроить открытие всплывающего окна

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

Каждому окну плагин Popup Make присваивает два уникальных CSS-класса. Если добавить к элементу вебстраницы любой из этих классов, то при клике по этому элементу откроется модальное окно.

  1. Перейдите в подраздел All Popups раздела Popup Maker бокового меню слева админпанели.Как в WordPress создать модальное (всплывающее) окно
  2. В загрузившемся списке (у нас в нем пока одна строка) напротив нужного окна в графе CSS Classes находятся два названия CSS-классов, присвоенных ему плагином. В нашем примере это popmake-90 и popmake-obrazets-modalnogo-okna. Для работы можно использовать любой из них.
  3. Добавьте CSS-класс из предыдущего шага в HTML-элемент, при клике по которому должно появиться всплывающее окно.

Примеры добавления CSS-кода модального окна в код ссылки, изображения и кнопки:

Всплывающее окно откроется при клике ссылки

<a href="#" class="popmake-obrazets-modalnogo-okna">Открыть модальное окно</a>

Модальное окно появится при клике по картинке

<img src="popup-primer.jpg" class="popmake-obrazets-modalnogo-okna" />

Модальное окно активируется после нажатия кнопки

<button class="popmake-obrazets-modalnogo-okna">Открыть модальное окно</button>

Нажмите на HTML-элемент после после добавления к нему CSS-класса popmake-obrazets-modalnogo-okna. Должно появиться похожее модальное окно:Как в WordPress создать модальное (всплывающее) окно

Появилось? Отлично! Теперь вы умеете настраивать всплывающие окна. Если окно не открылось, опишите проблему в комментариях – запустим его сообща!

About WordPressMan

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *