So verwenden Sie Musterüberblendungsmodi für Ihre Divi-Hintergrundbilder

Mit den integrierten Einstellungen für Hintergrundmuster von Divi können Sie auffällige Designs erstellen und den Hintergrundbildern auf Ihrer Website etwas Flair verleihen. Sie können die Einstellungen für die Mischmodi verwenden, um die Art und Weise zu optimieren, wie das Muster mit dem Hintergrundbild verschmilzt. Kombinieren Sie Hintergrundbilder, Muster und Mischmodi, um einzigartige Hintergründe und Designelemente für Ihr Layout zu erstellen. Mit 24 Mustern zur Auswahl und 16 Mischmodi, ganz zu schweigen von all den anderen Einstellungen, mit denen Sie das Aussehen des Musters feinabstimmen können, sind Ihrem Hintergrunddesign keine Grenzen gesetzt!

In diesem Tutorial zeigen wir Ihnen einige Beispiele, wie Sie den Hintergrundbildern auf Ihrer Seite einen Mustermischmodus hinzufügen können. Folgen Sie uns, um diese Looks selbst nachzubilden, oder verwenden Sie sie als Inspiration, um Ihre eigenen individuellen Designs zu erstellen.

Lass uns anfangen!

Vorgeschmack

Hier ist eine Vorschau dessen, was wir in diesem Tutorial entwerfen werden.

Erstes Layout

Zweites Layout

Drittes Layout

Was Sie für den Einstieg benötigen

Bevor wir beginnen, installieren und aktivieren Sie das Divi-Design und stellen Sie sicher, dass Sie die neueste Version von Divi auf Ihrer Website haben.

Jetzt fangen wir an!

So verwenden Sie Musterüberblendungsmodi für Ihre Divi-Hintergrundbilder

Erstellen Sie eine neue Seite mit einem vorgefertigten Layout

Wir beginnen mit der Verwendung eines vorgefertigten Layouts aus der Divi-Bibliothek. Für dieses Design verwenden wir die Marina Landing Page aus dem Marina Layout Pack.

Fügen Sie Ihrer Website eine neue Seite hinzu, geben Sie ihr einen Titel und wählen Sie dann die Option Divi Builder verwenden.

Wir werden für dieses Beispiel ein vorgefertigtes Layout aus der Divi-Bibliothek verwenden, also wählen Sie Layouts durchsuchen.

Suchen Sie nach dem Layout Marina Landing Page und wählen Sie es aus.

Wählen Sie Dieses Layout verwenden aus, um das Layout zu Ihrer Seite hinzuzufügen.

Jetzt sind wir bereit, unser Design zu erstellen.

Erstes Layout

Für unser erstes Design fügen wir dem ersten Header-Bild ein Chevron-Muster hinzu. Dadurch wird die Kopfzeile visuell interessanter. Aufgrund des von uns angewendeten Mischmodus wird das Muster subtiler und lässt das Hintergrundbild dennoch sichtbar sein.

Öffnen Sie zunächst die Abschnittseinstellungen und navigieren Sie zum Abschnitt Hintergrund. Klicken Sie auf die Registerkarte Muster und wählen Sie Hintergrundmuster hinzufügen.

Wählen Sie als Nächstes den Mustertyp aus. Wie Sie sehen können, stehen viele verschiedene Muster zur Auswahl, die alle durch die unten stehenden Mustereinstellungen weiter angepasst werden können.

• Mustertyp: Umgekehrte Chevrons 2

Hinzufügen des Musterüberblendungsmodus

Stellen Sie abschließend den Mustermischmodus ein. Für diesen Header verwenden wir den Mischmodus „Weiches Licht“. Dieser Mischmodus macht das Muster subtiler, sodass es nicht vom Hintergrundbild ablenkt.

• Mustermischmodus: Weiches Licht

Endgültiges Design

Hier ist das endgültige Design für unser erstes Layout.

Hier ist die mobile Ansicht für dieses Design.

Zweites Layout

Für das zweite Layout fügen wir dem Abschnitt „So funktioniert es“ des Marina-Landingpage-Layouts ein Muster hinzu. Wir werden ein Wellenmuster verwenden, das über das Hintergrundbild und den Farbverlauf gelegt wird, was gut zum nautischen Thema der Seite passt. Lass uns anfangen.

