So verwenden Sie die Verlaufswiederholungsoption von Divi, um benutzerdefinierte Hintergrundmuster zu erstellen

Die Hintergrundoptionen von Divi bieten viele Möglichkeiten, Hintergrundmuster zu erstellen. Sie können sogar Hintergrundmuster erstellen, indem Sie nur Farbverläufe verwenden. Die Option Verlaufswiederholung macht dies einfach und leicht. In diesem Beitrag werden wir sehen, wie Sie die Option „Verlaufswiederholung“ von Divi verwenden, um benutzerdefinierte Hintergrundmuster zu erstellen.

Lass uns anfangen.

Was ist Verlaufswiederholung

Die Option Verlaufswiederholung erstellt ein Muster basierend auf den Verlaufsstopps. Die Verlaufsstopps sind Messungen, die bestimmen, wo die Farben innerhalb des Verlaufs erscheinen und aufhören. Der Verlaufsgenerator von Divi verwendet diese Stopps, um das Muster zu erstellen.

Die letzte Farbe teilt dem Farbverlauf mit, wo sich der Haltepunkt innerhalb des Farbverlaufs befindet. Sie können vor diesem Haltepunkt so viele Farben haben, wie Sie möchten. Der Gradient Builder wiederholt es dann, um den Bildschirm zu füllen, der das Muster erstellt. Die Option kann jedem Abschnitt, jeder Zeile, Spalte oder jedem Modul hinzugefügt und zusammen verwendet werden.

Aktivieren Sie die Verlaufswiederholungsoption

Um die Option Verlaufswiederholung zu aktivieren, öffnen Sie die Einstellungen des Abschnitts, indem Sie auf das Zahnradsymbol klicken. Dies funktioniert auch mit Zeilen, Spalten und Modulen.

Scrollen Sie nach unten zu Hintergrund . Wählen Sie die Registerkarte Hintergrundverlauf und klicken Sie auf Hintergrundverlauf hinzufügen .

Unter der Verlaufsstoppleiste befindet sich eine Einstellung namens Verlauf wiederholen . Dies ist standardmäßig deaktiviert. Klicken Sie einfach darauf, um es zu aktivieren.

Der Farbverlauf wird nun wiederholt und erstellt ein Muster basierend auf Ihren Farbverlaufsstopps und Ihren anderen Farbverlaufseinstellungen, wie z. B. der Farbverlaufseinheit.

Gradienteneinheiten

Die Gradienteneinheit ist die Maßeinheit. Dies gibt an, was die Verlaufsstopp-Nummern auf der Verlaufsleiste anzeigen, was bestimmt, wie die Verlaufsstopps gemessen werden. Dies wirkt sich auf das Muster aus, das durch die Wiederholungsoption erstellt wird.

Divi's Background Gradient Builder hat 15 Einheiten zur Auswahl. Sehen wir uns ein Beispiel der vier beliebtesten Optionen an. Wie wir in unseren Beispielen sehen werden, ändert sich das Ergebnis basierend auf Ihrer Anzahl von Verlaufsstopps und Einstellungen. Ich verwende Farben aus unseren Beispielen und habe sie auf Wiederholen eingestellt, um sie besser sichtbar zu machen. Ich verwende drei Farben mit diesen Einstellungen:

• Farbe 1: #fff6ee (14% Position)
• Farbe 2: #ede3dc (46% Position)
• Farbe 3: #e8ded7 (82% Position)

Verlaufseinstellungen

• Typ: Linear
• Richtung: 214 Grad
• Farbverlauf wiederholen: Ja
• Einheit: Prozent
• Farbverlauf über dem Hintergrundbild platzieren: Nein

Prozent

Prozent misst die Gradientenstopps in Prozent. Dadurch werden die Gradientenpunkte basierend auf dem übergeordneten Element berechnet. Je kleiner der letzte Verlaufspunkt ist, desto enger ist das Muster, das er erzeugt. Wenn Sie die Position einer der Farben anpassen, bewegt sich diese Farbe, während die anderen an Ort und Stelle bleiben.

Pixel

