Verwenden der neuen Spaltenfiltereinstellungen von Divi, um atemberaubende Mischeffekte zu erstellen

Veröffentlicht: 2019-08-09

Die neuen Spaltenfiltereinstellungen von Divi können auf viele kreative Arten verwendet werden. In diesem Beitrag zeigen wir Ihnen, wie Sie ein Hintergrundbild einer Hauptzeile mit dem Spalteninhalt kombinieren. Wir fügen den Modulen verschiedene Farbverläufe und einen Spalten-"Bildschirm"-Mischmodus hinzu, um einen atemberaubenden Effekt zu erzielen. Wir hoffen, dass dieses Design Sie dazu inspirieren wird, Spaltenüberblendungsmodi in Ihrem nächsten Divi-Projekt zu verwenden. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Mischmodi Desktop-Vorschau

Handy, Mobiltelefon

Mischmodi Gif Responsive

Laden Sie das Spaltenmischmodus-Layout KOSTENLOS herunter

Um das kostenlose Spalten-Mischmodus-Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Beginnen wir mit der Neuerstellung!

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt mit 3-Spalten-Zeile hinzufügen

Beginnen Sie das Design, indem Sie einen neuen Abschnitt mit einer dreispaltigen Zeile hinzufügen.

füge eine dreispaltige Zeile hinzu

Abschnittsabstand

Öffnen Sie die Abschnittseinstellungen und passen Sie den Abstand an.

Linker und rechter Rand: 3vw
Polsterung oben und unten: 84px

Style den Abschnitt

Zeileneinstellungen

Hintergrund

Bevor wir Module hinzufügen, werden wir die Zeileneinstellungen ändern. Beginnen Sie mit dem Hinzufügen einer Hintergrundfarbe.

Hintergrundfarbe: Mittelgrau #c4c4c4

füge dem Hintergrund graue Farbe hinzu

Laden Sie dann ein Hintergrundbild hoch und mischen Sie die Hintergrundfarbe mithilfe eines Mischmodus mit dem Bild.

Hintergrundbild-Mischung: Multiplizieren

Bild hinzufügen und Mischmodus bei Multiplizieren einstellen

Größe

Passen Sie die Größeneinstellungen der nächsten Zeile an.

Benutzerdefinierte Dachrinnenbreite verwenden: Ja
Dachrinnenbreite: 1
Spaltenhöhe ausgleichen: Ja
Breite: 100%
Maximale Breite: 100%

den Hintergrund des Abschnitts gestalten

Abstand

Entfernen Sie auch den standardmäßigen Zeilenabstand.

Polsterung oben und unten: 0px

den Hintergrund der Zeile gestalten

Box Schatten

Fahren Sie fort, indem Sie der Zeile einen einfachen Kastenschatten hinzufügen.

Kastenschatten: Erste Option

Fügen Sie dem Abschnitt einen Boxschatten hinzu

Sichtweite

Passen Sie den Z-Index auf der Registerkarte Sichtbarkeit an.

Z-Index: 1

Sichtbarkeitsindex der Zeile

Stilspalte 1

Geben Sie die Einstellungen der ersten Spalte ein.

Spalte 1 auswählen

Filter

Wenden Sie einen Bildschirmüberblendungsmodus auf die Spalte auf der Registerkarte "Filter" an.

Mischmodus: Bildschirm

Anwenden des Bildschirmmischmodus

Hover-Transformationsskala

Geben Sie die Transformationsoptionsgruppe ein und ändern Sie die Skalierungseinstellungen für die Hover-Transformation.

Transformationsskala: 105 % sowohl auf der x- als auch auf der y-Achse

Transformieren Sie den Mauszeiger oder die Spalte eins

Sichtweite

Rufen Sie die Registerkarte Sichtbarkeit der Spalte auf und passen Sie die Überlaufeinstellungen an.

Horizontaler Überlauf: Sichtbar
Vertikaler Überlauf: Sichtbar

Sichtbarkeit der Zeile

Übergänge

Wechseln Sie zur Registerkarte Übergänge und passen Sie die Übergangsdauer an, um einen reibungslosen Übergang zu erzielen.

Übergangsdauer: 500 ms

Übergangszeit

Textmodul zu Spalte 1 hinzufügen

Jede Spalte enthält drei Textbausteine. Fügen Sie in Spalte 1 einen ersten Textbaustein mit H2-Inhalten Ihrer Wahl hinzu und passen Sie die Einstellungen wie folgt an.

Textbaustein in Spalte eins einfügen