---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/mehrspaltige-inhalte'
title: 'Inhalte in Spalten anordnen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:36:50+00:00'
updated: '2026-10-24T19:36:26+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bauen Sie eine Seite mit den vier Spaltenlayouts, die Sie am häufigsten nutzen: Inhalt mit Seitenleiste, zwei gleiche Hälften, drei Drittel und vier Viertel. Jedes erhält eine Überschrift darüber. Nutzen Sie sie, um zu lernen, welches Preset zu welchem Inhalt passt. Für jede Zeileneinstellung siehe Zeilen und Spalten.
  Das Video baut die Müllabfuhrseite eines Stadtrats.
tags:
  - 'Connect Drupal features'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T19:36:26+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Inhalte in Spalten anordnen'
      description: |-
        Hier bauen Sie eine Seite mit den vier Spaltenlayouts, die Sie am häufigsten nutzen: Inhalt mit Seitenleiste, zwei gleiche Hälften, drei Drittel und vier Viertel. Jedes erhält eine Überschrift darüber. Nutzen Sie sie, um zu lernen, welches Preset zu welchem Inhalt passt. Für jede Zeileneinstellung siehe Zeilen und Spalten.
        Das Video baut die Müllabfuhrseite eines Stadtrats.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:36:50+0000'
      dateModified: '2026-10-24T19:36:26+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/tutorials/mehrspaltige-inhalte'
      articleSection: 'Drupal-Funktionen verbinden'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/mehrspaltige-inhalte'
      description: |-
        Hier bauen Sie eine Seite mit den vier Spaltenlayouts, die Sie am häufigsten nutzen: Inhalt mit Seitenleiste, zwei gleiche Hälften, drei Drittel und vier Viertel. Jedes erhält eine Überschrift darüber. Nutzen Sie sie, um zu lernen, welches Preset zu welchem Inhalt passt. Für jede Zeileneinstellung siehe Zeilen und Spalten.
        Das Video baut die Müllabfuhrseite eines Stadtrats.
      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) /[Website verwalten](/de/hc/documentation/learn-dxpr-builder/manage) /[Drupal-Funktionen verbinden](/de/hc/documentation/learn-dxpr-builder/integrations) # Inhalte in Spalten anordnen.

 DXPR Builder lernenWebsite verwaltenDrupal-Funktionen verbinden

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Eine Zeile hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/zeilen-und-spalten)
- [Einen Abschnitt hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/abschnitte)

Hier bauen Sie eine Seite mit den vier Spaltenlayouts, die Sie am häufigsten nutzen: Inhalt mit Seitenleiste, zwei gleiche Hälften, drei Drittel und vier Viertel. Jedes erhält eine Überschrift darüber. Nutzen Sie sie, um zu lernen, welches Preset zu welchem Inhalt passt. Für jede Zeileneinstellung siehe [Zeilen und Spalten](/de/hc/documentation/learn-dxpr-builder/layout/rows-and-columns).

Das Video baut die Müllabfuhrseite eines Stadtrats.

  ## Bevor Sie beginnen

- Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**.
- Die Seite ist im Builder geöffnet. Für eine neue gehen Sie zu **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) und klicken Sie auf **Save**.
- Neue Elemente landen oben in ihrem Abschnitt. Deshalb kommt jede Überschrift nach ihrer Zeile hinein: Sie landet darüber.

## Ein Layout wählen

| Layout | Am besten für | Preset |
|---|---|---|
| Inhalt mit Seitenleiste | Artikel mit verwandten Links | **2/3 + 1/3** |
| Zwei gleiche Hälften | Vergleiche, Vorher und Nachher | Standard der Zeile |
| Drei gleiche Drittel | Funktionshighlights, Leistungen | **1/3 + 1/3 + 1/3** |
| Vier gleiche Viertel | Statistiken, kleine Cards | **1/4 + 1/4 + 1/4 + 1/4** |

Eine neue **Row** kommt mit zwei gleichen Spalten. Jedes andere Layout kommt vom Grid-Icon der Zeile (**Column layout**).

## Schritt 1: Inhalt mit Seitenleiste

1. Klicken Sie auf der leeren Seite auf **Add Elements** und wählen Sie **Section** aus dem Tab **Layout**.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Row**. Klicken Sie auf ihr Grid-Icon (**Column layout**), wählen Sie das Preset **2/3 + 1/3** und klicken Sie auf **Save**.
3. Klicken Sie in der breiten Spalte auf **+** und wählen Sie **Text** aus dem Tab **Content**. Geben Sie den Artikel ein, setzen Sie die erste Zeile auf **Heading 3** und klicken Sie auf **Save**.
4. Klicken Sie in der schmalen Spalte auf **+** und wählen Sie **Text**. Geben Sie „Verwandte Seiten“ als **Heading 4** ein, fügen Sie eine Zeile pro verwandter Seite hinzu und klicken Sie auf **Save**.
5. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Text**; er landet über der Zeile. Geben Sie „Inhalt mit Seitenleiste“ als **Heading 2** ein und klicken Sie auf **Save**.

