So formatieren Sie ein Bild in Ihrem Divi-Header-Modul mit voller Breite

Veröffentlicht: 2022-07-25

Das Fullwidth Header-Modul von Divi enthält viele Bildstiloptionen, mit denen Divi-Benutzer schöne Bilder und Layouts für ihre Header erstellen können. Das Header-Bild kann auf viele Arten gestaltet werden, um interessante Layouts und Designs zu erstellen. Noch interessanter wird es, wenn es mit den verschiedenen Text- und Button-Designs gekoppelt wird. In diesem Beitrag sehen wir, wie Sie ein Bild in Ihrem Divi-Header-Modul mit voller Breite formatieren, und teilen drei Beispiele, die Ihnen beim Entwerfen Ihres Header-Moduls mit voller Breite helfen.

Lass uns anfangen!

Vorschau

Desktop-Kopfzeilenbild in voller Breite Beispiel 1

Beispiel 1 für ein Kopfzeilenbild in voller Breite des Telefons

Desktop-Kopfzeilenbild in voller Breite Beispiel 2

Telefon-Header-Bild in voller Breite Beispiel 2

Desktop-Kopfzeilenbild in voller Breite – Beispiel drei

Telefon-Header-Bild in voller Breite – Beispiel drei

Fügen Sie Ihrem Fullwidth-Header ein Bild hinzu

Hier ist der Header in voller Breite, den wir in diesem Beispiel verwenden werden. Zuerst wollen wir sehen, wie man es baut. Wir verwenden Bilder und Designwarteschlangen aus dem kostenlosen Flower Farm Layout Pack, das in Divi verfügbar ist.

Fügen Sie Ihrem Fullwidth-Header ein Bild hinzu

Um das Divi Fullwidth Header-Modul zu Ihrer Seite hinzuzufügen, benötigen Sie einen neuen Abschnittscontainer mit einer einspaltigen Zeile. Sobald Sie das haben, fügen Sie das Header-Modul mit voller Breite zur Spalte Ihrer Zeile hinzu.

Fügen Sie Ihrem Fullwidth-Header ein Bild hinzu

Kopfzeilentext in voller Breite

Fügen Sie als Nächstes Ihren Titel, Untertitel, Text für Schaltfläche Eins, Text für Schaltfläche Zwei und Inhalt hinzu.

Titel: Willkommen auf der Divi Flower Farm
Untertitel: Über uns
Schaltfläche Eins: Weitere Informationen
Schaltfläche zwei: Shop
Inhalt: Ihr Text

Kopfzeilentext in voller Breite

Header-Bild

Scrollen Sie nach unten zu Bilder , wählen Sie Kopfzeilenbild und fügen Sie Ihr Bild hinzu.

Header-Bild

Hintergrund

Scrollen Sie als Nächstes nach unten zu Hintergrund , wählen Sie die Registerkarte Verlauf und fügen Sie vier Verlaufsstopps hinzu:

Gradient Stop 1: 0 %, #000000
Stopp 2: 25 %, rgba(0,0,0,0,8)
Steigung 3: 75 %, rgba(0,0,0,0,8)
Steigung 4: 100 %, #000000

Hintergrund

Als nächstes aktivieren Sie Verlauf über Hintergrundbild platzieren . Belassen Sie die anderen Einstellungen auf ihren Standardeinstellungen.

Farbverlauf über dem Hintergrundbild platzieren: Ja

Hintergrund

Wählen Sie die Registerkarte Hintergrundbild und fügen Sie Ihr Bild hinzu. Als Nächstes formatieren wir das Fullwidth-Header-Modul.

Hintergrund

Titeltext

Wählen Sie die Registerkarte Design und scrollen Sie nach unten zu Titeltext . Wählen Sie H1 und wählen Sie Italiana für die Schriftart. Stellen Sie die Ausrichtung auf Links und wählen Sie Weiß für die Farbe.

Überschriftenebene: H1
Schriftart: Italiana
Ausrichtung: Links
Farbe: #ffffff

Titeltext

Stellen Sie die Desktop-Größe auf 80 Pixel, die Tablet-Größe auf 40 Pixel und die Telefon-Größe auf 32 Pixel ein.

Größe: 80 Pixel Desktop, 40 Pixel Tablet, 32 Pixel Telefon

Titeltext

Hauptteil

Scrollen Sie als Nächstes nach unten zu Body Text . Stellen Sie die Ausrichtung auf Links ein, wählen Sie Roboto für die Schriftart und ändern Sie die Farbe in Weiß.

Ausrichtung: Links
Schrift: Roboto
Farbe: #ffffff

