Как добавить всплывающее окно в Elementor бесплатно (элемент или Pro не требуется)

Free Elementor не включает всплывающий конструктор. Всплывающий конструктор - это функция Elementor Pro. Чтобы получить всплывающие окна, не платя за Pro, установите бесплатную версию Мастер Аддоны Всплывающий конструктор, спроектировать всплывающее окно внутри обычного редактора Elementor, настроить его на открытие при загрузке страницы и опубликовать. этот путь свободен, он работает на свободной версии Elementor, и это занимает около пяти минут.

Это руководство проходит всю историю, со скриншотами, сделанными на Elementor 4.2.4 и Master Addons 3.2. Оно также охватывает части, которые пропускает большинство обучающих программ: какие триггеры на самом деле бесплатны, как сохранить всплывающее окно на каждой странице, когда таргетинг на страницу является функцией Pro, и API JavaScript, который заменяет elementorProFrontend.modules.popup.showPopup когда у вас нет Про.

Есть ли у Elementor free всплывающий конструктор?

Собственный всплывающий конструктор № Elementor поставляется только с Elementor Pro. Установите бесплатный Elementor, и нигде в меню нет пункта всплывающих окон, и elementor/popup/show событие не существует на странице.

У вас есть три выхода:

Мастер Аддоны - это опция, описанная здесь, потому что всплывающее окно построено в том же холсте Элементор, который вы уже используете, поэтому нет второго редактора, чтобы учиться Это бесплатный плагин на WordPress.org, работающий на Более 30 000 сайтов, а Popup Builder поставляется с бесплатной загрузкой.

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

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

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

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

Как добавить всплывающее окно в Elementor бесплатно, шаг за шагом

Шаг 1: Установите Elementor и Master Addons

С панели управления WordPress перейдите по адресу Плагины → Добавить плагин, искать Элементорустановите и активируйте его. Затем найдите Мастер-аддоны для Elementor и сделать то же самое Elementor Pro не нужен ни в какой момент.

Ссылка Get Elementor Pro на этом скриншоте - это раздача, что это бесплатная сборка. Все, что ниже, было сделано именно на этой настройке. Полные заметки об установке в прямом эфире установочные документы.

Шаг 2: Открыть главные дополнения → всплывающий конструктор

Активация плагина добавляет a Мастер Аддоны пункт на боковую панель WordPress. Откройте его и нажмите Попап Строитель.

Этот список полезнее, чем выглядит Каждая строка показывает состояние отображения всплывающего окна, будь то Активный или Неактивный, и короткий код, который вы можете использовать, чтобы опустить его на одну страницу. имейте в виду этот столбец шорткода, он решает проблему бесплатного таргетинга страниц позже.

Шаг 3: Назовите всплывающее окно и включите активацию

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

Дайте ему имя, которое узнаете через шесть месяцев, а затем поверните Активация на. всплывающее окно, оставленное неактивным, никогда не отображается на передней панели, даже если вы публикуете его и даже размещаете по шорткоду. Это единственная наиболее распространенная причина, по которой готовое всплывающее окно ничего не показывает.

Шаг 4: Установите место появления всплывающего окна

Переключиться на Условия вкладка в том же диалоге.

В бесплатной версии вы получаете одно правило: Включить → Весь сайт. Другие правила (первая страница, единственное число, архив, поиск, 404), тип "Исключить" и кнопка "Добавить условие" - Pro. Если вам нужно всплывающее окно только на одной странице и вы остаетесь свободными, перейдите к метод шорткода.

Теперь нажмите Редактировать с помощью Elementor.

Шаг 5: Начните с шаблона или пустого холста

Редактор открывается пустым всплывающим кадром В области выпадания рядом с собственными кнопками добавления Elementor находится фиолетовая кнопка "Основные дополнения".Нажмите на нее, чтобы открыть библиотеку всплывающих шаблонов.

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

Та же идея библиотеки проходит через плагин. если вы хотите готовые страницы и разделы тоже, это Библиотека шаблонов Master Addons.

Шаг 6: Создайте всплывающее окно

Предпочитаете строить свой собственный? перетаскивать виджеты на холст так, как вы бы на любой странице.Заголовок, текстовый редактор и кнопка покрывают типичное согласие.

Несколько вещей, которые стоит сделать здесь:

