So kombinieren Sie Zeilen- und Spaltenhintergründe mit den neuen Optionen von Divi

Veröffentlicht: 2017-10-02

In diesem Divi-Tutorial zeigen wir Ihnen, wie Sie Zeilen- und Spaltenhintergrundoptionen kombinieren können, um beeindruckende Ergebnisse zu erzielen. Durch die Auswahl der richtigen Kombinationen und Einstellungen können Sie Designs erzielen, die das allgemeine Erscheinungsbild Ihrer Website verbessern. Um zu demonstrieren, wovon wir sprechen, haben wir ein Beispiel gemacht, das wir Ihnen Schritt für Schritt beim Aufbau helfen werden. Wir haben dieses Ergebnis nur mit den integrierten Divi-Optionen erstellt, sodass Sie kein zusätzliches CSS hinzufügen müssen.

Ergebnis

Wenn Sie dieser Anleitung Schritt für Schritt folgen, können Sie folgendes Ergebnis erzielen:

Gradient

Obwohl wir drei verschiedene Zeilen verwendet haben, um dieses Ergebnis zu erzielen, sieht es so aus, als wären sie alle Teil eines größeren Bildes. Lass uns anfangen!

Wechseln Sie zu Visual Builder

Erstellen Sie eine neue Seite und aktivieren Sie den Divi Builder und wechseln Sie zum Visual Builder.

Gradient

Abschnitt erstellen

Als erstes müssen wir einen neuen Standardabschnitt erstellen. Alle Zeilen, die wir erstellen und miteinander kombinieren, sind Teil dieses Abschnitts. Um einen Box-Schatteneffekt in den Zeilen zu erzeugen, fügen wir den folgenden Abschnittsverlaufshintergrund hinzu:

Erste Farbe: rgba(61,65,86,0,59)
Zweite Farbe: #f7f7f7
Verlaufstyp: Radial
Radiale Richtung: Unten
Startposition: 31%
Endposition: 76%

Gradient

Zeile mit einer Spalte hinzufügen

Als nächstes müssen wir dem Abschnitt eine einspaltige Zeile hinzufügen. Diese Zeile stellt den folgenden Teil unseres Endergebnisses dar:

Gradient

Zeilen- und Spalteneinstellungen

Zeile in voller Breite machen

Fahren Sie fort und machen Sie die Zeile auf der Registerkarte Design in voller Breite.

Zeilenhintergrundeinstellungen

Dann können Sie zur Registerkarte Inhalt zurückkehren und den folgenden Verlaufshintergrund hinzufügen:

Erste Farbe: #3d4156
Zweite Farbe: rgba(114,81,114,0.91)
Verlaufstyp: Linear
Verlaufsrichtung: 180deg
Startposition: 0%
Endposition: 65%

Laden Sie ein Hintergrundbild (in diesem Fall ein Muster) hoch und wählen Sie 'Multiplizieren' als Hintergrundbildmischung.

Spaltenhintergrundeinstellungen

Scrollen Sie als Nächstes nach unten und weisen Sie der Spalte Ihrer Zeile die folgenden Verlaufshintergrundeinstellungen zu:

Erste Farbe: rgba(255,255,255,0.15)
Zweite Farbe: rgba(214,44,104,0)
Spaltengradiententyp: Linear
Spaltenverlaufsrichtung: 161deg
Spaltenstartposition: 43 %
Spaltenendposition: 43%

Abstand

Fahren Sie fort, indem Sie Ihrer Zeile die folgende Auffüllung hinzufügen:

Oben: 20 Pixel
Rechts: 30px
Links: 30px

Und auch die Auffüllung Ihrer Kolumne:

Oben: 200px
Unten: 200px

Textmodul hinzufügen

Als nächstes fügen wir der Zeile ein Textmodul hinzu und nehmen die folgenden Änderungen an der Unterkategorie Text dieses Textmoduls vor:

Textschrift: Playfair Display
Schriftgröße des Textes: 77px (Desktop), 64 (Tablet), 51 (Telefon)
Textfarbe: #f7f7f7
Textzeilenhöhe: 1,7 (Desktop), 1em (Tablet & Telefon)

Trennmodul hinzufügen

Fahren Sie fort, indem Sie ein Trennmodul unter dem soeben erstellten Textmodul hinzufügen und die Option "Trennlinie anzeigen" in der Unterkategorie Sichtbarkeit aktivieren.

Gradient

Scrollen Sie auf derselben Registerkarte nach unten und verwenden Sie 'rgba(114,57,114,0.91)' als Hintergrundfarbe.

Gradient

Wechseln Sie zur Registerkarte Design und wählen Sie '#3d4156' als Teilerfarbe aus.

Gradient

Öffnen Sie die Unterkategorie Stile und verwenden Sie 'Solid' als Ihren Divider-Stil und 'Top' als Ihre Divider-Position.

Gradient

Weisen Sie als Nächstes der Unterkategorie Dimensionierung die folgenden Einstellungen zu:

Teilergewicht: 11px
Höhe: 23px
Breite: 0%
Modulausrichtung: Links

Gradient

Zu guter Letzt fügen Sie der Custom Padding-Option einen linken Padding von '48%' hinzu. Gradient