So verwenden Sie Row Box Shadows kreativ mit Divi

Eines der neuesten Divi-Updates wurde lange erwartet; die Integration von Box Shadows in Sektionen, Reihen und Module. In diesem Beitrag konzentrieren wir uns darauf, wie Zeilenrahmenschatten das allgemeine Erscheinungsbild Ihrer Website verbessern können.

Um zu veranschaulichen, welche Tiefeneffekte Schatten auf Ihre Website bringen können, haben wir ein Beispiel erstellt, das wir Ihnen Schritt für Schritt zeigen.

Ergebnis

Desktop

Das Layout, das wir Ihnen zeigen, wie Sie es neu erstellen, sieht auf dem Desktop wie folgt aus:

Handy, Mobiltelefon

Und so auf dem Handy:

So verwenden Sie Row Box Shadows kreativ mit Divi

Abonnieren Sie unseren Youtube-Kanal

Kopfzeilenformat

Als erstes müssen Sie das richtige Header-Format auswählen. Gehen Sie zu Ihrem WordPress-Dashboard > Anpassen > Header & Navigation > Header-Format > und wählen Sie "Centered" als Header-Stil aus .

Primäre Menüleiste

Gehen Sie zurück zu Kopfzeile & Navigation > Primäre Menüleiste > und nehmen Sie die folgenden Anpassungen vor:

• Logobild ausblenden: Aktivieren
• Menühöhe: 211
• Max. Höhe des Logos: 30
• Textgröße: 16
• Buchstabenabstand: 2
• Schriftart: Lato Light
• Schriftstil: Großbuchstaben
• Textfarbe: #FFFFFF
• Farbe des aktiven Links: #FFFFFF
• Hintergrundfarbe: rgba(255,255,255,0)
• Hintergrundfarbe des Dropdown-Menüs: rgba(255,255,255,0)

Erster Abschnitt

Nachdem Sie die Änderungen im Theme Customizer vorgenommen haben, ist es an der Zeit, mit dem Layout zu beginnen. Erstellen Sie eine neue Seite, aktivieren Sie den Divi Builder und wechseln Sie zu Visual Builder. Fügen Sie dann der Seite einen ersten Standardabschnitt hinzu.

Abschnitt Hintergrund mit Farbverlauf

Dieser Abschnitt benötigt den folgenden Verlaufshintergrund:

• Erste Farbe: #ea2e7d
• Zweite Farbe: #edd900
• Verlaufstyp: Linear
• Steigungsrichtung: 110deg
• Startposition: 0%
• Endposition: 100%

Abstand

Wechseln Sie zur Registerkarte Design. Verwenden Sie in der Unterkategorie Abstand „100px“ für den oberen Abstand und „200px“ für den unteren Abstand.

Einspaltige Zeile

Zeilenverlaufshintergrund

Fahren Sie fort, indem Sie dem Abschnitt eine einspaltige Zeile hinzufügen und den folgenden Verlaufshintergrund verwenden:

• Erste Farbe: rgba(255,255,255,0)
• Zweite Farbe: #ea2e7d
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 56%
• Endposition: 100%

Spaltenverlaufshintergrund

Scrollen Sie nach unten und verwenden Sie den folgenden Farbverlaufshintergrund für die Spalte dieser Zeile:

• Erste Farbe: rgba(237.217,0.0.77)
• Zweite Farbe: rgba(255,255,255,0)
• Spaltengradiententyp: Linear
• Spaltenverlaufsrichtung: 180deg
• Spaltenstartposition: 0
• Spaltenendposition: 100

Größe

Wechseln Sie zur Registerkarte Design und nehmen Sie die folgenden Änderungen vor, die für die Unterkategorie Größenanpassung gelten:

• Benutzerdefinierte Breite verwenden: Ja
• Benutzerdefinierte Breite: 27%

Abstand

Verwenden Sie dann '20px' für den oberen, rechten, unteren und linken benutzerdefinierten Abstand der Zeile.

Textmodul

