Kostenloses Elementor-Gradiententext-Widget
Das Heading-Widget von Elementor nimmt nur eine Volltextfarbe an, sodass Farbverlaufstext normalerweise bedeutet, dass CSS mit geschrieben wird background-clip: text. Das Gradient Headline Widget im kostenlosen Master Addons Plugin macht es aus dem Panel Geben Sie die Überschrift ein, wählen Sie zwei Farben, wählen Sie einen linearen oder radialen Gradienten, und die Buchstaben füllen sich damit Sie erhalten außerdem einen separaten Hover-Gradienten, 13 Blend-Modi, einen Text-Schatten, einen Link und eine Auswahl an Überschriften-Tag Es passt zu Heldentiteln, Abschnittsüberschriften und Verkaufsbannern.
So fügen Sie Gradiententext in Elementor hinzu
Sie benötigen Elementor und das kostenlose Plugin Master Addons Kein benutzerdefiniertes CSS und kein Elementor Pro.
- Installieren und aktivieren Master Addons von WordPress.org.
- Bearbeiten Sie Ihre Seite mit Elementor, durchsuchen Sie das Widgets-Panel nach Gradientenüberschrift Und ziehen Sie es hinein.
- Geben Sie Ihren Text ein ÜberschriftLegen Sie dann den Titel HTML Tag und die Ausrichtung fest.
- Wählen Sie im Stil, Gradientenstil die erste Farbe und die zweite Farbe aus und passen Sie die Standort-Slider an.
- Wählen Sie Linear, stellen Sie den Winkel oder Radial ein und legen Sie die Position fest.
- Legen Sie die Typografie fest, versuchen Sie es mit einem Mischmodus über Ihrem Hintergrund und fügen Sie bei Bedarf einen Hover-Gradienten hinzu.
Screenshots zu jedem Schritt sind in der Verlaufstext-Anleitung.
Zwei farbige lineare oder radiale Gradienten
Im Stil, Gradientenstil(einstellen Textfarbe Zu Gradient (oder Classic für eine einfarbige Farbe) Wählen Sie den ersten Farbe und die Zweite FarbeUnd bewegen Sie jeden Standort Schieberegler, um zu entscheiden, wo sich einer in den anderen einfügt. Typ Wechselt zwischen Linear, mit einem Winkel (180 Grad laufen standardmäßig von oben nach unten) und Radial mit einem Position Wie Center Center Für einen Farbverlauf, der sich hinter einen ganzen Abschnitt statt Text bewegt, siehe die Animierter Gradient BG Erweiterung (Pro).
- Normal und Hover Tabs: Setzen Sie einen zweiten Verlauf, der angezeigt wird, wenn Besucher mit der Überschrift fahren.
- Jeder Farbverlauf verwendet zwei Farbstopps Für drei oder mehr Farben benötigen Sie benutzerdefiniertes CSS.
- Standardwerte laufen von lila (#9929 ea) bis rot (#FB083 E), also ändern Sie sie zuerst in Ihre Markenfarben.
Elementorüberschrift mit CSS vs. Gradient-Überschrift
Sie können mit dem eigenen Heading-Widget von Elementor Verlaufstext erstellen, wenn Sie sich mit CSS wohl fühlen. Hier erfahren Sie, was jede Route beinhaltet.
| Merkmal | Elementorüberschrift + CSS | Master Addons Gradient Headline |
|---|---|---|
| Einrichtung | Fügen Sie CSS mit Background-Clip hinzu: Text in WordPress Zusätzliches CSS, Elementor Pro Custom CSS oder die kostenlosen Master Addons Benutzerdefinierte CSS-Erweiterung | Wählen Sie Farben im Panel |
| Gradiententypen | Alles, was CSS zulässt, einschließlich drei oder mehr Farben | Linear oder radial, zwei Farbanschläge |
| Schwebegradient | Zusätzliches CSS | Eingebaute Hover-Registerkarte |
| Mischmodi und Schatten | Zusätzliches CSS | 13 Mischmodi und ein Textschatten-Regler |
| Preis | Kostenlos, wenn Sie das CSS selbst schreiben | Kostenlos mit Master Addons |
Schreiben Sie CSS, wenn Sie mehr als zwei Farben oder einen animierten Farbverlauf benötigen Verwenden Sie Gradient Headline, wenn Sie es visuell in einer Minute einrichten möchten Verwandte kostenlose Widgets: Doppelüberschrift und Animierte Schlagzeilen.
Typografie, Mischmodi und Textschatten
Jeder Tab hat seinen eigenen Typografie„Daher können sich auch Schriftart, Größe und Gewicht im Schwebeflug ändern. Mischmodus Bietet 13 Optionen, von Normal, Multiplizieren und Bildschirm bis hin zu Differenz und Leuchtkraft, die den Farbverlauf mit einem Bild oder einer Farbe hinter dem Text mischen. Text Schatten Fügt Farbe, Unschärfe und Offset hinzu, um zusätzliche Tiefe oder Lesbarkeit gegenüber ausgelasteten Fotos zu gewährleisten.
- Gradienten sind reines CSS, es gibt also kein Bild zum Laden.
- Mischmodi reagieren auf alles, was sich hinter der Überschrift befindet, also sehen Sie sich diese im realen Hintergrund an.
- Halten Sie genügend Kontrast zwischen beiden Farben und dem Hintergrund für die Lesbarkeit.
Link, Heading-Tag und Ausrichtung
Fügen Sie im Inhaltsregister a hinzu Überschriften-url Um die ganze Überschrift zu einem Link zu machen Wählen Sie die Titel HTML Tag (H1 bis H6, div, span oder p), damit die Überschrift zu Ihrer Seitenstruktur passt und eingestellt wird Ausrichtung Links, Mitte oder rechts zu.
- Verwenden Sie ein H1 pro Seite, normalerweise den Heldentitel, und H2 für Abschnittstitel.
- Eine verknüpfte Verlaufskurs funktioniert gut für ein Sale-Banner, das zum Shop geht.
- Der Überschriftstext unterstützt die Inline-Bearbeitung in der Elementor-Vorschau.
Häufig gestellte Fragen zur Überschrift zum Gradienten
Ist das Gradient Headline Widget kostenlos?
Ja. Es ist Teil des kostenlosen Master Addons Plugins und funktioniert mit kostenlosem Elementor, sodass Sie Elementor Pro nicht für Verlaufstext benötigen.
Kann ich mehr als zwei Farben im Verlauf verwenden?
Nein. Jeder Farbverlauf hat zwei Farbstopps, eine erste Farbe und eine zweite Farbe. Durch Verschieben der Standort-Slider ändert sich, wie scharf oder weich die Mischung ist. Fügen Sie für drei oder mehr Farben Ihr eigenes CSS zu einer regulären Überschrift hinzu.
Wird Farbverlaufstext meine Website verlangsamen?
Nein. Der Farbverlauf ist im Überschriftstext einfach CSS, daher muss keine Bilddatei geladen werden.
Kann sich der Verlauf im Schwebeflug ändern?
Ja. Die Hover-Registerkarte im Gradientenstil hat ihre eigenen Farben, Orte, Typ, Winkel oder Position, Typografie, Mischmodus und Textschatten, sodass die Überschrift in einen anderen Verlauf wechseln kann, wenn Besucher mit der Maus darüber fahren.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
