Abschnitt mit Farbe, Foto oder Verlauf füllen.

DXPR Builder lernenSeiten erstellenElemente gestaltenDesign-Leitfäden

Sie können jeden Abschnitt mit Farbe, Foto oder Verlauf füllen. Farbe und Foto kommen aus dem Panel Style, das Abschnitte, Zeilen, Spalten und Elemente alle haben. Abschnitte fügen ein Panel Background effects für Verläufe, fixierte und Parallax-Fotos und YouTube-Video hinzu. Das Beispiel baut einen marineblauen Abschnitt mit Stadtfoto, weißem Text und Verlauf darüber.

Das Video legt ein Foto hinter einen Abschnitt und deckt es dann mit einem Verlauf ab.

Farbe und Foto hinzufügen

  1. Klicken Sie im leeren Inhaltsbereich auf Add Elements und wählen Sie Section im Tab Layout.
  2. Zeigen Sie auf den Abschnitt und öffnen Sie More > Settings.
  3. Öffnen Sie das Panel Style.
  4. Wählen Sie ein dunkelblaues Farbfeld für Background.
  5. Wählen Sie Weiß für Font color.
  6. Klicken Sie unter Background image auf Select Image. Durchsuchen Sie die Medienbibliothek, aktivieren Sie ein Foto und klicken Sie auf Insert selected.
  7. Setzen Sie Background style auf Cover.
  8. Setzen Sie Background position auf Center center und klicken Sie auf Save.
  9. Klicken Sie auf + am Abschnitt und wählen Sie Text im Tab Content.
  10. Tippen Sie eine Überschrift, etwa Evening lectures, und eine Zeile darunter. Setzen Sie die Überschrift auf Heading 2 und zentrieren Sie beide Zeilen in der Editor-Symbolleiste.
  11. Öffnen Sie das Panel Style, setzen Sie Font color auf Weiß und klicken Sie auf Save.

Verlauf hinzufügen

  1. Zeigen Sie auf den Abschnitt und öffnen Sie erneut More > Settings.
  2. Öffnen Sie das Panel Background effects und setzen Sie Background effect auf Gradient.
  3. Wählen Sie Start color und End color, dann klicken Sie auf Save.
  4. Klicken Sie in der Symbolleiste auf Save, öffnen Sie das Ansichtsmenü (das Augensymbol) und wählen Sie Preview.

Was Sie sehen

Nach den ersten Schritten füllt das Foto den ganzen Abschnitt hinter der weißen Überschrift. Cover schneidet weg, was nicht passt, und Center center hält die Bildmitte im Blick. Die marineblaue Farbe zeigt sich nur, während das Foto lädt oder wo das Foto nicht hinreicht.

Der Verlauf blendet von der Startfarbe oben zur Endfarbe unten. Er liegt auf dem Foto. Deckende Farben decken das Foto vollständig ab; Farben mit etwas Transparenz lassen es durchscheinen.

Settings

Style-Panel (jeder Abschnitt, jede Zeile, Spalte und jedes Element)

Einstellung Was sie bewirkt Standard
Background Eine Füllfarbe aus der Farbauswahl oder einem Theme-Farbfeld Kein
Background image Ein Bild aus der Medienbibliothek, gewählt mit Select Image Kein
Background style Cover füllt das Element und schneidet zu; Contain zeigt das ganze Bild und kann Lücken lassen; No repeat zeigt es einmal in eigener Größe; Repeat kachelt es Theme defaults
Background position Welcher Bildteil im Blick bleibt, wenn zugeschnitten wird, etwa Center center oder Left top Theme defaults

Wenn KI-Bilderzeugung eingerichtet ist, nimmt Background image auch einen Prompt. Siehe KI-Bilderzeugung.

Background-effects-Panel (nur Abschnitte)

Hintergrundeffekt Was er bewirkt Zusatzeinstellungen
Simple image (Standard) Das Foto scrollt mit der Seite Keine
Fixed image Das Foto bleibt stehen, während die Seite darüber scrollt Keine
Parallax image Das Foto bewegt sich langsamer als die Seite. Siehe Hero-Abschnitt als Beispiel. Parallax speed, Parallax mode (Fixed oder Local), Disable on mobile
Gradient Zwei Farben blenden über den Abschnitt, auf dem Foto, falls eines da ist Start color, End color, Gradient direction (180 Grad läuft oben nach unten), Start position, End position
YouTube video Ein stummes YouTube-Video füllt den Abschnitt; aktivieren Sie Loop, um es zu wiederholen YouTube video URL, Video options, Start time in seconds, Stop time in seconds

Fixierte und Parallax-Effekte bewegen das Foto, das Sie im Panel Style gesetzt haben. Ein YouTube-Video braucht kein Foto.

Wenn Sie den Hintergrund nicht sehen

  • Es gibt kein Background-effects-Panel. Nur Abschnitte haben es. Zeigen Sie auf den Abschnitt, nicht auf Zeile, Spalte oder Element, und öffnen Sie More > Settings.
  • Das Foto ist abgeschnitten. Cover schneidet weg, was nicht in den Abschnitt passt. Ändern Sie Background position, um das Motiv im Blick zu halten, oder wählen Sie Contain.
  • Der Verlauf verdeckt das Foto. Der Verlauf liegt obenauf, und deckende Farben decken das Foto ab. Senken Sie die Deckkraft von Start color und End color in der Farbauswahl.
  • Der Abschnitt zeigt keinen Verlauf. Ein Verlauf braucht beide Farben. Wählen Sie Start color und End color.
  • Das YouTube-Video spielt nicht. YouTube video URL ist leer oder kein Link auf ein Video. Fügen Sie die volle Adresse des Videos ein, etwa https://www.youtube.com/watch?v= gefolgt von seiner ID.

Wie geht es weiter?

  • Volle Breite: Hintergrund und Inhalt von Kante zu Kante laufen lassen.
  • Animations-Tab: Text einblenden, während der Abschnitt ins Bild scrollt.
  • Hero-Abschnitt: ganzen Seitenkopf mit Parallax-Foto bauen.