Vergleich der Verlaufstypen im Verlaufsgenerator von Divi

Verlaufstypen sind Teil des neuen Divi Gradient Builder. Die neuen Divi-Verlaufstypen geben Ihnen die Möglichkeit, Ihren Hintergründen verschiedene Formen und Farben hinzuzufügen. In diesem Beitrag vergleichen wir diese Verlaufstypen und zeigen Ihnen, wie Sie sie verwenden können, um einzigartige Hintergründe zu erstellen!

Lass uns anfangen.

Was sind Divi-Verlaufstypen?

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

• Linear
• Kreisförmig
• Elliptisch
• Konisch

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

Die Verlaufstypen werden auch von anderen Steuerelementen beeinflusst, wie z. B. der Position, Wiederholung oder nicht, der Maßeinheit für den Verlaufsschieberegler und der Platzierung des Verlaufs ü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 einer einzigen 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 Standardtyp von Farbverlauf, den Sie im Internet sehen würden. Die nächsten beiden werden etwas experimenteller sein, nur um zu sehen, was mit den Gradiententypen gemacht werden kann.

Beispiele für Verlaufstypen

Für die Beispiele für Gradiententypen verwende ich den Hero-Bereich von der Zielseite des kostenlosen Bed and Breakfast-Layoutpakets, das in Divi verfügbar ist. Dieser Abschnitt hat bereits einen Farbverlauf, aber wir werden ihn ersetzen und etwas experimentieren. Wir können den ursprünglichen Hintergrundverlauf entweder löschen oder ändern. Die Ergebnisse sind die gleichen. Der Einfachheit halber werde ich es ändern.

Ich habe den Titeltext angepasst und ihn von Schwarz auf Weiß geändert.

Linearer Verlaufstyp

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

Erstes Beispiel für einen linearen Gradienten

Hier ist ein Blick 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. Der erste ist rgba(92,158,82,0,76) an der 0%-Position. Der zweite ist rgba(0,10,4,0,76) an der 97%-Position.

• Farbe 1: rgba(92.158.82.0.76) (bei 0% Position)
• Farbe 2: rgba(0,10,4,0.76) (bei 97% Position)

Ändern Sie als Nächstes den Verlaufstyp in Linear und stellen Sie die Richtung auf 131 Grad ein. Lass es nicht wiederholen . Stellen Sie die Einheit auf Prozent ein. Platzieren Sie den Farbverlauf über dem Hintergrundbild.

• Verlaufstyp: Linear
• Richtung: 131 Grad
• Wiederholen: Nein
• Einheit: Prozent
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Zweites Beispiel für einen linearen Gradienten

Hier ist ein Blick auf das zweite Beispiel 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. Der erste ist rgba(18,76,41,0,76) an der 13%-Position. Der 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.

• Farbe 1: rgba(18,76,41,0,76) (bei 13% Position)
• Farbe 2: rgba(92.158.82.0.76) (bei 13% Position)
• Farbe 3: rgba(18,76,41,0,76) (bei 34% Position)

Stellen Sie als Nächstes den Verlaufstyp auf Linear und die Richtung auf 90 Grad ein. Lass es nicht wiederholen . Ändern Sie die Einheit in Prozent. Platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Linear
• Richtung: 90 Grad
• Wiederholen: Nein
• Einheit: Prozent
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Drittes Beispiel für einen linearen Gradienten

Unser drittes Beispiel platziert eine helle Farblinie diagonal in der oberen rechten Ecke und berührt eine dunklere Farblinie.

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. Die dritte Farbe ist rgba(18,76,41,0,76) an der 32%-Position.

• Farbe 1: rgba(92.158.82.0.76) (bei 13% Position)
• Farbe 2: rgba(92.158.82.0.76) (bei 23% Position)
• Farbe 3: rgba(18,76,41,0,76) (bei 32% Position)

Stellen Sie den Verlaufstyp auf Linear bei einer Richtung von 209 Grad ein. Lassen Sie es nicht wiederholen und stellen Sie die Einheit auf Prozent. Platzieren Sie den Farbverlauf über dem Hintergrundbild.

• Verlaufstyp: Linear
• Richtung: 209 Grad
• Wiederholen: Nein
• Einheit: Prozent
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Kreisförmiger Verlaufstyp

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

Erstes Beispiel für einen kreisförmigen Farbverlauf

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

