Skip to content

Wszystko o WordPressie, tworzeniu stron — i nie tylko

🛠 Jak otworzyć popup Elementor za pomocą linku kotwiczącego z dowolnej strony witryny

🛠 Jak otworzyć popup Elementor za pomocą linku kotwiczącego z dowolnej strony witryny

Czy potrzebują Państwo, aby przycisk w dowolnym miejscu witryny otwierał pop-up Elementor, a standardowy wyzwalacz „po kliknięciu" działa tylko w obrębie jednej strony? To zadanie rozwiązuje się w pięć minut, bez zewnętrznych wtyczek i bez ingerencji w kod.

Wbudowany mechanizm Elementor Pro: link kotwiczący w połączeniu z selektorem CSS Open By Selector. Konfigurując go raz, otrzymują Państwo pop-up otwierający się z dowolnej strony witryny: z pozycji menu, linku tekstowego, przycisku w stopce. Poniżej znajduje się instrukcja krok po kroku, od utworzenia pop-upu do sprawdzenia na działającej witrynie. Każdy krok zilustrowano zrzutem ekranu z rzeczywistej konfiguracji.

💡 Szybki przegląd:

  • Proszę utworzyć pop-up w Elementor Templates → Popups i opublikować go
  • W warunkach wyświetlania proszę wybrać „Entire Site", to kluczowy punkt metody
  • W ustawieniach globalnych pop-upu proszę włączyć „Disable Page Scroll" i „Prevent Multiple Popups"
  • W zakładce Advanced proszę wpisać selektor a[href="#ваш-якорь"] w polu Open By Selector
  • Proszę rozmieścić na witrynie linki z kotwicą #ваш-якорь, pop-up będzie otwierał się zewsząd

Krok 1: Proszę utworzyć pop-up w Elementor

Okno wyskakujące Elementor z formularzem kontaktowym

Proszę otworzyć Templates → Popups w bocznym menu WordPress i kliknąć „Add New". Proszę wybrać gotowy szablon z biblioteki Elementor lub zacząć od czystego płótna. Proszę nazwać pop-up w znaczący sposób, na przykład „Contact Popup" lub „Formularz zgłoszeniowy", aby później łatwo go znaleźć na liście. Projekt może być dowolny: formularz kontaktowy, zapis do newslettera, formularz zwrotny, baner promocyjny.

Proszę zbudować zawartość w konstruktorze Elementor jak zwykłą stronę: dodać nagłówek, formularz, tekst, przycisk zamykania. Gdy będzie gotowe, proszę kliknąć Publish.

Po publikacji Elementor otworzy ekran warunków, wyzwalaczy i reguł zaawansowanych. Tutaj dokonamy jedynego krytycznego ustawienia.

Krok 2: Warunek „Entire Site"

Warunek wyświetlania popupu na całej stronie Elementor

Na ekranie warunków proszę znaleźć listę rozwijaną i wybrać Entire Site. To jedyny warunek, który należy ustawić.

Proszę zwrócić uwagę: nawet jeśli planują Państwo wyświetlać pop-up tylko na konkretnych stronach, wybór „Entire Site" jest najprostszą ścieżką. Samo wyświetlanie będzie kontrolowane nie przez warunek strony, lecz przez obecność linku kotwiczącego #contact w adresie URL. Nie ma kotwicy w pasku adresu, nie ma pop-upu.

Ekran wyzwalaczy i reguły zaawansowane można pominąć: proszę kliknąć Next, a następnie Save & Close. Metoda z linkiem kotwiczącym działa niezależnie od tych ustawień.

Krok 3: Globalne ustawienia pop-upów

Ustawienia globalne okien wyskakujących w Elementor

Proszę kliknąć ikonę koła zębatego w lewym dolnym rogu ekranu edycji pop-upu, otworzy się panel Popup Settings. Proszę przejść do zakładki Advanced.

Karta Zaawansowane w ustawieniach popupu Elementor

Tutaj proszę skonfigurować zachowanie pod swoje zadanie. Rekomendujemy włączenie:

  • Disable Page Scroll, aby strona w tle nie przewijała się, gdy pop-up jest otwarty;
  • Prevent Multiple Popups, aby uniknąć nakładania się kilku pop-upów na siebie.

Pozostałe parametry proszę pozostawić domyślne. Najważniejsze jest pole na samym dole zakładki, dla którego wszystko zostało rozpoczęte.

Krok 4: Open By Selector, magia kotwicy

Pole Open By Selector z selektorem CSS linku kotwicy

W polu Open By Selector proszę wpisać selektor CSS, który „nasłuchuje" linku kotwiczącego. Format jest ścisły:

1a[href="#contact"]

