Skip to content

Всё для WordPress, веб-разработки — и не только

🛠 Как открыть попап Elementor по якорной ссылке с любой страницы сайта

🛠 Как открыть попап Elementor по якорной ссылке с любой страницы сайта

Нужно, чтобы кнопка в любом месте сайта открывала попап Elementor, а стандартный триггер «по клику» работает только в пределах одной страницы? Эта задача решается за пять минут без сторонних плагинов и без правок кода.

Штатный механизм Elementor Pro, якорная ссылка в связке с CSS-селектором Open By Selector. Настроив его один раз, вы получаете попап, который открывается с любой страницы сайта: из пункта меню, текстовой ссылки, кнопки в футере. Ниже, пошаговая инструкция от создания попапа до проверки на живом сайте. Каждый шаг проиллюстрирован скриншотом из реальной настройки.

💡 Быстрый обзор:

  • Создайте попап в Elementor Templates → Popups и опубликуйте его
  • В условиях показа выберите «Entire Site», это ключевой момент метода
  • В глобальных настройках попапа включите «Disable Page Scroll» и «Prevent Multiple Popups»
  • Во вкладке Advanced пропишите селектор a[href="#ваш-якорь"] в поле Open By Selector
  • Расставьте на сайте ссылки с якорем #ваш-якорь, попап будет открываться отовсюду

Шаг 1: Создайте попап в Elementor

Всплывающее окно Elementor с контактной формой

Откройте Templates → Popups в боковом меню WordPress и нажмите «Add New». Выберите готовый шаблон из библиотеки Elementor или начните с чистого холста. Назовите попап осмысленно, например, «Contact Popup» или «Форма заявки», чтобы потом легко найти его в списке. Дизайн может быть любым: контактная форма, подписка на рассылку, форма обратной связи, промо-баннер.

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

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

Шаг 2: Условие, «Entire Site»

Условие показа попапа на всём сайте Elementor

На экране условий найдите выпадающий список и выберите Entire Site. Это единственное условие, которое нужно задать.

Обратите внимание: даже если вы планируете показывать попап только на конкретных страницах, выбор «Entire Site», самый простой путь. Сам показ будет контролироваться не условием страницы, а наличием якорной ссылки #contact в URL. Нет якоря в адресной строке, нет попапа.

Экран триггеров и дополнительные правила можно пропустить: нажмите Next, затем Save & Close. Метод с якорной ссылкой работает независимо от этих настроек.

Шаг 3: Глобальные настройки попапов

Глобальные настройки всплывающих окон в Elementor

Кликните по иконке шестерёнки в левом нижнем углу экрана редактирования попапа, откроется панель Popup Settings. Перейдите на вкладку Advanced.

Вкладка Advanced в настройках попапа Elementor

Здесь настройте поведение под свою задачу. Мы рекомендуем включить:

  • Disable Page Scroll, чтобы фоновая страница не прокручивалась, пока попап открыт;
  • Prevent Multiple Popups, чтобы исключить наложение нескольких попапов друг на друга.

Остальные параметры оставьте по умолчанию. Главное, поле в самом низу вкладки, ради которого всё затевалось.

Шаг 4: Open By Selector, якорная магия

Поле Open By Selector с CSS-селектором якорной ссылки

В поле Open By Selector пропишите CSS-селектор, который «слушает» якорную ссылку. Формат строгий:

1a[href="#contact"]

Вместо #contact подставьте свой якорь: #popup / #callback / #sale или любой другой уникальный идентификатор. Селектор реагирует на клик по любому элементу <a>, у которого атрибут href равен вашему якорю.

Сохраните попап. Теперь он ждёт, пока посетитель перейдёт по ссылке с нужным якорем.

Шаг 5: Расставьте якорные ссылки на сайте

Осталось добавить ссылки туда, откуда посетитель будет открывать попап. Подойдёт любой виджет Elementor с полем ссылки: Button, Text Editor, Image, Icon Box.

В поле ссылки вместо обычного URL впишите #contact (или свой якорь). На фронтенде это работает так: при клике браузер дописывает #contact в адресную строку, селектор a[href="#contact"] срабатывает, и попап открывается.

На практике мы используем три типичных сценария:

  • Кнопка в hero-секции, «Заказать звонок» с href #callback;
  • Пункт меню, в Appearance → Menus добавьте кастомную ссылку с якорем #contact;
  • Текстовая ссылка в теле поста, выделите текст и пропишите якорь в панели ссылок.

Проверьте: откройте любую страницу сайта, допишите #contact в адресную строку и нажмите Enter, попап должен появиться. Если нет, вернитесь к шагу 4 и проверьте селектор.

Видео: настройка за 3 минуты

В официальном видео Elementor показан процесс от начала до конца, с момента создания попапа до проверки на живом сайте.

⁉️🤔 Частые вопросы

Работает ли метод без Elementor Pro?

Нет. Модуль Popup Builder входит только в Elementor Pro. В бесплатной версии конструктора попапы недоступны. Если вы используете Free-версию, присмотритесь к связке Elementor + отдельный плагин попапов (например, Popup Maker), но там настройка будет другой, через jQuery-селекторы, а не через штатный Open By Selector.

Обязательно ли условие «Entire Site»?

Да, это ключевое требование метода. Если оставить условие «On Specific Pages», попап будет показан только на выбранных страницах, и только при загрузке страницы, а не по клику на якорь. Режим «Entire Site» передаёт управление селектору Open By Selector.

Можно ли сделать несколько разных попапов с разными якорями?

Да. Создайте отдельный попап под каждый якорь. Например, попап «Контакты» с селектором a[href="#contact"] и попап «Скидка» с a[href="#sale"]. Оба висят на «Entire Site» и срабатывают каждый на свой якорь независимо.

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

Проверьте три момента. Первое: в адресной строке должен появиться #ваш-якорь, браузер дописывает его только при клике по <a> с соответствующим href, прямой ввод с клавиатуры может не сработать. Второе: в поле Open By Selector должен быть ровно a[href="#contact"], без лишних пробелов и кавычек другого типа. Третье: откройте консоль браузера (F12) и посмотрите ошибки JavaScript, конфликт с другим плагином может блокировать срабатывание.

Влияет ли это на SEO?

Нет. Якорные ссылки с решёткой не индексируются поисковиками как отдельные страницы. Для Google это технический элемент навигации, а не дубликат контента.

Что делать, если стандартных триггеров не хватает

Якорная ссылка через Open By Selector, самый универсальный способ открыть Elementor-попап из любого места сайта. Он не зависит от того, на какой странице находится посетитель, и не требует редактирования functions.php.

Если задача усложняется, например, попап должен открываться при скролле до определённого блока или через 10 секунд после захода на сайт, используйте штатные триггеры Elementor: On Scroll, On Page Load, On Exit Intent. Они настраиваются на том же экране, где мы выбрали «Entire Site», и отлично комбинируются с якорным методом.

Попробуйте на тестовом сайте: создайте попап, пропишите a[href="#test"], поставьте кнопку с этим якорем на главной. Весь процесс занимает меньше пяти минут.