Abschnitt über volle Breite laufen lassen.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

Sie können den Inhalt eines Abschnitts von Kante zu Kante laufen lassen, 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 dehnen. Für Farb- und Fotofüllungen siehe Hintergründe.

Das Video baut einen grauen Abschnitt mit 3 Spalten und lässt dann seinen Inhalt von Kante zu Kante laufen.

Eingerahmten Abschnitt bauen

  1. Klicken Sie im leeren Inhaltsbereich auf Add Elements und wählen Sie Section im Tab Layout.
  2. Zeigen Sie auf 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 spannt bereits über das Fenster.
  5. Klicken Sie auf + am Abschnitt und wählen Sie Row.
  6. Klicken Sie auf das Rastersymbol an 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 im Tab Content, tippen Sie eine Heading 4 und eine Zeile, und klicken Sie auf Save.

Die drei Spalten sitzen nun in einem zentrierten Kasten auf dem grauen Band.

Full width einschalten

  1. Öffnen Sie More am Abschnitt und wählen Sie Settings.
  2. Schalten Sie im Panel General die Option Full width ein.
  3. Klicken Sie auf Save.
  4. Klicken Sie in der DXPR-Builder-Symbolleiste auf Save.
  5. Öffnen Sie das Ansichtsmenü, das Augensymbol in der Symbolleiste, und wählen Sie Preview.

Was Sie sehen

Das graue Band sieht aus wie zuvor. Nur der Inhaltskasten 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 einen inneren Kasten, der die Zeilen hält. Full width ändert nur den inneren Kasten. Aus ist er zentriert mit Maximalbreite; an dehnt er sich zu den Kanten des Abschnitts.

Settings

Das Panel General des Abschnitts hält drei Layout-Schalter, alle standardmäßig aus:

Einstellung Was sie bewirkt
Full width Zeilen füllen den Abschnitt von Kante zu Kante statt eines zentrierten Kastens
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

  • Hintergrund von Kante zu Kante, Text eingerahmt: der gängige Hero. Lassen Sie Full width aus und setzen Sie den Hintergrund im Panel Style oder Background effects.
  • Inhalt von Kante zu Kante: ein Streifen aus Karten 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 schmalem Bildschirm, etwa einem Telefon, füllt die eingerahmte Version die Breite bereits. Verbreitern Sie das Browserfenster und sehen Sie erneut hin.
  • Der Hintergrund reicht nicht bis an die Fensterkanten. Ihr Theme legt den Seiteninhalt in eine eingerahmte Region, und der Abschnitt kann nur diese Region füllen. Wählen Sie ein vollbreites Seitenlayout oder eine Region in Ihrem Theme.
  • Text berührt die Fensterkante. Das tut Full width so. Fügen Sie Padding im Panel Style der Spalten hinzu, oder lassen Sie Full width aus.

Wie geht es weiter?