В статье рассмотрим, как в конструкторе страниц elementor сделать всплывающее окно ( Popup ), советую сразу перейти к видео.
Всплывающее окно в elementor по нажатию на кнопку
Первое что необходимо сделать, это добавить саму кнопку.
После того как добавили кнопку в нужном вам разделе на странице, необходимо перейти в админку wordpress и в левом меню выбрать пункт «шаблоны» добавить новый.
Далее в новом окне выбрать тип шаблона «попап» также задать название шаблону. Смотрите скрин ниже.
Далее нажимаете на кнопку «создать шаблон». Теперь вы можете в библиотеке elementor выбрать готовый шаблон и отредактировать его, так же создать с нуля свой. В данном примере я выбираю готовый.
Когда настроите шаблон под свои нужды нажмите на кнопку опубликовать в появившемся окне нажимаете кнопку next 2 раза и кнопку «сохранить и закрыть».
Возвращаемся к нашей кнопке на которую хотим задать всплывающее окно, нажимаем редактировать с права в редакторе кнопки выбираем незаметный пункт «динамические теги» подробнее посмотрите рисунок.
В появившемся окне выберите раздел «Действие ⇒ Попап» далее нажмите на гаечный ключ с лева, задайте действие «открыть попап» и выберите необходимый шаблон который создавали ранее, в поиске начните вводить название и он отобразиться (Подробнее смотрите на скриншоты в низу).
Начните вводить название оно отобразиться.
После настройки нажмите на кнопку «обновить», теперь ваш попап работает при нажатие на кнопку.
Как настроить всплывающие окно по определенному действию
Также в настройках шаблона попапа можно задать условия отображения и добавить триггеры на какое действие должен сработать попап. Для этого в настройках шаблона попап необходима нажать на неприметную кнопку «значок шеврона».
Выберите пункт «условия отображения»
Теперь в появившемся окне вы можете задать условия отображения на всем сайте, выбрать необходимый тригер или добавить расширенные правила.
