Wtyczka JetTabs For Elementor - 2.3.1

JetTabs For Elementor to płatny addon Crocoblock dla page buildera Elementor. Dokłada cztery widgety do porządkowania treści: zakładki, klasyczny akordeon, akordeon obrazkowy i przełącznik. Każdy potrafi osadzić w środku cały szablon Elementora i dane dynamiczne, nie tylko prosty tekst. Trafia do użytkowników Elementora, sklepów WooCommerce i twórców rozbudowanych stron.

Cztery widgety JetTabs For Elementor

JetTabs For Elementor dostarcza do Elementora cztery widgety organizacji treści: Tabs (zakładki w układzie poziomym lub pionowym), Classic Accordion (rozwijane bloki z opcją Collapsible), Image Accordion (akordeon obrazkowy z efektami easing) oraz Switcher (przełącznik dwóch szablonów). Każdy widget osadza całe szablony Elementora, a nie tylko prosty tekst – i to właśnie odróżnia go od natywnych zakładek buildera.

Zawartość każdego widgetu buduje się jako osobny szablon Elementora, wybierany z listy opcją Choose Template. W zakładce albo elemencie akordeonu ląduje więc dowolny układ: kolumny, sekcje, inne widgety.

Tabs — zakładki poziome i pionowe

Widget Tabs grupuje treść w zakładki nawigacyjne wewnątrz jednego bloku. Układ poziomy albo pionowy, pozycja zakładek do wyboru: góra, lewo lub prawo. Każda zakładka łączy ikonę, etykietę i osadzony szablon Elementora.

• Slider Swiper – zakładki potrafią działać jak slider, z opcją Looped, czyli zapętleniem przewijania.
• Scrolling Tabs Navigation – przewijana nawigacja, która ratuje sytuację przy dużej liczbie zakładek; osobna logika widoczności dla każdego breakpointu responsywnego.
• Badge’y i ikony – etykiety zakładek przyjmują ikony aktywne oraz oznaczenia typu badge.

Classic Accordion — rozwijane bloki treści

Classic Accordion zwija treść w rozwijane bloki i sprawdza się przy długich tekstach, regulaminach oraz sekcjach FAQ. Każdy element ma etykietę, ikonę, ikonę aktywną i opcję Collapsible, która decyduje, czy bloki da się zamknąć do końca.

Treść elementów akordeonu pochodzi też z pól niestandardowych, przez Dynamic Tag. Od wersji 2.2.5 widget generuje schema FAQ w formacie JSON-LD dla zestawu pytań – co bezpośrednio wspiera widoczność sekcji FAQ w wyszukiwarce.

Image Accordion — akordeon obrazkowy

Image Accordion pokazuje serię obrazów jako rozwijane panele, a aktywny obraz powiększa się po kliknięciu lub najechaniu. Widget obsługuje orientację poziomą i pionową, ustawialny rozmiar aktywnego elementu w procentach oraz czas trwania animacji.

Do dyspozycji jest sześć typów easingu animacji: Sine, Quint, Cubic, Expo, Circ i Back. Każdy panel mieści tytuł, opis oraz przycisk „Learn More” z linkiem – opcjonalnie z atrybutem nofollow i otwieraniem w nowym oknie.

Switcher — przełącznik treści

Switcher przełącza w jednym bloku między dwoma szablonami Elementora za pomocą interaktywnej kontrolki. Każdy stan, włączony i wyłączony, wyświetla inny szablon. Projektant ustala stan początkowy, preset kontrolki oraz efekt pokazania treści.

Typowe zastosowanie? Porównanie dwóch wariantów bez przeładowania strony – choćby planu miesięcznego i rocznego w cenniku.

Treść dynamiczna, ładowanie AJAX i stylizacja JetTabs For Elementor

JetTabs For Elementor buduje zawartość zakładek i akordeonów z gotowych szablonów Elementora wybieranych z listy, a w połączeniu z JetEngine wyświetla dane dynamiczne i pętle treści z pól niestandardowych oraz custom post types. Treść ciężkich zakładek doładowuje się przez AJAX dopiero po kliknięciu, co skraca początkowy czas ładowania strony.

Szablony Elementora i dane dynamiczne z JetEngine

Każdą zakładkę, element akordeonu i stan przełącznika składa się z osobnego szablonu Elementora. W środku może wylądować dowolny układ buildera. Pełna swoboda projektowa – choć przy wielu zakładkach oznacza to żonglowanie wieloma szablonami naraz.

W parze z JetEngine widgety pobierają dane przez Dynamic Tag oraz Query Builder. Pola niestandardowe i pętle wpisów z custom post types pojawiają się wprost wewnątrz zakładek, co pasuje do katalogów, listingów i stron opartych na danych.

Odroczone ładowanie treści przez AJAX

Ładowanie AJAX doładowuje zawartość zakładki dopiero w momencie kliknięcia, zamiast wczytywać wszystkie panele razem z resztą strony. Mechanizm skraca początkowy czas renderowania przy ciężkich szablonach. Dostępny od wersji 2.0.0, a od 2.2.6 rozszerzony o tryb Self-request.

Osobna opcja Editor Load Level Option reguluje, ile ustawień stylu ładuje się w edytorze Elementora. Mniej kontrolek to szybsza praca nad rozbudowanymi układami.

Stylizacja, ikony i animacje

Każdy widget dostaje rozbudowany panel stylizacji: tło klasyczne i gradientowe, obramowania, border-radius, box-shadow, padding i margin oraz pełną typografię. Kontrolki i ikony stylizuje się osobno w stanach Normal, Hover i Active.

