Długa strona z cechami, opiniami i instrukcją: użytkownik przewija, gubi się i wychodzi. Sklepy rozwiązały ten problem dawno temu, dzieląc opis, parametry i recenzje na zakładki. Bez przeładowania, bez przewijania do potrzebnego bloku.

Ale zakładki są przydatne nie tylko w sklepach internetowych. Proszę spojrzeć na stronę dowolnej wtyczki na WordPress.org: informacje, opinie, instalacja, wszystko jest rozdzielone na zakładki. Użytkownik od razu widzi strukturę i przełącza się tam, gdzie potrzebuje.

Poniżej dwa działające sposoby na dodanie zakładek do wpisów i stron WordPress. Pierwszy, przez kreator stron, jeśli jest już zainstalowany. Drugi, przez bezpłatną wtyczkę Tabs Responsive, jeśli potrzebują Państwo zakładek bez powiązania z konkretnym builderem.

💡 Szybki przegląd:

• Proszę sprawdzić, czy Państwa kreator stron ma moduł zakładek
• Proszę zainstalować bezpłatną wtyczkę Tabs Responsive z katalogu WordPress.org
• Proszę utworzyć zakładki w kreatorze drag-and-drop i wypełnić je treścią
• Proszę wstawić wygenerowany shortcode na wybraną stronę lub do widżetu

Czym zakładki różnią się od akordeonów

Zakładek nie należy mylić z akordeonami, ich zadania są różne. Akordeon rozwija jeden blok i zwija pozostałe: jest to wygodne w przypadku FAQ i ekranów mobilnych. Zakładki utrzymują wszystkie karty widoczne i przełączają treść natychmiastowo. Użytkownik zawsze widzi strukturę i może szybko przejść do dowolnej sekcji.

Według danych Nielsen Norman Group, akordeony są odpowiednie, gdy użytkownik potrzebuje tylko jednej sekcji z kilku. Zakładki, gdy odwiedzający najprawdopodobniej będzie przełączał się między kartami podczas jednej wizyty. W przypadku strony produktu zakładki wygrywają: kupujący porównuje cechy i opis w jednym oknie, nie tracąc kontekstu.

Proszę zwrócić uwagę: jeśli treści w zakładce jest więcej niż na jeden ekran, akordeon może być wygodniejszy. Długa zakładka zmusza do przewijania tak samo, jak zwykła strona.

Sposób 1: zakładki przez kreator stron

Jeśli korzystają już Państwo z kreatora stron, mają Państwo szczęście. W większości popularnych builderów moduł zakładek jest dostępny od razu.

Elementor

🔗 Elementor na WordPress.org

Elementor, najpopularniejszy kreator stron dla WordPressa: ponad 10 milionów aktywnych instalacji i 40-50% rynku page builderów, według danych Colorlib na 2026 rok. Moduł zakładek jest dostępny w darmowej wersji. Proszę przeciągnąć element „Tabs" na stronę, edytować nagłówki i zawartość zakładek, a następnie dostosować styl do projektu witryny.

Zaletą jest to, że zakładki Elementora dziedziczą style globalne: czcionki, kolory i odstępy są przejmowane automatycznie. Nie trzeba osobno edytować CSS.

WPBakery

🔗 WPBakery, oficjalna strona

WPBakery (wcześniej Visual Composer), premiumowy kreator, który często jest dostarczany z motywami. W przeciwieństwie do Elementora moduł zakładek jest tu początkowo pusty: do każdej zakładki dodaje się osobne elementy, tekst, obrazy, ikony, przyciski. Daje to większą elastyczność, ale wymaga też nieco więcej czynności podczas konfiguracji.

Jeśli potrzebna jest szczegółowa instrukcja dotycząca WPBakery, mamy osobny poradnik.

Sposób 2: wtyczka Tabs Responsive, konfiguracja krok po kroku

Nie ma kreatora stron, a instalowanie buildera tylko ze względu na zakładki to przesada. Tabs Responsive, darmowa wtyczka z katalogu WordPress.org, robi dokładnie to, co obiecuje: dodaje zakładki do dowolnego wpisu lub strony za pomocą shortcode’u lub widżetu.

