Einen Abschnitt hinzufügen.

DXPR Builder lernenSeiten erstellenInhalte hinzufügenLayout

Ein Abschnitt ist ein Band Ihrer Seite, etwa ein Hero oben oder ein graues Band mit Leistungen darunter. Sie geben jedem Abschnitt seinen eigenen Hintergrund, seine Textfarbe, Abstände und Höhe und füllen ihn dann mit Zeilen oder Inhalten. Lesen Sie diese Seite, um Abschnitte hinzuzufügen und einzurichten; um einen in Spalten zu teilen, siehe Zeilen und Spalten.

Die Klinikseite, wie Besucher sie sehen: ein dunkelblauer Abschnitt von Kante zu Kante mit der zentrierten Überschrift „Book your health check“, einer Zeile über Termine in derselben Woche und einem weißen Button „Book online“, über einem hellgrauen Abschnitt mit drei Spalten, „Same-week visits“, „Experienced GPs“ und „Results online“

Einen Abschnitt hinzufügen

Das Beispiel baut einen dunkelblauen Hero-Abschnitt für eine Klinik. Darunter folgt ein hellgrauer Abschnitt mit drei Spalten.

  1. Klicken Sie auf Add Elements auf einer leeren Seite und wählen Sie Section aus dem Tab Layout. Unter einem vorhandenen Abschnitt klicken Sie auf Add Section Below, das runde Plus darunter.
  2. Fahren Sie über den Abschnitt, öffnen Sie More und wählen Sie Settings.
  3. Richten Sie den ganzen Abschnitt ein: hier Align text center unter HTML classes, einen dunkelblauen Background und eine weiße Font color. Klicken Sie auf Save.
  4. Klicken Sie auf + auf dem Abschnitt, um Inhalt direkt hineinzulegen, oder fügen Sie eine Row hinzu, um ihn in Spalten zu teilen.
  5. Klicken Sie auf Save in der Symbolleiste, um die Seite zu speichern.

Background und Font color liegen im Panel Style des Dialogs. Neue Elemente landen oben im Abschnitt, also fügen Sie das unterste zuerst hinzu: Im Video kommt der Button vor die Überschrift.

Was Sie sehen

Das dunkelblaue Band füllt das Fenster von Kante zu Kante. Überschrift und Button bleiben in einer zentrierten Box, dem inneren Container des Abschnitts. Der graue Abschnitt beginnt direkt darunter, mit seinen drei Leistungsspalten in derselben zentrierten Box.

Jeder neue Abschnitt trägt bereits die Klasse Vertical padding size 5 (py-5) unter HTML classes. Diese Klasse gibt ihm den Raum über und unter seinem Inhalt.

Ihren Abschnitt einrichten

Der Einstellungsdialog hat fünf Panels: General, Background effects, Animation, Style und Hover style. Nur Abschnitte haben Background effects.

Einstellung Panel Funktion Standard
Full width General Zeilen laufen von Kante zu Kante statt im zentrierten Container Off
100% height General Der Abschnitt ist mindestens so hoch wie das Browserfenster Off
Vertical centering General Inhalt sitzt in der vertikalen Mitte eines Abschnitts, der höher ist als er Off
HTML ID General Ein Ankername, sodass ein Link auf #name zu diesem Abschnitt springt Empty
HTML classes General Utility-Klassen, etwa Align text center oder eine Padding-Größe Vertical padding size 5 (py-5)
Background effect Background effects Simple image, Fixed image, Parallax image, Gradient oder YouTube video Simple image
Background, Font color Style Die Farbe hinter dem Abschnitt und die Farbe seines Textes None: Das Theme entscheidet

Der Hintergrund spannt immer über den ganzen Abschnitt, egal was Full width sagt. Die Bildeffekte bewegen das Background image, das Sie im Panel Style wählen; Hintergründe zeigt jeden Effekt.

Für mehr oder weniger Raum tauschen Sie Vertical padding size 5 (py-5) gegen eine kleinere Größe oder No vertical padding (py-0). Für exakte Pixel nutzen Sie das Boxmodell im Panel Style, wie Abstände erklärt.

Abschnittsrezepte

Abschnitt Einstellungen, die ihn bauen
Hero 100% height und Vertical centering an, ein Parallax image-Effekt, eine Überschrift und ein Button
Features Ein heller Background, eine Überschrift, dann eine Zeile mit drei Spalten
Call to action Ein starker Background, Align text center, eine kurze Zeile und ein Button
Testimonials Ein heller Background und eine Zeile mit drei Spalten, jede mit einem Block quote

Einen Hero-Abschnitt gestalten baut den ersten Schritt für Schritt.

Wenn Sie es nicht sehen

  • Die leere Seite hat keinen Add-Elements-Button. Der Seitenerstellungs-Assistent ist ausgeschaltet, sodass die leere Seite nur Choose a template anbietet. Klicken Sie auf die leere Fläche, um den Element-Picker zu öffnen, oder schalten Sie Enable page creation assistant unter /admin/dxpr_studio/dxpr_builder/ai_settings ein.
  • Es gibt keinen Add-Section-Below-Button. Nur Abschnitte direkt auf der Seite haben ihn, nicht ein Abschnitt in einer Spalte oder einem Tab. Klicken Sie stattdessen auf + auf der Spalte.
  • Vertikale Zentrierung ändert nichts. Der Abschnitt ist nur so hoch wie sein Inhalt, also gibt es keinen Raum zum Zentrieren. Schalten Sie zusätzlich 100% height ein.
  • Full width scheint nichts zu tun. Der Hintergrund spannt bereits über den ganzen Abschnitt; Full width bewegt nur die Zeilen an seine Ränder. Bei kurzem Text in einer Spalte ist die Änderung schwer zu sehen.
  • Ein Abschnitt erschien, den Sie nicht hinzugefügt haben. Sie haben eine Row oder ein Element auf einer leeren Seite gewählt, und jedes Element braucht einen Abschnitt um sich. DXPR Builder hat einen für Sie hinzugefügt; öffnen Sie seine Einstellungen wie alle anderen.

Wie geht es weiter?