• Animacje pokazania – fade, zoom, move up, fall i inne, z ustawialnym czasem trwania oraz opóźnieniem.
• Scroll do treści z offsetem – po kliknięciu zakładki strona przewija się do panelu, z możliwością ustawienia przesunięcia w pikselach.
• Deep-linking – kotwica zakładki podpina się pod link w menu WordPress, dzięki czemu otwiera konkretną zakładkę.

Typowe wdrożenia JetTabs For Elementor

JetTabs For Elementor sprawdza się przy dzieleniu stron produktu WooCommerce na zakładki (opis, specyfikacja, recenzje, dostawa), budowie sekcji FAQ w akordeonie ze schema JSON-LD, prezentacji portfolio w akordeonie obrazkowym oraz porównywaniu planów cenowych przełącznikiem. To cztery najczęstsze scenariusze, w których wtyczka kompaktuje dużo treści w czytelne, interaktywne bloki.

Zakładki na stronie produktu WooCommerce

Długą stronę produktu WooCommerce widget Tabs porządkuje w osobne zakładki: opis, specyfikacja, recenzje, dostawa, gwarancja czy wideo. W połączeniu z JetWooBuilder zakładki trafiają do niestandardowego szablonu produktu, a pętla treści WooCommerce wyświetla dane konkretnego towaru.

Demo Crocoblock pokazuje ten układ na przykładzie księgarni online – z pionowym ustawieniem zakładek i pętlą treści sklepu wewnątrz paneli.

Sekcja FAQ w akordeonie ze schema JSON-LD

Classic Accordion buduje zwięzłą sekcję najczęściej zadawanych pytań, zwijając każde pytanie w rozwijany blok. Od wersji 2.2.5 widget generuje schema FAQ w formacie JSON-LD dla całego zestawu, co dostarcza wyszukiwarce dane strukturalne pytań i odpowiedzi.

Porównanie planów cenowych i portfolio

Switcher prezentuje cennik w dwóch wariantach naraz – rozliczenie miesięczne i roczne – przełączane jedną kontrolką, bez przeładowania strony. Image Accordion z kolei sprawdza się w portfolio i prezentacjach wizualnych: seria prac rozwija się po kliknięciu, a każdy panel niesie tytuł, opis i przycisk z linkiem do szczegółów.

Dla jakich projektów JetTabs For Elementor sprawdza się najlepiej

JetTabs For Elementor sprawdza się najlepiej u właścicieli sklepów WooCommerce budujących strony produktu w Elementorze, twórców stron z dużą ilością treści, agencji pracujących na Elementorze oraz użytkowników JetEngine prezentujących dane dynamiczne. Nie jest natomiast rozwiązaniem dla osób budujących na Bricks, Gutenbergu czy Divi – działa wyłącznie w Elementorze.

Sklepy WooCommerce i strony content-heavy

Sklepy WooCommerce zyskują uporządkowane strony produktu, na których długi opis rozpada się na czytelne zakładki. Strony z dużą ilością treści – regulaminy, długie oferty, bazy wiedzy – kompaktują materiał w akordeony, a odroczone ładowanie AJAX zdejmuje ciężar startowy.

Agencje i użytkownicy JetEngine

Agencje i freelancerzy pracujący na Elementorze osadzają w zakładkach pełne szablony i sięgają po głęboką stylizację, która daje swobodę projektową bez kodu. Użytkownicy JetEngine wyświetlają w zakładkach dane dynamiczne i pętle treści, co pasuje do katalogów i stron opartych na danych.

Dla kogo JetTabs nie jest najlepszym wyborem

Część projektów lepiej obsłużą inne narzędzia.

• Strony budowane na Bricks, Gutenbergu, Divi lub Oxygen jako głównym builderze – JetTabs nie udostępnia dla nich natywnych elementów.
• Projekty, którym wystarczają natywne zakładki i akordeon Elementora – addon ma sens dopiero wtedy, gdy w grę wchodzą szablony w zakładkach, układy pionowe, AJAX, image accordion lub switcher.
• Osoby szukające dużego, wielofunkcyjnego pakietu dziesiątek widgetów – JetTabs jest wąsko wyspecjalizowany w organizacji treści.

Wymagania techniczne i kompatybilność JetTabs For Elementor

JetTabs For Elementor wymaga zainstalowanego i aktywnego page buildera Elementor – nie działa samodzielnie ani z innymi builderami (Bricks, Gutenberg, Divi, Oxygen). Progowe wymagania środowiska pokrywają się z wymaganiami Elementora (WordPress 6.5+, PHP 7.4+, rekomendowane 8.x), a wtyczka jest kompatybilna z WooCommerce, JetEngine, JetWooBuilder oraz oficjalnie z WPML.

Zależność od Elementora (Free i Pro)

Elementor jest zależnością bazową. JetTabs dokłada swoje widgety do panelu edytora i bez aktywnego buildera nie uruchomi się wcale. Według materiałów producenta widgety działają już z darmowym Elementorem, a wersja Pro nie jest warunkiem ich uruchomienia.

Uwaga: Crocoblock nie publikuje osobnej, twardej listy minimalnych wersji WordPressa i PHP dla samego JetTabs – progiem praktycznym są wymagania Elementora podane w tabeli poniżej.

Wymagania środowiska i kompatybilność z motywami / builderem

Środowisko serwerowe odpowiada wymaganiom Elementora: WordPress 6.5 lub nowszy, PHP 7.4 lub nowszy (rekomendowane 8.x) oraz baza MySQL 5.6+ lub MariaDB 10.5+. Wtyczka jest aktualizowana pod flex container i nowe breakpointy Elementora, a do tego obsługuje układy RTL.