Elementor lässt Sie einen Farbverlaufshintergrund festlegen, aber keinen Farbverlauf auf dem Text selbst Das Standard-Überschriften-Widget nimmt nur eine einfarbige Farbe an, sodass ein mehrfarbiger Titel normalerweise bedeutet, dass Sie Ihr eigenes CSS mit schreiben background-clip: text. Das ist die Lücke, die frei ist Gradient Headline-Widget In Master-Addons für Elementor Füllt.
Mit diesem Widget wählen Sie zwei Farben, wählen einen linearen oder radialen Gradienten, und der Text füllt sich mit diesem Gradienten, ohne Code Sie erhalten auch einen optionalen Textschatten und 13 Mischungsmodi, die steuern, wie sich der Gradient mit dem, was dahinter sitzt, vermischt Dieser Leitfaden deckt jede Einstellung ab, indem er das Widget verwendet, das kostenlos mit Master-Addons ausgeliefert wird.
Hier ist die Art von Verlaufstext, den Sie erstellen werden, eine Überschrift, die über einem Hintergrundbild von einer Farbe zur anderen übergeht:
Bevor Sie beginnen #
- Elementor installiert und aktiv
- Master-Addons für Elementor installiert und aktiv (Installationsführung)
- Eine Seite oder Vorlage, die im Elementor-Editor geöffnet ist
Schritt 1: Fügen Sie das Gradient Headline Widget hinzu #
Durchsuchen Sie im Elementor-Editor das Widget-Panel nach Gradientenüberschrift Und auf deine Seite ziehen Master Addons Widgets tragen das “MA” - Badge, sind also gut zu erkennen Der Editor öffnet den Überschrift zum Gradienten bearbeiten Panel mit drei Registerkarten: Inhalt, Stil und Erweitert.
Schritt 2: Legen Sie den Überschrifteninhalt fest #
Auf der Inhalt Tab, geben Sie Ihren Titel in die ein Überschrift Feld. Die restlichen Felder hier sind die Grundlagen:
- Überschriften-url Macht die ganze Überschrift zu einem Link.
- Ausrichtung Stellt es nach links, in der Mitte oder rechts ein.
- Titel HTML Tag Wählt den Tag aus: H1 bis H6, oder div, span, oder p. Verwenden Sie H1 für den Haupttitel einer Seite und H2 für Abschnittstitel, damit die Seite eine saubere Struktur behält.
Schritt 3: Wählen Sie die Farbverlaufsfarben #
Wechseln Sie zu den Stil Tab und öffnen Gradientenstil. Behalten Textfarbe Auf Gradient eingestellt (Classic gibt eine schlichte Einzelfarbe) Der Farbverlauf verläuft zwischen zwei Farben:
- Farbe Ist die erste Farbe, mit einem Standort Schieberegler (ein Prozentsatz), der festlegt, wo er entlang des Textes sitzt.
- Zweite Farbe Endfarbe ist, mit einer eigenen Standort Schieber.
Legen Sie die beiden Farben auf Ihre Markenpalette fest und stupsen Sie dann die Standort-Slider an, um zu entscheiden, wie viel Text jede Farbe abdeckt. Die Vorschau aktualisiert sich beim Ziehen. Es gibt eine separate gewöhnlich und Schweben Tab auch, so kann sich der Verlauf verschieben, wenn jemand die Überschrift schwebt.
Schritt 4: Wählen Sie den Gradiententyp, linear oder radial #
Die Typ Dropdown stellt die Verlaufsform ein Jede Option tauscht den zusätzlichen Regler, der darunter angezeigt wird:
- radial Breitet die Farben von einem Mittelpunkt aus. Wählen Sie eine Position (wie Center Center), um festzulegen, wo dieser Punkt liegt.
- geradlinig Läuft die Farben in einer geraden Linie Einstellen der Winkel Richtung zu steuern: 180 zeigt die Steigung gerade nach unten, 90 schickt sie rüber.
Radial ist gut für ein Leuchten aus der Mitte des Textes Linear ist das, was sich die meisten Menschen vorstellen, wenn sie denken “Gradiententext,” ein sauberes Ausbleichen von links nach rechts oder von oben nach unten.
Schritt 5: Fügen Sie einen Textschatten hinzu (optional) #
Die Text Schatten Steuerung fügt Tiefe hinter den Buchstaben hinzu Klicken Sie auf den Bleistift, um die Schattenfarbe, Unschärfe sowie den horizontalen und vertikalen Versatz einzustellen Ein weicher Schatten hilft, dass Verlaufstext lesbar bleibt, wenn er über einem belebten Hintergrundbild sitzt.
Schritt 6: Probieren Sie die 13 Mischungsmodi aus #
Die Mischmodus Dropdown entscheidet, wie sich der Verlaufstext mit dem vermischt, was dahinter sitzt, wie ein Hintergrundbild oder Farbe Es gibt 13 Modi:
- Normal, Multiplizieren, Bildschirm, Overlay
- Verdunkeln, Aufhellen, Farbausweichen, Sättigung
- Farbe, Unterschied, Ausschluss, Farbton, Leuchtkraft
Normal hält den Verlauf so wie er ist Der Rest reagiert auf den Hintergrund: Multiplizieren verdunkelt sich, Bildschirm hellt auf, Differenz kann Farben für einen markanten Look umkehren Am schnellsten wählen Sie, indem Sie sie durchblättern und die Vorschau ansehen, da das Ergebnis von den Farben hinter dem Text abhängt.
Tunen die Typografie Für Schriftart und Größe, während Sie hier sind, dann klicken Sie Veröffentlichen (oder Aktualisieren) um die Seite zu speichern.
Wo Gradiententext gut funktioniert #
- Heldenschlagzeilen, wobei sich ein Farbverlaufstitel von einem Foto oder dunklen Abschnitt abhebt.
- Sektionstitel Das braucht etwas mehr Persönlichkeit als flacher Text.
- Landing-seiten Anpassung des Farbverlaufs an die Farbgebung einer Marke.
- Über Hintergrundbilder, wobei ein Mischmodus den Text in die Szene einbindet.
Häufig gestellte Fragen #
Kann man in Elementor Farbverlauf in Text einfügen?
Nicht mit dem Standard-Überschrift-Widget, das nur eine Volltonfarbe annimmt Das Master Addons Gradient Headline-Widget fügt es hinzu: Wählen Sie zwei Farben, wählen Sie linear oder radial, und der Text wird mit dem Farbverlauf gefüllt, kein benutzerdefiniertes CSS erforderlich.
Wie mache ich Gradiententext in Elementor ohne CSS?
Fügen Sie das Master Addons Gradient Headline Widget hinzu, geben Sie Ihre Überschrift ein, öffnen Sie dann die Registerkarte Stil und setzen Sie die erste Farbe und die zweite Farbe Wählen Sie unter Typ linear oder radial, und der Farbverlauf gilt automatisch für den Text.
Was ist der Unterschied zwischen linearem und radialem Gradiententext?
Ein linearer Verlauf verläuft die Farben in einer geraden Linie, gesetzt durch einen Winkel Ein radialer Verlauf breitet sie von einem mit der Positionssteuerung gewählten Mittelpunkt ausLineare Anzüge blenden von links nach rechts aus; radial passt zu einem Leuchten aus der Mitte.
Was machen die Blendmodi?
Blend-Modi steuern, wie sich der Farbverlaufstext mit dem Hintergrund dahinter vermischt Die 13 Optionen reichen von Normal (kein Blending) bis Multiplizieren, Bildschirm, Overlay, Differenz, und mehr Der Effekt hängt von den Farben hinter dem Text ab, also jeder Vorschau.
Benötige ich Elementor Pro für Verlaufstext?
Nr. Das Gradient Headline-Widget funktioniert mit der kostenlosen Version von Elementor, sodass die Farbverlaufsfarben, -typen, der Textschatten und die Mischungsmodi alle ohne Elementor Pro funktionieren.
Verwandte Lektüre #
- Alle Master Addons Widgets und Erweiterungen
- Gradient Headline Widget für Elementor
- BG-Erweiterung mit animiertem Gradienten (Pro), für ein bewegliches Gefälle hinter einem Abschnitt
- Installation von Master-Addons für Elementor
- Master Addons Popup-Builder
