Как сделать всплывающее окно (Pop Up) в Elementor

Как сделать всплывающее окно (PopUp) в Elementor

Поделиться

В данной статье рассмотрим, как в конструкторе страниц elementor сделать всплывающее окно ( Popup ).

Содержание

Всплывающее окно в elementor по нажатию на кнопку

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

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

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

Тут необходимо выбрать тип шаблона попап

Здесь необходимо указать название шаблона к примеру Popup 1

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

Библиотека elementor попапы

Когда настроите шаблон под свои нужды нажмите на кнопку опубликовать в появившемся окне нажимаете кнопку next 2 раза и кнопку «сохранить и закрыть».

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

Нажмите на значок похожий на гамбургер » Динамические теги»

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

Нажмите на ключ

Начните вводить название оно отобразиться

После настройки нажмите на кнопку «обновить», теперь ваш попап работает при нажатие на кнопку.

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

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

Выберите пункт «условия отображения»

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

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

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