Möchten Sie Hintergrundmaskeneinstellungen und Mustertransformationsoptionen kombinieren? Divi um einzigartige Hintergründe zu erstellen?
Hintergrunddesigns sind eine großartige Möglichkeit, Ihre Website visuelles Flair und heben sich von der Masse ab. Die neuen Einstellungen für Hintergrundmaske und Mustertransformation von Divi können auf vielfältige Weise kombiniert werden, um diese Hintergrundmuster zu erstellen.
In diesem Artikel erfahren Sie, wie Sie die Einstellungen für die Hintergrundmaske und die Mustertransformation verwenden Divi um interessante Hintergründe für Ihre Layouts zu erstellen Divi.
Lassen Sie uns beginnen.
Übersicht
Hier ist zunächst eine Vorschau jedes Beispiels auf verschiedenen Bildschirmgrößen (Telefon und Desktop).
Lesen Sie auch: Divi: So verwenden Sie Schatten- und Hover-Effekte, um interaktive Inhalte zu erstellen
Beispiel 1
Version 1 auf dem Desktop
Version 1 auf dem Telefon
Laden Sie DIVI jetzt herunter!!!
Version 2 auf dem Desktop
Version 2 auf dem Telefon
Beispiel 2
Version 1 auf dem Desktop
Version 1 auf dem Telefon
Laden Sie DIVI jetzt herunter!!!
Version 2 auf dem Desktop
Version 2 auf dem Telefon
Beispiel 3
Version 1 auf dem Desktop
Version 1 auf Telefon
Laden Sie DIVI jetzt herunter!!!
Version 2 auf dem Desktop
Version 2 auf dem Telefon
Divi-Hintergrundmasken- und Mustertransformationsoptionen
Die neuen Masken- und Hintergrundmusterfunktionen von Divi umfassen mehrere Optionen, um sie anzupassen. Zu den Anpassungen gehören horizontales und vertikales Spiegeln, Drehen und Invertieren. Um die Optionen anzuzeigen, gehen Sie zu den Hintergrundeinstellungen eines Abschnitts oder einer Linie und wählen Sie die Registerkarten Hintergrundmuster oder Hintergrundmaske.
Nachdem 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 Zig Zag mit Standardeinstellungen.
Wir fügen im Bild unten eine Layer-Blog-Maske hinzu. Lassen Sie uns sie verwenden, um zu demonstrieren, wie die Einstellungen für die Hintergrundmaske und die Mustertransformation funktionieren.
Horizontale Umkehr
Es ist die horizontale Umkehrung. Wir haben die Transformationseinstellungen sowohl auf das Muster als auch auf die Maske angewendet.
Vertikaler Flip
Dies ist der vertikale Flip für das Muster und die Maske.
Rotation
Dieses zeigt Rotation für Muster und Maske.
Umkehren
Dieses Beispiel zeigt Invertieren für Muster und Maske.
Kombinationen aus Hintergrundmaske und Mustertransformation
Natürlich können wir auch Transformationsparameter in verschiedenen Kombinationen verwenden. Hier sind einige Beispiele.
Dadurch wird das Muster gedreht und die Maske invertiert.
Dieses Beispiel verwendet vertikales Spiegeln, Drehen und Invertieren für das Hintergrundmuster. Die Hintergrundmaske verwendet horizontales Spiegeln, vertikales Spiegeln und Drehen.
In diesem Beispiel haben wir horizontales Spiegeln und Drehen für das Hintergrundmuster und vertikales Spiegeln und Drehen für die Hintergrundmaske verwendet.
Beispiele für Hintergrundmasken- und Mustertransformationseinstellungen
Als Nächstes sehen wir uns an, wie diese Einstellungen mit Divi-Layouts verwendet werden können. Wir verwenden einen Abschnitt als Ausgangspunkt und erstellen drei Beispiele. Wir passen es an und verwenden dann die Transformationseinstellungen, um es für jedes Beispiel zu ändern.
Für unsere Beispiele verwenden wir eine modifizierte Version des Hero-Bereichs der Layout-Landingpage Nachlassplanung erhältlich in Division.
Hier ist eine Übersicht über den betreffenden Abschnitt. Es verwendet die Hintergrundfarbe: #92a5ab.
- Hintergrund: #92a5ab
Hintergrundmasken- und Mustertransformationsparameter 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. Als Nächstes 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 Tufted für das Hintergrundmuster und Inverting für Pattern Transform.
- Hintergrundmuster: Getuftet
- Mustertransformation: Rückwärts
Hintergrundmaske
Registerkarte auswählen Hintergrundmaske und wähle Bogen für die Hintergrundmaske. Ändern Sie die Maskenfarbe in #616d72 und setzen Sie die Maskentransformation auf Invertieren. Damit ist unsere erste Version des Bogens mit Büscheln fertig.
- Hintergrundmaske: Arch
- Maskenfarbe: #616d72
- Maskentransformation: Invertieren
Beispiel 1 Version 2
Als Nächstes erstellen wir eine Variation unseres Designs. Ändern Sie einfach die Maskentransformation für Hintergrundmuster in horizontalem und vertikalem Flip. Dadurch wird der Bogen in die andere Richtung gedreht und das Muster versetzt, sodass es nicht nur wie ein Spiegelbild aussieht.
- Maskentransformation: horizontal spiegeln, vertikal spiegeln
Hintergrundmasken- und Mustertransformationsparameter Beispiel 2
Für unser zweites Beispiel erstellen wir ein Oval in der Mitte des Bildschirms mit einem Muster innerhalb des Ovals. Als Nächstes ändern wir die Platzierung des Musters. Wir werden auch dieses für verschiedene Bildschirmgrößen modifizieren.
Hintergrundmuster
Wählen Sie in den Hintergrundeinstellungen die Registerkarte aus Hintergrundmuster und wähle Shippo für das Motiv. Setzen Sie die Mustertransformation auf Invertieren.
- Musterhintergrund: Shippo
- Mustertransformation: Rückwärts
Hintergrundmaske
Wählen Sie dann die Registerkarte aus Hintergrundmaske und ändern Sie die folgenden Einstellungen.
- Hintergrundmaske: Ellipse
- Farbe: #758489
- Maskentransformation: horizontales Flip, Rotation
Tablet und Telefon
Sowohl das Tablet als auch das Telefon verwenden dieselben Einstellungen, sodass wir nur die Tablet-Einstellungen ändern müssen. Wähle aus Tablet-Registerkarte und ändern Sie die Maskentransformation in horizontaler Umkehrung.
- Maskentransformation: horizontaler Flip, Inversion
Beispiel 2 Version 2
Als Nächstes erstellen wir die Variation für unser zweites Beispiel. Wählen Sie zuerst die Registerkarte aus Hintergrundmuster und setze die Musterfarbe auf rgba(0,0,0,0.06).
- Musterfarbe: rgba (0,0,0,0.06)
Wählen Sie dann die Registerkarte aus Hintergrundmaske und wählen Sie Horizontal spiegeln, Drehen und Invertieren für die Maskentransformation.
- Maskentransformation: horizontales Flip, Rotation, Inversion
Tablet und Telefon
Wählen Sie für Tablet- und Telefonoptionen das Symbol von aus Tablette. Modifiziere den Maskentransformation in horizontaler Umkehrung und Inversion. Die alternative Version von Beispiel zwei ist nun fertig.
- Maskentransformation: horizontaler Flip, Inversion
Hintergrundmasken- und Mustertransformationsparameter 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 zunächst die Registerkarte Geräteeinstellungen und dann das Gerätesymbol aus. Büro. Registerkarte auswählen Hintergrundmuster und wählen Sie Honeycomb für das Hintergrundmuster. Ändern Sie die Farbe in rgba(0,0,0,0.42). Für diesen verlassen wir die Optionen 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 dann die Registerkarte aus Hintergrundmaske. Wählen Lackieren für die Hintergrundmaske. Ändern Sie die Farbe in #697b82. Wählen Sie Vertikal spiegeln für die Maskentransformation.
- Hintergrundmaske: Farbe
- Maskenfarbe: #697b82
- Maskentransformation: vertikaler Flip
Dann wählen Sie Cover für Größe. Dies eröffnet einige weitere Optionen. Wählen Unten rechts für Standort. Das war es für die Desktop-Version. Als nächstes erstellen wir die mobile Version.
- Maskengröße: Abdeckung
- Maskenposition: Unten rechts
Tablet und Telefon
Wählen Sie dann die Registerkarte Tablette und ändern Sie die Transformation der Maske Hintergrund in vertikaler Drehung und Drehung. Dies vervollständigt den Stil für unser drittes Beispiel. Als Nächstes erstellen wir die alternative Version.
- Maskentransformation: vertikales Flip, Rotation
Beispiel 3 Version 2
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 horizontal spiegeln, vertikal spiegeln und drehen.
- Maskenfarbe: rgba(0,0,0,0.11)
- Maskentransformation: horizontaler Flip, vertikaler Flip, Drehung
Hintergrundmaske
Wählen Sie dann die Registerkarte Hintergrundmaske. Ändern Sie die Farbe in Weiß und die Transformation der Maske in horizontales Spiegeln, vertikales Spiegeln und Umkehren.
- Maskenfarbe: #ffffff
- Maskentransformation: horizontaler Flip, vertikaler Flip, Inversion
Ändern Sie als Nächstes die Größe der abzudeckenden Maske und wählen Sie dann für die Position der Maske „Zentriert“.
- Maskengröße: Abdeckung
- Maskenposition: Mitte
Tablet und Telefon
Wählen Sie abschließend die Registerkarte tablette um die mobile Version zu erstellen. Registerkarte wählen Hintergrundmaske und wählen Sie die vier Maskentransformationsoptionen aus. Dies vervollständigt die alternative Version des dritten Beispiels.
- Maskentransformation: horizontaler Flip, vertikaler Flip, Rotation, Inversion
Endgültige Ergebnisse
Hier ist eine Übersicht über jedes Beispiel mit unterschiedlichen Bildschirmgrößen (Desktop und Telefon)
Beispiel 1
Version 1 auf dem Desktop
Version 1 auf Telefon
Version 2 auf dem Desktop
Version 2 auf dem Telefon
Beispiel 2
Version 1 auf dem Desktop
Version 1 auf Telefon
Version 2 auf dem Desktop
Version 2 auf Telefon
Beispiel 3
Version 1 auf dem Desktop
Version 1 auf Telefon
Version 2 auf dem Desktop
Version 2 auf Telefon
Laden Sie DIVI jetzt herunter!!!
Siehe auch: Divi: So erstellen Sie einen Bereich für Teammitglieder als Karussell
Zusammenfassung
Dies ist unser Blick darauf, wie Sie die Hintergrundmasken- und Mustertransformationseinstellungen von Divi verwenden, um viele interessante Hintergrundmuster zu erstellen.
Da Muster und Masken zusammen verwendet werden können, können auch ihre Transformationseinstellungen zusammen verwendet werden. Dadurch eröffnen sich viele Gestaltungsmöglichkeiten, die Ihnen noch mehr bietenoutils um Ihren Divi-Hintergründen Eleganz zu verleihen.
Der beste Weg, um zu lernen, wie man sie verwendet, besteht darin, mit den Anpassungen herumzuspielen und zu sehen, was Sie erstellen können.
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 RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der 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.
...