WordPress Training
ElementorWordPress

JetTabs Anleitung: Tabs & Akkordeons in Elementor

JetTabs Anleitung: Tabs & Akkordeons in Elementor
Inhaltsverzeichnis (11)

Lange Seiten sind ein Dauerthema. Häufige Fragen, Lieferbedingungen, Produktdetails, Leistungsbeschreibungen: Alles soll drauf, aber niemand will endlos scrollen. Tabs und Akkordeons sind die klassische Lösung. Der Inhalt bleibt auf der Seite, wird aber erst sichtbar, wenn jemand danach fragt.

Elementor hat dafür eigene Widgets. Die reichen für einfache Fälle. Sobald Sie aber ganze Vorlagen in einen Tab legen, Tabs ineinander verschachteln oder WooCommerce-Produktseiten neu gliedern wollen, wird es eng. Hier setzt JetTabs von Crocoblock an.

Ich zeige Ihnen, was das Plugin kann, wie Sie es an einem FAQ-Bereich einrichten und wann Sie es nicht brauchen.

Die kurze Antwort

JetTabs ist sinnvoll, wenn Sie Tabs oder Akkordeons mit gestalteten Vorlagen füllen, Inhalte erst beim Klick nachladen oder Produktseiten in WooCommerce strukturieren wollen. Für ein schlichtes FAQ mit fünf Fragen reicht das kostenlose Akkordeon von Elementor völlig. JetTabs funktioniert laut Crocoblock mit dem Elementor-Editor.

Was JetTabs kann

Die offizielle Produktseite nennt diese Funktionen:

  • Tabs, horizontal oder vertikal, mit einstellbarer Position der Reiter.
  • Klassische Akkordeons, horizontal oder vertikal, etwa für AGB, FAQ oder lange Erklärtexte.
  • Bild-Akkordeons: eine Bildreihe, bei der sich jedes Bild per Klick oder Hover aufklappt. Gedacht für Portfolio, Produkte oder Leistungen.
  • Toggles, um zwischen zwei Optionen hin- und herzuschalten, etwa bei Preismodellen oder Produktvergleichen.
  • Verschachtelte Tabs: Tabs innerhalb von Tabs für inhaltsreiche Seiten.
  • WooCommerce-Produkttabs für Beschreibung, technische Daten und Bewertungen, plus eigene Tabs für Lieferinfos, Videos oder Garantie.
  • Nachladen per AJAX: Der Inhalt eines Tabs wird erst geladen, wenn jemand ihn anklickt. Das verkürzt die erste Ladezeit bei aufwendigen Vorlagen.
  • Inhalt manuell oder als Vorlage: Sie können Text direkt eintragen oder eine fertige Elementor-Vorlage einsetzen.
  • Gestaltung: Abstände, Icons, Badges, Animationen wie Fade, Zoom oder Move up, Scrollen zum Inhalt mit einstellbarem Versatz.
  • Mobile Bedienung: Die Elemente sollen sich an Touch-Bedienung anpassen.
  • WPML-Kompatibilität für mehrsprachige Seiten.
Die Schritte zur Einrichtung von JetTabs in Elementor

Schritt für Schritt: JetTabs einrichten

Praxisbeispiel: ein FAQ-Bereich als Akkordeon, bei dem eine Antwort eine gestaltete Vorlage mit Bild und Button enthält.

  1. Plugin installieren. Die ZIP-Datei aus Ihrem Crocoblock-Konto unter Plugins → Installieren → Plugin hochladen hochladen und aktivieren. Elementor muss aktiv sein.
  2. Lizenz aktivieren. Im WordPress-Menü unter Crocoblock den Lizenzschlüssel eintragen.
  3. Widgets prüfen. In den JetPlugins-Einstellungen im Crocoblock-Bereich nur die Widgets aktiv lassen, die Sie brauchen.
  4. Vorlage für die Antwort anlegen. Unter Templates → Gespeicherte Templates eine neue Abschnitt-Vorlage bauen, zum Beispiel eine Antwort mit kurzem Text, Foto und Button „Termin anfragen“. Speichern.
  5. Seite öffnen. Die FAQ- oder Leistungsseite in Elementor bearbeiten.
  6. Widget einfügen. Im Widget-Panel nach „Accordion“ suchen und das JetTabs-Widget wählen (am Jet-Symbol erkennbar).
  7. Fragen anlegen. Für jede Frage einen Eintrag mit Titel anlegen. Bei einfachen Antworten den Text direkt eintragen, bei der aufwendigen Antwort die eben gespeicherte Vorlage auswählen.
  8. Verhalten festlegen. Bestimmen Sie, ob ein Eintrag beim Laden schon geöffnet ist und ob mehrere gleichzeitig offen sein dürfen. Für längere Vorlagen das Nachladen per AJAX einschalten.
  9. Gestalten. Icons für offen und geschlossen, Abstände, Farben aus den globalen Vorgaben.
  10. Mobil testen und veröffentlichen. In der Responsive-Ansicht prüfen, ob sich die Einträge auf dem Handy sauber öffnen.

