Einen Abschnitt in voller Breite anzeigen.

Learn DXPR BuilderStart hereJe eerste pagina bouwen

Sie können den Inhalt eines Abschnitts bis an die Kanten erstrecken 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 strecken. Für Farb- und Fotofüllungen siehe Hintergründe.

Das Video baut einen grauen Abschnitt mit 3 Spalten und erstreckt dann seinen Inhalt bis an die Kanten.

Einen eingerahmten Abschnitt bauen

  1. Klicken Sie auf Add Elements im leeren Inhaltsbereich und wählen Sie Section aus dem Tab Layout.
  2. Fahren Sie über 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 füllt das Fenster bereits aus.
  5. Klicken Sie auf + auf dem Abschnitt und wählen Sie Row.
  6. Klicken Sie auf das Grid-Icon auf 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 aus dem Tab Content, geben Sie eine Heading 4 und eine Zeile ein und klicken Sie auf Save.

Die drei Spalten sitzen nun in einer zentrierten Box auf dem grauen Band.

Full width einschalten

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

Was Sie sehen

Das graue Band sieht aus wie zuvor. Nur die Inhaltsbox 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 eine innere Box, die die Zeilen hält. Full width ändert nur die innere Box. Aus ist sie zentriert mit einer Höchstbreite; an streckt sie sich zu den Kanten des Abschnitts.

Einstellungen

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

Einstellung Funktion
Full width Zeilen füllen den Abschnitt von Kante zu Kante statt einer zentrierten Box
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

  • Edge-to-edge background, boxed text: der gängige Hero. Lassen Sie Full width aus und setzen Sie den Hintergrund im Panel Style oder Background effects.
  • Edge-to-edge content: ein Streifen aus Cards 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 einem schmalen Bildschirm, etwa einem Telefon, füllt die eingerahmte Version die Breite bereits. Verbreitern Sie das Browserfenster und schauen Sie erneut.
  • Der Hintergrund reicht nicht bis zu den Fensterrändern. Ihr Theme legt den Seiteninhalt in einen eingerahmten Bereich, und der Abschnitt kann nur diesen Bereich füllen. Wählen Sie in Ihrem Theme ein Seitenlayout oder eine Region in voller Breite.
  • Text berührt die Fensterkante. Genau das tut Full width. Fügen Sie Padding im Panel Style der Spalten hinzu, oder lassen Sie Full width aus.

Wie geht es weiter?