Tabs

Erstellen Sie Tabs für Ihre Website, die wie in einem Browser als Registerkarten innerhalb dieses Elements fungieren. In den einzelnen Tabs selbst kreieren Sie die gewünschten Inhalte mit Text und Medien.

Beispielansicht Anleitung Verhalten

Beispielansicht

TAB 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Anleitung

Screenshot vom toujou-Backend, dass zeigt, wie ein Tab-Element erstellt wird im roten Kästchen

Element anlegen

Erstellen Sie ein Tab-Element für Ihre Website, indem Sie im Element-Wizard unter dem Reiter Text das Element Tabs anklicken.

Screenshot vom toujou-Backend, dass zeigt, wie ein einzelnes Tab wird im roten Kästchen

Tabs anlegen

Erstellen Sie ein einzelnes Tab, indem Sie auf den Button + Neu anlegen im Bereich Tabs klicken.
Auf diese Weise können Sie eine beliebige Anzahl an Tabs kreieren.

Screenshot vom toujou-Backend, dass zeigt, wie Text und Bilder in einem Tab erstellt werden in den roten Kästchen

Inhalt eines Tabs editieren

Fügen Sie den Content ein, den Sie in einem Tab wünschen.
Im Textfeld Titel hinterlegen Sie die Überschrift des Tabs.
Im Beschreibungstext nutzen Sie den Richt Text Editor für den gewünschten Text.
Über die Medienelemente hinterlegen Sie ein Medium für das Tab via der verschiedenen Optionen.

Screenshot vom toujou-Backend, dass zeigt, wie ein Ausrichtung und Position der Tabs eingestellt wird im roten Kästchen

Ausrichtung und Position wählen

Definieren Sie die Ausrichtung und Position der Tabs.
Unter Ausrichtung wählen Sie im Dropdown-Menü zwischen horizontal oder vertikal.
Unter Positionierung stehen Ihnen im Dropdown-Menü die Optionen Links, mittig und rechts zur Verfügung.
Speichern Sie Ihre Einstellungen.

Element Design für mehr Individualität

In diesem Element können Sie zudem das Erscheinungsbild ganz leicht mit dem Element Design mit einem Klick ändern. Mit der Auswahl von Standard Design, Primary Design, Secondary Design oder Umgekehrtes Design wechseln Sie Hintergrundfarbe des Elements und ggfs. die Hintergrundfarbe der Headline oder Pfeile bzw. des Textbereichs entsprechend der in den Theme-Settings definierten Farbe.

Mit Klick auf das Element Design im Reiter Allgemein / General erhalten Sie im Dropdown-Menü die Wahl für eine individuelle Designfarbe.
Wählen Sie aus den Optionen Standard, Primary, Secondary sowie Umgekehrt die gewünschte Option aus.
Speichern Sie die Änderungen im Element, damit sie sichtbar werden.

Verhalten

Für die Inhalte der einzelnen Tabs greifen Sie, wie gewohnt, auf den RTE und Medienelemente zurück. Beachten Sie dabei, dass immer nur der Inhalt eines Tabs angezeigt werden kann. Möchten Sie mehrere Inhalte gleichzeitig anzeigen, empfehlen wir die Nutzung der Accordion-Elemente.

Die Option der Positionierung der Tabs greift lediglich bei der horizontalen Ausrichtung. Ist die vertikale Ausrichtung der Tabs eingestellt, haben Einstellungen in der Positionierung keine Auswirkung auf das Frontend.
Über das Element Design definieren Sie die Farbwahl der Tab-Anzeige.

Responsive: Aus Platzgründen weicht die vertikale Ausrichtung in der responsiven Ansicht der horizontalen Ansicht der Tabs.

Verknüpfte Elemente

Accordion-Elemente Alle Text-Elemente Elementbibliothek

Tabs

Beispielansicht

Anleitung

Element anlegen

Tabs anlegen

Inhalt eines Tabs editieren

Ausrichtung und Position wählen

Element Design für mehr Individualität

Verhalten

Verknüpfte Elemente

toujou-Tutorials

toujou-Setup

toujou-Elementbibliothek

toujou TOURISM

Kontakt