• Держите копию в одном обещании Заголовок, одна строка текста поддержки, одна кнопка.
• Проверьте просмотры планшета и мобильных устройств с помощью значков устройств вверху. Всплывающее окно с разрешением 640px подходит для ноутбука и тесно на телефоне.
• Для захвата электронной почты, опустите виджет формы из любой формы плагин, который вы уже запустили Контактная форма 7 и MC4WP оба работают внутри всплывающего окна.
• Все 80+ Виджеты Master Addons доступны и внутри всплывающего окна, поэтому таймеры обратного отсчета и таблицы цен работают так же, как и на странице.

Шаг 7: Выберите спусковой крючок

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

Перечислено семь триггеров. На Загрузка страницы является свободным, и Задержка после загрузки страницы (сек) принимает что угодно от 0 до 60 с шагом 0.1. две-три секунды - разумная отправная точка. выстрел мгновенно раздражает людей на медленных соединениях, и все, что прошло десять секунд, обычно полностью пропускает посетителя.

Ниже этого, Показать снова задержку контролирует, сколько времени ждать, прежде чем показать всплывающее окно снова тому, кто его закрыл. Бесплатно дает вам Нет задержки, 1, 3 и 5 минут. Pro расширяет это на часы, дни, месяц, и Не показывать снова.

Отключить прокрутку страницы является бесплатным и по умолчанию имеет значение Yes, которое блокирует страницу за всплывающим окном.

Шаг 8: Установите макет, положение и анимацию

Открыть Макет раздел в той же панели. все это бесплатно.

Отображение как переключает всплывающее окно между тремя формами:

• Всплывающий модал: центрированный ящик, который большинство людей имеют в виду под всплывающим окном.
• Уведомление Бар: полоса, прикрепленная к верхней части страницы, подходит для объявлений и предложений по доставке.
• Полноэкранный: занимает смотровую площадку, лучше всего для одного сильного предложения.

Модальные макеты затем получают девять позиций, от центра до правого снизу, и примерно 70 анимаций входа.Fade In на 400ms - это безопасный по умолчанию.The ссылка на всплывающие настройки перечисляет каждый элемент управления, если вам нужна полная карта.

Шаг 9: Опубликуйте и протестируйте его на передней панели

Хит Публиковать, затем открыть ваш сайт в приватном окне Вот всплывающее окно, запускаемое через две секунды после загрузки страницы, на бесплатном Elementor с только бесплатный плагин Master Addons активен.

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

Показывать всплывающее окно только на одной странице бесплатно

Условия отображения на уровне страницы - Pro. Короткий код свободен и достигает того же результата в другом направлении.

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

Два правила, которые следует знать:

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

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

Семь всплывающих триггеров и какие из них вы получите бесплатно

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

Бесплатный триггер "Нагрузка страницы" имеет свой собственный настройка док если вам нужна короткая версия.

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

Это наиболее востребованный триггер после загрузки страницы, и именно его люди чаще всего пытаются подделать с помощью JavaScript. с Master Addons Pro это текстовое поле.

1. Создайте и сохраните всплывающее окно, как обычно.
2. В Настройки всплывающего окна MA, набор Открыть всплывающее окно чтобы На Нажать.
3. В Открыть по селектору, введите селектор, включающий точку, например .open-newsletter-popup.
4. Отредактируйте кнопку, которая должна открыть его. Перейти к Расширенные → CSS-классы и тип open-newsletter-popup, на этот раз без точка.
5. Обновите оба, затем протестируйте на передней панели.

Несоответствие точек на шагах 3 и 4 вызывает большую часть “my click trigger не делает ничего” отчеты мы видим Поле триггера принимает селектор CSS, поле Элементор принимает имя класса.

Селектор не ограничивается кнопками Любой элемент, которому вы можете дать класс для работы: контейнер, заголовок, значок, изображение. вы также можете нацелиться на существующую ссылку с помощью селектора атрибутов, например a[href="#pricing-popup"]. Есть родственное Виджет всплывающего триггера для размещения действий закрытия и перенаправления внутри самого всплывающего окна.

Без Pro четыре строки JavaScript выполняют одну и ту же работу Этот код находится в следующем разделе.

Элементор/всплывающее/показать событие, и что заменяет его без Pro

elementorProFrontend.modules.popup.showPopup и elementor/popup/show оба события принадлежат Elementor Pro. Всплывающий модуль регистрируется на elementorProFrontend объект, так что на бесплатной установке этот объект не определен, и событие никогда не срабатывает. ни один сниппет не возвращает его, потому что код, который бы его излучал, находится в плагине Pro.