Pixel messen die Anzahl der Pixel für jeden Verlaufsstopp. Dadurch erhält der Farbverlauf ein kleineres Muster als bei vielen anderen Einheitentypen. Das Verschieben der Position der ersten oder letzten Farbe ändert die Position jeder Farbe.

Ansichtsfensterhöhe (vh)

Der Darstellungsbereich ist der sichtbare Bereich des Browserfensters. Es wird in Höhe und Breite separat gemessen. Die Ansichtsfensterhöhe verwendet die Verlaufsstopps, um den Prozentsatz der Höhe der Ansichtsfenstergröße zu messen. Das Anpassen der Position der ersten oder letzten Farbe wirkt sich auf alle Farben aus.

Ansichtsfensterbreite (vw)

Die Ansichtsfensterbreite verwendet die Verlaufsstopps, um den Prozentsatz der Breite des Ansichtsfensters (oder der Browserbreite) zu messen. Die Anpassungen ändern sich basierend auf der Breite. Wenn Sie die größere oder kleinere Zahl anpassen, ändert diese bestimmte Farbe ihre Position, während die anderen gleich bleiben.

Beispiele für Verlaufswiederholungsoptionen

Für unsere Beispiele verwende ich den Abschnitt „Call-to-Action“ auf der Zielseite des kostenlosen Akupunktur-Layoutpakets, das in Divi verfügbar ist.

Wir müssen eine Anpassung an der ersten Spalte im Abschnitt vornehmen. Öffnen Sie die Einstellungen der Zeile, indem Sie auf das Zahnradsymbol klicken.

Wählen Sie als Nächstes das Zahnradsymbol für die erste Spalte aus.

Farbverlauf Spalte Eins

Spalte eins hat einen eigenen Hintergrundgradienten. Dies ist Teil des Layouts. Wir werden das nicht ändern. Wir verwenden denselben Farbverlauf in allen vier Beispielen. Hier sind die Einstellungen, falls Sie sie benötigen.

• Farbe 1: #f4d5b8 (0px-Position)
• Farbe 2: rgba(244,213,184,0) (100px Position)

Verlaufseinstellungen

• Typ: Linear
• Richtung: 180 Grad
• Farbverlauf wiederholen: Nein
• Einheit: Prozent
• Farbverlauf über dem Hintergrundbild platzieren: Nein

Abstand

Wir werden links von der Spalte etwas Abstand hinzufügen. Gehen Sie zu den Designeinstellungen , scrollen Sie nach unten zu Abstand und wählen Sie das Tablet-Symbol aus, um die Geräteoptionen zu öffnen. Fügen Sie für die Desktop- und Tablet-Registerkarten links 5 % Polsterung hinzu. Wählen Sie die Telefonregisterkarte und entfernen Sie die linke Polsterung. Belassen Sie Oben und Rechts auf ihren aktuellen Einstellungen.

• Obere Polsterung: 180px
• Linke Polsterung: 5%
• Rechte Füllung: 80px

Beispiel eins

Unser erstes Beispiel erzeugt ein sich diagonal wiederholendes Muster mit feinen Linien.

Dieser hat drei Gradientenstopps. Die erste Farbe ist #fff6ee, platziert an der 4px-Position. Das zweite ist #ede3dc, platziert an der 9px-Position. Zuletzt ist #e8ded7, platziert an der 14px-Position. Das bedeutet, dass der Farbverlauf bei 14 Pixeln stoppt, wo die Wiederholung beginnt. Die Farbstopps sind eng beieinander, wodurch das Muster klein bleibt.

• Farbe 1: #fff6ee (4px-Position)
• Farbe 2: #ede3dc (9px Position)
• Farbe 3: #e8ded7 (14px-Position)

Ändern Sie für die Verlaufseinstellungen den Verlaufstyp in Linear und stellen Sie seine Richtung auf 156 Grad ein. Farbverlauf wiederholen aktivieren . Wählen Sie Pixel für die Einheit aus.

• Typ: Linear
• Richtung: 156 Grad
• Farbverlauf wiederholen: Ja
• Einheit: Pixel
• Farbverlauf über dem Hintergrundbild platzieren: Nein

Beispiel zwei

Unser zweites Beispiel erzeugt ein sich diagonal wiederholendes Muster mit größeren Linien.

