Потрібно, щоб кнопка в будь-якому місці сайту відкривала попап 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

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

Зберіть вміст у конструкторі Elementor як звичайну сторінку: додайте заголовок, форму, текст, кнопку закриття. Коли готово, натисніть Publish.

Після публікації Elementor відкриє екран умов, тригерів і додаткових правил. Тут ми зробимо єдине критичне налаштування.

Шаг 2: Умова «Entire Site»

На екрані умов знайдіть випадний список і виберіть Entire Site. Це єдина умова, яку потрібно задати.

Зверніть увагу: навіть якщо ви плануєте показувати попап лише на конкретних сторінках, вибір «Entire Site», найпростіший шлях. Сам показ контролюватиметься не умовою сторінки, а наявністю якірного посилання #contact в URL. Немає якоря в адресному рядку, немає попапа.

Екран тригерів і додаткові правила можна пропустити: натисніть Next, потім Save & Close. Метод із якірним посиланням працює незалежно від цих налаштувань.

Шаг 3: Глобальні налаштування попапів

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

Тут налаштуйте поведінку під своє завдання. Ми рекомендуємо увімкнути:

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

Решту параметрів залиште за замовчуванням. Головне, поле в самому низу вкладки, заради якого все й затівалося.

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

У полі Open By Selector пропишіть CSS-селектор, який «слухає» якірне посилання. Формат суворий:

1
a[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"], поставте кнопку з цим якорем на головній. Весь процес займає менше п’яти хвилин.