## Schritt 2: Zwei gleiche Hälften

1. Fahren Sie über den Abschnitt und klicken Sie auf **Add Section Below**. Öffnen Sie das **More** > **Settings** des neuen Abschnitts, wählen Sie ein hellgraues **Background** im Panel **Style** und klicken Sie auf **Save**.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Row**. Zwei gleiche Spalten sind Standard, also gibt es nichts zu ändern.
3. Fügen Sie in jeder Spalte ein **Text**-Element hinzu: „Vorher“ und „Nachher“ als **Heading 4** mit je einer Zeile.
4. Fügen Sie die Überschrift „Zwei gleiche Hälften“ genauso hinzu wie in Schritt 1.

## Schritt 3: Drei gleiche Drittel

1. Fügen Sie mit **Add Section Below** einen dritten Abschnitt hinzu und geben Sie ihm die Klasse **Align text center**.
2. Fügen Sie eine **Row** hinzu, klicken Sie auf ihr Grid-Icon (**Column layout**), wählen Sie das Preset **1/3 + 1/3 + 1/3** und klicken Sie auf **Save**.
3. Fügen Sie in jeder Spalte ein **Text**-Element hinzu: „Papier“, „Glas“ und „Bio“ als **Heading 4** mit je einer Zeile.
4. Fügen Sie die Überschrift „Drei gleiche Drittel“ hinzu.

## Schritt 4: Vier gleiche Viertel

1. Fügen Sie einen vierten Abschnitt mit einem hellgrauen **Background** und der Klasse **Align text center** hinzu.
2. Fügen Sie eine **Row** hinzu, klicken Sie auf ihr Grid-Icon (**Column layout**), wählen Sie das Preset **1/4 + 1/4 + 1/4 + 1/4** und klicken Sie auf **Save**.
3. Fügen Sie in jeder Spalte ein **Text**-Element hinzu: den Tag als **Heading 4** und was abgeholt wird.
4. Fügen Sie die Überschrift „Vier gleiche Viertel“ hinzu.

## Schritt 5: Speichern und Vorschau

1. Klicken Sie in der Builder-Symbolleiste auf **Save**.
2. Öffnen Sie das Ansichtsmenü (das **Augen-Icon**) und wählen Sie **Preview**.

## Auf kleineren Bildschirmen

Ab 768 Pixel Breite sitzen Spalten nebeneinander, sodass Tablets dasselbe Layout zeigen wie Desktops. Auf Telefonen nimmt jede Spalte die volle Breite ein, und die Spalten stapeln sich in ihrer Reihenfolge. Für ein anderes Layout auf Tablets klicken Sie auf das Grid-Icon der Zeile (**Column layout**) und wählen Sie **Add screen size**.

## Weiter gehen

Nicht im Video gezeigt:

- **Schmal, breit, schmal**: Das Preset **1/4 + 1/2 + 1/4** hält langen Text mit leeren Rändern lesbar.
- **Mirror row**: Schalten Sie es in den Zeileneinstellungen ein, um die Spalten auf Tablets und Desktops zu tauschen. Telefone behalten die ursprüngliche Reihenfolge, sodass die erste Spalte dort weiterhin zuerst kommt.

## Was Sie sehen

Vier Bänder folgen einander, jedes mit seiner Überschrift oben. Der Artikel und seine verwandten Links teilen sich das erste, zwei Hälften sitzen auf Grau, und drei zentrierte Drittel kommen als Nächstes. Vier zentrierte Viertel auf Grau schließen die Seite.

## Wenn Sie die Spalten nicht wie gezeigt sehen

- **Die Zeile hat die falsche Spaltenzahl.** Das Preset greift nur, wenn Sie im Layout-Dialog auf **Save** klicken. Klicken Sie erneut auf das Grid-Icon der Zeile (**Column layout**), wählen Sie das Preset und klicken Sie auf **Save**.
- **Eine Überschrift sitzt unter ihrer Zeile.** Die Überschrift kam vor der Zeile hinein, und neue Elemente landen oben in ihrem Abschnitt. Ziehen Sie die Überschrift am Zieh-Anfasser in ihrer Kontrollleiste über die Zeile.
- **Die Spalten stapeln sich auf einem Tablet.** Das Tablet ist schmaler als 768 Pixel, etwa ein kleines Tablet im Hochformat. Fügen Sie ein Layout für diese Breite mit **Add screen size** im Layout-Dialog der Zeile hinzu.
- **Ihre Änderungen sind nach einem Neuladen weg.** Sie haben die Seite verlassen, bevor Sie auf **Save** in der Builder-Symbolleiste geklickt haben. Wenn Save einen Fehler zeigt, siehe [Änderungen werden nicht gespeichert](/de/hc/dokumentation/dxpr-builder-lernen/fehlerbehebung/speichern-schlaegt-fehl).

## Wie geht es weiter?

- [Zeilen und Spalten](/de/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) für jede Zeileneinstellung
- [Sections](/de/hc/documentation/learn-dxpr-builder/layout/sections) für Abschnittshintergründe und -breiten