Divi: Vergleich der verschiedenen Gradientenarten

Möchten Sie den Gradient Builder von verwenden Divi aber Sie wissen nicht, welche Art von Farbverlauf Sie wählen sollen?

Verlaufstypen sind Teil des Neuen Divi Verlaufsgenerator . Neue Arten von Farbverläufen Divi ermöglichen es Ihnen, Ihren Hintergründen verschiedene Formen und Farben hinzuzufügen. 

In diesem Artikel vergleichen wir diese Arten von Farbverläufen und zeigen Ihnen, wie Sie damit einzigartige Hintergründe erstellen können!

Lassen Sie uns beginnen.

Was sind die Divi-Verlaufstypen?

Der neue Verlaufsgenerator von Divi fügt mehrere neue Verlaufsfunktionen hinzu, darunter Verlaufstypen. Es stehen vier Arten von Farbverläufen zur Auswahl:

• linear
• Zirkulation
• elliptisch
• konisch

Jeder der Typen zeigt den Farbverlauf anders an. Sie werden verwendet, um den darzustellenden Verlauf als lineares Farbmuster, in einem Kreis, einer Ellipse oder einem Kegel zu formen. Wir werden sie in unseren Beispielen im Detail sehen.

Farbverlaufstypen werden auch von anderen Steuerelementen beeinflusst, wie z. B. Position, Wiederholung oder Nichtwiederholung, Maßeinheit für die Bildlaufleiste des Farbverlaufs und Platzierung des Farbverlaufs über dem Hintergrund.

Jede Anpassung kann einen kleinen oder großen Einfluss auf den Gradienten haben. Der Farbverlauf kann subtil sein oder auffallen. Kleine oder große Änderungen können mit nur einer Einstellung vorgenommen werden.

Schauen wir uns vor diesem Hintergrund einige Beispiele für Farbverläufe an, die die einzelnen Farbverlaufstypen verwenden. Wir zeigen drei Beispiele für jeden Verlaufstyp. 

Der erste ist ein Standard-Verlaufstyp, den Sie im Internet sehen werden. Die nächsten beiden werden etwas experimenteller sein, nur um zu sehen, was Sie mit den Arten von Farbverläufen machen können.

Beispiele für Gradiententypen

Als Beispiele für Verlaufstypen verwenden wir den Hero-Bereich der Homepage der kostenloses Bed & Breakfast-Layoutpaket erhältlich in Division. Dieser Abschnitt hat bereits einen Farbverlauf, aber wir werden ihn ersetzen und etwas experimentieren. 

Wir können entweder den ursprünglichen Hintergrundverlauf entfernen oder ihn ändern. Die Ergebnisse sind die gleichen. Der Einfachheit halber werden wir es ändern.

Wir haben den Titeltext angepasst, indem wir ihn von Schwarz auf Weiß geändert haben.

Linearer Verlaufstyp

Lesen Sie auch: Divi: So verwenden Sie die Musterüberblendung für Hintergrundbilder

Lineare Farbverläufe zeigen den Farbverlauf so an, als wäre er über die Seite verteilt.

Erstes Beispiel des linearen Gradiententyps

Hier ist eine Vorschau auf unser erstes Beispiel. Es zeigt eine hellere Farbe auf der linken Seite des Bildschirms und eine dunklere Farbe auf der rechten Seite mit einem fließenden Übergang zwischen ihnen.

Um dieses Beispiel zu erstellen, fügen Sie zwei Farben hinzu. das Premier ist rgba(92,158,82,0.76) an der 0%-Position. das zweite ist rgba(0,10,4,0.76) an der 97%-Position.

• Gradientenstopps:
  • 0 %: rgba(92,158,82,0.76)
  • 97 %: rgba(0,10,4,0.76)

Dann ändern Sie die Typ Farbverlauf auf Linear und stellen Sie die ein Anleitung  über 131 Grad. dass er nicht wiederholen. Stellen Sie die einEinheit auf Prozent. Platzieren Sie den Farbverlauf über dem Hintergrundbild.

• Verlaufstyp: Linear
• Steigungsrichtung: 131 Grad
• Farbverlauf wiederholen: NEIN
• Steigungseinheit: Prozent
• Quadratische Steigung über Hintergrundbild: JA

