--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/volle-breite-layouts' title: 'Abschnitt über volle Breite laufen lassen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:02:05+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Sie können den Inhalt eines Abschnitts von Kante zu Kante laufen lassen, oder ihn mittig eingerahmt halten, während der Hintergrund das Fenster füllt. Ein Schalter am Abschnitt entscheidet: Full width. Das Beispiel baut einen grauen Abschnitt mit drei Spalten und schaltet dann Full width ein, sodass sich die Spalten dehnen. Für Farb- und Fotofüllungen siehe Hintergründe. tags: - 'Design guides' 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: 'Abschnitt über volle Breite laufen lassen' description: |- Sie können den Inhalt eines Abschnitts von Kante zu Kante laufen lassen, oder ihn mittig eingerahmt halten, während der Hintergrund das Fenster füllt. Ein Schalter am Abschnitt entscheidet: Full width. Das Beispiel baut einen grauen Abschnitt mit drei Spalten und schaltet dann Full width ein, sodass sich die Spalten dehnen. Für Farb- und Fotofüllungen siehe Hintergründe. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:02:05+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/design/volle-breite-layouts' articleSection: Design-Leitfäden - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/volle-breite-layouts' description: |- Sie können den Inhalt eines Abschnitts von Kante zu Kante laufen lassen, oder ihn mittig eingerahmt halten, während der Hintergrund das Fenster füllt. Ein Schalter am Abschnitt entscheidet: Full width. Das Beispiel baut einen grauen Abschnitt mit drei Spalten und schaltet dann Full width ein, sodass sich die Spalten dehnen. Für Farb- und Fotofüllungen siehe Hintergründe. 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) /[Elemente gestalten](/de/hc/documentation/learn-dxpr-builder/element-settings) /[Design-Leitfäden](/de/hc/documentation/learn-dxpr-builder/design/overview) # Abschnitt über volle Breite laufen lassen. DXPR Builder lernenSeiten erstellenElemente gestaltenDesign-Leitfäden ## In diesem Leitfaden Verwandte Leitfäden - [Abschnitt mit Farbe, Foto oder Verlauf füllen](/de/hc/dokumentation/dxpr-builder-lernen/design/hintergruende) - [Layout auf Telefonen lauffähig machen](/de/hc/dokumentation/dxpr-builder-lernen/design/responsives-design) Sie können den Inhalt eines Abschnitts von Kante zu Kante laufen lassen, oder ihn mittig eingerahmt halten, während der Hintergrund das Fenster füllt. Ein Schalter am Abschnitt entscheidet: **Full width**. Das Beispiel baut einen grauen Abschnitt mit drei Spalten und schaltet dann **Full width** ein, sodass sich die Spalten dehnen. Für Farb- und Fotofüllungen siehe [Hintergründe](/de/hc/dokumentation/dxpr-builder-lernen/design/hintergruende). Das Video baut einen grauen Abschnitt mit 3 Spalten und lässt dann seinen Inhalt von Kante zu Kante laufen. ## Eingerahmten Abschnitt bauen 1. Klicken Sie im leeren Inhaltsbereich auf **Add Elements** und wählen Sie **Section** im Tab **Layout**. 2. Zeigen Sie auf den Abschnitt, öffnen Sie **More** und wählen Sie **Settings**. 3. Öffnen Sie das Panel **Style** und wählen Sie einen hellgrauen **Background**. 4. Klicken Sie auf **Save**. Das Grau spannt bereits über das Fenster. 5. Klicken Sie auf **+** am Abschnitt und wählen Sie **Row**. 6. Klicken Sie auf das Rastersymbol an der Zeile, wählen Sie die Kachel mit drei gleichen Spalten und klicken Sie auf **Save**. 7. Klicken Sie in jeder Spalte auf **+**, wählen Sie **Text** im Tab **Content**, tippen Sie eine **Heading 4** und eine Zeile, und klicken Sie auf **Save**. Die drei Spalten sitzen nun in einem zentrierten Kasten auf dem grauen Band. ## Full width einschalten 1. Öffnen Sie **More** am Abschnitt und wählen Sie **Settings**. 2. Schalten Sie im Panel **General** die Option **Full width** ein. 3. Klicken Sie auf **Save**. 4. Klicken Sie in der DXPR-Builder-Symbolleiste auf **Save**. 5. Öffnen Sie das Ansichtsmenü, das Augensymbol in der Symbolleiste, und wählen Sie **Preview**. ## Was Sie sehen Das graue Band sieht aus wie zuvor. Nur der Inhaltskasten hat sich geändert: Die erste Spalte beginnt nun an der linken Kante des Abschnitts und die letzte endet an der rechten Kante. Jeder Abschnitt hat zwei Teile: ein äußeres Element, das den Hintergrund trägt, und einen inneren Kasten, der die Zeilen hält. **Full width** ändert nur den inneren Kasten. Aus ist er zentriert mit Maximalbreite; an dehnt er sich zu den Kanten des Abschnitts. ## Settings Das Panel **General** des Abschnitts hält drei Layout-Schalter, alle standardmäßig aus: | Einstellung | Was sie bewirkt | |---|---| | **Full width** | Zeilen füllen den Abschnitt von Kante zu Kante statt eines zentrierten Kastens | | **100% height** | Der Abschnitt ist mindestens so hoch wie das Browserfenster | | **Vertical centering** | Zeilen sitzen in der vertikalen Mitte des Abschnitts | Zeilen haben keine eigene Breiteneinstellung; der Abschnitt entscheidet. ## Zwei Muster - **Hintergrund von Kante zu Kante, Text eingerahmt**: der gängige Hero. Lassen Sie **Full width** aus und setzen Sie den Hintergrund im Panel **Style** oder **Background effects**. - **Inhalt von Kante zu Kante**: ein Streifen aus Karten oder Bildern. Schalten Sie **Full width** ein und geben Sie den Spalten etwas **Padding**, wenn Text zu nah an der Fensterkante sitzt. ## Wenn Sie die Änderung nicht sehen - **Nichts ändert sich, wenn Sie Full width einschalten.** Auf schmalem Bildschirm, etwa einem Telefon, füllt die eingerahmte Version die Breite bereits. Verbreitern Sie das Browserfenster und sehen Sie erneut hin. - **Der Hintergrund reicht nicht bis an die Fensterkanten.** Ihr Theme legt den Seiteninhalt in eine eingerahmte Region, und der Abschnitt kann nur diese Region füllen. Wählen Sie ein vollbreites Seitenlayout oder eine Region in Ihrem Theme. - **Text berührt die Fensterkante.** Das tut **Full width** so. Fügen Sie **Padding** im Panel **Style** der Spalten hinzu, oder lassen Sie **Full width** aus. ## Wie geht es weiter? - [Abschnitt mit Farbe, Foto oder Verlauf füllen](/de/hc/dokumentation/dxpr-builder-lernen/design/hintergruende): das Band hinter Ihrem Inhalt stylen. - [Layout auf Telefonen lauffähig machen](/de/hc/dokumentation/dxpr-builder-lernen/design/responsives-design): steuern, wie sich die Spalten auf kleinen Bildschirmen verhalten.