Das Ergebnis: ein übersichtlicher FAQ-Bereich, bei dem einzelne Antworten mehr sein dürfen als Text. Nach demselben Prinzip bauen Sie Tabs für Leistungen oder einen Preis-Toggle für Monats- und Jahresabo.

Drei Praxisbeispiele

Onlineshop für Outdoor-Ausrüstung in Tirol. Auf der Produktseite trennen WooCommerce-Tabs Beschreibung, technische Daten und Bewertungen. Ein eigener Tab erklärt Versand nach Deutschland und in die Schweiz. Wer Shop-Seiten neu aufbaut, findet in der WooCommerce-Schulung den passenden Rahmen.

Steuerberatungskanzlei in Graz. Die Leistungsseite in vertikalen Tabs: Buchhaltung, Lohnverrechnung, Jahresabschluss. Jeder Tab ist eine eigene Vorlage mit Text, Ansprechperson und Kontaktbutton.

Fotostudio in Zürich. Ein Bild-Akkordeon zeigt vier Bereiche: Hochzeit, Business, Familie, Produkt. Beim Darüberfahren klappt das jeweilige Bild auf. Das wirkt lebendiger als ein starres Raster.

Typische Fehler und wie Sie sie vermeiden

Wichtige Inhalte verstecken. Was die meisten Besucher wissen müssen, gehört nicht in einen zugeklappten Tab. Tabs sind für Ergänzendes.

Schwere Vorlagen ohne Nachladen. Wer fünf Tabs mit Galerien und Videos füllt, lädt alles auf einmal. Schalten Sie für solche Fälle das AJAX-Nachladen ein.

Zu viele Ebenen. Verschachtelte Tabs sind möglich, aber zwei Ebenen sind die Grenze. Danach findet niemand mehr etwas, am Handy schon gar nicht.

Doppelte Widgets. Wer JetTabs installiert und trotzdem das Elementor-Akkordeon und ein weiteres Tab-Plugin nutzt, hat drei Lösungen für dasselbe Problem. Legen Sie sich fest.

Cache nach Änderungen. Bei Vorlagen, die in Tabs eingebettet sind, nach Änderungen den Seiten-Cache leeren.

Lohnt sich JetTabs? Kosten und Alternativen

JetTabs kostet als Einzellizenz laut Crocoblock $43 pro Jahr für eine Website, inklusive einem Jahr Updates und Support. Zeitweise wird ein reduzierter Aktionspreis angezeigt. Das Paket All-Inclusive Plus mit allen 23 JetPlugins kostet $249 pro Jahr. Es gilt eine 30-tägige Geld-zurück-Garantie. (Preisstand Oktober 2026 — bitte vor dem Kauf prüfen.)

Ehrlich gesagt: JetTabs allein ist selten der Grund, Crocoblock zu kaufen. Elementor bringt Tabs, Akkordeon und Toggle kostenlos mit, und neuere Elementor-Versionen können auch verschachtelte Inhalte. Wenn Ihnen das reicht, sparen Sie sich die Lizenz.

Interessant wird JetTabs, wenn Sie Vorlagen in Tabs einsetzen, Bild-Akkordeons wollen oder bereits mit anderen JetPlugins arbeiten. Mit JetElements und JetEngine kombiniert, ist das Paket meist die bessere Rechnung. Den Überblick finden Sie in der Crocoblock-Übersicht.

Wenn die Zusatzfunktionen für Sie zählen: JetTabs bei Crocoblock ansehen.

Häufige Fragen

Was ist der Unterschied zwischen JetTabs und den Elementor-Tabs?

Die Elementor-Widgets decken einfache Tabs, Akkordeons und Toggles ab. JetTabs ergänzt Bild-Akkordeons, WooCommerce-Produkttabs, Vorlagen als Inhalt und das Nachladen per AJAX.

Kann ich mit JetTabs WooCommerce-Produktseiten gliedern?

Ja. Crocoblock nennt ausdrücklich Produkttabs für Beschreibung, Spezifikationen und Bewertungen sowie eigene Tabs, etwa für Lieferinfos oder Garantie.

Sind Inhalte in Tabs schlecht für SEO?

Inhalte, die beim Laden im Quelltext stehen, kann Google lesen. Wenn Sie Tabs per AJAX nachladen, ist der Inhalt zunächst nicht im Quelltext. Für suchrelevante Texte würde ich das Nachladen daher nicht verwenden.

Funktioniert JetTabs mit mehrsprachigen Seiten?

Crocoblock nennt WPML-Kompatibilität. Andere Übersetzungs-Plugins sollten Sie vorher testen.

Wenn Sie JetTabs nicht allein einrichten möchten: In meiner Elementor-Schulung richte ich es mit Ihnen gemeinsam an Ihrer eigenen Website ein, remote, € 109,– pro Stunde.

Newsletter

WordPress-Wissen per E-Mail

Neue Anleitungen und Praxistipps zu WordPress, Elementor und WooCommerce. Kein Spam, Abmeldung jederzeit.

Sie bekommen zuerst eine Mail zur Bestätigung. Details in der Datenschutzerklärung.

Tags

CrocoblockElementorJetTabsWordPress