🔗 Tabs Responsive na WordPress.org

Wtyczka jest aktywna i aktualizowana: 20 000+ aktywnych instalacji, ocena 4,7 na 5, 500+ opinii, ostatnia aktualizacja w maju 2026, kompatybilność z WordPress 6.8.3. Darmowa wersja zawiera jeden szablon projektu, styl poziomy i pionowy, obsługę ikon Font Awesome. Wersja Pro dodaje 20+ szablonów, 500+ fontów Google oraz animację treści.

Krok 1: instalacja

W panelu administracyjnym WordPress proszę przejść do Wtyczki → Dodaj nową, wpisać w wyszukiwarkę tabs responsive. Proszę znaleźć wtyczkę od wpshopmart, kliknąć Zainstaluj teraz, a następnie Aktywuj.

Po aktywacji w lewym menu pojawi się nowa pozycja „Tabs Responsive".

Krok 2: tworzenie pierwszych zakładek

Proszę przejść do Tabs Responsive → Add New Tabs. Otworzy się kreator typu „przeciągnij i upuść".

Na początek proszę nadać zestawowi zakładek opisową nazwę, na przykład „Charakterystyka produktu" lub „Zakładki strony głównej". Przyda się to, gdy będzie Pan/Pani mieć kilka zestawów dla różnych stron.

Kreator wygląda solidnie, ale logika jest prosta:

Teraz proszę wypełnić same zakładki. W sekcji Dodaj zakładki dla każdej karty proszę skonfigurować:

• Tytuł zakładki, czyli to, co użytkownik zobaczy na etykiecie: „Opis", „Charakterystyka", „Opinie".
• Opis zakładki, czyli zawartość karty. Działa pełnoprawny edytor WYSIWYG: można wstawiać obrazy, wideo, muzykę, inne shortkody.
• Ikona zakładki, proszę wybrać ikonę z biblioteki Font Awesome wbudowanej we wtyczkę.
• Wyświetlaj nad ikoną, opcja umieszcza tytuł nad ikoną lub wyłącza ikonę, pozostawiając tylko tekst.
• Usuń, przycisk usuwania konkretnej karty.
• Dodaj nowe zakładki, dodaje pustą kartę do zestawu.
• Usuń wszystko, resetuje wszystkie karty jednocześnie.

Zakładki można przeciągać, zmieniając ich kolejność. Proszę klikać Zapisz szkic w trakcie pracy, aby w razie przypadkowego opuszczenia strony zmiany nie przepadły.

Krok 3: projekt i style

Wygląd zakładek konfiguruje się na prawym panelu bocznym kreatora.

Darmowa wersja oferuje jeden szablon projektu:

Wersja Pro dodaje kolejnych 19 szablonów. Jednak nawet w darmowej można skonfigurować: kolor tła i czcionki, rodzinę fontów, odstępy, obramowania, wyrównanie ikony, animację przełączania.

Jeśli standardowe ustawienia nie wystarczają, we wtyczce znajduje się pole na własny CSS:

Tutaj też znajduje się przycisk Zaktualizuj ustawienia domyślne, proszę go kliknąć, aby wszystkie nowe zestawy zakładek były tworzone z bieżącymi parametrami stylu.

Krok 4: publikacja zakładek na stronie

Gdy treść i styl są gotowe, proszę kliknąć Opublikuj w górnej części ekranu.

Wtyczka wygeneruje shortcode w postaci [TABS_R id=443]. Proszę go skopiować.

Proszę otworzyć wpis lub stronę, gdzie mają zostać dodane zakładki, i wkleić shortcode w wybranym miejscu. Działa w każdym edytorze: zarówno w klasycznym, jak i w Gutenbergu.

Jeśli trzeba dodać zakładki do sidebaru lub stopki, proszę użyć widżetu Tabs Responsive. Proszę przejść do Wygląd → Widżety:

Proszę kliknąć link „Click here", a zostaną Państwo przeniesieni na ekran widżetów, gdzie można przeciągnąć widżet w dowolny obszar:

