Иногда не хочется, чтобы всплывающее окно загружалось самостоятельно. вы хотите, чтобы оно открывалось только тогда, когда кто-то нажимает кнопку или ссылку.The Мастер Аддоны Всплывающий конструктор делает это с На Нажать триггер и селектор идентификаторов CSS Вы устанавливаете идентификатор во всплывающем окне, затем добавляете тот же идентификатор в любой элемент Elementor, и щелчок по этому элементу открывает всплывающее окно.
Что такое всплывающее окно нажатия кнопки мыши в Elementor? #
Всплывающее окно в режиме "нажатие" в Elementor - это всплывающее окно, которое остается скрытым до тех пор, пока посетитель не нажмет конкретный элемент (ссылка на посетитель), изображение, или значок (идентификатор) вместо того, чтобы появляться самостоятельно при загрузке страницы.The Мастер Аддоны Всплывающий конструктор строит один с помощью На Нажать триггер: вы даете всплывающему окну CSS Выбор идентификатора таких как #sale-popup, затем добавьте тот же идентификатор (без #) к полю CSS ID любого элемента элемента Элемента. поскольку совпадение производится только на идентификаторе, одно всплывающее окно может быть инициировано из такого количества элементов, как вам нравится — и он работает со свободным плагином, без лицензии Elementor Pro и без пользовательского JavaScript. всплывающие окна при щелчке подходят для контента, основанного на намерениях, такого как детали цен, видео демоверсии, формы входа и коды купонов, где автоматическое всплывающее окно прерывает, а не помогает. Просмотрите остальную часть Виджеты и расширения Master Addgets чтобы посмотреть, что еще можно положить внутрь одного.
Прежде чем начать #
Прежде чем настроить всплывающее окно при щелчке мыши, необходимо иметь три вещи: всплывающее окно, уже созданное в всплывающем конструкторе Master Addons, установленном и активном Elementor и установленном и активном Master Addons for Elementor. Затем вся настройка занимает два поля и около минуты.
- Всплывающее окно, уже созданное в Master Addons Popup Builder (см. всплывающее руководство по настройкам чтобы создать один)
- Элементор установлен и активен
- Установлены и активны главные дополнения для Elementor (руководство установки)
Шаг 1. Настройте всплывающее окно для открытия нажатием #
Откройте всплывающее окно в Elementor и перейдите в Настройки всплывающего окна MA панель. Под Настройки, изменить Открыть всплывающее окно чтобы На Нажать. Появляется новое поле: Открыть по селектору.
В этом поле введите идентификатор CSS со знаком #, например #sale-popup. Это селектор, который запускает всплывающее окно. Сохраните имя простым и уникальным, чтобы его было легко использовать повторно.
Шаг 2: Добавьте идентификатор CSS в элемент элемента #
Теперь перейдите на страницу, где вам нужен триггер, и отредактируйте его в Elementor. Выберите любой элемент, кнопка работает хорошо и откройте его Продвинутый вкладка. Найти ИДЕНТИФИКАТОР CSS поле и введите то же имя, но без знака # на этот раз, так sale-popup.
Эта разница сбивает людей с толку: используется всплывающий окно Open By Selector #sale-popup, в то время как CSS ID элемента использует sale-popup. # является частью синтаксиса селектора, а не частью идентификатора.
Шаг 3: Предварительный просмотр и нажмите #
Обновите страницу, затем предварительно просмотрите ее на переднем конце. вы увидите свою кнопку (здесь она помечена “Click to Open Popup”) сидящей в макете, пока всплывающего окна не видно.
Нажмите кнопку, и всплывающее окно откроется сразу. тот же триггер работает на столько элементов, сколько вы хотите, просто дайте каждому один и тот же идентификатор CSS.
Устранение неполадок #
- Ничего не происходит по клику? Убедитесь, что идентификаторы совпадают:
#sale-popupво всплывающем окне Open By Selector иsale-popup(no #) в CSS ID элемента. - Всплывающее окно неактивно? Проверьте, есть ли всплывающее окно Активация включен, и условия его отображения включают страницу с кнопкой.
- Использовал # в поле CSS ID? Удалить его. идентификатор Elementor CSS принимает только простое имя.
Часто задаваемые вопросы #
Как открыть всплывающее окно Master Addons при нажатии кнопки мыши?
В панели "Настройки всплывающего окна MA" установите "Открыть всплывающее окно вкл. и введите идентификатор CSS, например #sale-popup", в поле "Открыть по селектору". Затем добавьте тот же идентификатор без # в поле CSS ID элемента на вкладке "Дополнительно" Elementor.
Почему я добавляю # в одном месте, но не в другом?
Поле Открыть по селектору ожидает селектор CSS, а # отмечает селектор ID. Поле Elementor CSS ID ожидает только имя ID. Таким образом, вы используете #sale-popup во всплывающем окне и всплывающем окне продаж на элементе.
Могу ли я активировать всплывающее окно с нескольких кнопок?
Да. дайте каждой кнопке или элементу один и тот же идентификатор CSS, затем каждый открывает одно и то же всплывающее окно нажатием. Вы можете смешивать кнопки, ссылки и другие элементы.
Могу ли я открыть всплывающее окно по текстовой ссылке вместо кнопки?
Да. работает любой элемент с соответствующим идентификатором CSS, включая ссылку, изображение или значок. добавьте идентификатор на вкладку "Дополнительно" этого элемента, и он станет триггером.
Нужен ли мне Elementor Pro для всплывающего окна при щелчке мыши?
Нет. Master Addons Popup Builder работает с бесплатной версией Elementor, поэтому триггер On Click и метод CSS ID работают без Elementor Pro.