Zweites Beispiel des linearen Verlaufstyps

Hier ist eine Vorschau des zweiten Beispiels für einen linearen Farbverlauf. Es funktioniert wie das erste, aber es hat einen harten Anschlag auf der linken Seite, wo ein dunklerer Farbton übernimmt.

Um diesen zu erstellen, fügen Sie drei Verlaufsstopps hinzu. das Premier ist rgba(18,76,41,0.76) an der 13%-Position. das zweite ist rgba(92,158,82,0.76) an der 13%-Position. Farbe 3 ist rgba(18,76,41,0.76) an der 34%-Position.

• Gradientenstopps:
  • 13 %: rgba(18,76,41,0.76)
  • 13 %: rgba(92,158,82,0.76)
  • 34 %: rgba(18,76,41,0.76)

Stellen Sie dann die ein Typ Farbverlauf auf Linear und stellen Sie die ein Anleitung  über 90 Grad. dass er nicht wiederholen . Ändere dasEinheit Prozentsatz. Platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Linear
• Steigungsrichtung: 90 Grad
• Farbverlauf wiederholen: NEIN
• Steigungseinheit: Prozent
• Quadratische Steigung über Hintergrundbild: JA

Drittes Beispiel des linearen Verlaufstyps

Unser drittes Beispiel platziert eine helle Linie diagonal über die obere rechte Ecke und berührt eine dunklere Linie.

Dieser hat drei Farben. Farbe 1 ist rgba(92,158,82,0.76) an der 13%-Position. Farbe 2 ist rgba(92,158,82,0.76) an der 23%-Position. Das dritte Farbe ist rgba(18,76,41,0.76) an der 32%-Position.

• Gradientenstopps:
  • 13 %: rgba(92,158,82,0.76)
  • 23 %: rgba(92,158,82,0.76)
  • 32 %: rgba(18,76,41,0.76)

Definiere das Typ Gradient zu Linear in a Richtung von 209 Grad. Geboren die nicht wiederholen und setze dieEinheit auf Prozent. Platzieren Sie den Farbverlauf über dem Hintergrundbild.

• Verlaufstyp: Linear
• Steigungsrichtung: 209 Grad
• Farbverlauf wiederholen: NEIN
• Steigungseinheit: Prozent
• Quadratische Steigung über Hintergrundbild: JA

Kreisförmiger Verlaufstyp

Der kreisförmige Verlaufstyp erstellt einen Kreis mit den Farben.

Erstes Beispiel für den kreisförmigen Verlaufstyp

Unser erstes kreisförmiges Verlaufsbeispiel platziert eine helle Farbe in der Mitte und eine dunklere Farbe an den Rändern.

Dieser hat 2 Farben. das Premier ist rgba(92,158,82,0.76) an der 0%-Position. das zweite ist rgba(0,10,4,0.76) an der 62%-Position.

• Gradientenstopps:
  • 0 %: rgba(92,158,82,0.76)
  • 62 %: rgba(0,10,4,0.76)

Definiere das Typ Farbverlauf auf Circular. Zentrieren Sie die Richtung . Stellen Sie sicher, dass er nicht wiederholen , ändere dasEinheit als Prozentsatz und platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Kreisförmig
• Verlaufsposition: Mitte
• Farbverlauf wiederholen: NEIN
• Steigungseinheit: Prozent
• Quadratische Steigung über Hintergrundbild: JA

Zweites Beispiel des kreisförmigen Verlaufstyps

Dieser Farbverlauf platziert eine klare kreisförmige Kante in der Mitte des Bildschirms.

Es hat vier Farben. Zwei Farben werden überlagert. das Premier ist rgba(18,76,41,0.76) an der 13%-Position. das zweite ist rgba(92,158,82,0.76) an der 33%-Position. Farbe 3 ist rgba(92,158,82,0.76) an der 51%-Position. Farbe 4 ist rgba(18,76,41,0.76). Es wird an Position 51 % über Farbe 3 platziert.

• Gradientenstopps:
  • 13 %: rgba(18,76,41,0.76)
  • 33 %: rgba(92,158,82,0.76)
  • 51 %: rgba(92,158,82,0.76)
  • 51 %: rgba(18,76,41,0.76)

