Möchten Sie einzigartige Hintergrundbilder mit dem Musterüberblendungsmodus von erstellen? Divi ?
Die integrierten Hintergrundmustereinstellungen von Divi ermöglichen es Ihnen, auffällige Designs zu erstellen und den Hintergrundbildern Ihres Designs Stil zu verleihen Website. Sie können die Mischmoduseinstellungen verwenden, um die Verschmelzung des Musters mit dem Hintergrundbild zu optimieren.
In diesem Tutorial zeigen wir Ihnen einige Beispiele, wie Sie den Hintergrundbildern Ihrer Seite einen Musterüberblendungsmodus hinzufügen können. Folgen Sie ihnen, um diese Looks selbst nachzubilden, oder verwenden Sie sie als Inspiration, um Ihre eigenen individuellen Designs zu erstellen.
Lassen Sie uns beginnen!
Übersicht
Hier ist eine Vorschau dessen, was wir in diesem Tutorial entwerfen werden.
Erste Anordnung
Zweite Anordnung
Dritte Anordnung
So verwenden Sie Musterüberblendungsmodi für Ihre Divi-Hintergrundbilder
Erstellen Sie eine neue Seite mit einem vordefinierten Layout
Wir beginnen mit der Verwendung eines vordefinierten Layouts aus der Bibliothek Divi. Für dieses Design verwenden wir die « Marina-Landingpage "Of Yachthafen-Layout-Paket .
Fügen Sie eine neue Seite zu Ihrer hinzu Website und geben Sie ihm einen Titel, und wählen Sie dann die Option Divi Builder verwenden.
Wir verwenden für dieses Beispiel ein vorgefertigtes Layout aus der Divi-Bibliothek, also wählen Sie es aus Layouts durchsuchen.
Suchen Sie das Layout und wählen Sie es aus Marina-Landingpage.
wählen Verwenden Sie dieses Layout um das Layout zu Ihrer Seite hinzuzufügen.
Wir sind jetzt bereit zu entwerfen.
Erste Anordnung
Für unser erstes Design fügen wir dem ersten Header-Bild ein Chevron-Muster hinzu. Dadurch wird die Kopfzeile visuell interessanter.
Lesen Sie auch: Divi: So passen Sie das Modul "Countdown-Timer" mit einem GIF an
Aufgrund des von uns angewendeten Mischmodus wird das Muster subtiler und ermöglicht dennoch, dass das Hintergrundbild sichtbar ist.
Öffnen Sie zunächst die Abschnittseinstellungen und gehen Sie zum Abschnitt Hintergrund. Klicken Sie auf die Registerkarte Hintergrundmuster und wählen Sie Hintergrundmuster hinzufügen.
Wählen Sie als Nächstes den Mustertyp aus. Wie Sie sehen können, stehen viele verschiedene Vorlagen zur Auswahl, die alle durch die unten stehenden Vorlageneinstellungen weiter angepasst werden können.
- Mustertyp: Umgekehrtes Fischgrätenmuster 2
Modus „Mustermischung“ hinzugefügt
Stellen Sie abschließend den Mischmodus des Musters ein. Wir werden den Mischmodus verwenden Weiches Licht für dieses Beispiel. Dieser Mischmodus macht das Muster subtiler, sodass es nicht vom Hintergrundbild ablenkt.
- Mustermischmodus: Weiches Licht
Ergebnis
Hier ist das endgültige Design unseres ersten Beispiels.
Hier ist die mobile Version.
Zweite Anordnung
Für das zweite Layout verwenden wir ein Wellenmuster, das über das Hintergrundbild und den Farbverlauf gelegt wird, was gut zum nautischen Thema der Seite passt.
Navigieren Sie zunächst zu dem Abschnitt "Wie es funktioniert" und öffnen Sie die Abschnittseinstellungen.
Einstellungen öffnen Hintergrund, und wählen Sie dann die Registerkarte aus Hintergrundmusterund klicken Sie auf Hintergrundmuster hinzufügen.
Für dieses Design verwenden wir den Mustertyp waves.
- Mustertyp: Wellen
Ändern Sie dann die Musterfarbe in Weiß.
- Musterfarbe: #FFFFFF
Mustermischmodus hinzugefügt
Wir können jetzt den Mischmodus zu unserem Muster hinzufügen. Stellen Sie den Mustermischmodus auf ein Auflage.
Entdecken Sie auch: Divi: So passen Sie den Korb und die Suchsymbole des Moduls „Menü mit voller Breite“ an
Dieser Mischmodus verdunkelt dunkle Farben im Hintergrundbild und hellt helle Farben auf.
- Mustermischmodus: Überlagern
Ergebnis
Hier ist das Endergebnis des zweiten Beispiels, das auf den Abschnitt angewendet wird "Wie es funktioniert".
Und hier ist die mobile Version.
Dritte Anordnung
Beginnen wir mit unserem dritten Layout.
Für dieses Layout fügen wir dem Hintergrund des " Call to Action".
Öffnen Sie zunächst die Abschnittseinstellungen und gehen Sie zum Abschnitt Hintergrund. Klicken Sie auf die Registerkarte Hintergrundmusterund dann auswählen Hintergrundmuster hinzufügen.
Muster auswählen Diagonale Streifen.
Stellen Sie als Nächstes die Musterfarbe ein.
- Musterfarbe: rgba (255,255,255,0.25)
Spiegeln Sie das Muster mithilfe der Einstellungen für „Muster transformieren“ horizontal. Dies ist ein weiterer Parameter, mit dem Sie das Muster nach Ihren Wünschen feinabstimmen können.
- Mustertransformation: horizontal
Mustermischmodus hinzugefügt
Stellen Sie abschließend den Mischmodus des Musters ein. Für dieses Design verwenden wir den Mischmodus Helligkeit.
Lesen Sie auch unseren Leitfaden über: Divi: So verwenden Sie den "Gradient Builder", um Ihre Bilder zu verschönern
In Kombination mit unserer Musterfarbe fügt dies dem Bild einen hellen Bildschirm hinzu, während das Foto durchscheint. Mit diesem Design hebt sich das Bild des Bootes stärker vom Hintergrund ab, da das Muster einen markanten Kontrast hinzufügt.
- Mustermischmodus: Leuchtkraft
Ergebnis
Hier ist das endgültige Design für diesen Abschnitt.
Und hier ist die mobile Version.
Endergebnis
Werfen wir nun einen Blick auf das Ganzseitendesign mit Musterüberblendungsmodi.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
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. Glücklicherweise verfügt Divi über zahlreiche Mischmodi, sodass Sie die Muster so anpassen können, wie Sie möchten.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.
Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
