So wenden Sie eine Verlaufstextfarbe auf Ihre Kopie an, indem Sie nur die integrierten Optionen von Divi verwenden

Egal, welche Art von Website Sie erstellen, das Hervorheben von Text und Inhalten bleibt eine der obersten Prioritäten. Mit den integrierten Optionen von Divi gibt es viele Möglichkeiten, dorthin zu gelangen. Eine der Möglichkeiten, die Sie haben, besteht darin, Ihrer Kopie eine Verlaufstextfarbe zuzuweisen. Dies ist ein großartiger Ansatz, um Ihrer Website Farbe zu verleihen, insbesondere wenn Sie den Rest Ihrer Website sauber und minimalistisch halten. Es hilft, Leerzeichen auszugleichen und verleiht Ihrer Website frischen Wind.

In diesem Tutorial zeigen wir Ihnen, wie Sie Ihrem Text nur mit den integrierten Optionen von Divi eine Verlaufsfarbe geben können.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen. Wir zeigen Ihnen, wie Sie dies mit einer hellen und einer dunklen Farbpalette zum Laufen bringen. Sobald Sie den Ansatz verstanden haben, können Sie alle Arten von Designs mit Verlaufstext erstellen.

Sich nähern

1. Divi-Mischmodi verstehen

Mischmodi funktionieren genau so, wie Sie es von Bildbearbeitungsprogrammen gewohnt sind. Sie basieren auf Schichtstrukturen. Konkret bedeutet dies, dass ein Mischmodus in Divi einer bestimmten Hierarchie folgt:

• Ein auf ein Modul angewendeter Mischmodus mischt das Modul + die darunter liegende Spalte
• Ein auf eine Spalte angewendeter Mischmodus mischt die Spalte + Zeile darunter
• Ein auf eine Zeile angewendeter Mischmodus mischt die Zeile + den darunter liegenden Abschnitt

Für dieses Tutorial müssen Sie verstehen, dass ein auf ein Modul angewendeter Mischmodus mit der darunter liegenden Spalte verschmilzt. Indem wir der Spalte einen Hintergrund mit Farbverlauf und dem betreffenden Modul einen Mischmodus geben, können wir Text mit Farbverlauf erzielen.

2. Wählen Sie zwischen einer vollständig dunklen oder hellen Farbpalette

Damit dies funktioniert, müssen Sie entweder eine vollständig dunkle oder eine helle Farbpalette verwenden. Die von uns verwendeten Mischmodi Aufhellen und Abdunkeln liefern nur das gewünschte Ergebnis, wenn Sie entweder eine vollständig schwarze oder weiße Farbe verwenden. Wenn Sie andere Farben verwenden, wird der Effekt, den wir angewendet haben, irgendwie durchscheinen.

3. Entfernen der gesamten Dachrinnenbreite zwischen Spalten und Modulen

Wie im ersten Teil des Ansatzes erwähnt, verwenden wir Spaltenverlaufshintergründe. Um sicherzustellen, dass dieser Verlaufshintergrund nirgendwo angezeigt wird, wo wir nicht möchten, entfernen wir die gesamte Bundstegbreite. Dadurch stellen wir sicher, dass zwischen den Modulen kein benutzerdefinierter Standardabstand angewendet wird. Um den verlorenen Platz auszugleichen, fügen wir stattdessen manuell benutzerdefinierte Auffüllungen hinzu.

4. Verwenden von Padding, anstatt die Breite eines Elements zu ändern

Und um die Breite eines Designelements anzupassen, verwenden wir benutzerdefinierte linke und rechte Abstände. Eine Änderung der Breite in den Größeneinstellungen würde die Breite des gesamten Moduls ändern und würde ermöglichen, dass der Hintergrund des Spaltenverlaufs auf der linken und rechten Seite angezeigt wird, was wir nicht möchten.

Beginnen wir mit dem Erstellen!

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Lass uns anfangen! Fügen Sie einer neuen oder bestehenden Seite einen regulären Abschnitt hinzu und geben Sie ihr die richtige Hintergrundfarbe (je nachdem, ob Sie das helle oder dunkle Layout neu erstellen möchten).

