--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/start-here/who-uses-it' title: 'Einen Abschnitt in voller Breite anzeigen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:35:55+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Sie können den Inhalt eines Abschnitts bis an die Kanten erstrecken 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 strecken. Für Farb- und Fotofüllungen siehe Hintergründe. Das Video baut einen grauen Abschnitt mit 3 Spalten und erstreckt dann seinen Inhalt bis an die Kanten. tags: - 'Je eerste pagina bouwen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Einen Abschnitt in voller Breite anzeigen' description: |- Sie können den Inhalt eines Abschnitts bis an die Kanten erstrecken 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 strecken. Für Farb- und Fotofüllungen siehe Hintergründe. Das Video baut einen grauen Abschnitt mit 3 Spalten und erstreckt dann seinen Inhalt bis an die Kanten. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:35:55+0000' dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/start-here/who-uses-it' articleSection: 'Je eerste pagina bouwen' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/start-here/who-uses-it' description: |- Sie können den Inhalt eines Abschnitts bis an die Kanten erstrecken 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 strecken. Für Farb- und Fotofüllungen siehe Hintergründe. Das Video baut einen grauen Abschnitt mit 3 Spalten und erstreckt dann seinen Inhalt bis an die Kanten. 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 --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Start here](/hc/documentation/learn-dxpr-builder/start-here) /[Je eerste pagina bouwen](/hc/documentation/learn-dxpr-builder/start-here/first-steps) # Einen Abschnitt in voller Breite anzeigen. Learn DXPR BuilderStart hereJe eerste pagina bouwen ## In this guide Related guides - [DXPR Builder auf Ihrer Drupal-Website installieren](/de/hc/documentation/learn-dxpr-builder/getting-started/installation) - [Ihre erste Seite erstellen](/de/hc/documentation/learn-dxpr-builder/getting-started/first-page) Sie können den Inhalt eines Abschnitts bis an die Kanten erstrecken 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 strecken. Für Farb- und Fotofüllungen siehe [Hintergründe](/de/hc/documentation/learn-dxpr-builder/design/backgrounds). Das Video baut einen grauen Abschnitt mit 3 Spalten und erstreckt dann seinen Inhalt bis an die Kanten. ## Einen eingerahmten Abschnitt bauen 1. Klicken Sie auf **Add Elements** im leeren Inhaltsbereich und wählen Sie **Section** aus dem Tab **Layout**. 2. Fahren Sie über 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 füllt das Fenster bereits aus. 5. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Row**. 6. Klicken Sie auf das Grid-Icon auf 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** aus dem Tab **Content**, geben Sie eine **Heading 4** und eine Zeile ein und klicken Sie auf **Save**. Die drei Spalten sitzen nun in einer zentrierten Box auf dem grauen Band. ## Full width einschalten 1. Öffnen Sie **More** auf dem Abschnitt und wählen Sie **Settings**. 2. Schalten Sie im Panel **General** **Full width** ein. 3. Klicken Sie auf **Save**. 4. Klicken Sie auf **Save** in der DXPR Builder-Symbolleiste. 5. Öffnen Sie das Ansichtsmenü, das Augen-Icon in der Symbolleiste, und wählen Sie **Preview**. ## Was Sie sehen Das graue Band sieht aus wie zuvor. Nur die Inhaltsbox 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 eine innere Box, die die Zeilen hält. **Full width** ändert nur die innere Box. Aus ist sie zentriert mit einer Höchstbreite; an streckt sie sich zu den Kanten des Abschnitts. ## Einstellungen Das Panel **General** des Abschnitts enthält drei Layout-Schalter, alle standardmäßig aus: | Einstellung | Funktion | |---|---| | **Full width** | Zeilen füllen den Abschnitt von Kante zu Kante statt einer zentrierten Box | | **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 - **Edge-to-edge background, boxed text**: der gängige Hero. Lassen Sie **Full width** aus und setzen Sie den Hintergrund im Panel **Style** oder **Background effects**. - **Edge-to-edge content**: ein Streifen aus Cards 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 einem schmalen Bildschirm, etwa einem Telefon, füllt die eingerahmte Version die Breite bereits. Verbreitern Sie das Browserfenster und schauen Sie erneut. - **Der Hintergrund reicht nicht bis zu den Fensterrändern.** Ihr Theme legt den Seiteninhalt in einen eingerahmten Bereich, und der Abschnitt kann nur diesen Bereich füllen. Wählen Sie in Ihrem Theme ein Seitenlayout oder eine Region in voller Breite. - **Text berührt die Fensterkante.** Genau das tut **Full width**. Fügen Sie **Padding** im Panel **Style** der Spalten hinzu, oder lassen Sie **Full width** aus. ## Wie geht es weiter? - [Einen Abschnitt mit Farbe, Foto oder Verlauf füllen](/de/hc/documentation/learn-dxpr-builder/design/backgrounds): Das Band hinter Ihrem Inhalt stylen. - [Ihr Layout auf Telefonen zum Laufen bringen](/de/hc/documentation/learn-dxpr-builder/design/responsive-design): Steuern, wie sich die Spalten auf kleinen Bildschirmen verhalten.