--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/layout/zeilen-und-spalten' title: 'Eine Zeile hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:34:21+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Eine Zeile teilt einen Abschnitt in Spalten, sodass Sie Inhalte nebeneinander legen können: drei Leistungen, ein Foto neben seinem Text, eine Sidebar neben einem Artikel. Sie wählen die Aufteilung aus zwölf Presets und können Telefonen ein eigenes Layout geben. Lesen Sie diese Seite, um eine Zeile hinzuzufügen; für eine Zeile in einer Spalte siehe Verschachtelung. 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: 'Eine Zeile hinzufügen' description: |- Eine Zeile teilt einen Abschnitt in Spalten, sodass Sie Inhalte nebeneinander legen können: drei Leistungen, ein Foto neben seinem Text, eine Sidebar neben einem Artikel. Sie wählen die Aufteilung aus zwölf Presets und können Telefonen ein eigenes Layout geben. Lesen Sie diese Seite, um eine Zeile hinzuzufügen; für eine Zeile in einer Spalte siehe Verschachtelung. 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:21+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/zeilen-und-spalten' articleSection: Layout - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/layout/zeilen-und-spalten' description: |- Eine Zeile teilt einen Abschnitt in Spalten, sodass Sie Inhalte nebeneinander legen können: drei Leistungen, ein Foto neben seinem Text, eine Sidebar neben einem Artikel. Sie wählen die Aufteilung aus zwölf Presets und können Telefonen ein eigenes Layout geben. Lesen Sie diese Seite, um eine Zeile hinzuzufügen; für eine Zeile in einer Spalte siehe Verschachtelung. 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) # Eine Zeile hinzufügen. DXPR Builder lernenSeiten erstellenInhalte hinzufügenLayout ## In diesem Leitfaden Verwandte Leitfäden - [Ein verschachteltes Layout hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/verschachtelung) - [Einen Abschnitt hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/abschnitte) - [Layout auf Telefonen lauffähig machen](/de/hc/dokumentation/dxpr-builder-lernen/design/responsives-design) Eine Zeile teilt einen Abschnitt in Spalten, sodass Sie Inhalte nebeneinander legen können: drei Leistungen, ein Foto neben seinem Text, eine Sidebar neben einem Artikel. Sie wählen die Aufteilung aus zwölf Presets und können Telefonen ein eigenes Layout geben. Lesen Sie diese Seite, um eine Zeile hinzuzufügen; für eine Zeile in einer Spalte siehe [Verschachtelung](/de/hc/documentation/learn-dxpr-builder/layout/nesting). ## Eine Zeile hinzufügen Das Beispiel fügt einem Abschnitt eine Zeile mit drei Spalten hinzu, eine für jede Leistung, die ein Team anbietet. 1. Klicken Sie auf **+** auf einem Abschnitt, um den Element-Picker zu öffnen. 2. Wählen Sie **Row** aus dem Tab **Layout**. Sie kommt mit zwei gleichen Spalten. 3. Klicken Sie auf das Grid-Icon (**Column layout**) in der Kontrollleiste der Zeile, wählen Sie ein Spalten-Preset wie drei gleiche Spalten und klicken Sie auf **Save**. 4. Klicken Sie auf **+** in einer Spalte, um Inhalt hinzuzufügen. 5. Klicken Sie auf **Save** in der Symbolleiste, um die Seite zu speichern. Das Grid-Icon sitzt direkt hinter dem Zieh-Anfasser der Zeile. Ein Preset ändert die Spalten, sobald Sie darauf klicken; **Cancel** stellt das alte Layout wieder her. ## Was Sie sehen Die drei Leistungen sitzen nebeneinander, jede Spalte ein Drittel der Abschnittsbreite. Auf Bildschirmen unter 768 Pixeln stapeln sich die Spalten: Jede nimmt die volle Breite ein, in der Reihenfolge der Seite. Spalten sind nur so hoch wie ihr Inhalt, sodass eine kurze Spalte vor ihren Nachbarn endet. Sie bemerken es, sobald Spalten eine Hintergrundfarbe bekommen; **Equal-height columns** gleicht sie aus. ## Ihre Zeile einrichten ### Spaltenlayouts Das Grid-Icon öffnet ein Panel für jede Bildschirmgröße mit eigenem Layout. Jedes Panel zeigt diese zwölf Presets als Kacheln: | Preset | Layout | |---|---| | 1/1 | Eine Spalte in voller Breite | | 1/2 + 1/2 | Zwei gleiche Spalten | | 1/3 + 1/3 + 1/3 | Drei gleiche Spalten | | 1/4 + 1/4 + 1/4 + 1/4 | Vier gleiche Spalten | | 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | Sechs gleiche Spalten | | 1/4 + 1/2 + 1/4 | Schmal, breit, schmal | | 1/6 + 4/6 + 1/6 | Schmal, sehr breit, schmal | | 1/4 + 3/4 | Viertel links, drei Viertel rechts | | 3/4 + 1/4 | Drei Viertel links, Viertel rechts | | 2/3 + 1/3 | Breit links, schmal rechts | | 1/3 + 2/3 | Schmal links, breit rechts | | 5/12 + 7/12 | Etwas schmal links, etwas breit rechts | Für jede andere Aufteilung klicken Sie auf **Custom Layout** und geben Sie die Breiten als Brüche ein, etwa `1/6 + 5/6`. Breiten, die zusammen mehr als 1 ergeben, umbrechen auf eine neue Zeile. Wenn Sie den Dialog erneut öffnen, ist **Custom Layout** markiert und zeigt das Layout, etwa **Custom Layout (1/6 + 5/6)**. ### Ein Layout pro Bildschirmgröße Das erste Panel, **Medium devices (≥ 768px)**, setzt das Layout ab Tablets aufwärts. Um auch Telefone zu ändern, klicken Sie oben im Dialog auf **Add screen size**. Ein Panel für **Extra small (< 576px)** öffnet sich; wählen Sie bei Bedarf eine andere Größe aus dessen Liste und dann ein Preset. **Remove screen size** löscht ein Panel wieder. ### Zeilen- und Spalteneinstellungen Öffnen Sie **More** > **Settings** in der Kontrollleiste der Zeile, oder in der Leiste der Spalte für die Spalteneinstellung. | Einstellung | Element | Funktion | Standard | |---|---|---|---| | **Equal-height columns** | Row | Streckt jede Spalte auf die Höhe der höchsten | Off | | **Mirror row** | Row | Zeigt die Spalten ab 768 Pixeln in umgekehrter Reihenfolge; gestapelte Spalten behalten ihre Seitenreihenfolge | Off | | **Vertical centering** | Column | Zentriert den Inhalt in einer Spalte, die höher ist als er | Off | **Mirror row** passt zu einer Seite aus abwechselnden Zeilen: Foto links, dann Foto rechts, während Telefone immer zuerst das Foto zeigen. ### Spalten verschieben und entfernen Ziehen Sie eine Spalte an ihrem Anfasser, oder nutzen Sie **More** > **Move Left** oder **Move Right** in ihrer Leiste. Spalten haben kein **Delete**: Wählen Sie stattdessen ein Preset mit weniger Spalten. Inhalte gehen dabei nie verloren; sie wandern in die letzte verbleibende Spalte. ## Wenn Sie es nicht sehen - **Vertikale Zentrierung einer Spalte ändert nichts.** Die Spalte ist nur so hoch wie ihr Inhalt, also gibt es keinen Raum zum Zentrieren. Schalten Sie **Equal-height columns** in den Einstellungen der Zeile ein. - **Die Spalten stapeln sich auf einem Telefon.** Unter 768 Pixeln ist das der Standard. Klicken Sie auf das Grid-Icon, dann auf **Add screen size**, und wählen Sie ein Preset für **Extra small (< 576px)**. - **Text ist in eine andere Spalte gesprungen.** Sie haben ein Preset mit weniger Spalten gewählt, und der Inhalt der entfernten Spalten ist in die letzte gewandert. Drücken Sie **Strg+Z** (**Cmd+Z** auf einem Mac), um die Änderung rückgängig zu machen. - **Eine Spalte hat kein Delete in ihrem More-Menü.** Spalten werden über das Layout entfernt. Klicken Sie auf das Grid-Icon der Zeile und wählen Sie ein Preset mit weniger Spalten. ## Wie geht es weiter? - [Verschachtelung](/de/hc/documentation/learn-dxpr-builder/layout/nesting): Eine Zeile in eine Spalte legen für ein feineres Grid. - [Sections](/de/hc/dokumentation/dxpr-builder-lernen/layout/abschnitte): Dem Band um Ihre Spalten einen eigenen Hintergrund geben. - [Responsives Design](/de/hc/documentation/learn-dxpr-builder/design/responsive-design): Wie sich Ihr Layout an jede Bildschirmgröße anpasst.