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

Вы можете складывать всплывающие окна в Elementor, не платя за Elementor Pro. Free Elementor не поставляется с всплывающим конструктором, но Pro - не единственный способ получить его. Бесплатно Мастер-аддоны для Elementor плагин включает в себя полный Попап Строитель, 100+ готовых шаблонов, и пять типов триггеров. все это находится в бесплатном плагине, без пробного таймера и водяного знака.

Вам нужны две вещи: бесплатный Elementor, и бесплатный плагин Master Addons из каталога WordPress Настройка первого всплывающего окна занимает около десяти минут. это руководство охватывает создание одного, выбор, когда он запускается, и выбор, какие страницы показывают его, а также вопросы, которые возникают чаще всего: есть ли у Elementor free всплывающий конструктор, что elementor/popup/show событие действительно так и делает, и как открыть всплывающее окно одним щелчком кнопки без записи JavaScript.

Нужен ли вам Elementor Pro для создания всплывающих окон?

Короткий ответ: нет. Popup Builder от Elementor Pro - платная функция, но это не единственный способ складывать всплывающие окна внутри Elementor.

Вот что на самом деле дает вам каждый вариант:

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

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

Что такое всплывающий конструктор Master Addons?

Мастер Аддоны является все-в-одном плагин Elementor, используемый более чем 30,000 активных сайтов. он поставляется с 80+ виджетов, a Тема Строитель, Библиотека шаблонов, а Виджет Строительи бесплатно Попап Строитель. Popup Builder - это не отдельная покупка. Установите плагин, и он там.

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

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

• Бесплатный Popup Builder, входящий в состав плагина. Обновление не требуется.
• Тот же опыт проектирования перетаскивания, который вы уже знаете от Elementor.
• Более 100 предварительно созданных всплывающих шаблонов, готовых к импорту в один клик.
• Пять типов триггеров: "Нажатие", "Загрузка страницы", "Намерение выхода", "На прокрутке", "После бездействия".
• Условия отображения для любого типа публикации, страницы, категории или пользовательского сообщения.
• Работает на бесплатном Elementor, бесплатном хостинге WordPress, и последних версиях Elementor.

Какие типы всплывающих окон вы можете создать?

• Генерация потенциальных клиентов и всплывающие окна с подпиской на электронную почту
• Акции WooCommerce, баннеры продаж и предложения по отказу от тележек
• Всплывающие окна-лайтбоксы (YouTube, Vimeo, хостинг самостоятельно)
• Галерея изображений лайтбоксы
• Анонсирующие бары и верхние баннеры
• Всплывающие окна для входа и регистрационной формы
• Согласие на использование файлов cookie и уведомления GDPR
• Обратная связь, NPS и всплывающие окна опросов
• Всплывающие окна модальных моделей для определения условий, подробной информации о ценах или информации о продукте

5 всплывающих триггеров в главных аддонах

1. На триггере прокрутки

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

2. Триггер загрузки страницы

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

3. Триггер намерения выхода

Всплывающее окно определяет, когда курсор движется к вкладке браузера или кнопке закрытия, и запускает последнее сообщение. это то, что люди ищут как “всплывающее окно намерения выхода элементара“, и это в бесплатном плагине Master Addons. одно предостережение, прежде чем вы построите кампанию вокруг него: намерение выхода - это поведение рабочего стола. В телефоне нет курсора для отслеживания, поэтому вместо этого дайте мобильным посетителям триггер прокрутки или бездействия.

4. Триггер нажатия

Всплывающее окно открывается только тогда, когда посетитель нажимает определенную кнопку, изображение или ссылку. Это самый простой способ построить модал клик-открыть не трогая код, и это бесплатная замена elementor/popup/show Событие JavaScript описано в следующем разделе.

5. Триггер после бездействия

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

Как использовать элемент/всплывающее/показать событие (и бесплатную альтернативу)

Elementor Pro раскрывает событие JavaScript под названием elementor/popup/show. Разработчики используют его для запуска всплывающего окна из кода: запускайте всплывающее окно после отправки пользовательской формы, ответа AJAX или кнопки, которая находится за пределами редактора Elementor.

Основной шаблон в Elementor Pro выглядит так

jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => {
    // your code runs when popup with this ID is shown
    console.log( 'Popup opened:', id );
} );

// To open a popup programmatically in Elementor Pro:
elementorProFrontend.modules.popup.showPopup( { id: 1234 } );

Если вы на бесплатном Элементоре, у вас нет доступа elementorProFrontend.modules.popup.showPopup. Вам также не нужен для большинства вариантов использования. Главные дополнения На Нажать триггер изначально обрабатывает обычные:

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

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

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

Как активировать всплывающее окно элементара нажатием кнопки (бесплатно)

Один из самых распространенных запросов, так вот точная настройка:

1. Создайте всплывающее окно в Master Addons, Popup Builder и разработайте его.
2. В настройках всплывающего окна переключите триггер на На Нажать.
3. Введите селектор CSS, например, в поле триггера .open-signup-popup.
4. Перейдите на страницу или шаблон с кнопкой Редактировать кнопку виджет Расширенные классы CSS поле и добавить open-signup-popup (нет точки, только название класса).
5. Сохранить оба. каждая кнопка с этим классом теперь открывает всплывающее окно в любом месте сайта.

