Möchten Sie benutzerdefinierte Hintergrundmuster mit der Option „Verlaufswiederholung“ erstellen? Divi ?
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 Artikel erfahren Sie, wie Sie die Option „Verlaufswiederholung“ verwenden Divi um benutzerdefinierte Hintergrundmuster zu erstellen.
Lassen Sie uns beginnen.
Siehe auch: Divi: So erstellen Sie ein Kontaktformular, das nach dem Klicken auf eine Schaltfläche angezeigt wird
Was ist Gradientenwiederholung
Die Option Verlaufswiederholung erstellt ein Muster basierend auf den Verlaufsstopps. Verlaufsstopps sind Messungen, die bestimmen, wo Farben im Verlauf erscheinen und enden. Divi und sein Verlaufsgenerator verwenden diese Stopps, um das Muster zu erstellen.
Die letzte Farbe teilt dem Verlauf mit, wo sich der Haltepunkt im Verlauf befindet. Vor diesem Haltepunkt können Sie so viele Farben haben, wie Sie möchten.
Le Verlaufsgenerator wird es dann wiederholen, um den Bildschirm zu füllen, der das Muster erzeugt. Die Option kann jedem Abschnitt, jeder Zeile, Spalte oder jedem Modul hinzugefügt und zusammen verwendet werden.
Aktivieren Sie die Option „Hintergrundverlauf“.
Um die Option zu aktivieren Farbverlauf wiederholen, öffnen Sie die Einstellungen des Abschnitts, indem Sie auf das Zahnradsymbol klicken. Es funktioniert auch mit Zeilen, Spalten und Module.
Scrollen Sie zu Hintergrund . Registerkarte auswählen Hintergrund mit Farbverlauf und klicken Sie auf Hintergrundverlauf hinzufügen.
Unterhalb der Verlaufsstoppleiste befindet sich eine Einstellung namens Farbverlauf 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, z. B. der Farbverlaufseinheit.
Gradienteneinheiten
Die Gradienteneinheit ist die Maßeinheit. Dies gibt an, was die Farbverlaufsstoppnummern auf der Farbverlaufsleiste anzeigen, wodurch bestimmt wird, wie Farbverlaufsstopps gemessen werden. Dies wirkt sich auf das Muster aus, das durch die Wiederholungsoption erstellt wird.
Der Hintergrundgradientengenerator von Divi bietet 15 Einheiten. Sehen wir uns ein Beispiel der vier beliebtesten Optionen an. Wie wir in unseren Beispielen sehen werden, ändert sich das Ergebnis je nach Anzahl der Gradientenstopps und Ihren Einstellungen.
Prozent (Prozent)
Prozent misst Steigungsstopps in Prozent. Dadurch werden die Gradientenpunkte basierend auf dem übergeordneten Element berechnet. Je kleiner der letzte Verlaufsstich ist, desto enger wird das erzeugte Muster. Wenn Sie die Position einer der Farben anpassen, bewegt sich diese Farbe, während die anderen an Ort und Stelle bleiben.
Pixel (px)
Pixel misst die Anzahl der Pixel für jeden Gradientenstopp. Dadurch erhält der Farbverlauf ein kleineres Muster als bei den meisten anderen Einheitentypen. Das Verschieben der Position der ersten oder letzten Farbe ändert die Position jeder Farbe.
Fensterhöhe (vh)
Der Viewport ist der sichtbare Bereich des Browserfensters. Es wird in Höhe und Breite separat gemessen. Die Fensterhöhe verwendet Gradientenstopps, um den Prozentsatz der Höhe der Fenstergröße zu messen. Das Anpassen der Position der ersten oder letzten Farbe wirkt sich auf alle Farben aus.
Fensterbreite (vw)
Die Fensterbreite verwendet Verlaufsstopps, um den Prozentsatz der Fensterbreite (oder Browserbreite) zu messen. Die Einstellungen ändern sich je nach Breite. Wenn Sie die Zahl vergrößern oder verkleinern, ändert diese bestimmte Farbe ihre Position, während die anderen gleich bleiben.
Beispiele für die Verwendung der Option "Gradient Repeat".
Lesen Sie auch: Divi: So erstellen Sie ein Tablet mit scrollbaren Teaser-Inhalten
Für unsere Beispiele verwenden wir den Call-to-Action-Bereich der Startseite von kostenloses Akupunktur-Layoutpaket erhältlich in Division.
Wir müssen eine Anpassung an der ersten Spalte des Abschnitts vornehmen. Öffne sie Zeilenparameter indem Sie auf das Zahnradsymbol klicken.
Wählen Sie dann die Zahnrad-Symbol für die erste Spalte.
Spalte eins Farbverlauf
Die erste Spalte hat einen eigenen Hintergrundgradienten. Es ist Teil des Layouts. Das werden wir nicht ändern. Wir werden denselben Gradienten in unseren vier Beispielen verwenden. Hier sind die Einstellungen, falls Sie sie benötigen.
- Gradientenstopps:
- 0px: #f4d5b8
- 100px: rgba(244,213,184,0)
Verlaufseinstellungen
- Verlaufstyp: Linear
- Gradientenposition: 180 Grad
- Farbverlauf wiederholen: NEIN
- Steigungseinheit: Prozent
- Quadratischer Farbverlauf über dem Hintergrundbild: NEIN
Abstand
Wir werden links von der Spalte einen Abstand hinzufügen. Greifen Sie auf die Registerkarte zu Design, scrollen Sie zu Abstand und wählen Sie die Tablet-Symbol um die Geräteoptionen zu öffnen.
Fügen Sie 5 % linke Polsterung für Desktop- und Tablettabs hinzu. Wählen Sie die Telefonregisterkarte und löschen Sie die linke Polsterung. Belassen Sie Oben und Rechts auf ihren aktuellen Einstellungen.
- Polsterung
- Oben: 180px
- Links: 5 %
- Links: 80px
Beispiel eins
Unser erstes Beispiel erzeugt ein sich diagonal wiederholendes Muster mit dünnen Linien.
Dieser hat drei Steigungsstopps.
- Gradientenstopps:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Verwenden Sie die folgenden Einstellungen.
- Verlaufstyp: Linear
- Steigungsrichtung: 156 Grad
- Farbverlauf wiederholen: JA
- Farbverlaufseinheit: Pixel
- Quadratischer Farbverlauf über dem Hintergrundbild: nein
Zweites Beispiel
Unser zweites Beispiel erzeugt ein sich diagonal wiederholendes Muster mit größeren Linien.
Dieser hat drei Steigungsstopps.
- Gradientenstopps:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
Für Verlaufseinstellungen,
- Verlaufstyp: Linear
- Steigungsrichtung: 156 Grad
- Farbverlauf wiederholen: JA
- Farbverlaufseinheit: Pixel
- Quadratischer Farbverlauf über dem Hintergrundbild: NEIN
Beispiel drei
Unser drittes Beispiel erstellt ein sich wiederholendes kreisförmiges Muster mit mittelgroßen Kreisen.
Dieser hat drei Steigungsstopps.
- Gradientenstopps
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Wenden Sie die folgenden Verlaufseinstellungen an
- Verlaufstyp: Kreisförmig
- Verlaufsposition: Unten
- Farbverlauf wiederholen: JA
- Steigungseinheit: Prozent
- Quadratischer Farbverlauf über dem Hintergrundbild: NEIN
Beispiel 4
Unser viertes Beispiel erstellt ein kreisförmiges Muster mit großen Kreisen.
Dieser hat drei Steigungsstopps.
- Gradientenstopps:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
Ändern Sie die Verlaufseinstellungen wie folgt:
- Verlaufstyp: Kreisförmig
- Verlaufsposition: Mitte
- Farbverlauf wiederholen: JA
- Steigungseinheit: Prozent
- Quadratischer Farbverlauf über dem Hintergrundbild: nein
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Dies ist unser Blick darauf, wie Sie die Option verwenden können Farbverlauf wiederholen von Divi, um benutzerdefinierte Hintergründe zu erstellen. Viele Anpassungen in den Verlaufseinstellungen wirken sich auf die Gestaltung des Verlaufs aus.
Gradient Repeat funktioniert gut mit all diesen Optimierungen, um auf einfache Weise interessante benutzerdefinierte Hintergrundmuster zu erstellen.
Wir empfehlen, 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 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.
...
