Wenn du eine Webseite erstellst, ist es wichtig, dass deine Inhalte gut organisiert sind. Wenn du deine Seiten übersichtlich anordnest, verbessert das die User Experience (UX) und macht den Text verständlicher. Eine Möglichkeit, deine Inhalte zu organisieren, ist das Elementor Tabs Widget.
Mit Registerkarten können deine Nutzer zwischen verschiedenen Inhaltsbereichen wechseln. Mit dieser Funktion müssen die Besucher nicht mehr zu verschiedenen Bereichen der Seiten navigieren. Wenn du zusammenhängende Inhalte in Registerkarten-Containern gruppierst, kann das das Aussehen und die Benutzerfreundlichkeit deiner Webseite verbessern. Außerdem kannst du das alles ohne WordPress-Entwicklungserfahrung einrichten.
In diesem Beitrag stellen wir dir Elementor und seine verschiedenen Versionen kurz vor. Dann zeigen wir dir, wie du Elementor-Tabs erstellst und anpasst und welche Tools von Drittanbietern du verwenden kannst, um die Standardfunktionen des Widgets zu erweitern.
Los geht’s!
Ein Überblick über Elementor
Elementor ist ein beliebtes und leistungsstarkes Page-Builder-Plugin:
Mit dem Page Builder kannst du schöne Seiten für deine Webseite erstellen, entweder von Grund auf oder mit vorgefertigten Vorlagen. Elementor verfügt über einen Drag-and-Drop-Editor, sodass du keine einzige Zeile Code anfassen musst.
Es gibt eine kostenlose und eine kostenpflichtige Version von Elementor. Mit dem kostenlosen Elementor-Plugin kannst du Standardseiten und -beiträge erstellen.
Allerdings können die Funktionen und der Funktionsumfang begrenzt sein. Um den vollen Funktionsumfang zu nutzen, empfehlen wir ein Upgrade auf Elementor Pro. In diesem Beitrag werden wir auf die Unterschiede zwischen der kostenlosen und der Pro-Version eingehen, wenn du mit dem Tabs-Widget arbeitest.
Wie man Elementor Tabs (Tabs Widget) erstellt
Jetzt, wo wir mehr über Elementor wissen, schauen wir uns an, wie wir das Tabs-Widget verwenden. Für die folgende Anleitung gehen wir davon aus, dass du Elementor bereits auf deiner WordPress-Seite installiert und aktiviert hast.
Um loszulegen, navigiere zu dem WordPress-Beitrag oder der Seite, auf der du die Tabs einfügen möchtest, und wähle Mit Elementor bearbeiten:
Daraufhin wird die Elementor-Editoroberfläche geöffnet. Suche auf der linken Seite unter Elemente nach dem Tabs-Widget und wähle es aus:
Du kannst das Widget per Drag & Drop auf einen Seitenabschnitt ziehen. Sobald du das Tabs-Widget platziert hast, wird ein neues Dashboard mit seinen Einstellungen angezeigt:
Du kannst den Titel und den Inhalt für jeden Tab eingeben. Du kannst auch auf die Schaltfläche + Element hinzufügen klicken, um eine weitere Registerkarte einzufügen. Unter Typ wählst du aus, ob die Tabs horizontal oder vertikal angezeigt werden sollen.
Wie du deine Elementor Tabs anpasst
Sobald du den Tabs Text hinzugefügt hast, kannst du die allgemeinen Widget-Einstellungen anpassen. Es gibt ein paar verschiedene Optionen.
Wähle jede benutzerdefinierte Registerkarte aus, um ihre Attribute zu ändern, z. B. den Titel, den Inhalt der Box und das Symbol. Außerdem kannst du ihre Position und Ausrichtung ändern:
Unter dem Reiter Stil findest du viele Optionen, um das Design und das Aussehen des Elementor Tabs Widgets anzupassen. Du kannst die Textfarbe und den Schatten, die Typografie, die Abstände und vieles mehr ändern:
Du kannst die Farbe und Breite des Rahmens, der die Tabs umgibt, ändern. Dieses Designmerkmal kann helfen, die einzelnen Abschnitte zu unterscheiden.
Unter Titel kannst du die Textfarbe der Tab-Titel ändern. Du kannst auch die Schriftart und die Textgröße ändern, indem du auf Typografie klickst:
Wenn du fertig bist, speichere deine Änderungen. Es gibt auch einige erweiterte Einstellungen, die du nutzen kannst, um deine Tabs noch anspruchsvoller zu gestalten.
Erweiterte Einstellungen für Elementor Tabs
Unter dem Reiter Erweitert in den Widget-Einstellungen findest du eine Vielzahl zusätzlicher Optionen:
Schauen wir uns diese Einstellungen genauer an:
- Erweitert: Ändere die Ränder und Abstände der Tabs.
- Bewegungseffekte: Füge Bildlauf- und Mauseffekte hinzu, um das Widget interaktiver zu machen und füge eine Eingangsanimation hinzu.
- Transformieren: Spiegele, drehe und skaliere dein Widget.
- Hintergrund: Wähle zwischen einem Standardhintergrund oder füge mit dem Mauszeiger einen Übergang ein.
- Umrandung: Wähle die Art des Rahmens, z. B. eine durchgezogene oder gestrichelte Linie.
- Maske: Wähle eine stilvolle Designmaske aus und wende sie auf das Widget an.
- Positionierung: Passe die Breite und Position des Widgets an.
- Responsive: Ändere die responsive Sichtbarkeit, die sich auf Vorschau- oder Live-Seiten auswirkt.
- Attribute: Lege benutzerdefinierte Attribute für den Element-Wrapper fest.
- Benutzerdefiniertes CSS: Füge dein benutzerdefiniertes CSS ein.
Wenn du die kostenlose Version von Elementor verwendest, hast du keinen Zugang zu all diesen erweiterten Einstellungen. Du kannst zum Beispiel keine benutzerdefinierten Attribute, Scroll-Effekte oder dein CSS hinzufügen.
So fügst du ein Element in das Tabs Widget ein
Mit Elementor Pro kannst du auch ein anderes Element in das Tabs-Widget einfügen. Nehmen wir zum Beispiel an, du möchtest das Karten-Widget unter der Registerkarte Standorte einfügen.
Dazu erstellst du die gewünschte Karte und speicherst sie als Globales Widget, indem du mit der rechten Maustaste auf das Bleistiftsymbol klickst und „Als Global speichern“ auswählst:
Als Nächstes navigierst du zu deiner Vorlagenbibliothek (in deinem WordPress-Dashboard) und kopierst den Shortcode des soeben erstellten globalen Widgets.
Klicke dann in das Tabs-Widget und wähle die Schaltfläche + Element hinzufügen, um einen neuen Tab hinzuzufügen. Füge den soeben kopierten Shortcode in den Textbereich des Containers ein:
Wenn du fertig bist, klicke auf UPDATE oder PUBLISH am unteren Rand des Bildschirms. Dann kannst du in der Vorschau sehen, wie das Widget im Frontend deiner Webseite aussieht:
Das war’s! Du bist fertig.
Die 8 besten Plugins für Elementor Tabs
Elementor ist ein robustes Tool, das alle Funktionen und Features bietet, die du brauchst, um schöne, funktionale Tabs zu erstellen.
Vielleicht möchtest du dein Design aber noch weiter ausbauen oder erweiterte Funktionen nutzen. In diesem Fall könntest du Elementor mit einem anderen Drittanbieter-Tool kombinieren.
Werfen wir einen Blick auf einige der besten Plugins für Elementor Tabs, die in keiner bestimmten Reihenfolge aufgeführt sind.
1. ElementsKit Elementor Table Widget
Das ElementsKit Addon für Elementor ist eine beliebte Erweiterung:
Mit dem Tabellen-Widget kannst du eine große Menge an unsynchronisierten Daten übersichtlich darstellen. Du kannst eine anpassbare Tabelle erstellen, Inhalte hinzufügen und Bilder und Navigationselemente einfügen.
Zu den Funktionen von ElementsKit gehören:
- Vergleichstabellen
- Zeitpläne und Kalendarien
- Projektverwaltung
- Menüs
- 500+ Blöcke
- 70+ Addons
- Ein Mega-Menü-Builder
- Parallaxe-Effekte
- Ein Popup-Modal-Builder
Die Preise für ElementsKit beginnen bei 39 $ pro Jahr für eine einzelne Webseite. In diesem Tarif sind ein Jahr Updates und Support enthalten.
2. Elegant Tabs für Elementor
Elegant Tabs für Elementor ist ein intuitives Tool, mit dem du dynamische Tabs erstellen und anpassen kannst:
Dieses Add-on ist eine gute Wahl, wenn du nach einer Erweiterung mit vielen Optionen zur Anpassung des Designs suchst. Du kannst eigene Farben, Icons und Schriftarten hinzufügen. Außerdem kannst du mit Elegant Tabs eine automatische Umschaltfunktion für deine Tabs einrichten und sie mit anderen Inhalten auf deiner Webseite verknüpfen.
Die wichtigsten Funktionen von Elegant Tabs sind:
- Erweiterte Styling-Optionen
- Eine Auto-Switch-Funktion
- Die Option, jeden Tab beim Laden aktiv zu setzen
- Ausgerichtete und vertikale Tabs
- Tiefe Verlinkung
- Unterstützung der Tab-Ausrichtung
Die Preise für Elegant Tabs beginnen bei $19 pro Jahr. In diesem Tarif sind sechs Monate Updates enthalten.
3. Livemesh Addons
Die Livemesh Addons für Elementor enthalten eine Fülle von vorgefertigten Elementen, mit denen du deine Tabs ganz einfach gestalten und strukturieren kannst:
Du kannst zwischen hellen und dunklen Tab-Typen, über 10 Tab-Designs und horizontalen und vertikalen Layout-Optionen wählen. Livemesh Addons ist außerdem einfach zu bedienen, was hervorragend ist, wenn du WordPress- oder Elementor-Neuling bist.
Die wichtigsten Funktionen von Livemesh sind:
- 10 helle und 10 dunkle Tab-Designs
- Vertikale und horizontale Optionen
- Anpassbare mobile Auflösung
- 25+ Addons
- Unterstützung für Icons
Livemesh Addons-Tarife beginnen bei 37 $ pro Jahr. Dieser Plan beinhaltet Updates und Support für ein Jahr.
4. Elementor Addons
Elementor Addons aus dem beliebten PowerPack ist ein funktionsreiches Plugin, mit dem du sowohl das Design als auch die Funktionalität deines Elementor Tabs Widgets verbessern kannst:
Mit diesem Plugin kannst du Text und Bilder zu deinen Tabs hinzufügen und sechs Stile für das Advanced Tabs Widget anwenden. Es ist benutzerfreundlich und leicht zu verstehen. Außerdem ist Elementor Addons leichtgewichtig, so dass du dir keine Sorgen machen musst, dass deine Seite langsamer wird.
Die wichtigsten Funktionen von Elementor Addons by PowerPack sind:
- Eine schnelle und leichtgewichtige Benutzeroberfläche
- Vorgefertigte Vorlagen
- Benutzerdefinierte Inhaltsanzeige
- Erweiterte Registerkartenstile
Mit einem Preis von 44 US-Dollar pro Jahr ist dieses Plugin teurer als einige andere Optionen auf dieser Liste. Dafür bietet es aber eine ganze Reihe von Widgets, mit denen du alle Aspekte deiner Webseite anpassen kannst, nicht nur die Registerkarteninhalte.
5. JetElements
JetElements bietet ein Responsive Tables Widget, das ideal ist, wenn du nach einer schnellen und einfachen Möglichkeit suchst, deine Inhalte zu gruppieren:
Damit kannst du unstrukturierte Daten auf eine saubere, moderne Weise präsentieren. JetElements bietet auch ein Preistabellen-Widget, mit dem du deine Preisangaben auf acht verschiedene Arten anpassen und gestalten kannst.
Die wichtigsten Funktionen von JetElements sind:
- 45 Widgets
- CSV-Import für Tabelleneinstellungen
- 8 Styling-Optionen
- Unterstützung für alle Inhaltstypen
- Völlig anpassbar
Ein JetElements-Abonnement beginnt bei $24 pro Jahr. Crocoblock bietet auch ein All-inclusive-Paket mit über 150 Widgets für 130 US-Dollar pro Jahr an.
6. Essential Addons
Ein weiteres beliebtes Plugin, das du für deine Elementor Tabs verwenden kannst, ist Essential Addons:
Es ist eines der beliebtesten Elementor Widget-Plugins. Es enthält über 100 vorgefertigte Blöcke und mehr als 80 Elemente zur Erweiterung und Verbesserung des Page-Builders.
Eines der besten Elemente, das du für deinen Tabbed Content nutzen kannst, ist die Datentabelle des Plugins. Mit diesem Tool kannst du fast jeden Tabellentyp nahtlos gestalten und Icons, Filter und mehr hinzufügen.
Die wichtigsten Funktionen von Essential Addons sind:
- CSV-Import in die Tabelleneinstellungen
- Filteroptionen
- Vollständig anpassbare Einstellungen
- Erweiterte Styling-Optionen
- Erweiterte Registerkarten und Akkordeon-Elemente
- Preistabellen
Der Preis für Essential Addons beginnt bei 39,97 $ pro Jahr für eine Webseite. Im Preis enthalten sind ein Jahr lang Updates und Support.
7. Premium Addons
Premium Addons ist ein hochgradig anpassbares Tool für Elementor, das eine große Auswahl an kostenlosen und Premium-Widgets enthält:
Zu den vielen leistungsstarken Widgets, die in diesem Addon enthalten sind, gehört die Elementor Preistabelle. Sie verfügt über eine Sortierfunktion, eine Live-Suche und die Möglichkeit, Artikel in auf- oder absteigender Reihenfolge anzuordnen.
Die wichtigsten Funktionen der Premium Addons sind:
- Die Möglichkeit, CSV-Dateien zu importieren
- Hinzufügen von URLs zu Tabellenzellen
- Live-Suche und -Sortierung
- Anpassungs- und Styling-Optionen
- Lottie-Animationen
Du kannst das Premium Addons Elementor Table Widget kostenlos herunterladen und nutzen. Es gibt auch eine Premium-Version, die bei 39 $ pro Jahr beginnt.
8. Element Pack
Ein letztes Addon, das du mit deinem Elementor Tabs Widget verwenden kannst, ist Element Pack:
Dieses Bündel von Elementor-Erweiterungen enthält ein Tabellen-Widget, mit dem du deine Inhalte ansprechend und stilvoll präsentieren kannst. Du kannst verschiedene Tabellen in deinem Tabbed Content erstellen, z. B. Preis-, Inhalts- und Kryptowährungstabellen.
Die wichtigsten Funktionen des Elementor Packs sind:
- CSV-Import in die Tabelleneinstellungen
- Drei-Tabellen-Elemente
- Anpassungs- und Styling-Optionen
- Eine Filterfunktion
- Live-Suche
Eine Einzelplatzlizenz für Element Pack kostet 29,25 US-Dollar pro Jahr und ist damit eine der günstigeren Optionen auf dieser Liste. Der Plan beinhaltet außerdem eine 20-tägige Geld-zurück-Garantie.
Zusammenfassung
Elementor ist ein hervorragendes Tool, mit dem du deine Webseite mühelos gestalten und aufbauen kannst. Wenn du deine Inhalte auf ansprechende Weise gruppieren und organisieren möchtest, solltest du das Elementor Tabs Widget verwenden.
Wie wir in diesem Beitrag beschrieben haben, kannst du dieses Widget ganz einfach über den Elementor-Editor in jede Seite oder jeden Beitrag einfügen. Dann kannst du deinen Inhalt hinzufügen und ihn so gestalten, dass er zu deinem Branding passt. Um die Funktionalität des Widgets zu erweitern, kannst du es auch mit einem Plugin eines Drittanbieters wie ElementsKit kombinieren.
Ein benutzerfreundliches und attraktives Design ist entscheidend für den Erfolg einer Seite.
Außerdem musst du mit einem leistungsstarken Hosting-Anbieter für Anwendungs-Hosting, Datenbank-Hosting und Managed WordPress Hosting zusammenarbeiten.
Schau dir unsere Hosting Pläne an und finde heraus, wie Kinsta deine Website auf die nächste Stufe heben kann!
Schreibe einen Kommentar