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.

Divi-Hintergrundmasken- und Mustertransformationsoptionen

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.

Divi-Hintergrundmasken- und Mustertransformationsoptionen

Horizontale Umkehr

Es ist die horizontale Umkehrung. Wir haben die Transformationseinstellungen sowohl auf das Muster als auch auf die Maske angewendet.

Horizontale Umkehr

Vertikaler Flip

Dies ist der vertikale Flip für das Muster und die Maske.

Vertikaler Flip

Rotation

Dieses zeigt Rotation für Muster und Maske.

Tournant

Umkehren

Dieses Beispiel zeigt Invertieren für Muster und Maske.

Umkehren

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.

Kombinationen aus Hintergrundmaske und Mustertransformation

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

Kombinationen aus Hintergrundmaske und Mustertransformation

In diesem Beispiel haben wir horizontales Spiegeln und Drehen für das Hintergrundmuster und vertikales Spiegeln und Drehen für die Hintergrundmaske verwendet.

Kombinationen aus Hintergrundmaske und Mustertransformation

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
Beispiele für Hintergrundmasken- und Mustertransformationseinstellungen

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
Hintergrundmasken- und Mustertransformationsparameter Beispiel 1

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
Hintergrundmasken- und Mustertransformationsparameter Beispiel 1

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 1

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
Hintergrundmasken- und Mustertransformationsparameter Beispiel 2

Hintergrundmaske

Wählen Sie dann die Registerkarte aus Hintergrundmaske und ändern Sie die folgenden Einstellungen.

  • Hintergrundmaske: Ellipse
  • Farbe: #758489
  • Maskentransformation: horizontales Flip, Rotation
Hintergrundmasken- und Mustertransformationsparameter Beispiel 2
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
Hintergrundmasken- und Mustertransformationsparameter Beispiel 2

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)
Hintergrundmasken- und Mustertransformationsparameter Beispiel 2

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
Hintergrundmasken- und Mustertransformationsparameter Beispiel 2
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 2

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
Hintergrundmasken- und Mustertransformationsparameter Beispiel 3

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
Hintergrundmasken- und Mustertransformationsparameter Beispiel 3

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
Hintergrundmasken- und Mustertransformationsparameter Beispiel 3
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
Hintergrundmasken- und Mustertransformationsparameter Beispiel 3

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
Transformationsoptionen für Divi-Muster
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
Hintergrundmasken- und Mustertransformationsparameter Beispiel 3

Ä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
Hintergrundmasken- und Mustertransformationsparameter Beispiel 3
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
Hintergrundmasken- und Mustertransformationsparameter Beispiel 3

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

Kombinieren Sie Hintergrundmaskeneinstellungen und Divi-Mustertransformationsoptionen

Version 2 auf dem Desktop

Kombinieren Sie Hintergrundmaskeneinstellungen und Divi-Mustertransformationsoptionen

Version 2 auf Telefon

Kombinieren Sie Hintergrundmaskeneinstellungen und Divi-Mustertransformationsoptionen

Beispiel 3

Version 1 auf dem Desktop

Kombinieren Sie Hintergrundmaskeneinstellungen und Divi-Mustertransformationsoptionen

Version 1 auf Telefon

Kombinieren Sie Hintergrundmaskeneinstellungen und Divi-Mustertransformationsoptionen

Version 2 auf dem Desktop

Kombinieren Sie Hintergrundmaskeneinstellungen und Divi-Mustertransformationsoptionen

Version 2 auf Telefon

Kombinieren Sie Hintergrundmaskeneinstellungen und Divi-Mustertransformationsoptionen

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.

...