So verwenden Sie die Hintergrundmasken- und Mustertransformationseinstellungen von Divi

Hintergrundmuster sind eine großartige Möglichkeit, Ihrer Website ein visuelles Flair zu verleihen und sich von der Masse abzuheben. Die neuen Hintergrundmasken- und Mustertransformationseinstellungen von Divi können auf viele Arten kombiniert werden, um diese Hintergrundmuster zu erstellen. In diesem Beitrag werden wir sehen, wie Sie die Hintergrundmasken- und Mustertransformationseinstellungen von Divi verwenden, um einige interessante Hintergründe für Ihre Divi-Layouts zu erstellen.

Lass uns anfangen.

Vorschau

Hier ist zunächst ein Blick auf jedes Beispiel mit den Desktop-, Telefon- und alternativen Optionen für jedes.

Ergebnisse von Beispiel 1

Reguläre Desktop-Version

Normale Version Telefon

Alternative Desktop-Version

Alternative Version Telefon

Beispiel zwei Ergebnisse

Reguläre Desktop-Version

Normale Version Telefon

Alternative Desktop-Version

Alternative Version Telefon

Beispiel drei Ergebnisse

Reguläre Desktop-Version

Normale Version Telefon

Alternative Desktop-Version

Alternative Version Telefon

Divi-Hintergrundmasken- und Mustertransformationsoptionen

Die neuen Hintergrundmasken- und Musterfunktionen von Divi umfassen mehrere Optionen, um sie anzupassen. Die Anpassungen umfassen horizontales und vertikales Spiegeln, Drehen und Invertieren. Um die Optionen anzuzeigen, gehen Sie zu den Hintergrundeinstellungen eines Abschnitts oder einer Zeile und wählen Sie die Registerkarten Hintergrundmuster oder Hintergrundmaske.

Sobald Sie ein Muster oder eine Maske hinzugefügt haben, werden die Transformationseinstellungen angezeigt. Klicken Sie einfach auf die Optionen, die Sie verwenden möchten. Wir können sie zusammen und in jeder gewünschten Kombination verwenden.

Funktionsweise der Masken- und Mustertransformationseinstellungen von Divi

Das folgende Muster ist Zickzack mit den Standardeinstellungen.

Ich habe im Bild unten eine Ebenen-Blog-Maske hinzugefügt. Lassen Sie uns diese verwenden, um zu demonstrieren, wie die Einstellungen für die Hintergrundmaske und die Mustertransformation funktionieren.

Horizontales Spiegeln

Dies ist horizontales Spiegeln. Ich habe die Transformationseinstellungen sowohl auf das Muster als auch auf die Maske angewendet.

Vertikales Spiegeln

Dies ist Vertical Flipping für das Muster und die Maske.

Rotierend

Dieser zeigt Rotating für das Muster und die Maske.

Invertieren

Dieses Beispiel zeigt das Invertieren für das Muster und die Maske.

Kombinationen aus Hintergrundmaske und Mustertransformation

Natürlich können wir die Transformationseinstellungen auch in verschiedenen Kombinationen verwenden. Hier sind ein paar Beispiele.

Dieser dreht das Muster und invertiert die Maske.

Dieses Beispiel verwendet vertikales Spiegeln, Rotieren und Invertieren für das Hintergrundmuster. Die Hintergrundmaske verwendet horizontales Spiegeln, vertikales Spiegeln und Rotieren.

In diesem Beispiel habe ich Horizontales Spiegeln und Rotieren für das Hintergrundmuster und Vertikales Spiegeln und Rotieren für die Hintergrundmaske verwendet.

Beispiele für Hintergrundmasken- und Musterumwandlungseinstellungen

Schauen wir uns als Nächstes an, wie diese Einstellungen mit Divi-Layouts verwendet werden können. Wir verwenden einen Abschnitt als Ausgangspunkt und erstellen drei Beispiele. Wir werden es stylen und dann die Transformationseinstellungen verwenden, um es für jedes Beispiel zu ändern.

Für meine Beispiele verwende ich eine modifizierte Version des Heldenabschnitts von der Landing Page für die Nachlassplanung, die in Divi verfügbar ist. Hier ein Blick in meine Rubrik. Die Modifikation vereinfacht den Heldenabschnitt für unsere Bedürfnisse. Es verwendet die Hintergrundfarbe Hintergrund: #92a5ab.

• Hintergrund: #92a5ab

Einstellungen für Hintergrundmaske und Mustertransformation Beispiel 1