Hauptteil

Ändern Sie die Desktop-Größe auf 18 Pixel, die Tablet-Größe auf 16 Pixel und die Telefon-Größe auf 14 Pixel.

Textgröße: 18 Pixel Desktop, 16 Pixel Tablet, 14 Pixel Telefon

Hauptteil

Untertiteltext

Scrollen Sie als Nächstes nach unten zu Untertiteltext . Wählen Sie Roboto für die Schriftart und stellen Sie das Gewicht auf Schwer ein. Wählen Sie TT für den Stil, stellen Sie die Ausrichtung auf Links und ändern Sie die Farbe auf #b5a68f.

Schrift: Roboto
Gewicht: Schwer
Stil: TT
Ausrichtung: Links
Farbe: #b5a68f

Untertiteltext

Ändern Sie als Nächstes den Abstand auf 0,2 cm und die Zeilenhöhe auf 1,7 cm. Belassen Sie die Schriftgröße auf dem Standardwert von 18 Pixel.

Abstand: 0,2 cm
Zeilenhöhe: 1,7 m

Untertiteltext

Knopf eins

Scrollen Sie nach unten zu Schaltfläche Eins und wählen Sie Benutzerdefinierte Stile für Schaltfläche Eins verwenden aus . Stellen Sie die Schriftgröße auf 14px, die Textfarbe auf #aa6a3c und die Hintergrundfarbe auf #f5f3ef ein.

Verwenden Sie benutzerdefinierte Stile für Schaltfläche Eins: Ja
Schriftgröße: 14px
Textfarbe: #aa6a3c
Hintergrundfarbe: #f5f3ef

Knopf eins

Stellen Sie die Rahmenfarbe auf #aa6a3c, den Buchstabenabstand auf 0,15 em, die Schriftart auf Roboto, das Gewicht auf Fett und den Stil auf TT ein.

Randfarbe: #aa6a3c
Buchstabenabstand: 0,15 em
Schrift: Roboto
Gewicht: Fett
Stil: TT

Knopf eins

Scrollen Sie nach unten zu Button One Padding . Ändern Sie die obere und untere Polsterung auf 20 Pixel und die linke und rechte Polsterung auf 30 Pixel.

Polsterung: Oben, unten 20 Pixel, links, rechts 30 Pixel

Knopf eins

Knopf zwei

Scrollen Sie als Nächstes nach unten zu Schaltfläche Zwei . Wählen Sie Benutzerdefinierte Stile für Schaltfläche Zwei verwenden aus . Stellen Sie die Schriftgröße auf 14px, die Textfarbe auf weiß und die Hintergrundfarbe auf rgba(255,255,255,0) ein.

Verwenden Sie benutzerdefinierte Stile für Schaltfläche Zwei: Ja
Schriftgröße: 14px
Textfarbe: #ffffff
Hintergrundfarbe: rgba(255,255,255,0)

Knopf zwei

Stellen Sie die Rahmenfarbe auf Weiß, den Buchstabenabstand auf 0,15 em, die Schriftart auf Roboto, das Gewicht auf Fett und den Stil auf TT ein.

Rahmenfarbe: #ffffff
Buchstabenabstand: 0,15 em
Schrift: Roboto
Gewicht: Fett
Stil: TT

Knopf zwei

Scrollen Sie nach unten zu Button Two Padding und stellen Sie die obere und untere Polsterung auf 20 Pixel und die linke und rechte Polsterung auf 30 Pixel ein. Das war's für das Fullwidth-Header-Modul-Styling. Jetzt sehen wir drei Möglichkeiten, das Bild zu gestalten.

Polsterung: Oben, unten 20 Pixel, links, rechts 30 Pixel

Knopf zwei

Beispiele für Header-Bildstile in voller Breite

Hier ist ein Blick auf drei Beispiele mit unserem Layout als Ausgangspunkt. Ich werde einige Anpassungen am Layout für jedes der Beispiele vornehmen.

Header-Bild in voller Breite Beispiel 1

Für unser erstes Beispiel für ein Header-Bild in voller Breite erstellen wir eine abgerundete Oberseite mit einem Rand. Wechseln Sie zur Registerkarte Design und scrollen Sie nach unten zu Bild . Heben Sie die Synchronisierung der Werte auf und ändern Sie den oberen Rand auf 400 Pixel.

Oberer rechter und linker Rand: 400px
Unterer rechter und linker Rand: 0px

Header-Bild in voller Breite Beispiel 1

Ändern Sie die Rahmenbreite auf 2 Pixel und die Rahmenfarbe auf Weiß.