Navigieren Sie zunächst zum Abschnitt Funktionsweise und öffnen Sie die Abschnittseinstellungen. Öffnen Sie die Hintergrundeinstellungen, wählen Sie dann die Registerkarte Muster und klicken Sie dann auf Hintergrundmuster hinzufügen.

Für dieses Design verwenden wir den Mustertyp Wellen.

• Mustertyp: Wellen

Ändern Sie als Nächstes die Musterfarbe in Weiß.

• Musterfarbe: #FFFFFF

Hinzufügen des Musterüberblendungsmodus

Jetzt können wir unserem Muster den Mischmodus hinzufügen. Stellen Sie den Mustermischmodus auf Überlagerung ein. Dieser Mischmodus macht die dunklen Farben im Hintergrundbild dunkler und die hellen Farben heller. Wenn der Mischmodus zu diesem Abschnitt hinzugefügt wird, nimmt das weiße Wellenmuster Blautöne an, wodurch ein interessanter Mustereffekt entsteht, der gut zum Design dieser Seite passt.

• Mustermischmodus: Überlagern

Endgültiges Design

Hier ist das endgültige Design für den Abschnitt „Wie es funktioniert“.

Und hier ist das mobile Design.

Drittes Layout

Beginnen wir mit unserem dritten Layout. Für dieses Layout fügen wir dem Hintergrund des Abschnitts „Erstklassige Sicherheit und Reparaturen“ einige undurchsichtige diagonale Streifen hinzu.

Öffnen Sie zunächst die Bereichseinstellungen und navigieren Sie zum Hintergrundbereich. Klicken Sie auf die Registerkarte Muster und wählen Sie dann Hintergrundmuster hinzufügen.

Wählen Sie das Muster Diagonalstreifen aus.

Stellen Sie als Nächstes die Musterfarbe ein.

• Musterfarbe: rgba (255,255,255,0,25)

Spiegeln Sie das Muster mithilfe der Einstellungen für die Mustertransformation horizontal. Dies ist eine weitere Einstellung, mit der Sie das Muster nach Ihren Wünschen anpassen können.

• Mustertransformation: horizontal

Hinzufügen des Musterüberblendungsmodus

Stellen Sie abschließend den Mustermischmodus ein. Für dieses Design verwenden wir den Luminanz-Mischmodus. In Kombination mit unserer Musterfarbe fügt dies dem Bild einen hellen Bildschirm hinzu, lässt das Foto aber dennoch durchscheinen. Mit diesem Design hebt sich das Bild des Bootes stärker vom Hintergrund ab, da das Muster einen markanten Kontrast hinzufügt.

• Mustermischmodus: Leuchtkraft

Endgültiges Design

Hier ist das endgültige Design für diesen Abschnitt.

Und hier ist das mobile Design für diesen Abschnitt.

Endergebnis

Werfen wir nun einen Blick auf das vollständige Design der Seite mit den Musterüberblendungsmodi.

Abschließende Gedanken

Das Hinzufügen eines Musters kann eine großartige Möglichkeit sein, Ihrem Hintergrundbild visuelles Interesse zu verleihen, aber manchmal kann das Muster das Hintergrundbild überwältigen. Oder vielleicht möchten Sie, dass sich die Farbe Ihres Musters basierend auf dem Bild dahinter ändert. Glücklicherweise verfügt Divi über viele Mischmodi, sodass Sie die Muster so anpassen können, wie Sie möchten. Sie können mit verschiedenen Kombinationen von Mustern, Mischmodi, Musterfarben, Mustergrößen und vielen weiteren Divi-Einstellungen herumspielen, um ein völlig einzigartiges Design für Ihre Hintergrundbilder zu erstellen.

Hoffentlich hat Sie dieses Tutorial dazu inspiriert, einige Muster zu integrieren und Mischmodi in Ihre Website-Designs zu verwenden! Ein weiteres Design-Tutorial mit Mustern finden Sie in diesem Tutorial, um zu lernen, wie Sie subtile Hintergrundmustermasken erstellen. Und für einen Überblick über die verschiedenen Filter, Effekte und Mischmodi, die Sie mit Divi verwenden können, werfen Sie einen Blick auf diese Artikel: Teil 1 und Teil 2. Haben Sie die Muster und Mischmodi von Divi schon einmal für Ihre Hintergrundbilder verwendet? Lass es uns in den Kommentaren wissen!