--- title: Tabs url: "https://www.toujou.de/service/elementbibliothek/text-elements/tabs/" date: 2026-07-01 modified: 2026-07-03 --- # Tabs 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Text Elements](https://www.toujou.de/service/elementbibliothek/text-elements/) 5. [Tabs](https://www.toujou.de/service/elementbibliothek/text-elements/tabs/) 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](#c1019737) [Anleitung](#c1019735) [Verhalten](#c1019731) --- Beispielansicht ----------------- Tab 1 Tab 2 Tab 3 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. TAB 2 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. ![Eine moderne automatisierte Maschine mit Arbeitern, die Kisten auf einem Förderband sortieren und bewegen.](https://www.toujou.de/_assets/processed/rDyD2pz_LqTbVWoHzDP5d4Md5wJTBHlqGM0DkpgLEIg/q:85/w:401/h:424/fn:Y3NtX2hlYWRlcl9ub19iZ182NDI2MjVmZmQz:t/cb:27dcff63d1124f41de601e3f0dd2369fa56e44eb/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvaGVhZGVyX25vX2JnLnBuZw) TAB 3 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](https://www.toujou.de/_assets/processed/xAsjIjp7iEUVE5UKcQORF8MzUad3MKsdVU5jJinXNoE/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1RhYl9FbGVtZW50LWVyc3RlbGxlbl8yNDBiNjUzMzIz:t/cb:6df62a204b3f9f1b6e21b2144112e8a9849f6bae/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDVfVGFicy9UYWJfRWxlbWVudC1lcnN0ZWxsZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/05_Tabs/Tab_Element-erstellen.png) ### 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](https://www.toujou.de/_assets/processed/Zu1ka3wSk_VxWPBCvAe8LpYsuiiT6RcFymId1L5JGJ0/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1RhYnMtYW5sZWdlbl9hNGU5MWRiNWNh:t/cb:0c02c08d956ec85502bdf394d01d7c5997ce79b7/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDVfVGFicy9UYWJzLWFubGVnZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/05_Tabs/Tabs-anlegen.png) ### 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](https://www.toujou.de/_assets/processed/JfhEew0Zvm4eEhxZKHBlQOp7OcnIU90nIN5eU-PjGz4/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1RhYnMtbWl0LUluaGFsdC1iZWZ1ZWxsZW5fYWFkOGY4MjIyOA:t/cb:5825d5f3e5b3095020a8ba1c3d0e6c002491509a/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDVfVGFicy9UYWJzLW1pdC1JbmhhbHQtYmVmdWVsbGVuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/05_Tabs/Tabs-mit-Inhalt-befuellen.png) ### 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](https://www.toujou.de/_assets/processed/2u3gHDORf6u5TOL2nORzP4CAzQGiFUVJSuXFk0Tk6VA/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1RhYi1BdXNyaWNodHVuZy11bmQtUG9zaXRpb25fYjZkMGM0OTE4YQ:t/cb:216ead063abce52898a208ae671849697c0cfaa6/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAxX1RleHRfZWxlbWVudHMvMDVfVGFicy9UYWItQXVzcmljaHR1bmctdW5kLVBvc2l0aW9uLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/01_Text_elements/05_Tabs/Tab-Ausrichtung-und-Position.png) ### 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](https://www.toujou.de/service/toujou-setup/farben-festlegen/). ![](https://www.toujou.de/_assets/processed/XEc5X-Qx0dzfOl3J4GUEueIei3HUGvlKhRfby_OPkOs/q:85/c:789.15789473684:200:fp:0.46421052631579:0.5/rt:force/w:432/h:109/fn:Y3NtX2VsZW1lbnRfZGVzaWduX2F1c3dhaGxfbWVkYXRzdV82NTk4MTFkYjhi:t/cb:b70ef9624e2ccbfba77c8a4e802f3ee405748758/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAyX1RlYXNlcl9lbGVtZW50cy9DaW5lbWFfVGVhc2VyXzMzLTY2L2VsZW1lbnRfZGVzaWduX2F1c3dhaGxfbWVkYXRzdS5wbmc) - 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](https://www.toujou.de/service/elementbibliothek/text-elements/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](https://www.toujou.de/service/elementbibliothek/text-elements/accordion/) [Alle Text-Elemente](https://www.toujou.de/service/elementbibliothek/text-elements/) [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) ##### toujou-Tutorials [Checkliste ❯](https://www.toujou.de/service/#c1001893) [Kontakt/Daten hinterlegen ❯ ](https://www.toujou.de/tutorials/kontakte-anlegen/) [Dateiliste / Fileadmin ❯ ](https://www.toujou.de/tutorials/dateiliste/) [Navigation bearbeiten ❯ ](https://www.toujou.de/tutorials/seiten-anlegen/) [Seiteninhalte ❯](https://www.toujou.de/tutorials/seiteninhalte/) [Seiteneigenschaften ❯](https://www.toujou.de/tutorials/seiteneigenschaften/) [Responsive-Check ❯](https://www.toujou.de/tutorials/responsive-mobile-first/) [Yoast SEO ❯](https://www.toujou.de/tutorials/yoast-seo/) [Redirects ❯](https://www.toujou.de/tutorials/redirects/) / [Blog ❯](https://www.toujou.de/tutorials/blog-administration/) [Seiten übersetzen ❯](https://www.toujou.de/tutorials/seiten-uebersetzen/) [Linkvalidator ❯](https://www.toujou.de/tutorials/linkvalidator/) ##### toujou-Setup [Theme ❯ ](https://www.toujou.de/service/toujou-setup/theme-bearbeiten/) [Logo ❯ ](https://www.toujou.de/service/toujou-setup/logo-hochladen/) [Font ❯ ](https://www.toujou.de/service/toujou-setup/font-bestimmen/) [Color ❯ ](https://www.toujou.de/service/toujou-setup/farben-festlegen/) [Social Media ❯ ](https://www.toujou.de/service/toujou-setup/social-media/) [Analytics ❯](https://www.toujou.de/service/toujou-setup/analytics/) [Data Protection ❯](https://www.toujou.de/service/toujou-setup/datenschutz/) [Website Overlay ❯](https://www.toujou.de/service/toujou-setup/website-overlay/) ##### toujou-Elementbibliothek [Texte ❯ ](https://www.toujou.de/service/elementbibliothek/text-elements/) [Medien ❯ ](https://www.toujou.de/service/elementbibliothek/media-elements/) [Combinations❯ ](https://www.toujou.de/service/elementbibliothek/combined-elements/) [Teaser ❯ ](https://www.toujou.de/service/elementbibliothek/teaser-elements/) [Cards ❯](https://www.toujou.de/service/elementbibliothek/card-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/elementbibliothek/blockquote-elements/) [Collections ❯](https://www.toujou.de/service/elementbibliothek/collections/) [Maps ❯ / ](https://www.toujou.de/service/elementbibliothek/map-elements/)[Blog ❯ ](https://www.toujou.de/service/elementbibliothek/blog-elements/) [Events ❯ ](https://www.toujou.de/service/elementbibliothek/events/)/ [Widgets ❯ ](https://www.toujou.de/service/elementbibliothek/widgets/) [Navigation ❯](https://www.toujou.de/service/elementbibliothek/navigation-elements/) [HTML ❯ ](https://www.toujou.de/service/elementbibliothek/html/)/ [Forms ❯ ](https://www.toujou.de/service/elementbibliothek/forms/) ##### toujou TOURISM [tourism-Modul ❯](https://www.toujou.de/tutorials/tourism-modul/) [Expertise & Konzept ❯](https://www.toujou.de/websites/websites-fuer-reiseveranstalter/) [Alle Features ❯](https://www.toujou.de/loesungen/etourism/) [toujou-Reiseportale ❯](https://www.toujou.de/warum-toujou/unsere-kunden/#c1002004) [Reiseseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisen-anlegen/) [Reiseseiteneigenschaften ❯](https://www.toujou.de/tutorials/reiseseiten/reiseseiteneigenschaften/) [Reisekategorien ❯](https://www.toujou.de/tutorials/reiseseiten/reisekategorien-anlegen/) [Termine & Preise ❯](https://www.toujou.de/tutorials/reiseseiten/termine-preise/) [Reisesuchseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisesuchseite/) [Trip Elements ❯ ](https://www.toujou.de/service/elementbibliothek/trip-elements/) [Search Elements ❯](https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/)