Dieser hat drei Gradientenstopps. Die erste ist die Farbe #fff6ee, platziert an der 4px-Position. Unsere zweite Farbe ist #ede3dc, platziert an der 43px-Position. Zuletzt ist #e8ded7, platziert an der 50px-Position. Dieser Verlauf stoppt bei 50 Pixel und wiederholt das Muster.

• Farbe 1: #fff6ee (4px-Position)
• Farbe 2: #ede3dc (43px Position)
• Farbe 3: #e8ded7 (50px-Position)

Wählen Sie für die Verlaufseinstellungen Linear als Typ und stellen Sie die Richtung auf 156 Grad ein. Aktivieren Sie Verlauf wiederholen und ändern Sie die Einheit in Pixel.

• Typ: Linear
• Richtung: 156 Grad
• Farbverlauf wiederholen: Ja
• Einheit: Pixel
• Farbverlauf über dem Hintergrundbild platzieren: Nein

Beispiel drei

Unser drittes Beispiel erstellt ein sich wiederholendes kreisförmiges Muster mit mittelgroßen Kreisen.

Dieser hat drei Gradientenstopps. Die erste Farbe ist #fff6ee, platziert an der 4px-Position. Farbe 2 ist #e8ded7, platziert an der 7px-Position. Die letzte Farbe ist #ede3dc, platziert an der 8px-Position. Dieser Farbverlauf endet bei 8 Pixeln und die anderen Farben liegen dicht beieinander, wodurch ein enges Muster entsteht.

• Farbe 1: #fff6ee (4px-Position)
• Farbe 2: #e8ded7 (7px-Position)
• Farbe 3: #ede3dc (8px Position)

Ändern Sie für die Verlaufseinstellungen den Typ in Kreisförmig und stellen Sie die Richtung auf Unten ein. Aktivieren Sie Farbverlauf wiederholen und ändern Sie die Einheit in Prozent.

• Typ: Rund
• Richtung: Unten
• Farbverlauf wiederholen: Ja
• Einheit: Prozent
• Farbverlauf über dem Hintergrundbild platzieren: Nein

Beispiel vier

Unser viertes Beispiel erstellt ein kreisförmiges Muster mit großen Kreisen.

Dieser hat drei Gradientenstopps. Das erste ist #fff6ee, platziert an der 4px-Position. An zweiter Stelle steht #e8ded7, platziert an der 23px-Position. Das dritte ist #ede3dc, platziert an der 31px-Position. Dieser Farbverlauf erzeugt ein größeres Muster mit weiter voneinander entfernten Farben und endet bei 31 Pixeln.

• Farbe 1: #fff6ee (4px-Position)
• Farbe 2: #e8ded7 (23px-Position)
• Farbe 3: #ede3dc (31px Position)

Ändern Sie für die Verlaufseinstellungen den Typ in Kreisförmig und stellen Sie die Richtung auf Mitte ein. Aktivieren Sie Farbverlauf wiederholen und ändern Sie die Einheit in Prozent.

• Typ: Rund
• Richtung: Mitte
• Farbverlauf wiederholen: Ja
• Einheit: Prozent
• Farbverlauf über dem Hintergrundbild platzieren: Nein

Endgedanken

Das ist unser Blick darauf, wie Sie die Farbverlaufswiederholungsoption von Divi verwenden, um benutzerdefinierte Hintergründe zu erstellen. Es gibt viele Anpassungen innerhalb der Verlaufseinstellungen, die sich auf das Design des Verlaufs auswirken. Verlaufswiederholung funktioniert gut mit all diesen Anpassungen, um mit Leichtigkeit interessante benutzerdefinierte Hintergrundmuster zu erstellen. Ich empfehle, die hier bereitgestellten Beispiele auszuprobieren und Änderungen vorzunehmen, um zu sehen, wie sich die Farbverläufe auswirken, und Ihre eigenen benutzerdefinierten Hintergrundverläufe zu erstellen.

Wir wollen von dir hören. Verwenden Sie die Farbverlaufswiederholungsoption von Divi mit Ihren benutzerdefinierten Hintergründen? Lass es uns in den Kommentaren wissen.