--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/layout/tabs-element' title: 'Ein Tabs-Panel hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:34:35+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Nutzen Sie Tabs, wenn Sie mehrere Blöcke verwandter Inhalte an einem Ort wollen, aber nur einen gleichzeitig sichtbar. Sie erhalten eine Reihe von Tab-Labels; Besucher klicken auf ein Label, um dessen Inhalt zu sehen. Das Beispiel baut eine Agenturseite mit einem Tab pro Leistung. Für Fragen und Antworten liest sich ein Collapse-Panel meist besser.' tags: - Layout image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Ein Tabs-Panel hinzufügen' description: 'Nutzen Sie Tabs, wenn Sie mehrere Blöcke verwandter Inhalte an einem Ort wollen, aber nur einen gleichzeitig sichtbar. Sie erhalten eine Reihe von Tab-Labels; Besucher klicken auf ein Label, um dessen Inhalt zu sehen. Das Beispiel baut eine Agenturseite mit einem Tab pro Leistung. Für Fragen und Antworten liest sich ein Collapse-Panel meist besser.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:34:35+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/layout/tabs-element' articleSection: Layout - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/layout/tabs-element' description: 'Nutzen Sie Tabs, wenn Sie mehrere Blöcke verwandter Inhalte an einem Ort wollen, aber nur einen gleichzeitig sichtbar. Sie erhalten eine Reihe von Tab-Labels; Besucher klicken auf ein Label, um dessen Inhalt zu sehen. Das Beispiel baut eine Agenturseite mit einem Tab pro Leistung. Für Fragen und Antworten liest sich ein Collapse-Panel meist besser.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Inhalte hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements) /[Layout](/de/hc/documentation/learn-dxpr-builder/layout/overview) # Ein Tabs-Panel hinzufügen. DXPR Builder lernenSeiten erstellenInhalte hinzufügenLayout ## In diesem Leitfaden Verwandte Leitfäden - [Ein aufklappbares Panel hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/aufklappbare-elemente) - [Ein Karussell-Layout hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/karussell-layout) - [KI-Texte prüfen und übernehmen](/de/hc/documentation/learn-dxpr-builder/layout/nesting) Nutzen Sie Tabs, wenn Sie mehrere Blöcke verwandter Inhalte an einem Ort wollen, aber nur einen gleichzeitig sichtbar. Sie erhalten eine Reihe von Tab-Labels; Besucher klicken auf ein Label, um dessen Inhalt zu sehen. Das Beispiel baut eine Agenturseite mit einem Tab pro Leistung. Für Fragen und Antworten liest sich ein [Collapse-Panel](/de/hc/dokumentation/dxpr-builder-lernen/layout/aufklappbare-elemente) meist besser. ## Ein Tabs-Panel hinzufügen 1. Fahren Sie über die Spalte und klicken Sie auf **+** in ihrer Kontrollleiste, oder auf das **+** in der Mitte einer leeren Spalte, um den Element-Picker zu öffnen. 2. Klicken Sie im Tab **Layout** auf **Tabs**. Das Element erscheint mit einem Tab, beschriftet mit **Title**. 3. Fahren Sie über das Panel des Tabs und öffnen Sie **More > Settings**. Geben Sie einen Namen bei **Tab title** ein und klicken Sie auf **Save**. 4. Klicken Sie auf **+** im Panel, um Inhalt hinzuzufügen, etwa ein **Text**-Element. 5. Um einen Tab hinzuzufügen, fahren Sie über die Tab-Labels und klicken Sie auf **Add tab** in der Kontrollleiste von **Tabs**. Der neue Tab landet zuerst, vor den anderen. Benennen Sie ihn und füllen Sie ihn genauso. ## Was Sie sehen Eine Reihe von Tab-Labels sitzt über dem Inhalt des offenen Tabs. In der Vorschau und auf der veröffentlichten Seite zeigt ein Klick auf ein Label den Inhalt dieses Tabs und verbirgt den Rest. Jeder Tab enthält eigene Elemente, sodass ein Tab Text und ein anderer eine Reihe Cards tragen kann. Auf Bildschirmen unter 768 Pixeln werden die Tabs zu gestapelten Überschriften, die sich wie ein Collapse-Panel öffnen. ## Ihre Tabs einrichten Das Element **Tabs** hat drei Einstellungen. Öffnen Sie sie über **More > Settings** in der Kontrollleiste von **Tabs**, die erscheint, wenn Sie über die Tab-Labels fahren. | Einstellung | Funktion | Standard | |---|---|---| | **Tab direction** | Wo die Labels sitzen: **Default** (über dem Inhalt), **Left** oder **Right** | Default | | **Style** | Das Aussehen der Labels: **Default** (eine Linie unter den Labels), **Modern** (abgerundete Cards) oder **Accordion** (Überschriften mit Trennlinien) | Default | | **Mobile friendly** | Zeigt die Tabs auf Bildschirmen unter 768 Pixeln als aufklappbare Überschriften | On | Jeder Tab hat eigene Einstellungen unter **More > Settings** auf seinem Panel. **Tab title** ist der Labeltext. **Tab description** ist eine optionale kurze Zeile unter dem Label des offenen Tabs. ## Tabs verwalten - **Reorder**: Ziehen Sie ein Tab-Label an eine neue Stelle unter den Labels. Sein Inhalt wandert mit. - **Rename**: Fahren Sie über das Panel des Tabs, öffnen Sie **More > Settings**, ändern Sie **Tab title** und klicken Sie auf **Save**. - **Remove**: Fahren Sie über das Panel des Tabs, öffnen Sie **More** und wählen Sie **Delete**. Alles im Tab wird mit entfernt. Halten Sie Labels bei ein bis drei Wörtern und bleiben Sie bei etwa fünf Tabs, damit die Labels in eine Zeile passen. ## Wenn Sie es nicht sehen - **Der neue Tab steht zuerst statt zuletzt.** **Add tab** setzt den neuen Tab immer nach vorn. Ziehen Sie sein Label an die gewünschte Stelle. - **Die Einstellungen zeigen nur Tab title und Tab description.** Sie haben die Einstellungen eines Tabs geöffnet. Fahren Sie über die Tab-Labels, sodass die Kontrollleiste von **Tabs** erscheint, und öffnen Sie dort **More > Settings**. - **Telefone zeigen gestapelte Überschriften statt Tabs.** **Mobile friendly** ist an, was der Standard ist. Schalten Sie es in den Einstellungen von **Tabs** aus, um Tabs auf jeder Bildschirmbreite zu behalten. - **Tabs fehlt im Layout-Tab des Pickers.** Ihr DXPR Builder-Benutzerprofil lässt es aus. Ein Administrator wählt **Tabs** unter **Elements** in Ihrem Profil unter `/admin/dxpr_studio/dxpr_builder/profile`. ## Wie geht es weiter? - [Ein aufklappbares Panel hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/aufklappbare-elemente): Fragen und Antworten stapeln, die sich einzeln öffnen. - [Ein Karussell-Layout hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/karussell-layout): Dieselbe Art Inhalt einen Slide nach dem anderen zeigen. - [Verschachtelung](/de/hc/documentation/learn-dxpr-builder/layout/nesting): Zeilen und Spalten in einen Tab legen für reichere Layouts.