Unser erstes Beispiel gibt uns einen Bogen, der vertikal in der Mitte des Bildschirms sitzt. Eine Seite des Schirms hat ein büscheliges Muster. Dann erstellen wir eine alternative Version, bei der der Bogen in die andere Richtung zeigt.

Hintergrundmuster

Öffnen Sie die Abschnittseinstellungen, scrollen Sie nach unten zu Hintergrund und wählen Sie die Registerkarte Hintergrundmuster . Wählen Sie Getuftet für das Hintergrundmuster und Invertieren für die Musterumwandlung.

• Hintergrundmuster: Getuftet
• Mustertransformation: Invertieren

Hintergrundmaske

Wählen Sie die Registerkarte Hintergrundmaske und wählen Sie Bogen für die Hintergrundmaske. Ändern Sie die Maskenfarbe in #616d72 und stellen Sie die Maskentransformation auf Invertieren ein. Damit ist unsere erste Version des Bogens mit Büscheln fertig.

• Hintergrundmaske: Arch
• Farbe: #616d72
• Maskentransformation: Invertieren

Beispiel Eins Variation

Als Nächstes erstellen wir eine Variation unseres Designs. Ändern Sie einfach die Maskentransformation für das Hintergrundmuster in Horizontales Spiegeln und Vertikales Spiegeln. Dadurch wird der Bogen in die andere Richtung gedreht und das Muster verschoben, sodass es nicht nur wie ein Spiegelbild aussieht.

• Maskentransformation: Horizontales Spiegeln, Vertikales Spiegeln

Einstellungen für Hintergrundmaske und Mustertransformation Beispiel 2

Für unser zweites Beispiel erstellen wir ein Oval in der Mitte des Bildschirms mit einem Muster innerhalb des Ovals. Dann ändern wir die Platzierung des Musters. Wir werden dieses auch für verschiedene Bildschirmgrößen modifizieren.

Hintergrundmuster

Wählen Sie in den Hintergrundeinstellungen die Registerkarte Hintergrundmuster und wählen Sie Shippo für das Muster. Stellen Sie die Mustertransformation auf Invertieren ein.

• Hintergrundmuster: Shippo
• Mustertransformation: Invertieren

Hintergrundmaske

Wählen Sie als Nächstes die Registerkarte Hintergrundmaske . Wählen Sie Eclipse für die Hintergrundmaske und bewegen Sie den Mauszeiger über die Hintergrundoptionen. Wählen Sie das angezeigte Tablettsymbol aus. Dies öffnet die Geräteeinstellungen. Stellen Sie für die Desktop-Einstellungen die Farbe auf #758489 ein. Wählen Sie für „Maskentransformation“ die Option „Horizontales Spiegeln und Drehen“. Damit ist die Desktop-Version fertig. Lassen Sie uns es für die mobile Version ändern.

• Hintergrundmaske: Sonnenfinsternis
• Farbe: #758489
• Maskentransformation: Horizontales Spiegeln, Rotieren

Tablet und Telefon

Tablet und Telefon verwenden beide dieselben Einstellungen, sodass wir nur die Tablet-Einstellungen ändern müssen. Wählen Sie die Registerkarte Tablet und ändern Sie die Maskentransformation in Horizontales Spiegeln.

• Maskentransformation: Horizontales Spiegeln, Invertieren

Variation von Beispiel zwei

Als Nächstes erstellen wir die Variation für unser zweites Beispiel. Wählen Sie zuerst die Registerkarte Hintergrundmuster und stellen Sie die Musterfarbe auf rgba(0,0,0,0,06) ein.

• Musterfarbe: rgba (0,0,0,0,06)

Wählen Sie als Nächstes die Registerkarte Hintergrundmaske und wählen Sie Horizontales Spiegeln, Drehen und Invertieren für die Maskentransformation.

• Maskentransformation: Horizontales Spiegeln, Rotieren, Invertieren

Tablet und Telefon

Wählen Sie für die Tablet- und Telefonoptionen das Tablet -Symbol aus. Ändern Sie die Maskentransformation in Horizontales Spiegeln und Invertieren. Die alternative Version von Beispiel zwei ist nun fertig.

• Maskentransformation: Horizontales Spiegeln, Invertieren

Einstellungen für Hintergrundmaske und Mustertransformation Beispiel 3

Für unser drittes Beispiel für Masken- und Mustertransformationseinstellungen verwenden wir ein Wabenmuster mit einer Malmaske. Wir werden auch eine mobile Version dafür erstellen.

Hintergrundmuster