• Hintergrundfarbe: #ffffff (helles Layout), #000000 (dunkles Layout)

Abstand

Fahren Sie fort, indem Sie dem Abschnitt einige benutzerdefinierte Auffüllungen hinzufügen.

• Obere Polsterung: 215px
• Untere Polsterung: 215px

Zeile 1 hinzufügen

Spaltenstruktur

Fügen Sie dann eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Spalte 2 Hintergrund mit Farbverlauf

Fügen Sie der zweiten Spalte der Zeile einen Hintergrund mit Farbverlauf hinzu. An dieser Stelle platzieren wir im nächsten Teil des Tutorials den Titel Textmodul.

• Farbe 1: #c700ff
• Farbe 2: #32f1ff
• Spalte 2 Gradientenrichtung: 150deg
• Spalte 2 Startposition: 20%
• Spalte 2 Endposition: 60%

Größe

Ändern Sie auch die Größeneinstellungen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Und ändern Sie die Abstandseinstellungen.

• Oberer Rand: 50px
• Unterer Rand: 50px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fahren Sie nun fort und fügen Sie der zweiten Spalte der Zeile, die Sie hinzugefügt haben, ein Textmodul hinzu.

Hintergrundfarbe

Geben Sie Ihrem Modul den richtigen Hintergrund, abhängig von der Art des Layouts, das Sie neu erstellen möchten.

• Hintergrundfarbe: #ffffff (helles Layout), #000000 (dunkles Layout)

Überschriftstexteinstellungen

Ändern Sie als Nächstes die Texteinstellungen für die Überschrift.

• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #000000 (helles Layout), #ffffff (dunkles Layout)
• Überschrift 2 Textgröße: 67px (Desktop), 50px (Tablet), 40px (Telefon)
• Überschrift 2 Buchstabenabstand: -2px

Abstand

Und fügen Sie etwas Bodenpolsterung hinzu. Denken Sie daran, dass wir die untere Auffüllung anstelle des Rands verwenden, um sicherzustellen, dass der Hintergrund des Spaltenverlaufs nicht angezeigt wird.

• Untere Polsterung: 50px

Mischmodus

Damit der Farbverlaufshintergrund der Spalte auf das hinzugefügte Modul angewendet wird, wenden Sie in den Filtereinstellungen einen Mischmodus an.

• Mischmodus: Aufhellen (helles Layout), Abdunkeln (dunkles Layout)

Teilermodul zu Reihe hinzufügen

Sichtweite

Das zweite und letzte Modul, das wir in dieser Reihe benötigen, ist ein Divider-Modul.

• Teiler anzeigen: Ja

Hintergrundfarbe

Ändern Sie die Hintergrundfarbe entsprechend der Art des neu zu erstellenden Layouts.

• Hintergrundfarbe: #ffffff (helles Layout), #000000 (dunkles Layout)

Abstand

Um die Breite des Teilers zu reduzieren, fügen wir links und rechts benutzerdefinierte Polster hinzu.

• Linke Polsterung: 250px
• Rechte Polsterung: 250px

Mischmodus

Fügen Sie erneut einen Mischmodus hinzu, damit der Hintergrund des Spaltenverlaufs angezeigt wird.

• Mischmodus: Aufhellen (helles Layout), Abdunkeln (dunkles Layout)

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die nächste Reihe! Verwenden Sie die folgende Spaltenstruktur:

Spalte 1 Hintergrund mit Farbverlauf

Fahren Sie fort, indem Sie der ersten Spalte einen Hintergrund mit Farbverlauf hinzufügen.

• Farbe 1: #c700ff
• Farbe 2: #32f1ff
• Spalte 1 Gradiententyp: Linear
• Spalte 1 Gradientenrichtung: 105deg
• Spalte 1 Startposition: 20%
• Spalte 1 Endposition: 50%

Spalte 2 Hintergrund mit Farbverlauf

Wir verwenden auch einen Verlaufshintergrund für die zweite Spalte.

• Farbe 1: #32f1ff
• Farbe 2: #c700ff
• Spalte 2 Gradiententyp: Linear
• Spalte 2 Gradientenrichtung: 90deg
• Spalte 2 Startposition: 40%
• Spalte 2 Endposition: 60%