Dieser hat 2 Farben. Der erste ist rgba(92,158,82,0,76) an der 0%-Position. Der zweite ist rgba(0,10,4,0,76) an der 62%-Position.

• Farbe 1: rgba(92.158.82.0.76) (bei 0% Position)
• Farbe 2: rgba(0,10,4,0,76) (bei 62 % Position)

Stellen Sie den Verlaufstyp auf Kreisförmig ein. Richtung zentrieren . Lassen Sie es nicht wiederholen , ändern Sie die Einheit in Prozent und platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Kreisförmig
• Richtung: Mitte
• Wiederholen: Nein
• Einheit: Prozent
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Zweites Beispiel für einen kreisförmigen Farbverlauf

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

Es hat vier Farben. Zwei Farben werden gestapelt. Der erste ist rgba(18,76,41,0,76) an der 13%-Position. Der 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 befindet sich an der Position 51 % über Farbe 3.

• Farbe 1: rgba(18,76,41,0,76) (bei 13% Position)
• Farbe 2: rgba(92.158.82.0.76) (bei 33% Position)
• Farbe 3: rgba(92.158.82.0.76) (bei 51% Position)
• Farbe 4: rgba(18,76,41,0,76) (bei 51 % Position)

Stellen Sie den Verlaufstyp auf Kreisförmig ein und platzieren Sie die Richtung oben links. Lassen Sie es nicht wiederholen , ändern Sie die Einheit in Prozent und platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Kreisförmig
• Richtung: Oben links
• Wiederholen: Nein
• Einheit: Prozent
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Drittes Beispiel für einen kreisförmigen Farbverlauf

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

Dieser stapelt auch zwei Farben in einer bestimmten Reihenfolge, um dieses Design zu erhalten. Die erste 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. Die dritte Farbe wird über der zweiten Farbe gestapelt. Es ist rgba (92.158.82.0,76) an der 44%-Position. Farbe 4 ist rgba(92,158,82,0,76) an der 51%-Position.

• Farbe 1: rgba(18,76,41,0,76) (bei 13% Position)
• Farbe 2: rgba(18,76,41,0,76) (bei 44% Position)
• Farbe 3: rgba(92.158.82.0.76) (bei 44% Position)
• Farbe 4: rgba(92.158.82.0.76) (bei 51% Position)

Ändern Sie den Verlaufstyp in Kreisförmig. Platzieren Sie die Richtung unten. Haben Sie dieses zu wiederholen . Stellen Sie die Einheit auf Prozent ein und platzieren Sie den Farbverlauf über dem Hintergrundbild.

• Verlaufstyp: Kreisförmig
• Richtung: Unten
• Wiederholung: Ja
• Einheit: Prozent
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Elliptischer Verlaufstyp

Elliptische Farbverläufe platzieren die Farben in einer Ellipsenform.

Erstes Beispiel für einen elliptischen Gradienten

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

Dieser hat zwei Farben. Der erste ist rgba(92,158,82,0,76) an der 0%-Position. Der zweite ist rgba(0,10,4,0,76) an der 50%-Position.

• Farbe 1: rgba(92.158.82.0.76) (bei 0% Position)
• Farbe 2: rgba(0,10,4,0.76) (bei 50% Position)

Ändern Sie den Verlaufstyp in Elliptisch. Stellen Sie die Richtung auf Mitte ein. Lassen Sie diese nicht wiederholen , stellen Sie die Einheit auf Prozent und platzieren Sie sie über dem Hintergrundbild.

• Verlaufstyp: Elliptisch
• Richtung: Mitte
• Wiederholen: Nein
• Einheit: Prozent
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Zweites Beispiel für einen elliptischen Gradienten

Unser zweites Beispiel platziert viele feine kreisförmige Linien im Verlauf.

Es hat zwei Farben. Der erste ist rgba(92,158,82,0,76) an der 34pt-Position. Die zweite ist rgba(0,10,4,0,76) an der 39pt-Position.

• Farbe 1: rgba(92,158,82,0,76) (bei 34pt-Position)
• Farbe 2: rgba(0,10,4,0,76) (an 39pt-Position)

Ändern Sie den Verlaufstyp in Elliptisch und stellen Sie die Richtung auf Links ein. Haben Sie dieses zu wiederholen . Ändern Sie die Einheit in Punkte. Platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Elliptisch
• Richtung: Links
• Wiederholung: Ja
• Einheit: Punkte
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Drittes Beispiel für einen elliptischen Gradienten