Wenn Sie mit den Zeileneinstellungen fertig sind, fügen Sie ein Textmodul hinzu und verwenden Sie die folgenden Einstellungen für die Unterkategorie Text:

• Textschriftart: Arvo
• Schriftgröße des Textes: 98px
• Textfarbe: #FFFFFF
• Text Buchstabenabstand: 32px
• Textzeilenhöhe: 1,4 em
• Textausrichtung: Mitte

Zweiter Abschnitt

Fügen Sie direkt unter dem ersten Abschnitt einen weiteren Abschnitt hinzu. Dieser Abschnitt enthält alle anderen Zeilen, die im Layout vorhanden sind.

Abschnitt Hintergrund mit Farbverlauf

Verwenden Sie zunächst den folgenden Verlaufshintergrund für diesen Abschnitt:

• Erste Farbe: rgba(255,255,255,0)
• Zweite Farbe: #592851
• Verlaufstyp: Linear
• Verlaufsrichtung: 180deg
• Startposition: 80%
• Endposition: 80%

Abstand

Gehen Sie als Nächstes zur Registerkarte Design und fügen Sie '100px' zum unteren Padding hinzu.

Erste zweispaltige Zeile

Zeilenhintergrundfarbe

Fügen Sie diesem neuen Abschnitt die erste zweispaltige Zeile hinzu und verwenden Sie '#dddddd' als Hintergrundfarbe.

Spalte 1 Hintergrund mit Farbverlauf

Die erste Spalte benötigt den folgenden Verlaufshintergrund:

• Erste Farbe: #6ac922
• Zweite Farbe: #b6c1b2
• Spalte 1 Gradiententyp: Linear
• Spalte 1 Gradientenrichtung: 136deg
• Spalte 1 Startposition: 23%
• Spalte 1 Endposition: 100 %

Spalte 2 Hintergrundfarbe

Scrollen Sie nach unten und verwenden Sie '#dddddd' als Hintergrundfarbe für Spalte 2.

Größe

Wechseln Sie zur Registerkarte Design und verwenden Sie die folgenden Einstellungen für die Unterkategorie Dimensionierung:

• Benutzerdefinierte Breite verwenden: Aktivieren
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Die Unterkategorie "Abstand" benötigt die folgenden Auffüllungen und Ränder:

• Oben, rechts, unten und links Polsterung: 0px
• Oberer Rand: -150px
• Spalte 1 oberer Abstand: 235 Pixel (Desktop), 0 Pixel (Tablet und Telefon)
• Spalte 1 untere Polsterung: 235 Pixel (Desktop), 0 Pixel (Tablet und Telefon)
• Spalte 2 obere Polsterung: 150px
• Spalte 2 untere Polsterung: 150px

Box Schatten

Öffnen Sie die Unterkategorie Box Shadow und verwenden Sie die folgenden Einstellungen:

• Horizontale Position des Boxschattens: -3px
• Vertikale Position des Boxschattens: -18px
• Stärke der Box-Schattenunschärfe: 77px
• Stärke der Box-Schattenausbreitung: 23px
• Schattenfarbe: rgba(0,0,0,0.3)

Erstes Textmodul

Fügen Sie dann das erste Textmodul der zweiten Spalte hinzu und verwenden Sie die folgenden Einstellungen für die Unterkategorie Text:

• Textschriftart: Arvo
• Schriftgröße des Textes: 34px
• Textfarbe: #7a7a7a
• Textausrichtung: Mitte

Zweites Textmodul

Fügen Sie ein weiteres Textmodul hinzu, verwenden Sie jedoch stattdessen die folgenden Einstellungen:

• Textschriftart: Lato Light
• Textausrichtung: Mitte

Öffnen Sie die Unterkategorie Dimensionierung, verwenden Sie eine Breite von '75%' und wählen Sie die mittlere Modulausrichtung.

Fügen Sie zuletzt einen oberen Rand von '50px' hinzu.

Zweite zweispaltige Reihe

Zeilenhintergrundfarbe

Fügen Sie dem Abschnitt eine weitere zweispaltige Zeile hinzu und wählen Sie '#b99bc1' als Hintergrundfarbe.