Wählen Sie zuerst die Registerkarte Geräteeinstellungen und wählen Sie das Desktop -Symbol. Wählen Sie die Registerkarte Hintergrundmuster und wählen Sie Honeycomb für das Hintergrundmuster. Ändern Sie die Farbe in rgba(0,0,0,0,42). In diesem Fall lassen wir die Optionen für die Mustertransformation deaktiviert. Wir werden sie für die alternative Version hinzufügen.

• Hintergrundmuster: Wabe
• Musterfarbe: rgba(0,0,0,0,42)
• Mustertransformation: keine

Hintergrundmaske

Wählen Sie als Nächstes die Registerkarte Hintergrundmaske . Wählen Sie Paint für die Hintergrundmaske. Ändern Sie die Farbe in #697b82. Wählen Sie Vertikales Spiegeln für die Maskentransformation.

• Hintergrundmaske: Farbe
• Farbe: #697b82
• Maskentransformation: Vertikales Spiegeln

Als nächstes wählen Sie Abdeckung für die Größe. Dies eröffnet einige weitere Optionen. Wählen Sie Unten rechts für die Position. Das war es für die Desktop-Version. Als Nächstes erstellen wir die mobile Version.

• Größe: Abdeckung
• Position: Unten rechts

Tablet und Telefon

Wählen Sie als Nächstes die Registerkarte Tablet und ändern Sie die Hintergrundmaskentransformation in Vertikales Spiegeln und Drehen. Damit ist das Styling für unser drittes Beispiel abgeschlossen. Als Nächstes erstellen wir die alternative Version.

• Transformation der Hintergrundmaske: Vertikales Spiegeln, Rotieren

Beispiel 3 Variation

Für die alternative Version dieses Beispiels passen wir sowohl das Hintergrundmuster als auch die Hintergrundmaske an.

Hintergrundmuster

Ändern Sie für das Hintergrundmuster die Musterfarbe in rgba(0,0,0,0,11). Ändern Sie die Mustertransformation in Horizontales Spiegeln, Vertikales Spiegeln und Rotieren.

• Musterfarbe: rgba(0,0,0,0.11)
• Mustertransformation: Horizontales Spiegeln, Vertikales Spiegeln, Rotieren

Hintergrundmaske

Wählen Sie als Nächstes die Registerkarte Hintergrundmaske . Ändern Sie die Farbe in Weiß und die Maskentransformation in Horizontales Spiegeln, Vertikales Spiegeln und Invertieren.

• Farbe: #ffffff
• Maskentransformation: Horizontales Spiegeln, Vertikales Spiegeln, Invertieren

Ändern Sie als Nächstes die Maskengröße auf „Abdecken“ und wählen Sie dann „Mitte“ für die Maskenposition.

• Maskengröße: Abdeckung
• Maskenposition: Mitte

Tablet und Telefon

Wählen Sie schließlich die Registerkarte Tablet , um die mobile Version zu erstellen. Wählen Sie die Registerkarte Hintergrundmaske und wählen Sie alle vier Optionen für die Maskentransformation aus. Dies vervollständigt die alternative Version des dritten Beispiels.

• Transformation der Hintergrundmaske: Horizontales Spiegeln, Vertikales Spiegeln, Rotieren, Invertieren

Ergebnisse

Hier ist ein Blick auf jedes Beispiel mit den Desktop-, Telefon- und alternativen Optionen für jedes.

Ergebnisse von Beispiel 1

Reguläre Desktop-Version

Normale Version Telefon

Alternative Desktop-Version

Alternative Version Telefon

Beispiel zwei Ergebnisse

Reguläre Desktop-Version

Normale Version Telefon

Alternative Desktop-Version

Alternative Version Telefon

Beispiel drei Ergebnisse

Reguläre Desktop-Version

Normale Version Telefon

Alternative Desktop-Version

Alternative Version Telefon

Endgedanken

Das ist unser Blick darauf, wie Sie die Hintergrundmasken- und Mustertransformationseinstellungen von Divi verwenden, um viele interessante Hintergrunddesigns zu erstellen. Da die Muster und Masken zusammen verwendet werden können, können auch ihre Transformationseinstellungen zusammen verwendet werden. Dies eröffnet viele Designoptionen und gibt Ihnen noch mehr Werkzeuge, um Ihren Divi-Hintergründen Eleganz zu verleihen. Der beste Weg, um zu lernen, sie zu verwenden, besteht darin, mit den Anpassungen herumzuspielen und zu sehen, was Sie erstellen können.

Wir wollen von dir hören. Haben Sie die Hintergrundmasken- und Mustertransformationseinstellungen von Divi in ​​Ihren Divi-Layouts ausprobiert? Lass es uns in den Kommentaren wissen.