Unser drittes Beispiel platziert viele Halbkreise innerhalb des Farbverlaufs.

Dieser hat zwei Farben. Der erste ist rgba(32,68,35,0,73) an der 34vmin-Position. Der zweite ist rgba(0,10,4,0,76) an der 39vmin-Position.

• Farbe 1: rgba(32,68,35,0.73) (bei 34vmin Position)
• Farbe 2: rgba(0,10,4,0.76) (bei 39vmin Position)

Ändern Sie den Verlaufstyp in Elliptisch und stellen Sie die Richtung auf Oben ein. Haben Sie dieses zu wiederholen . Ändern Sie die Einheit auf Viewport Minimum. Platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Elliptisch
• Richtung: Oben
• Wiederholung: Ja
• Einheit: Viewport-Minimum
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Konischer Verlaufstyp

Der konische Verlaufstyp zeigt den Verlauf in einer Kegelform an, als ob der Kegel von oben gesehen würde.

Erstes Beispiel für einen konischen Gradienten

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. Der erste ist rgba(92,158,82,0,76) an der 0%-Position. Der zweite ist rgba(0,10,4,0,76) an der 50%-Position.

• Farbe 1: rgba(92.158.82.0.76) (bei 0% Position)
• Farbe 2: rgba(0,10,4,0.76) (bei 50% Position)

Ändern Sie den Verlaufstyp in Konisch . Stellen Sie die Richtung auf 221 Grad ein. Zentrieren Sie die Position und wiederholen Sie sie nicht . Platzieren Sie den Farbverlauf über dem Bild.

• Verlaufstyp: Konisch
• Richtung: 221 Grad
• Position: Mitte
• Wiederholen: Nein
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Zweites Beispiel für einen konischen Gradienten

Dieses Beispiel ähnelt dem vorherigen, aber es platziert die Linie von der Mitte nach oben.

Dieser hat vier Farben. Der erste 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. Die vierte Farbe ist rgba(38,86,26,0,68) an der 85%-Position.

• Farbe 1: rgba(20,40,20,0.76) (bei 7% Position)
• Farbe 2: rgba(30,73,25,0,68) (bei 24% Position)
• Farbe 3: rgba(103,132,30,0,68) (bei 65 % Position)
• Farbe 4: rgba(38,86,26,0,68) (bei 85 % Position)

Stellen Sie den Verlaufstyp auf konisch und die Richtung auf 0 Grad ein. Zentrieren Sie die Position . Lassen Sie es nicht wiederholen und platzieren Sie es über dem Bild.

• Verlaufstyp: Konisch
• Richtung: 0 Grad
• Position: Mitte
• Wiederholen: Nein
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Drittes Beispiel für einen konischen Gradienten

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

Dieser hat zwei Farben. Der erste ist rgba(30,73,25,0,68) an der 5-Grad-Position. Der zweite ist rgba(20,40,20,0,76) an der 7-Grad-Position.

• Farbe 1: rgba(30,73,25,0,68) (bei 5 Grad Position)
• Farbe 2: rgba(20,40,20,0,76) (bei 7 Grad Position)

Stellen Sie den Verlaufstyp auf Konisch und die Richtung auf 221 Grad ein. Platzieren Sie die Position ganz oben. Lassen Sie dieses wiederholen und platzieren Sie es über dem Hintergrundbild.

• Verlaufstyp: Konisch
• Richtung: 221 Grad
• Position: Oben
• Wiederholung: Ja
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Endgedanken

Das ist unser Blick auf den Vergleich der Verlaufstypen in Divi's Gradient Builder. Wie Sie in diesen Beispielen sehen können, sind die Einstellungen einfach, aber jede von ihnen kann einen großen Unterschied im Design des Farbverlaufs machen. Um die besten Ergebnisse zu erzielen, probieren Sie die Verlaufstypen mit unterschiedlichen Richtungen und Positionen aus und aktivieren oder deaktivieren Sie die Wiederholungsoption, um zu sehen, was Sie erstellen können.

Wir wollen von dir hören. Haben Sie die verschiedenen Verlaufstypen in Divi Gradient Builder verwendet? Teilen Sie uns Ihre Erfahrungen in den Kommentaren mit.