Jeśli korzystasz z Elementora i chcesz wysłać użytkownika od razu do konkretnej karty (Tabs) — np. z menu, przycisku, mailingu, albo z innej podstrony — to dobrze trafiłeś.
Pokażę Ci krok po kroku, jak działają kotwice w kartach Elementor (Tabs) i jak sprawić, żeby kliknięcie w link automatycznie otwierało właściwą kartę + przewijało stronę.
To świetny trik UX — poprawia konwersję, skraca drogę użytkownika do treści i daje Ci pełną kontrolę nad tym, co zobaczy jako pierwsze.
Czym są kotwice w kartach (Tabs) w Elementorze?
W klasycznym Elementorze możesz tworzyć zakładki (Tabs), akordeony i toggles. Domyślnie jednak nie da się otworzyć konkretnej zakładki bez klikania w nią ręcznie.
Dlatego stosujemy kotwice (ID) oraz odrobinę JavaScriptu, który po wejściu na stronę:
- sprawdza, czy w linku znajduje się parametr / anchor,
- otwiera odpowiednią kartę,
- przewija stronę dokładnie do niej.
To działa zarówno z:
✔️ przycisku,
✔️ menu,
✔️ innego miejsca tej samej strony,
✔️ jak i z mailingu → klik → otwiera właściwą kartę.
Jak przygotować widget Tabs w Elementorze
- Dodaj widget KARTY na stronę.
- Utwórz zakładki: np. „Opis”, „FAQ”, „Cennik”, „Dostawa”.
- Kliknij na tytuł każdej karty → przejdź do ustawień.
- W polu „HTML Anchor” lub „Identyfikator CSS” wpisz nazwę kotwicy.
Przykłady dobrych ID:
- opis
- faq-1
- cennik
- dostawa-do-domu
Unikaj:
- spacji
- wielkich liter
- polskich znaków
Jak nadać ID poszczególnym kartom
Każda karta musi mieć swoje unikalne ID.
Jeśli masz trzy karty:
| Nazwa karty | ID (kotwica) |
|---|---|
| Opis | opis |
| FAQ | faq |
| Cennik | cennik |
Dzięki temu link będzie mógł wywołać konkretne działanie.
Jak stworzyć link otwierający konkretną kartę?
Proste przykłady:
🔗 Link z anchor (najczęstszy)
https://twojastrona.pl/oferta#faq🔗 Link z parametrem (np. w mailingu)
https://twojastrona.pl/oferta?faqOba działają — zależnie od tego, jaki wariant zastosujemy w JS.Kod, który automatycznie otworzy kartę po wejściu na stronę
W Elementorze dodaj widget HTML (w dowolnym miejcu) i wklej:
<script>
/* Kotwice do kart w elementorze
* kod pochodzi z https://weebsky.pl/elementor-kotwice-w-kartach-tabs-jak-otworzyc-konkretna-karte-z-linku-poradnik-kod/
*/
window.addEventListener('load', () => {
setTimeout(function () {
let scrollOffset = 100; /* offset przy scrollowaniu */
const tabsAccordionToggleTitles = document.querySelectorAll('.e-n-accordion-item-title, .e-n-tab-title, .elementor-tab-title');
const clickTitleWithAnchor = (anchor) => {
tabsAccordionToggleTitles.forEach(title => {
if (title.querySelector(`#${anchor}`) != null || title.id === anchor || (title.closest('details') && title.closest('details').id === anchor)) {
if (title.getAttribute('aria-expanded') !== 'true' && !title.classList.contains('elementor-active')) title.click();
let timing = 0;
let scrollTarget = title;
if (getComputedStyle(title.closest('.elementor-element')).getPropertyValue('--n-tabs-direction') == 'row') scrollTarget = title.closest('.elementor-element');
if (title.closest('.e-n-accordion, .elementor-accordion-item, .elementor-toggle-item')) {
timing = 400;
}
setTimeout(function () {
jQuery('html, body').animate({
scrollTop: jQuery(scrollTarget).offset().top - scrollOffset,
}, 'slow');
}, timing);
}
});
};
document.addEventListener('click', (event) => {
if (event.target.closest('a') && event.target.closest('a').href.includes('#')) {
const anchor = extractAnchor(event.target.closest('a').href);
if (anchor && isAnchorInTitles(anchor, tabsAccordionToggleTitles)) {
event.preventDefault();
clickTitleWithAnchor(anchor);
}
}
});
const currentAnchor = extractAnchor(window.location.href);
if (currentAnchor) {
clickTitleWithAnchor(currentAnchor);
}
function extractAnchor(url) {
const match = url.match(/#([^?]+)/);
return match ? match[1] : null;
};
function isAnchorInTitles(anchor, titles) {
return Array.from(titles).some(title => {
return title.querySelector(`#${anchor}`) !== null || title.id === anchor || (title.closest('details') && title.closest('details').id === anchor);
});
};
}, 300);
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
let scrollOffset = 150; // ile pikseli od góry ma się zatrzymać scroll
// Pobieramy fragment adresu
let hash = window.location.hash.replace('#', '');
let param = window.location.search.replace('?', '');
// Łączymy obie opcje (anchor i parametr)
let target = hash || param;
if(target) {
// Szukamy kart w Elementor Tabs
let titles = document.querySelectorAll('.elementor-tab-title');
titles.forEach(function(title){
if(title.getAttribute('id') === target){
title.click();
setTimeout(function(){
let elementPosition = title.getBoundingClientRect().top + window.scrollY - scrollOffset;
window.scrollTo({ top: elementPosition, behavior: 'smooth' });
}, 800);
}
});
}
});
</script>
Co ten kod robi?- sprawdza, czy w URL jest
#idlub?id - szuka karty o takim ID
- klika ją automatycznie
- przewija stronę do niej
Jak ustawić scroll i offset?
W kodzie masz:
let scrollOffset = 150;Zmień wartość, jeśli:
- masz sticky header → ustaw większą
- chcesz, żeby karta była dokładnie na środku ekranu
- chcesz minimalne przewinięcie
Obsługa mobile + częste błędy
Na telefonach Elementor ma inne klasy kart, więc czasem trzeba dopasować selektor:
.elementor-tab-title.elementor-activeTypowe błędy:- duplikacja ID → dwie karty mają takie samo ID
- kopiowanie widgetu powoduje konflikt
- link ma spację lub polskie znaki
- kod JS został wklejony w złe miejsce (np. w sekcji HEAD bez obsługi DOMContentLoaded)
Otwieranie kart z mailingu
To jeden z najczęstszych use-case’ów.
Dajesz przycisk w newsletterze:
Zobacz szczegóły dostawy:https://twojastrona.pl/oferta?dostawaUżytkownik:
- klika w mailu,
- strona się wczytuje,
- karta „Dostawa” otwiera się automatycznie → dokładnie o to chodzi.
Świetne do:
- FAQ produktów,
- stron kursów online,
- ofert z wieloma zakładkami,
- cenników,
- onboardingów.
FAQ
Tak, jeśli użyjesz anchorów #id. Kliknięcie z tej samej strony otworzy kartę natychmiast.
Tak — wystarczy zmienić selektory CSS (.elementor-accordion-title).
Nie — kod jest lekki i działa dopiero po załadowaniu strony.
Nie — przykład jest w czystym JS.
Podsumowanie
W tym poradniku pokazałem CI:
- jak działają kotwice w kartach Elementor (Tabs),
- jak tworzyć linki otwierające konkretne zakładki,
- jak dodać krótki skrypt JS, który robi to automatycznie,
- jak przewijać stronę do właściwego miejsca,
- jak wykorzystać to w mailingach i UX.
To jeden z tych trików, o których większość początkujących nie ma pojęcia — a robią ogromną różnicę na stronach sprzedażowych, ofertowych i produktowych.
