Inhalte in Spalten anordnen.

DXPR Builder lernenWebsite verwaltenDrupal-Funktionen verbinden

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.

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.

Wie geht es weiter?