Wichtige Erkenntnisse
- Vertikale Registerkarten setzen die Titel in eine Spalte links oder rechts, mit der Tafel daneben Sie passen zu langen Titeln und sechs oder mehr Abschnitten, wo ein horizontaler Streifen umwickelt werden würde.
- Das elementoreigene Tabs-Widget tut dies mit dem auf Start oder Ende eingestellten Direction-Steuerelement Kein CSS erforderlich.
- Die Master Addons Tabs Widget Es ist ein Vertical Tabs-Stil voreingestellt, der eher gestylt als schlicht erscheint.
- Unterhalb von etwa 768 px ist nicht genug Breite für eine Seitensäule vorhanden, so dass beide Routen stapeln Nur das Kern-Widget geht in ein Akkordeon über.
- Wählen Sie den Kern aus, wenn Widgets in die Panels gelangen, und das Addon, wenn die Tabulatorspalte selbst Symbole oder ein fertiges Aussehen benötigt.
Horizontale Tabs brechen, sobald die Titel lang oder zahlreich werden Sechs Titel in einer 1.200-px-Spalte wickeln sich entweder in zwei Zeilen oder verkleinern den Text, bis niemand sie liest.
Vertikale Tabs drehen den Streifen auf die Seite: eine schmale Spalte mit Titeln mit dem aktiven Panel daneben Jeder Titel bekommt eine volle Zeile, so passt “Versand und Rückgabe” ohne Umwicklung Beide Arten des Aufbaus folgen.
Inhaltsverzeichnis
Wenn Vertikal horizontal schlägt
Vertikal ist das bessere Layout, wenn eines davon wahr ist:
- Mehr als fünf Abschnitte, in denen ein Streifen umwickelt, eine Säule jedoch immer höher wird.
- Titel länger als zwei Wörter “Garantie und Reparaturen” braucht eine vollständige Zeile.
- Paneele sehr unterschiedlicher Höhe, da die Titelspalte stehen bleibt, während sich die Größe des Paneels ändert.
- Inhalte, die sich wie ein Menü lesen: Dokumentationsabschnitte, Servicelisten, gruppierte FAQs.
Bleiben Sie für drei oder vier kurze Titel horizontal Eine Seitenspalte frisst ungefähr ein Viertel der Breite, und mit drei Tabs lohnt sich der Handel nicht.
Methode 1: Richtungssteuerung des Elementors
Das Tabs-Widget in Elementor verarbeitet dies ohne Addon.
- Ziehen Sie das Tabs-Widget auf die Seite.
- Stellen Sie im Layout die Startrichtung für Titel auf der linken Seite oder das Ende für Titel auf der rechten Seite ein.
- Stellen Sie den Titel ausrichten, um zu steuern, ob der Titeltext links, in der Mitte oder rechts in der Spalte steht.
- Bauen Sie jedes Panel wie gewohnt in den Behälter.
Start setzt die Spalte links in eine Links-nach-Rechts-Sprache und dreht automatisch für Rechts-nach-Links, weshalb die Werte Start und Ende statt Links und Rechts heißen.
Das Ergebnis ist funktional und ungestylt: Texttitel in einer Spalte, das Panel daneben und alle Ränder und Farben, die für die Registerkarte Stil übrig bleiben.
Methode 2: die voreingestellten vertikalen Tabs
Das Master Addons Widget behandelt das Layout als Preset statt als Richtung, sodass das Styling mitkommt.
- Ziehen Sie das Tabs-Widget hinein.
- Stilvoreinstellung auf vertikale Tabs festlegen.
- Fügen Sie pro Abschnitt ein Repeater-Element hinzu, jedes mit einem Tab-Titel.
- Setzen Sie den Symboltyp auf Symbol oder Bild, wenn die Titel einen benötigen, und wählen Sie dann das Symbol aus.
- Schreiben Sie den Panel-Inhalt und wechseln Sie als Standard auf die Registerkarte, die zuerst geöffnet werden soll.
Die Spalte kommt mit eigenem Hintergrund, Abstand und aktivem Zustand an, so dass ein nutzbarer Block statt einer Styling-Sitzung eine Minute dauert Die Grenze ist die gleiche, die das Addon immer hat: Panels enthalten Editorinhalte, so dass ein Formular oder eine Galerie innerhalb eines Tabs eine gespeicherte Vorlage auf Pro bedeutet, oder stattdessen das Kern-Widget.
Eine ruhigere Variante: left active border
Die dritte Voreinstellung ist wissenswert. Left Active Border behält die vertikale Spalte, lässt aber den Box-Look fallen: Titel sitzen auf dem Seitenhintergrund und der aktive ist mit einem farbigen Balken am linken Rand markiert.
Dies ist diejenige, nach der Sie auf Seiten im Dokumentationsstil greifen können, wo eine große Tabulatorspalte den Fließtext um Aufmerksamkeit kämpft.
Was passiert auf einem Telefon
Ein 390-px-Bildschirm bietet keinen Platz für eine Seitensäule plus eine Tafel, sodass beide Routen die vertikale Anordnung aufgeben.
Das Kern-Widget stapelt sich zu einem vertikalen Akkordeon unterhalb des von Ihnen gewählten Haltepunkts in Zusätzliche Einstellungen, wobei jeder Titel direkt über seinem eigenen Panel sitzt Das Addon-Widget stapelt die Titel in eine Spalte über die gesamte Breite mit dem Panel darunter, was funktioniert, obwohl es kein Akkordeon ist: Das offene Panel bleibt unter der gesamten Titelliste.
Überprüfen Sie in jedem Fall die Telefonansicht, bevor Sie veröffentlichen. Das Layout, das Sie auf dem Desktop entworfen haben, ist nicht das Layout, das ein Telefonbesucher sieht.
Welche Methode verwendet werden soll
| Situation | Methode |
|---|---|
| Formulare, Galerien oder Preistabellen innerhalb der Panels | Kern-Tabs, Richtung auf Start gesetzt |
| Muss ein Akkordeon auf Telefonen sein | Kern-Tab |
| Titel rechts statt links | Kern-Tabs, Richtung auf Ende gesetzt |
| Symbole oder Bilder auf den Titeln | Addon, Vertical Tabs voreingestellt |
| Styled-Spalte ohne Style-Tab-Arbeit | Addon, Vertical Tabs voreingestellt |
| Einfache Seitennavigation im Dokumentationsstil | Addon, Left Active Border voreingestellt |
| Panels schalten Hover ein | Addon, Tab-Effekt auf Hover eingestellt |
Häufig gestellte Fragen
Kann Elementor vertikale Tabs ohne Addon erstellen?
Ja. Stellen Sie die Richtungssteuerung des Tabs-Widgets auf Start oder Ende ein und die Titel wandern in eine Seitenspalte.
Warum heißen Richtungswerte Start und Ende, nicht links und rechts?
Also das Layout dreht sich in Rechts-nach-Links-Sprachen richtig Start ist die Seite, auf der der Text beginnt.
Wie viele Tabs funktionieren in einem vertikalen Layout?
Sechs bis zehn ist bequem. Früher wird die Säule höher als die Platte daneben, was seltsam aussieht.
Bleiben vertikale Laschen auf Mobilgeräten vertikal?
Nein. Es ist nicht genug Breite vorhanden, also stapeln sich beide Routen. Das Kern-Widget wird zu einem Akkordeon; Das Addon stapelt Titel über dem Panel.
Kann ich ein Formular in eine vertikale Registerkarte einfügen?
Mit dem Core-Widget ja, weil jedes Panel ein Container ist, mit dem Addon ist das Äquivalent, Content Type auf eine gespeicherte Vorlage zu zeigen, was eine Pro-Option ist.
Letzte Gedanken
Vertikal gehen ist, wie man ein Breitenproblem löst, ohne die Titel zu kürzen Die Direction-Steuerung von Elementor macht es ohne Addon und hält Container in den Panels, was zählt, wenn etwas Interaktives hineingeht Die Addon-Voreinstellungen sind wichtig, wenn die Titelspalte fertig aussehen muss, ohne dass man sie stylt Beide brauchen ungefähr die gleiche Zeit zum Bauen, also entscheidet das, was im Panel lebt.
Verwandte Lektüre
