Нужно знать, как создавать всплывающие окна с Elementor ?

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

В этой статье мы покажем вам, как создать всплывающее окно с помощью функции Popup Builder.Elementor.

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

Откройте для себя Как установить Elementor на WordPress

Прежде чем идти дальше, важно отметить, что конструктор всплывающих окон Elementor доступен только в профессиональной версии.

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

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

Читайте также: Как создать многоцветную кнопку градиента в Elementor

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

Предполагая, что вы установили Факир Pro, войдите в панель управления WordPress и перейдите в Шаблоны – > Всплывающие окна и нажмите на кнопку добавлять выше.

Дайте имя своему всплывающему окну и нажмите кнопку СОЗДАТЬ МОДЕЛЬ.

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

Если вы предпочитаете создавать всплывающее окно с нуля, вы можете просто закрыть библиотеку шаблонов, чтобы открыть редактор Elementor.

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

Вы также можете добавить анимацию входа/выхода, включить/отключить наложение и включить/отключить кнопку закрытия.

Конструктор всплывающих окон Elementor

Когда вы закончите, нажмите на кнопку ОПУБЛИКОВАТЬ.

Конструктор всплывающих окон Elementor

На следующем шаге вам будет предложено установить условия отображения и триггеры. Также есть возможность установить расширенные правила:

  • Условия показа: Определяет, на каких страницах вашего сайта появляется всплывающее окно. Вы можете настроить всплывающее окно так, чтобы оно появлялось на всем веб-сайте, на определенных страницах, в определенных сообщениях, в определенных категориях и т. д.
  • Триггеры: Триггер — это действие для отображения всплывающего окна. Elementor поддерживает 6 типов триггеров: при загрузке страницы, при прокрутке, при прокрутке элемента, при нажатии, После бездействия, при выходе со страницы
  • Расширенные правила: Требования, которые должны быть выполнены для появления всплывающего окна. Например, вы можете настроить всплывающее окно, чтобы оно появлялось, если посетитель заходит на ваш сайт через поисковую систему или определенный URL-адрес. Конструктор всплывающих окон Elementor предлагает 7 расширенных параметров правил, которые вы можете установить.

Поскольку мы хотим показывать всплывающее окно, когда пользователь нажимает кнопку, откройте вкладку триггеры и активируйте опцию По щелчку, Cliquez sur Сохранить и закрыть.

Создайте новую страницу/публикацию и отредактируйте ее с помощью Elementor (вы также можете отредактировать существующую страницу).

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

Узнайте также: Как установить нестандартный размер значка кнопки Elementor

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

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

Cliquez-сюр- ПУБЛИКАЦИЯ / ОБНОВЛЕНИЕ после редактирования страницы. Прежде чем нажать кнопку  ПУБЛИКАЦИЯ / ОБНОВЛЕНИЕ, вы можете предварительно просмотреть свою страницу, чтобы убедиться, что всплывающее окно уже работает.

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

Получить Elementor Pro сейчас !!!

Заключение

С Elementor Pro вам больше не нужно устанавливать какой-либо плагин для всплывающих окон, потому что функции, предлагаемые Elementor Pro, включают конструктор всплывающих окон.

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

Поскольку всплывающее окно создается с помощью редактора Elementor, вы можете добавить в свое всплывающее окно любой виджет. С помощью конструктора всплывающих окон Elementor вы также можете создать творческое меню веб-сайта, подобное приведенному ниже:

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

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

Здесь ! В этой статье рассказывается, как создавать всплывающие окна с Elementor. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...