Тот же селектор работает на строке, столбце, заголовке, значке или любом элементе, которому вы можете дать класс. Вот так вы получаете поведение, идентичное elementor/popup/show не записывая строку JavaScript. одно, что нужно посмотреть: если вы используете селектор идентификаторов, например #open-popup, убедитесь, что ни один другой элемент на странице не имеет общего идентификатора, в противном случае щелкает огонь из неправильного элемента.

Бесплатные всплывающие шаблоны Elementor: более 100 дизайнов, готовых к импорту

Плагин поставляется с всплывающей библиотекой шаблонов, охватывающей подписку на рассылку новостей, баннеры продаж, промо-акции WooCommerce, предложения exit-intent, видео лайтбоксы, уведомления о файлах cookie и формы входа в систему. каждый шаблон импортируется в один клик и полностью редактируется внутри Elementor. если вы предпочитаете начать с дизайна, близкого к вашей конечной цели, это быстрее, чем строить с нуля.

Полная библиотека живет внутри редактора и является частью более широкого круга Библиотека шаблонов главных аддонов рядом с шаблонами страниц и разделов.

Пошаговое: как добавить всплывающее окно в Elementor с помощью главных дополнений

Шаг 1: Установите и активируйте главные дополнения

1. Откройте панель управления WordPress, плагины, добавьте новое.
2. Поиск “Master Аддоны для Elementor”.
3. Нажмите Установите сейчас, тогда Активировать.
4. Новым Мастер Аддоны элемент появляется на боковой панели WordPress.

Если элемент боковой панели не отображается сразу, жестко обновите администратор (Ctrl+Shift+R/Cmd+Shift+R).Некоторые плагины кэширования цепляются за старое меню администратора на минуту.

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

1. Перейти к Мастер Аддоны, Popup Builder.
2. Нажмите Добавить новый всплывающий окно.
3. Дайте всплывающему окну описательное имя (например, Информационный бюллетень, сообщения в блоге).
4. Нажмите Редактировать с помощью Elementor.

Шаг 3: Выберите шаблон или начните с нуля

1. Щелкните значок Библиотека шаблонов главных дополнений в редакторе Elementor.
2. Просмотрите всплывающую категорию и дизайн предварительного просмотра.
3. Нажмите Вставить на любом шаблоне для импорта его в холст.
4. Или пропустить библиотеку и перетащить виджеты на пустой холст.

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

1. Перетащите виджеты Elementor: заголовок, текстовый редактор, кнопку, изображение, форму.
2. Для захвата электронной почты используйте виджет формы и подключите его к своей службе электронной почты.
3. Добавьте таймер обратного отсчета, значок или видео, используя основные виджеты Elementor или Master Addons.
4. Настройте шрифты, цвета, заполнение и интервалы на вкладках "Стиль" и "Дополнительно".
5. Предварительный просмотр на мобильном телефоне и планшете для подтверждения того, что макет все еще работает.

Шаг 5: Настройте всплывающий триггер

1. Нажмите значок шестерни в левом нижнем углу редактора, чтобы открыть Настройки.
2. Открыть Триггер вкладка.
3. Выберите один из пяти триггеров: "Нажатие", "Загрузка страницы", "Намерение выхода", "На прокрутке", "После бездействия".
4. Заполните настройки, специфичные для триггера: процент прокрутки, секунды задержки, селектор кликов или продолжительность бездействия.

Шаг 6: Установите условия отображения (где отображается всплывающее окно)

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

1. Открыть Условия отображения вкладка во всплывающих настройках.
2. Выберите Включать правило: весь сайт, определенные страницы, конкретные сообщения, категории, теги или пользовательский тип сообщения.
3. Добавить Исключать правило для всего, что вы хотите пропустить (например, исключить страницу оформления заказа из всплывающего окна на сайте, иначе она придирается к людям, которые уже конвертировались).
4. Сохраните условия перед публикацией.

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

Шаг 7: Публикация и тестирование

1. Нажмите Публиковать или Обновить в левом нижнем углу редактора.
2. Откройте страницу, на которой должно отображаться всплывающее окно в обычном окне браузера (а не предварительный просмотр редактора).
3. Запустите всплывающее окно так, как вы его настроили: нажмите кнопку, прокрутите, подождите или переместитесь к вкладке закрытия.
4. Проверьте отзывчивое поведение на реальном телефоне. предварительный просмотр редактора близок, но не точен.
5. Контролируйте количество отправленных форм и коэффициенты конвертации в течение первой недели.

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

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

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

Мастер-аддоны против всплывающего конструктора Elementor Pro

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

Взвешивание и других вариантов? Сравните лучшие инструменты рядом в нашем обзоре лучшие плагины для создания всплывающих окон для WordPress.

Для кого эта установка работает лучше всего

• Фрилансеры и веб-разработчики, которые не хотят покупать Pro только для всплывающих окон.
• Владельцы магазинов WooCommerce размещают баннеры распродаж и предложения по возврату тележек.
• Блогеры и создатели контента захватывают подписчиков электронной почты.
• Агентства, управляющие многими клиентскими сайтами с ограниченным бюджетом.
• Стартапы и малые предприятия проверяют предложения перед оплатой премиальных инструментов.

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