Rezultat po 5-7 minutach konfiguracji wygląda następująco:

Kolory i style są tutaj podstawowe, w razie potrzeby można je dopracować na prawym panelu kreatora lub za pomocą własnego CSS.

Proszę obejrzeć wideo, aby zobaczyć cały proces od instalacji do gotowych zakładek na stronie:

⁉️🤔 Często zadawane pytania

Czy karty działają na urządzeniach mobilnych?

Tak. Wtyczka Tabs Responsive jest zbudowana na Bootstrapie, więc karty dostosowują się do każdego ekranu. Na wąskich ekranach poziome karty mogą przekształcać się w pionową listę lub akordeon, w zależności od wybranego szablonu. Proszę sprawdzić, jak karty wyglądają na telefonie po skonfigurowaniu: jeśli tekst etykiet jest długi, styl pionowy może okazać się wygodniejszy niż poziomy.

Czy można dodać karty do treści wpisu bez wtyczki?

Bez wtyczki lub kreatora nie, chyba że napisze Pan/Pani własny kod w JavaScript i CSS. WordPress od razu po instalacji nie daje gotowego rozwiązania dla kart w treści. Wtyczka Tabs Responsive rozwiązuje to zadanie bez kodu: instalacja i konfiguracja zajmują minuty, a efekt uzyskuje się przez shortcode. To kompromis między „nie chcę instalować wtyczki" a „nie chcę pisać kodu od zera".

Czy karty wpływają na SEO?

Przy prawidłowej implementacji nie. Treść wszystkich kart jest ładowana w kodzie HTML strony podczas pierwszego renderowania, Google ją widzi i indeksuje. Wtyczka Tabs Responsive udostępnia całą treść w kodzie źródłowym, a nie ładuje jej asynchronicznie, co jest bezpieczne dla SEO. Problemy mogą wystąpić tylko przy kartach ładowanych przez AJAX (treść karty ładuje się dopiero po kliknięciu), takie rozwiązania należy stosować z ostrożnością.

Co zrobić, jeśli karty kolidują z motywem?

Konflikt stylów to najczęstszy problem. Najpierw proszę spróbować użyć pola niestandardowego CSS w ustawieniach wtyczki: zazwyczaj wystarczy kilka linijek, aby poprawić kolor tła lub odstępy pod motyw. Jeśli to nie pomoże, proszę przełączyć się ze stylu poziomego na pionowy w ustawieniach szablonu, czasem problem dotyczy tylko jednego z trybów. W ostateczności forum wsparcia wtyczki na WordPress.org: twórca odpowiada i pomaga przy konfliktach.

Czym Tabs Responsive różni się od kart w kreatorze stron?

Wtyczka nie jest powiązana z konkretnym builderem. Jeśli zdecyduje się Pan/Pani zmienić kreator lub przejść na natywny edytor bloków, karty przez shortcode będą nadal działać. W przypadku kart Elementora lub WPBakery nie ma takiej elastyczności: przy zmianie kreatora karty znikają razem z nim. Ponadto Tabs Responsive oferuje styl pionowy, widżet i ikony, nie każdy builder daje to w wersji darmowej.

Co wybrać do swojego zadania

Jeśli kreator stron jest już zainstalowany, proszę użyć jego modułu kart. To szybsze: jedno przeciągnięcie i upuszczenie, i karty są na stronie.

Jeśli nie ma Pan/Pani kreatora, proszę wybrać wtyczkę Tabs Responsive. Jest darmowa, aktualizowana i nie wiąże Pana/Pani z konkretnym builderem. Shortcode i widżet działają w każdym motywie i każdym edytorze.

Dla sklepów internetowych na WooCommerce wtyczka dodaje osobną kartę z opisem do karty produktu, tego nie ma w kartach Elementora.

Proszę wypróbować Tabs Responsive na stronie testowej: instalacja zajmuje minutę, a pierwsze karty zbuduje Pan/Pani w 5 minut. Jeśli utkną Państwo na którymś kroku, proszę zajrzeć do filmu powyżej lub napisać w komentarzach, rozwiążemy to.