--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/layout/sections' title: 'Einen Abschnitt hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:34:28+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Ein Abschnitt ist ein Band Ihrer Seite, etwa ein Hero oben oder ein graues Band mit Leistungen darunter. Sie geben jedem Abschnitt seinen eigenen Hintergrund, seine Textfarbe, Abstände und Höhe und füllen ihn dann mit Zeilen oder Inhalten. Lesen Sie diese Seite, um Abschnitte hinzuzufügen und einzurichten; um einen in Spalten zu teilen, siehe Zeilen und Spalten.' tags: - Lay-out 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 hinzufügen' description: 'Ein Abschnitt ist ein Band Ihrer Seite, etwa ein Hero oben oder ein graues Band mit Leistungen darunter. Sie geben jedem Abschnitt seinen eigenen Hintergrund, seine Textfarbe, Abstände und Höhe und füllen ihn dann mit Zeilen oder Inhalten. Lesen Sie diese Seite, um Abschnitte hinzuzufügen und einzurichten; um einen in Spalten zu teilen, siehe Zeilen und Spalten.' 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:28+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/layout/sections' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/layout/sections' description: 'Ein Abschnitt ist ein Band Ihrer Seite, etwa ein Hero oben oder ein graues Band mit Leistungen darunter. Sie geben jedem Abschnitt seinen eigenen Hintergrund, seine Textfarbe, Abstände und Höhe und füllen ihn dann mit Zeilen oder Inhalten. Lesen Sie diese Seite, um Abschnitte hinzuzufügen und einzurichten; um einen in Spalten zu teilen, siehe Zeilen und Spalten.' 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) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # Einen Abschnitt hinzufügen. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [Eine Zeile hinzufügen](/de/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [Abschnitt mit Farbe, Foto oder Verlauf füllen](/de/hc/documentation/learn-dxpr-builder/design/backgrounds) - [Abschnitt über volle Breite laufen lassen](/de/hc/documentation/learn-dxpr-builder/design/full-width-layouts) Ein Abschnitt ist ein Band Ihrer Seite, etwa ein Hero oben oder ein graues Band mit Leistungen darunter. Sie geben jedem Abschnitt seinen eigenen Hintergrund, seine Textfarbe, Abstände und Höhe und füllen ihn dann mit Zeilen oder Inhalten. Lesen Sie diese Seite, um Abschnitte hinzuzufügen und einzurichten; um einen in Spalten zu teilen, siehe [Zeilen und Spalten](/de/hc/documentation/learn-dxpr-builder/layout/rows-and-columns). ## Einen Abschnitt hinzufügen Das Beispiel baut einen dunkelblauen Hero-Abschnitt für eine Klinik. Darunter folgt ein hellgrauer Abschnitt mit drei Spalten. 1. Klicken Sie auf **Add Elements** auf einer leeren Seite und wählen Sie **Section** aus dem Tab **Layout**. Unter einem vorhandenen Abschnitt klicken Sie auf **Add Section Below**, das runde Plus darunter. 2. Fahren Sie über den Abschnitt, öffnen Sie **More** und wählen Sie **Settings**. 3. Richten Sie den ganzen Abschnitt ein: hier **Align text center** unter **HTML classes**, einen dunkelblauen **Background** und eine weiße **Font color**. Klicken Sie auf **Save**. 4. Klicken Sie auf **+** auf dem Abschnitt, um Inhalt direkt hineinzulegen, oder fügen Sie eine **Row** hinzu, um ihn in Spalten zu teilen. 5. Klicken Sie auf **Save** in der Symbolleiste, um die Seite zu speichern. **Background** und **Font color** liegen im Panel **Style** des Dialogs. Neue Elemente landen oben im Abschnitt, also fügen Sie das unterste zuerst hinzu: Im Video kommt der Button vor die Überschrift. ## Was Sie sehen Das dunkelblaue Band füllt das Fenster von Kante zu Kante. Überschrift und Button bleiben in einer zentrierten Box, dem inneren Container des Abschnitts. Der graue Abschnitt beginnt direkt darunter, mit seinen drei Leistungsspalten in derselben zentrierten Box. Jeder neue Abschnitt trägt bereits die Klasse **Vertical padding size 5 (py-5)**unter **HTML classes**. Diese Klasse gibt ihm den Raum über und unter seinem Inhalt. ## Ihren Abschnitt einrichten Der Einstellungsdialog hat fünf Panels: **General**, **Background effects**, **Animation**, **Style** und **Hover style**. Nur Abschnitte haben **Background effects**. | Einstellung | Panel | Funktion | Standard | |---|---|---|---| | **Full width** | General | Zeilen laufen von Kante zu Kante statt im zentrierten Container | Off | | **100% height** | General | Der Abschnitt ist mindestens so hoch wie das Browserfenster | Off | | **Vertical centering** | General | Inhalt sitzt in der vertikalen Mitte eines Abschnitts, der höher ist als er | Off | | **HTML ID** | General | Ein Ankername, sodass ein Link auf `#name` zu diesem Abschnitt springt | Empty | | **HTML classes** | General | Utility-Klassen, etwa **Align text center** oder eine Padding-Größe | **Vertical padding size 5 (py-5)** | | **Background effect** | Background effects | **Simple image**, **Fixed image**, **Parallax image**, **Gradient** oder **YouTube video** | **Simple image** | | **Background**, **Font color** | Style | Die Farbe hinter dem Abschnitt und die Farbe seines Textes | None: Das Theme entscheidet | Der Hintergrund spannt immer über den ganzen Abschnitt, egal was **Full width** sagt. Die Bildeffekte bewegen das **Background image**, das Sie im Panel **Style** wählen; [Hintergründe](/de/hc/documentation/learn-dxpr-builder/design/backgrounds) zeigt jeden Effekt. Für mehr oder weniger Raum tauschen Sie **Vertical padding size 5 (py-5)** gegen eine kleinere Größe oder **No vertical padding (py-0)**. Für exakte Pixel nutzen Sie das Boxmodell im Panel **Style**, wie [Abstände](/de/hc/documentation/learn-dxpr-builder/element-settings/spacing)erklärt. ## Abschnittsrezepte | Abschnitt | Einstellungen, die ihn bauen | |---|---| | Hero | **100% height** und **Vertical centering** an, ein **Parallax image**-Effekt, eine Überschrift und ein Button | | Features | Ein heller **Background**, eine Überschrift, dann eine Zeile mit drei Spalten | | Call to action | Ein starker **Background**, **Align text center**, eine kurze Zeile und ein Button | | Testimonials | Ein heller **Background** und eine Zeile mit drei Spalten, jede mit einem **Block quote** | [Einen Hero-Abschnitt gestalten](/de/hc/documentation/learn-dxpr-builder/tutorials/hero-section) baut den ersten Schritt für Schritt. ## Wenn Sie es nicht sehen - **Die leere Seite hat keinen Add-Elements-Button.** Der Seitenerstellungs-Assistent ist ausgeschaltet, sodass die leere Seite nur **Choose a template** anbietet. Klicken Sie auf die leere Fläche, um den Element-Picker zu öffnen, oder schalten Sie **Enable page creation assistant** unter `/admin/dxpr_studio/dxpr_builder/ai_settings` ein. - **Es gibt keinen Add-Section-Below-Button.** Nur Abschnitte direkt auf der Seite haben ihn, nicht ein Abschnitt in einer Spalte oder einem Tab. Klicken Sie stattdessen auf **+**auf der Spalte. - **Vertikale Zentrierung ändert nichts.** Der Abschnitt ist nur so hoch wie sein Inhalt, also gibt es keinen Raum zum Zentrieren. Schalten Sie zusätzlich **100% height**ein. - **Full width scheint nichts zu tun.** Der Hintergrund spannt bereits über den ganzen Abschnitt; **Full width** bewegt nur die Zeilen an seine Ränder. Bei kurzem Text in einer Spalte ist die Änderung schwer zu sehen. - **Ein Abschnitt erschien, den Sie nicht hinzugefügt haben.** Sie haben eine **Row** oder ein Element auf einer leeren Seite gewählt, und jedes Element braucht einen Abschnitt um sich. DXPR Builder hat einen für Sie hinzugefügt; öffnen Sie seine Einstellungen wie alle anderen. ## Wie geht es weiter? - [Zeilen und Spalten](/de/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): Einen Abschnitt in Spalten teilen. - [Hintergründe](/de/hc/documentation/learn-dxpr-builder/design/backgrounds): Parallax-, Verlaufs- und Videoeffekte für Abschnitte. - [Layouts in voller Breite](/de/hc/documentation/learn-dxpr-builder/design/full-width-layouts): Wann Zeilen von Kante zu Kante laufen dürfen.