Studio Editor: Tabs hinzufügen und anpassen
6 Min. Lesezeit
Verwende das Tabs-Element, um auf einer Seite ähnliche Inhalte zu organisieren und zu gruppieren. Dieses Element zeigt mehrere Inhaltsabschnitte in einem kompakten Layout an, sodass die Website-Besucher die gewünschten Informationen leicht finden können.
![GIF, das das Tabs-Element auf einer Live-Website zeigt. Der Cursor klickt auf jeden Tab im Menü, um den Inhalt zu öffnen.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/23/df7067be-ecc1-46ff-bc05-50c34ad7d7fe/217d8df4-26bb-4a99-8db0-b9d1a2df4503.gif)
In diesem Artikel erfährst du mehr über folgende Themen:
Das Tabs-Element hinzufügen
Füge so viele Tab-Elemente hinzu, wie du brauchst, um den Inhalt deiner Website zu organisieren. Nachdem du ein Preset ausgewählt und auf die Seite gezogen hast, kannst du den Inhalt anpassen und Elemente hinzufügen.
Um Tabs hinzuzufügen:
- Klicke auf der linken Seite des Editors auf Elemente hinzufügen
.
- Klicke auf Layout-Tools.
- Klicke auf Tabs.
- Wähle ein Design aus und ziehe es auf die Seite.
- Passe den Inhalt der Tabs an:
- Klicke auf das Tabs-Element, das du gerade hinzugefügt hast.
- Klicke auf Tabs verwalten.
- Wähle den Tab aus, an dem du arbeiten möchtest.
- Bearbeite den Inhalt des Tabs:
- Füge weitere Elemente hinzu.
- Bearbeite vorhandene Elemente.
- Passe das Raster an das gewünschte Layout an.
![Screenshot des „Element hinzufügen“-Panels. Tabs wurden in den Layout-Tools ausgewählt und der Cursor bewegt sich über ein Design.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/22/90a2dafc-78d2-4b80-b5a2-b9059fc682d5/8e86a08d-a816-4049-94c8-aca185cc634b.jpg)
Tabs verwalten
Verwende das „Tabs verwalten“-Panel, um Tabs hinzuzufügen, zu duplizieren, umzubenennen oder zu löschen. In diesem Panel kannst du auch zwischen Tabs navigieren, um sie in der Vorschau anzuzeigen und sie nach Bedarf zu bearbeiten.
Um Tabs zu verwalten:
- Klicke auf das Tab-Element.
- Klicke auf Tabs verwalten.
- Fahre mit der Maus über den entsprechenden Tab und klicke auf das Symbol für Weitere Aktionen
.
- Wähle, was du mit diesem Tab tun möchtest: Umbenennen, Löschen oder Duplizieren.
![Screenshot des Panels „Tabs verwalten“ auf der Arbeitsfläche. Das Menü „Weitere Aktionen“ ist geöffnet und zeigt die Optionen an.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/22/390d48bd-4ff5-4211-973c-27f10e048e24/050f45e3-7706-4297-b9fc-f48717b144de.jpg)
Möchtest du einen leeren Tab hinzufügen?
Klicke unten im Panel auf Tab hinzufügen.
Tabs gestalten
Passe das Tabs-Element an das Design deiner Seite an. Du kannst das Tab-Menü, die Tabs selbst und den Container, der den Inhalt anzeigt, gestalten.
Tipp:![Zugeschnittener Screenshot, der die Design-Option für Tabs anzeigt. Das Aufklappmenü für Tab-Status ist hervorgehoben.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/27/df3c0633-e6e1-4835-8e46-ed09e2e79dad/d20bad25-f03a-4c93-94fb-ec7c32b55f4f.png)
Du kannst die Tabs für 3 verschiedene Status gestalten: Standard, Mouseover, und Ausgewählt.
![Zugeschnittener Screenshot, der die Design-Option für Tabs anzeigt. Das Aufklappmenü für Tab-Status ist hervorgehoben.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/27/df3c0633-e6e1-4835-8e46-ed09e2e79dad/d20bad25-f03a-4c93-94fb-ec7c32b55f4f.png)
Um die Tabs zu gestalten:
- Klicke auf das Tabs-Element.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen
.
![Screenshot, der zeigt, wo du das Inspektor-Panel im Studio Editor findest. Der Cursor fährt über das Symbol, um es zu öffnen.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/27/2d873d0d-a081-405c-a3a1-069eb0bbc33d/f3f0606b-1e9f-4699-b443-07f842c281ea.jpg)
- Klicke auf den Tab Design
.
- Wähle aus dem Aufklappmenü den Teil, das du gestalten möchtest:
- Tab-Container: Dieser Container zeigt das Tab-Menü.
- Tabs: Dies sind die Tabs, die im Menü angezeigt werden. Wähle den Status aus, den du anpassen möchtest (Standard, Mouseover oder Ausgewählt).
- Container: Das ist der Container, der den Inhalt jedes Tabs anzeigt.
- Verwende die verfügbaren Designoptionen:
- Hintergrundfüllungen: Füge eine Farbe, einen Farbverlauf oder einen Bildhintergrund hinzu. Du kannst mehrere Hintergrundebenen hinzufügen und ihre Deckkraft anpassen.
- Ränder: Füge Ränder hinzu, um einen Kontrast zur Website-Seite zu schaffen. Wähle ein Design und eine Farbe aus und lege die Breite fest.
- Ecken: Wähle aus, wie Ecken aussehen sollen. Du kannst jede Ecke anders anpassen und sie runder oder eckiger gestalten.
- Schatten: Füge Schatten für einen coolen 3D-Effekt hinzu. Du kannst Größe, Sichtbarkeit, Winkel und vieles mehr festlegen, um eine bessere Wirkung zu erzielen.
- Layout: Passe den Abstand an, um ihn zu vergrößern oder zu verkleinern. Du kannst das Schloss-Symbol
deaktivieren oder aktivieren, um jede Seite separat oder alle gleichzeitig anzupassen.
- Text: Gestalte die Namen der Tabs, die im Menü angezeigt werden, und formatiere sie. Du kannst die Schriftart, die Größe, die Farbe und vieles mehr ändern.
![Screenshot des Design-Tabs im Inspektor. Der Cursor bewegt sich über die Option für Hintergrundfüllungen.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/22/32898ff5-6b15-4c30-9db3-dfd072636ff6/19429661-9733-4a0a-bfc8-1087c3e456fe.jpg)
Hinweis:
Die verfügbaren Optionen hängen von dem Teil ab, den du gestalten möchtest (z. B. Tabs-Container, Tabs oder Container).
Einen Standard-Tab auswählen
Der Standard-Tab ist der Tab, der automatisch auf der Live-Website geöffnet ist. Du kannst ihn ändern, sodass der für den Kunden und seine Website relevante Tab zuerst angezeigt wird.
Tipp:![Screenshot, der das Häkchen-Symbol zeigt, das neben dem Standard-Tab im „Tabs verwalten“-Panel angezeigt wird](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/01/15/664037e9-d2f5-4dc3-b1e3-e67d544640eb/3e9ef669-f477-4858-ab61-9174fd86285d.png)
Im Panel „Tabs verwalten“ siehst du neben dem aktuellen Standard-Tab ein Häkchen-Symbol.
![Screenshot, der das Häkchen-Symbol zeigt, das neben dem Standard-Tab im „Tabs verwalten“-Panel angezeigt wird](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/01/15/664037e9-d2f5-4dc3-b1e3-e67d544640eb/3e9ef669-f477-4858-ab61-9174fd86285d.png)
Um den Standard-Tab festzulegen:
- Klicke auf das Tab-Element.
- Klicke auf Tabs verwalten.
- Fahre mit der Maus über den entsprechenden Tab und klicke auf das Symbol für Weitere Aktionen
.
- Klicke auf Als Standard festlegen.
![Screenshot, der zeigt, wie du den Standard-Tab im „Tabs verwalten“-Panel festlegst](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/23/cebc89d6-37a0-4560-a498-0af36e96f95d/c8b6c061-59c4-4f84-8c2d-284589c7fbf8.jpg)
Das Tab-Layout anpassen
Passe das Layout und die Abstände der Tabs an. Wenn es eine große Anzahl von Tabs gibt, kannst du auch entscheiden, wie sie im Menü angezeigt werden sollen (Scrollen oder Umbruch).
Um das Tab-Layout anzupassen:
- Klicke auf das Tab-Element.
- Klicke auf das Symbol für Layouts
.
- Passe das Layout mit den verfügbaren Optionen an:
- Tab-Verteilung: Entscheide, wie stark sich das Tab-Menü strecken soll:
- Standard: Das Menü wird nicht an die Breite des Elements angepasst. Du kannst die Tabs dann links, zentriert oder rechts ausrichten.
- Strecken: Das Menü wird an die Breite des Elements angepasst. Du kannst den Text des Menüs links, zentriert oder rechts ausrichten.
- Abstand zwischen Tabs: Ziehe den Schieberegler, um den Abstand zwischen den Tabs im Menü zu ändern.
- Abstand zwischen Tabs & Container: Ändere den Abstand zwischen dem Menü und dem Container, der den Inhalt der einzelnen Tabs anzeigt.
- Horizontaler Abstand: Passe den Abstand links und rechts von den Menü-Tabs an.
- Vertikaler Abstand: Passe den Abstand ober- und unterhalb der Menü-Tabs an.
- Überlaufende Tabs: Wähle aus, wie Tabs angezeigt werden sollen, die nicht in das Menü passen:
- Scrollen: Website-Besucher können durch das Menü scrollen, um weitere Tabs zu sehen.
- Umbruch: Eine weitere Zeile wird hinzugefügt, um die anderen Tabs anzupassen. Du kannst dann den Schieberegler verwenden, um den Abstand zwischen den Reihen anzupassen.
- Tab-Richtung: Zeige Tabs im Menü von links nach rechts an oder umgekehrt.
- Tab-Verteilung: Entscheide, wie stark sich das Tab-Menü strecken soll:
![Screenshot, der das „Tab-Layout“-Panel zeigt. Der Cursor bewegt sich über die Option „Abstand zwischen Tabs“.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/05/23/56e257f7-e2a8-468f-9d6c-7f26f55d585f/c8bd7327-5296-4cce-9a83-04799319c7ac.jpg)
War das hilfreich?
|