Zamiast #contact proszę wstawić swoją kotwicę: #popup / #callback / #sale lub dowolny inny unikalny identyfikator. Selektor reaguje na kliknięcie dowolnego elementu <a>, którego atrybut href jest równy Państwa kotwicy.

Proszę zapisać pop-up. Teraz czeka on, aż odwiedzający przejdzie pod link z odpowiednią kotwicą.

Krok 5: Proszę rozmieścić linki kotwiczące na witrynie

Pozostało dodać linki tam, skąd odwiedzający będzie otwierał pop-up. Odpowiedni będzie dowolny widżet Elementor z polem linku: Button, Text Editor, Image, Icon Box.

W polu linku zamiast zwykłego URL proszę wpisać #contact (lub swoją kotwicę). Na frontendzie działa to tak: podczas kliknięcia przeglądarka dopisuje #contact w pasku adresu, selektor a[href="#contact"] zostaje uruchomiony i pop-up się otwiera.

W praktyce stosujemy trzy typowe scenariusze:

  • Przycisk w sekcji hero, „Zamów rozmowę" z href #callback;
  • Pozycja menu, w Appearance → Menus proszę dodać niestandardowy link z kotwicą #contact;
  • Link tekstowy w treści wpisu, proszę zaznaczyć tekst i wpisać kotwicę w panelu linków.

Proszę sprawdzić: otworzyć dowolną stronę witryny, dopisać #contact w pasku adresu i nacisnąć Enter, pop-up powinien się pojawić. Jeśli nie, proszę wrócić do kroku 4 i sprawdzić selektor.

Wideo: konfiguracja w 3 minuty

Na oficjalnym wideo Elementor pokazano proces od początku do końca, od momentu utworzenia pop-upu do sprawdzenia na działającej witrynie.

⁉️🤔 Często zadawane pytania

Czy metoda działa bez Elementor Pro?

Nie. Moduł Popup Builder jest dostępny tylko w Elementor Pro. W darmowej wersji konstruktora pop-upy są niedostępne. Jeśli korzystają Państwo z wersji Free, proszę rozważyć połączenie Elementor + osobna wtyczka do pop-upów (na przykład Popup Maker), ale tam konfiguracja będzie inna, przez selektory jQuery, a nie przez wbudowany Open By Selector.

Czy warunek „Entire Site" jest obowiązkowy?

Tak, to kluczowy wymóg metody. Jeśli pozostawią Państwo warunek „On Specific Pages", pop-up zostanie pokazany tylko na wybranych stronach i tylko podczas ładowania strony, a nie po kliknięciu kotwicy. Tryb „Entire Site" przekazuje sterowanie do selektora Open By Selector.

Czy można zrobić kilka różnych pop-upów z różnymi kotwicami?

Tak. Proszę utworzyć osobny pop-up dla każdej kotwicy. Na przykład pop-up „Kontakt" z selektorem a[href="#contact"] i pop-up „Zniżka" z a[href="#sale"]. Oba są przypisane do „Entire Site" i uruchamiają się każdy na swoją kotwicę niezależnie.

Dlaczego pop-up nie otwiera się po kotwicy?

Proszę sprawdzić trzy kwestie. Po pierwsze: w pasku adresu musi pojawić się #ваш-якорь, przeglądarka dopisuje go tylko podczas kliknięcia <a> z odpowiednim href, bezpośrednie wpisanie z klawiatury może nie zadziałać. Po drugie: w polu Open By Selector musi być dokładnie a[href="#contact"], bez zbędnych spacji i cudzysłowów innego typu. Po trzecie: proszę otworzyć konsolę przeglądarki (F12) i sprawdzić błędy JavaScript, konflikt z inną wtyczką może blokować uruchomienie.

Czy wpływa to na SEO?

Nie. Linki kotwiczące z krzyżykiem nie są indeksowane przez wyszukiwarki jako osobne strony. Dla Google jest to techniczny element nawigacji, a nie duplikat treści.

Co robić, jeśli standardowe wyzwalacze nie wystarczają

Link kotwiczący przez Open By Selector to najbardziej uniwersalny sposób na otwarcie pop-upu Elementor z dowolnego miejsca witryny. Nie zależy on od tego, na której stronie znajduje się odwiedzający i nie wymaga edycji pliku functions.php.

Jeśli zadanie się komplikuje, na przykład pop-up ma otwierać się podczas przewijania do określonego bloku lub po 10 sekundach od wejścia na witrynę, proszę użyć wbudowanych wyzwalaczy Elementor: On Scroll, On Page Load, On Exit Intent. Konfiguruje się je na tym samym ekranie, na którym wybraliśmy „Entire Site" i doskonale łączą się z metodą kotwiczącą.

Proszę wypróbować na testowej witrynie: utworzyć pop-up, wpisać a[href="#test"], umieścić przycisk z tą kotwicą na stronie głównej. Cały proces zajmuje mniej niż pięć minut.