Eine Farbe oder ein Foto hinter Inhalte legen.
Geben Sie einem Band Ihrer Seite eine Markenfarbe oder ein Foto, sodass eine Überschrift hervorsticht und das Band als ein Block gelesen wird. Farbe und Foto stellen Sie im Style-Panel jedes Elements ein. Eine Section fügt ein Background effects-Panel für ein fixiertes Foto, Parallax, einen Verlauf oder ein YouTube-Video hinzu.
Das Video folgt dem Rezept unten: Es legt ein Foto hinter eine Überschrift und einen dunklen Verlauf über das Foto, sodass die weiße Überschrift lesbar bleibt.
Bevor Sie beginnen
- Öffnen Sie die Seite in DXPR Builder; wenn Sie auf ein Element zeigen, erscheint seine Steuerleiste mit More. Neu im Builder? Siehe Ihre erste Seite.
- Speichern im Dialog behält eine Änderung im Editor. Speichern in der Builder-Symbolleiste über Ihrem Inhalt speichert die Seite und zeigt „Saved field“.
- Nutzen Sie eine Section für ein volles Band der Seite. Nur eine Section hat Background effects.
- Nutzen Sie ein Text- oder Card-Element für einen farbigen Kasten hinter wenigen Zeilen in einer Spalte.
- Nutzen Sie Ihr Theme für Hintergründe auf jeder Seite, zum Beispiel den Seiten-Body oder den Footer.
- Halten Sie Wörter aus dem Foto heraus. Ein Hintergrundbild hat keinen Alternativtext, daher überspringen Screenreader es. Setzen Sie Ihre Botschaft in eine Überschrift darüber.
Rezept: eine lesbare Überschrift auf einem Foto
Weißer Text auf einem unruhigen Foto ist schwer zu lesen. Ein dunkler Verlauf über dem Foto behebt das und funktioniert weiter, wenn Sie das Foto tauschen. Sie brauchen eine Section, die Ihre Überschrift in einem Text-Element hält.
- Fahren Sie mit der Maus über die Section, klicken Sie auf More und dann auf Settings.
- Öffnen Sie das Style-Panel und klicken Sie unter Background image auf Select Image. Wählen Sie ein Foto. Ein Vorschaubild erscheint, mit einer Bildgrößenliste.
- Wählen Sie in der Bildgrößenliste eine Größe, die mindestens so breit ist wie der breiteste Bildschirm, für den Sie gestalten, oder Original image (No resizing). Meiden Sie Optimize for fast loading für ein volles Band.
- Stellen Sie Background style auf Cover und Background position auf Center center.
- Öffnen Sie das Background effects-Panel und stellen Sie Background effect auf Gradient. Ihr Foto bleibt; der Verlauf liegt darüber.
- Geben Sie in das Farbfeld von Start color
rgba(0, 0, 0, 0.6)ein: Schwarz mit 60 %. Geben Siergba(0, 0, 0, 0.3)für End color ein. Belassen Sie Gradient direction auf 180, sodass der Schleier von oben nach unten verläuft. - Klicken Sie im Dialog auf Speichern. Die Section zeigt das Foto unter einem dunklen Schleier.
- Fahren Sie mit der Maus über das Text-Element, klicken Sie auf More und dann auf Settings. Stellen Sie in seinem Style-Panel Font color auf Weiß und klicken Sie auf Speichern.
- Klicken Sie in der Symbolleiste auf Speichern.
Prüfen Sie die Überschrift an der hellsten Stelle des Fotos. Zielen Sie auf einen Kontrast von mindestens 4,5 zu 1 oder 3 zu 1 für große Überschriften; die Seite Typografie erklärt diese Zielwerte. Immer noch schwer zu lesen? Erhöhen Sie beide Werte, zum Beispiel auf 0,8 und 0,5.
Was Sie sehen
Die Section zeigt Ihr Foto unter einem dunklen Schleier, oben am dunkelsten, mit der weißen Überschrift darauf. Cover füllt die ganze Section, sodass auf schmalem Bildschirm mehr von den Seiten des Fotos abgeschnitten wird.
Wie die Einstellungen funktionieren
| Steuerelement | Was es tut |
|---|---|
| Background | Eine Farbe hinter dem Inhalt. Der Opazitätsregler der Auswahl macht sie durchsichtig. |
| Background image | Ein Bild hinter dem Inhalt: über Select Image, über eine URL oder über AI Image Generation, sofern Ihre Website es nicht abgeschaltet hat. |
| Background style | Wie das Bild das Element füllt. Siehe die nächste Tabelle. |
| Background position | Der Punkt, an dem das Bild fixiert ist. Mit Cover entscheidet er, welcher Fototeil sichtbar bleibt. |
| Background style | Ergebnis |
|---|---|
| Theme defaults | Sofern Ihr Theme nichts anderes sagt, wiederholt sich das Bild in eigener Größe ab der oberen linken Ecke. |
| Cover | Das Bild füllt das Element und die nicht passenden Ränder werden abgeschnitten. Am besten für Fotos. |
| Contain | Das ganze Bild erscheint einmal. Leere Bänder können an zwei Seiten bleiben. Am besten für Logos. |
| No repeat | Eine Kopie in eigener Größe. |
| Repeat | Das Bild kachelt sich über das Element. Gut für Muster. |
Die Farbe liegt unter dem Bild. Sie scheint durch die transparenten Stellen eines Bildes, in den Bändern um ein Contain-Bild und während das Foto lädt. Wählen Sie eine Farbe nahe dem Hauptton des Fotos.
Die Größe Optimize for fast loading skaliert ein Bild auf höchstens 1024 px Breite herunter und speichert es als WebP. Das passt für einen Kasten, wirkt aber auf einem vollen Band auf großem Bildschirm weich.
Dasselbe Bild lädt auf jeder Bildschirmgröße, Smartphones eingeschlossen. Das Hover style-Panel hat sein eigenes Background und Background image, sodass ein Kasten beim Darüberfahren Farbe wechseln oder sein Bild tauschen kann.
Hintergrundeffekte für Sections
Diese Effekte brauchen eine Section. Fixed image und Parallax image bewegen das Foto aus Background image, stellen Sie also zuerst das Foto ein.
| Background effect | Was Besucher sehen | Einstellungen |
|---|---|---|
| Simple image | Das Foto scrollt mit der Seite. Dies ist die Vorgabe. | keine |
| Fixed image | Das Foto steht still, während der Inhalt darüber scrollt. | keine |
| Parallax image | Das Foto scrollt langsamer als der Inhalt. | Parallax speed (0 bis 100; die Wahl von Parallax image setzt 20, wenn er 0 ist), Parallax mode (Fixed oder Local), Disable on mobile (Bildschirme unter 481 px Breite) |
| Gradient | Eine Mischung aus zwei Farben, allein oder über dem Foto. | Start color, End color, Gradient direction (1 bis 360 Grad; 180 verläuft von oben nach unten), Start position, End position |
| YouTube video | Ein stummes Video spielt, solange die Section auf dem Bildschirm ist, und pausiert, wenn sie wegscrollt. | YouTube video URL, Start time in seconds, Stop time in seconds, Video options |
Über einem Foto verläuft der Verlauf immer von Rand zu Rand. Start position und End position gelten nur für einen Verlauf ohne Foto.
Wenn Sie den Hintergrund nicht sehen
- Das Foto erscheint als dünner Streifen. Ein Hintergrund fügt keine Höhe hinzu; die Section ist so hoch wie ihr Inhalt und Abstand. Fügen Sie Inhalt hinzu oder schalten Sie 100% height im General-Panel ein. Für mehr Abstand folgen Sie einem höheren Abschnitt.
- Das Foto wiederholt sich oder zeigt nur eine Ecke. Background style steht auf Theme defaults. Wählen Sie Cover.
- Das Foto wirkt weich auf breitem Bildschirm. Optimize for fast loading macht es höchstens 1024 px breit. Wählen Sie eine breitere Größe in der Bildgrößenliste.
- Das Foto ist hinter solidem Schwarz verborgen. Die Verlaufsfarben haben keine Transparenz. Beenden Sie jeden Wert mit einer Zahl unter 1, zum Beispiel
rgba(0, 0, 0, 0.6). - Die Überschrift bleibt dunkel. Eine Farbklasse unter den HTML classes des Text-Elements oder eine Theme-Regel mit
!importantgewinnt. Entfernen Sie den Chip oder siehe Typografie. - Der Hintergrund ist nach einem Neuladen der Seite weg. Speichern im Dialog behält eine Änderung nur im Editor. Klicken Sie in der Symbolleiste auf Speichern.
- Die Farbe erscheint nicht. Das Foto deckt sie zu. Für eine Tönung über dem Foto nutzen Sie Gradient in Background effects.
- Start position und End position ändern nichts. Der Abschnitt hat ein Background image, daher verläuft der Verlauf von Rand zu Rand. Nutzen Sie stattdessen Gradient direction und transparente Farben.
- Eine Klassenfarbe gewinnt. Eine Klasse wie Primary background unter HTML classes schlägt Ihr Background. Entfernen Sie ihren Chip.
- Background tut nichts auf einem Circle counter, einer Progress bar oder einem Divider. Diese Elemente nutzen eigene Farben. Stellen Sie Background color, Back color oder Color im General-Panel ein.
Wie geht es weiter?
- Typografie: Die Überschriftenfarbe auf Ihrem Foto setzen und ihren Kontrast prüfen.