Definiere das Typ Gradient zu Circular und platzieren Sie die Anleitung  an der linken oberen Ecke. Stellen Sie sicher, dass er nicht wiederholen , ändere das Einheit als Prozentsatz und platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Kreisförmig
• Verlaufsposition: Oben links
• Farbverlauf wiederholen: NEIN
• Steigungseinheit: Prozent
• Quadratische Steigung über Hintergrundbild: JA

Drittes Beispiel des kreisförmigen Verlaufstyps

Dieses Beispiel platziert mehrere helle Kreise in der dunkelsten Farbe, beginnend in der Mitte des Kreises.

Dieser stapelt auch zwei Farben in einer bestimmten Reihenfolge, um dieses Design zu erreichen. Das Premiere Farbe ist rgba(18,76,41,0.76) an der 13%-Position. Farbe 2 ist rgba(18,76,41,0.76) an der 44%-Position. Das troisième Farbe überlappt die zweite Farbe. Dies ist rgba (92,158,82,0.76) an der 44%-Position. Farbe 4 ist rgba(92,158,82,0.76) an der 51%-Position.

• Gradientenstopps:
  • 13 %: rgba(18,76,41,0.76)
  • 44 %: rgba(18,76,41,0.76)
  • 44 %: rgba(92,158,82,0.76)
  • 51 %: rgba(92,158,82,0.76)

Ändern Sie es Verlaufstyp im Kreis. Stelle das Richtung am unteren Rand. Wiederholung Dieses hier. Stellen Sie die einEinheit auf Prozent und platzieren Sie den Farbverlauf über dem Hintergrundbild.

• Verlaufstyp: Kreisförmig
• Verlaufsposition: Unten
• Farbverlauf wiederholen: JA
• Steigungseinheit: Prozent
• Quadratische Steigung über Hintergrundbild: JA

Elliptischer Verlaufstyp

Elliptische Farbverläufe platzieren Farben in Form einer Ellipse.

Erstes Beispiel des elliptischen Gradiententyps

Unser erstes elliptisches Beispiel platziert eine helle Ellipse in der Mitte des Bildschirms mit einer dunkleren Farbe darum herum.

Dieser hat zwei Farben. das Premier ist rgba(92,158,82,0.76) an der 0%-Position. das zweite ist rgba(0,10,4,0.76) an der 50%-Position.

• Gradientenstopps:
  • 0 %: rgba(92,158,82,0.76)
  • 50 %: rgba(0,10,4,0.76)

Ändern Sie es Verlaufstyp in elliptisch. Stellen Sie die ein Richtung auf Mitte. Überzeugen Sie sich von diesem nicht wiederholen , verstelle dieEinheit on Percentage und platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Elliptisch
• Verlaufsposition: Mitte
• Farbverlauf wiederholen: NEIN
• Steigungseinheit: Prozent
• Quadratische Steigung über Hintergrundbild: JA

Zweites Beispiel des elliptischen Gradiententyps

Unser zweites Beispiel platziert viele dünne kreisförmige Linien im Verlauf.

Es hat zwei Farben. das Premier ist rgba(92,158,82,0.76) an der 34pt-Position. das zweite ist rgba(0,10,4,0.76) an Position 39pt.

• Gradientenstopps:
  • 34pt: rgba(92,158,82,0.76)
  • 39pt: rgba(0,10,4,0.76)

Ändern Sie es Typ Gradient zu Elliptical und passen Sie die an Anleitung  links. Habe diesen bei wiederholen. Ändere dasEinheit in Punkten. Platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Elliptisch
• Verlaufsposition: Rechts
• Farbverlauf wiederholen: JA
• Gradienteneinheit: Punkte (pt)
• Quadratische Steigung über Hintergrundbild: JA

Drittes Beispiel des elliptischen Gradiententyps

Unser drittes Beispiel platziert viele Halbkreise im Farbverlauf.

Dieser hat zwei Farben. das Premier ist rgba(32,68,35,0.73) an Position 34vmin. das zweite ist rgba(0,10,4,0.76) an Position 39vmin.

• Gradientenstopps:
  • 34vmin: rgba(32, 68, 35, 0.73)
  • 39vmin: rgba(0,10,4,0.76)