Бесплатный плагин Master Addons поставляет собственный API, который покрывает ту же землю.

Master Addons раскрывает глобальное название JltmaPopups на любой странице, где присутствует всплывающее окно Вот сопоставление:

Каждое всплывающее окно печатается с идентификатором DOM jltma-popup-id-<post ID>.Post ID - это номер в коротком коде на экране списка Popup Builder. чтобы открыть всплывающее окно 441 из собственного кода:

jQuery(function ($) {
  var $popup   = $('#jltma-popup-id-441');
  var settings = JltmaPopups.getLocalStorage(441);

  JltmaPopups.openPopup($popup, settings);
});

Чтобы подключить это к щелчку мыши, который является бесплатным заменой триггера On Click:

jQuery(function ($) {
  $(document).on('click', '.open-newsletter-popup', function (e) {
    e.preventDefault();

    var $popup   = $('#jltma-popup-id-441');
    var settings = JltmaPopups.getLocalStorage(441);

    JltmaPopups.openPopup($popup, settings);
  });
});

И чтобы закрыть его еще раз:

JltmaPopups.closePopup(jQuery('#jltma-popup-id-441'));

Три вещи, которые стоит посмотреть:

• getLocalStorage() возвращает false пока всплывающее окно не инициализируется на странице, что происходит на DOM ready. Запустите свой код внутри jQuery(function ($) { ... }) и ты в порядке.
• Всплывающее окно должно быть на странице, чтобы все это работало. либо его состояние включает страницу, либо вы поместили его с коротким кодом.
• Сценарий намеренно пропускается в редакторе Elementor, поэтому тестируйте на передней панели.

Почему элемент/всплывающее окно/показать пожар дважды

На Elementor Pro работающий дважды обработчик почти всегда означает, что он связался дважды: один раз elementor/frontend/init и снова в фрагменте или файле темы, или один раз на всплывающий экземпляр, когда присутствуют несколько. Защитите его флагом или привяжите с помощью .off('elementor/popup/show').on(...) перед перепривязкой. Elementor's own документация всплывающих событий перечисляет полную подпись события.

Эквивалент Master Addons не имеет события документа для двойной привязки, поэтому проблема не переносится Вы звоните openPopup() непосредственно в тот момент, когда вы хотите, чтобы всплывающее окно открылось.

Почему не отображается всплывающее окно Elementor

В приблизительном порядке того, как часто каждый из них оказывается причиной:

1. Активация отключена. Откройте главные дополнения → всплывающий конструктор и проверьте столбец Статус Неактивный означает, что ничего не отображается где угодно, включая короткий код.
2. Всплывающее окно все еще является черновиком. Сохранение дизайна в Elementor - это не то же самое, что публикация всплывающего окна.
3. Вы тестируете в предварительном просмотре редактора. Всплывающие окна там подавляются по замыслу. используйте приватное окно.
4. Кэш. Очистите плагин кэширования и CDN, затем перезагрузите в приватном окне. Кэшированная HTML-страница не будет содержать вновь опубликованное всплывающее окно.
5. Показать снова Задержка уже уволена. После закрытия всплывающего окна плагин сохраняет отметку времени в хранилище браузера. очистить данные сайта или переключить браузеры при повторном тестировании.
6. Несоответствие точек на селекторе кликов. Требуется триггерное поле .my-classполе "Классы CSS Elementor" хочет my-class.
7. Выход намерен по телефону. Курсора нет, поэтому ничего не срабатывает Только рабочий стол.

Всплывающие окна Master Addddons vs Elementor Pro

Если всплывающие окна являются единственной функцией Pro, которую вы хотите, бесплатный конструктор главных аддонов плюс шорткод покрывает ее. Если вам нужно намерение выхода или триггеры щелчков мыши без записи JavaScript, сравните Цены на Master Addons против продления Elementor Pro, поскольку лицензия Master Addons также приносит Тема Строитель и Виджет Строитель с этим.

Часто задаваемые вопросы

Связанное чтение

• Мастер Аддоны Всплывающий конструктор, страница функций со всеми перечисленными настройками
• Лучшие плагины для создания всплывающих окон для WordPress, если вы хотите сравнить инструменты
• Параметры всплывающего окна и параметры, полный контроль
• Мастер-адреса на WordPress.orgфорум загрузки и поддержки