Spalte 3 Hintergrund mit Farbverlauf

Gleiches gilt für die dritte Spalte.

• Farbe 1: #c700ff
• Farbe 2: #32f1ff
• Spalte 3 Gradiententyp: Linear
• Spalte 3 Gradientenrichtung: 85deg
• Spalte 3 Startposition: 20%
• Spalte 3 Endposition: 50%

Größe

Ändern Sie als nächstes die Größeneinstellungen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Und fügen Sie einige benutzerdefinierte linke und rechte Polster hinzu.

• Linke Polsterung: 100px (Desktop & Tablet), 50px (Telefon)
• Rechte Polsterung: 100px (Desktop & Tablet), 50px (Telefon)

Blurb-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie Spalte 1 ein Blurb-Modul mit einem Titel Ihrer Wahl hinzu. Später im Beitrag verwenden wir ein separates Modul, um den Hauptteilinhalt hinzuzufügen.

Symbol auswählen

Wählen Sie ein gewünschtes Symbol aus.

Hintergrundfarbe

Und ändern Sie die Hintergrundfarbe des Blurb-Moduls.

• Hintergrundfarbe: #ffffff (helles Layout), #000000 (dunkles Layout)

Symboleinstellungen

Fahren Sie fort, indem Sie zu den Symboleinstellungen gehen und dort einige Änderungen vornehmen.

• Symbolfarbe: #000000 (helles Layout), #ffffff (dunkles Layout)
• Bild-/Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 51px

Einstellungen für Titeltext

Ändern Sie auch die Einstellungen für den Titeltext.

• Schriftstärke des Titels: Fett
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #000000 (helles Layout), #ffffff (dunkles Layout)
• Abstand der Titelbuchstaben: -1px
• Höhe der Titelzeile: 1.2em

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Werte für Rand und Abstand hinzu.

• Unterer Rand: 5px
• Obere Polsterung: 50px
• Untere Polsterung: 50px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Mischmodus

Zu guter Letzt wenden Sie den richtigen Mischmodus an.

• Mischmodus: Aufhellen (helles Layout), Abdunkeln (dunkles Layout)

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Wir teilen den Titel und den Hauptteil des Blurb-Moduls in zwei Module auf, damit der Mischmodus nur auf das Symbol und den Titel angewendet wird. Fahren Sie fort und fügen Sie ein Textmodul direkt unter dem Blurb-Modul hinzu, das den Hauptinhalt enthält.

Hintergrundfarbe

Fügen Sie als Nächstes eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff (helles Layout), #0c0c0c (dunkles Layout)

Texteinstellungen

Und ändern Sie die Texteinstellungen.

• Text Buchstabenabstand: 0.5px
• Textzeilenhöhe: 2.3em
• Textausrichtung: Begründen
• Textfarbe: Dunkel (helles Layout), Hell (dunkles Layout)

Abstand

Um dem Modul etwas Luft zum Atmen zu geben, fügen Sie einige benutzerdefinierte Abstandswerte in den Abstandseinstellungen hinzu.

• Obere Polsterung: 100px
• Untere Polsterung: 100px
• Linke Polsterung: 70px
• Rechte Polsterung: 70px

Box Schatten

Und um das Ganze abzurunden, fügen Sie auch einen subtilen Boxschatten hinzu.

• Stärke der Box-Schattenunschärfe: 56px
• Stärke der Box-Schattenausbreitung: -12px
• Schattenfarbe: rgba(0,0,0,0.3)

Blurb-Modul und Textmodul zweimal klonen + in verbleibende Spalten platzieren

Zu guter Letzt klonen Sie beide Module, die Sie in Spalte 1 finden, und platzieren Sie die Duplikate in den beiden verbleibenden Spalten. Ändern Sie auch den Inhalt entsprechend.

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Endergebnis.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie auf Ihrer Website Verlaufstext nur mit den integrierten Optionen von Divi erstellen. Damit dieses Tutorial funktioniert und den Ansatz auch an anderen Designs üben kann, ist es notwendig, dass Sie den Ansatzabschnitt dieses Beitrags durchgehen und ihn verstehen, während Sie das Design neu erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!