Ändern Sie es Typ Gradient zu Elliptical und passen Sie die an Anleitung  auf Hoch. Habe diesen bei wiederholen. Ändere dasEinheit im Viewport-Minimum. Platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Elliptisch
• Verlaufsposition: Oben
• Farbverlauf wiederholen: JA
• Farbverlaufseinheit: Viewport Minimum (vmin)
• Quadratische Steigung über Hintergrundbild: JA

Konischer Verlaufstyp

Siehe auch: Divi: So erstellen Sie Hintergrundübergänge zwischen Elementen

Der konische Farbverlaufstyp zeigt den Farbverlauf als Kegel an, als würde der Kegel von oben betrachtet.

Erstes Beispiel für den konischen Verlaufstyp

In diesem Beispiel wird eine diagonale Linie von der Mitte des Farbverlaufs nach links mit einer hellen Farbe auf der einen und einer dunklen Farbe auf der anderen Seite platziert.

Es hat zwei Farben. das Premier ist rgba(92,158,82,0.76) an der 0%-Position. das zweite ist rgba(0,10,4,0.76) an der 50%-Position.

• Gradientenstopps:
  • 0 %: rgba(92,158,82,0.76)
  • 50 %: rgba(0,10,4,0.76)

Ändern Sie es Verlaufstyp in konisch. Verstelle die Richtung über 221 Grad. Zentrieren Sie die Position et wiederhole es nicht . Platzieren Sie den Farbverlauf über dem Bild.

• Verlaufstyp: Konisch
• Steigungsrichtung: 221 Grad
• Position: Mitte
• Farbverlauf wiederholen: NEIN
• Quadratische Steigung über Hintergrundbild: JA

Zweites Beispiel des konischen Farbverlaufstyps

Dieses Beispiel ähnelt dem vorherigen, aber es platziert die Mittellinie nach oben.

Dieser hat vier Farben. das Premier ist rgba(20,40,20,0.76) an der 7%-Position. Farbe 2 ist rgba(30,73,25,0.68) an der 24%-Position. Farbe 3 ist rgba(103,132,30,0.68) an der 65%-Position. Das quatrième Farbe ist rgba(38,86,26,0.68) an der 85%-Position.

• Gradientenstopps:
  • 7 %: rgba(20,40,20,0.76)
  • 24 %: rgba(30,73,25,0.68)
  • 65 %: rgba(103,132,30,0.68)
  • 85 %: rgba(38,86,26,0.68)

Definiere das Verlaufstyp auf konisch und die Richtung bei 0 Grad. Zentrieren Sie die Position . Geboren die nicht wiederholen und platzieren Sie es über dem Bild.

• Verlaufstyp: Konisch
• Steigungsrichtung: 0 Grad
• Position: Mitte
• Farbverlauf wiederholen: NEIN
• Quadratische Steigung über Hintergrundbild: JA

Drittes Beispiel des konischen Farbverlaufstyps

Unser letztes Beispiel platziert eine Reihe von Linien von der oberen Mitte des Farbverlaufs nach außen in alle Richtungen.

Dieser hat zwei Farben. das Premier ist rgba(30,73,25,0.68) an der 5-Grad-Position. das zweite ist rgba(20,40,20,0.76) an der 7-Grad-Position.

• Gradientenstopps:
  • 5 Grad: rgba(30,73,25,0.68)
  • 7 Grad: rgba(20,40,20,0.76)

Stellen Sie die Verlaufstyp auf Konisch und die Anleitung  bei 221 Grad Stelle das Position oben. Wiederholen dieses und platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Konisch
• Steigungsrichtung: 221 Grad
• Position: Oben
• Farbverlauf wiederholen: JA
• Quadratische Steigung über Hintergrundbild: JA

Laden Sie DIVI jetzt herunter!!!

Zusammenfassung

Dies ist unser Blick auf den Vergleich von Verlaufstypen in Divi's Gradient Builder. 

Wie Sie an diesen Beispielen sehen können, sind die Einstellungen einfach, aber jede von ihnen kann einen großen Unterschied in der Gestaltung des Farbverlaufs bewirken. 

Experimentieren Sie für beste Ergebnisse mit Verlaufstypen mit unterschiedlichen Richtungen und Positionen und schalten Sie die Wiederholungsoption ein oder aus, um 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 Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.

Zögern Sie nicht, auch unseren Leitfaden zu konsultieren 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.

...