Время всплывающего окна по проценту страницы хорошо, пока вам не нужно, чтобы оно приземлилось в одном точном месте. Может быть, вы хотите, чтобы это произошло в тот момент, когда кто-то достигнет вашего ценового блока, строки отзывов или группы призыва к действию, а не расплывчатых 40% вниз по странице. The Мастер Аддоны Всплывающий конструктор справляется с этим с помощью На Прокрутите к элементу триггер. Вы даете всплывающему окну идентификатор CSS с #затем поставьте тот же идентификатор без #, на элементе, который вы хотите действовать как триггер.
Вот полная настройка в Master Addons Popup Builder, который поставляется бесплатно с Master Addons for Elementor.Если триггер на основе процента - это все, что вам нужно, то всплывающее руководство по параметрам триггера покрывает тот.
Прежде чем начать #
- Всплывающее окно, уже созданное в Master Addons Popup Builder (см. всплывающее руководство по настройкам чтобы создать один)
- Страница с элементом, который вы хотите использовать в качестве триггера прокрутки
- Элементор установлен и активен
- Установлены и активны главные дополнения для Elementor (руководство установки)
Шаг 1: Установите всплывающее окно для открытия при прокрутке до элемента #
Откройте всплывающее окно в Elementor и перейдите в Настройки всплывающего окна MA панель. Под Настройки, переключатель Открыть всплывающее окно чтобы На Прокрутите к элементу. Появляется новое поле: Селектор элементов.
Подсказка под полем указывает, чего он хочет: селектор CSS для элемента, который запускает всплывающее окно при прокрутке, например #my-id или .my-class.
Шаг 2: Введите селектор идентификаторов CSS (со знаком #) #
В Селектор элементов поле, введите идентификатор CSS, который начинается с #. Вот оно #show-popup. Сохраняйте имя коротким и уникальным, чтобы вы могли повторно использовать его на странице, не сталкиваясь ни с чем другим.
The # выполняет реальную работу: он сообщает всплывающему окну, чтобы он отслеживал элемент, идентификатор которого равен show-popup. Опубликовать (или обновить) всплывающее окно для его сохранения.
Шаг 3: Добавьте тот же идентификатор в целевой элемент (без знака #) #
Теперь откройте страницу, где должно произойти срабатывание всплывающего окна, и отредактируйте его в Elementor. щелкните нужный элемент в качестве триггера, вот он блок раздела на странице, и откройте его Продвинутый вкладка.
Найдите ИДЕНТИФИКАТОР CSS поле на вкладке Дополнительно и введите то же имя, которое вы использовали во всплывающем окне, но без #, так что просто show-popup. Это одно небольшое отличие - это вся хитрость:
- Выбор всплывающего элемента:
#show-popup(с хешем) - CSS-идентификатор элемента:
show-popup(без хеша)
The # является частью селектора CSS, а не частью ID, поэтому он принадлежит во всплывающем поле, но никогда в поле CSS ID элемента Обновить страницу, чтобы сохранить. одно, что нужно посмотреть: не используйте повторно идентификатор, который уже подключен к ссылке привязки или пользовательской CSS в другом месте, или вы получите сюрпризы.
Шаг 4: Предварительный просмотр и прокрутка элемента #
Откройте страницу на переднем конце и начните прокручивать. Ничего вверху. второй элемент, несущий show-popup ID прокручивается в поле зрения, всплывающее окно открывается на странице.
Хотите несколько точек прокрутки, чтобы запустить одно и то же всплывающее окно? Дайте каждому элементу один и тот же идентификатор CSS, show-popupи любой из них запустит это.
Устранение неполадок #
- Всплывающее окно никогда не открывается? Проверьте хэш. Необходим всплывающий элемент выбора элемента
#show-popup, и CSS ID элемента нуждаетсяshow-popupбез хэша. - Использовал # в поле CSS ID? Уберите его. Поле Elementor CSS ID хочет только простое имя.
- Два элемента с одним и тем же идентификатором действуют? За срабатывание нормально, но не используйте повторно идентификатор, который уже обрабатывает CSS или якорные ссылки на странице.
- Всплывающее окно вообще не отображается? Убедитесь, что активация всплывающего окна включена, а условия его отображения включают страницу с триггерным элементом.
Часто задаваемые вопросы #
Как открыть всплывающее окно при прокрутке до определенного элемента в Elementor?
Установите опцию Открыть всплывающее окно всплывающего окна в пункт Прокрутить на элемент и введите идентификатор CSS, как #показать-всплывающее окно в поле Выбор элемента Затем добавьте тот же идентификатор, без #, в поле CSS ID целевого элемента на вкладке Расширенный элемент.
Почему я добавляю # во всплывающем окне, но не в элементе?
Поле Выбор элемента ожидает селектор CSS, а # отмечает селектор ID. Поле идентификатора Elementor CSS ожидает только имя идентификатора. Таким образом, вы используете #show-popup во всплывающем окне и всплывающем окне отображения элемента.
Могу ли я активировать всплывающее окно более чем из одного элемента?
Да. дайте каждому элементу одинаковый идентификатор CSS, и всплывающее окно срабатывает, когда посетитель прокручивает до любого из них. Это удобно, когда у вас есть несколько разделов, которые все должны вызвать одно и то же предложение.
Чем отличаются On Scroll и On Scroll to Element?
На Scroll срабатывает после того, как посетитель прокручивает установленный процент страницы. On Scroll to Element срабатывает, когда в поле зрения появляется один конкретный элемент, что точнее, когда вы хотите, чтобы всплывающее окно было привязано к точному разделу.
Нужен ли мне для этого Elementor Pro?
Нет. Master Addons Popup Builder работает с бесплатной версией Elementor, поэтому триггер On Scroll to Element и метод CSS ID работают без Elementor Pro.