Breite: 2px
Farbe: #ffffff

Header-Bild in voller Breite Beispiel 1

Als Nächstes passen wir die Ausrichtung von Text und Bild an, um ihre Platzierung auf dem Bildschirm anzupassen. In diesem Beispiel belassen wir das Bild und den Text an ihren aktuellen Positionen, ändern jedoch die vertikale Ausrichtung für den Text und die Schaltflächen. Die Auswahl von Vollbild öffnet eine Option für die vertikale Textausrichtung in den Textoptionen .

Gehen Sie zuerst auf die Registerkarte Design. Stellen Sie unter Layout die Textausrichtung auf rechts und aktivieren Sie Vollbild.

Vollbild machen: Ja

Header-Bild in voller Breite Beispiel 1

Scrollen Sie zuletzt nach unten zu Text . Sie sehen jetzt eine Option mit der Bezeichnung Vertikale Textausrichtung . Stellen Sie es auf Unten ein. Schließen Sie das Modul und speichern Sie Ihre Einstellungen.

Vertikale Textausrichtung: Unten

Header-Bild in voller Breite Beispiel 1

Header-Bild in voller Breite Beispiel 2

Für dieses Beispiel verwenden wir einen anderen Schaltflächentext und ein anderes Bild. Ändern Sie zuerst den Text von Button One in Information.

Schaltfläche Eins Text: Informationen

Header-Bild in voller Breite Beispiel 1

Scrollen Sie als Nächstes nach unten zu Hintergrund und wählen Sie ein anderes Bild aus. Dieses Bild nimmt etwa 1/3 der Bildschirmbreite ein. Ich verwende das gleiche Bild als Hintergrund.

Header-Bild: Großes Bild

Header-Bild in voller Breite Beispiel 1

Gehen Sie als Nächstes zur Registerkarte Erweitert und scrollen Sie nach unten zum Feld Kopfzeilenbild. Fügen Sie CSS hinzu , um die Breite auf 150 % und die Höhe auf automatisch festzulegen. Schließen Sie das Modul und speichern Sie Ihre Einstellungen.

Header-Bild-CSS:

max-width: 150%;
height: auto;

Header-Bild in voller Breite Beispiel 1

Jetzt, da das Bild und der Schaltflächentext vorhanden sind, nehmen wir unsere Anpassungen vor. Wir können die Ausrichtung von Text und Bild anpassen, um ihre Platzierung auf dem Bildschirm anzupassen. Gehen Sie zuerst auf die Registerkarte Design . Belassen Sie unter Layout die Textausrichtung auf Links und aktivieren Sie Vollbild erstellen .

Vollbild machen: Ja

Header-Bild in voller Breite Beispiel 1

Scrollen Sie als Nächstes zu Titeltext und stellen Sie die Ausrichtung auf Zentriert ein.

Ausrichtung des Titeltexts: Zentriert

Header-Bild in voller Breite Beispiel zwei

Scrollen Sie als Nächstes nach unten zu Body Text . Ändern Sie die Textausrichtung auf Zentriert.

Ausrichtung: Mitte

Header-Bild in voller Breite Beispiel zwei

Scrollen Sie als Nächstes zu Untertiteltext und stellen Sie die Ausrichtung auf Mitte ein.

Untertiteltextausrichtung: Zentriert

Header-Bild in voller Breite Beispiel zwei

Scrollen Sie nach unten zu Button One Margin und ändern Sie den Left Margin auf 29 % für Desktops, 18 % für Tablets und 19 % für Telefone.

Button One Linker Rand: 29 % Desktop, 18 % Tablet, 19 % Telefon

Header-Bild in voller Breite Beispiel zwei

Scrollen Sie nach unten zu Button Two Margin und ändern Sie den Left Margin auf 30 % für Tablets und 31 % für Telefone.

Linker Rand von Schaltfläche 2: 30 % Tablet, 31 % Telefon

Header-Bild in voller Breite Beispiel zwei

Scrollen Sie nach unten zu Größe und stellen Sie die Breite für Telefone auf 104 % ein. Dadurch wird der Inhalt für schmale Bildschirme korrekt zentriert.

Breite: 104 % Telefon

Header-Bild in voller Breite Beispiel zwei

Header-Bild in voller Breite – Beispiel drei

Gehen Sie zuerst auf die Registerkarte Design . Stellen Sie unter Layout die Textausrichtung auf Rechts ein. In meinem Fall ist der Text linksbündig, aber Ihrer könnte zentriert sein, wenn Sie die Ausrichtung nicht angegeben haben.

Text- und Logoausrichtung: Zentriert