Spalte 1 Hintergrundfarbe

Scrollen Sie nach unten und wählen Sie '#dddddd' für die Hintergrundfarbe von Spalte 1 aus.

Größe

Wechseln Sie zur Registerkarte Design und nehmen Sie die folgenden Einstellungen vor, die für die Unterkategorie Dimensionierung gelten:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Als nächstes verwenden Sie die folgende Polsterung:

• Oben, rechts, unten und links Polsterung: 0px
• Spalte 1 obere Polsterung: 150px (Desktop), 0px (Tablet & Telefon)
• Spalte 1 untere Polsterung: 50px (Desktop), 0px (Tablet & Telefon)
• Spalte 2 obere Polsterung: 150px
• Spalte 2 untere Polsterung: 150px

Box Schatten

Öffnen Sie die Unterkategorie Box Shadow und verwenden Sie die folgenden Einstellungen:

• Horizontale Position des Boxschattens: -4px
• Vertikale Position des Boxschattens: 24px
• Stärke der Box-Schattenunschärfe: 77px
• Stärke der Box-Schattenausbreitung: 23px
• Schattenfarbe: rgba(0,0,0,0.3)
• Position des Boxschattens: Äußerer Schatten

Erstes Bildmodul in der ersten Spalte

Fahren Sie fort, indem Sie der ersten Spalte ein Bildmodul hinzufügen. Nehmen Sie nach dem Hochladen des Bildes die folgenden Einstellungen vor, die für die Unterkategorie Abstand gelten:

• Leerzeichen unter dem Bild anzeigen: Ja
• Obere Marge: -500px (Desktop), 0px (Tablet & Telefon)
• Rechter Rand: -50px (Desktop), 0px (Tablet & Telefon)
• Linker Rand: 200px (Desktop), 0px (Tablet & Telefon)

Öffnen Sie die Unterkategorie Box Shadow und verwenden Sie den folgenden Box Shadow:

• Horizontale Position des Kastenschattens: 2px
• Vertikale Position des Kastenschattens: 2px
• Stärke der Box-Schattenunschärfe: 0px
• Stärke der Box-Schattenausbreitung: 30px
• Schattenfarbe: rgba(255,255,255,0.68)
• Position des Boxschattens: Äußerer Schatten

Zweite Bildspalte in der ersten Spalte

Fügen Sie der gleichen Spalte ein weiteres Bildmodul hinzu und verwenden Sie den folgenden Rand:

• Oberer Rand: -50px (Desktop), 0px (Tablet & Telefon)
• Rechter Rand: 100px (Desktop), 0px (Tablet & Telefon)
• Unterer Rand: 30px
• Linker Rand: 100px (Desktop), 0px (Tablet & Telefon)

Scrollen Sie dann nach unten und verwenden Sie den folgenden Kastenschatten:

• Horizontale Position des Kastenschattens: 2px
• Vertikale Position des Kastenschattens: 2px
• Stärke der Box-Schattenunschärfe: 0px
• Stärke der Box-Schattenausbreitung: 30px
• Schattenfarbe: rgba(255,255,255,0.68)
• Position des Boxschattens: Äußerer Schatten

Textbausteine ​​klonen und in zweiter Spalte platzieren

Klonen Sie abschließend die beiden Textmodule der vorherigen Zeile und platzieren Sie sie in der zweiten Spalte dieser Zeile. Es gibt nur eine Sache, die Sie ändern müssen; die Textfarbe. Öffnen Sie die Einstellungen jedes Textmoduls und ändern Sie die Textfarbe in '#FFFFFF'.

Ergebnis

Desktop

Alle Schritte in diesem Beitrag führen auf dem Desktop zu folgendem Ergebnis:

Handy, Mobiltelefon

Und folgendes Ergebnis auf dem Handy:

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Boxschatten auf Zeilen kreativ einsetzen können. Wir haben ein farbenfrohes Beispiel erstellt, bei dem Sie die Tiefenfeldschatten, die einem Layout verleihen, deutlich erkennen können. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von Dmitry Guzhanin / shutterstock.com