Springe zum Hauptinhalt

So erstellen Sie einen Farbverlaufstitel in Elementor

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Möchten Sie herausfinden, wie Sie mit Elementor einen Farbverlaufstitel erstellen?

Beim Erstellen einer Webseite oder einer Vorlage mit Elementor, können Sie mit dem Element title ein wenig experimentieren, um die von Ihnen erstellte Seite hervorzuheben. Eines der Experimente, die Sie ausprobieren können, besteht darin, dem Titelelement einen Verlaufseffekt hinzuzufügen.

Dieser Artikel zeigt Ihnen, wie Sie dorthin gelangen.

Sie können auch lesen: So erstellen Sie einen zweifarbigen Titel in Elementor

Der native Titelblock von Elementor bietet keine Optionen zum Einstellen eines Verlaufseffekts. Sie können nur Volltonfarbe für Titeltext verwenden. Sie können jedoch benutzerdefiniertes CSS hinzufügen, um dem Titelelement in Elementor einen Farbverlaufseffekt hinzuzufügen, indem Sie benutzerdefiniertes CSS verwenden, das nur in Elementor Pro verfügbar ist.

Dazu bieten wir Ihnen zwei Methoden an: Wenn Sie die Pro-Version haben und mit CSS vertraut sind, verwenden Sie die erste Methode. Wenn Sie jedoch WordPress-Plugins verwenden möchten, ist die zweite Methode perfekt.

Methode 1: Fügen Sie mit benutzerdefiniertem CSS einen Farbverlaufseffekt zum Titelelement hinzu

Angenommen, Sie haben Ihr Elementor auf die Pro-Version aktualisiert, erstellen Sie eine neue Seite / Vorlage und bearbeiten Sie sie mit Elementor. Sie können auch eine vorhandene Seite oder Vorlage bearbeiten.

Fügen Sie das Title-Widget zum Canvas-Bereich hinzu, indem Sie das Title-Element ziehen und ablegen.

Im Block Titel unter der Registerkarte Inhalt, Wählen Sie eine Titelebene in der Option aus HTML-Tag. Sie können jede beliebige Titelebene verwenden. Sie benötigen dies als CSS-Selektor.

einen Farbverlaufstitel erstellen

Gehen Sie zur Registerkarte fortgeschritten und öffne den Block Benutzerdefiniertes CSS und fügen Sie den folgenden CSS-Code ein.

Selektor h2 {Hintergrundbild: linear-Gradient (nach rechts, # 463f64, # 463f64, # e2285c, # e2285c); -webkit-hintergrundclip: text; Anzeige: Inline-Block; Polsterung: 14px; -webkit-text-fill-color: # 00000000; }

Stellen Sie sicher, dass der Selektor mit der Ebene des Titels übereinstimmt, den Sie im vorherigen Schritt ausgewählt haben.

Sie können die Farben ändern, indem Sie den Hexadezimalcode der gewünschten Farben in die Eigenschaft einfügen Hintergrundbild.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Sie können auch den folgenden Code verwenden, um einen Farbverlaufstitel mit mehr Farben im Farbverlauf zu erstellen.

Selektor .elementor-heading-title {Hintergrund: linear-Gradient (90deg, rot, blau, schwarz); -webkit-hintergrundclip: text; -webkit-text-fill-color: transparent; }
einen Farbverlaufstitel erstellen

Methode 2: Erstellen Sie einen Farbverlaufstitel in Elementor mit einem Plugin

Wenn das Hinzufügen von CSS für Sie beängstigend klingt, gibt es eine einfachere Möglichkeit, einen Farbverlaufstitel in Elementor zu erstellen: durch die Installation einer Add-On-Erweiterung. Eine Erweiterung, mit der Sie einen Farbverlaufstitel erstellen können, ist Glückliche Addons.

Entdecken Sie So installieren (fügen) Sie ein Plugin in WordPress hinzu

Happy Addons ist ein Freemium-Plugin und das Element zum Erstellen eines Verlaufstitels (genannt Gradient Heading) ist in der kostenlosen Version verfügbar. Sie können die Art des Gradienten (radial oder linear), die Position des Gradienten und den Ort festlegen.

Das Titelelement bietet auch die gleichen Farbverlaufsanpassungsoptionen wie Happy Addons.

Hier ist! Sie haben gerade einen Farbverlaufstitel in Elementor erstellt.

Holen Sie sich jetzt Elementor Pro!

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. 404-Fehlerseite Weiterleitung zur Homepage oder zur benutzerdefinierten Seite

404-Fehlerseite Weiterleitung zur Homepage oder zur benutzerdefinierten Seite

Dies ist eine der besten Möglichkeiten, um auf einfache Weise eine 404-Fehlerseite hinzuzufügen, die den Besucher nach der Aktivierung dieses WordPress-Plugins zur Startseite oder benutzerdefinierten Seite weiterleitet.

Alle 404-Fehlerseiten werden zur Startseite oder zu einer benutzerdefinierten URL umgeleitet. Mit diesem WordPress-Plugin können Sie Google den Pagerank Ihrer Website reduzieren, wenn sie viele 404-Fehlerseiten enthält.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

entdecken Sie auch Wie 413 Fehler in WordPress zu beheben

Dieses WordPress-Plugin leitet nicht nur weiter, sondern kann auch eine geeignete Lösung sein, um das Ranking Ihrer Website in den Suchmaschinenergebnissen zu verbessern.

Download | Demo | Web-Hosting

2. SCHUSS 

Woof Woocommerce-Produkte filtern nach Realmag777 Codecanyon

WOOF ist ein leistungsstarkes Premium-Plugin für die WooCommerce-Produktfilterung, das seine Funktionalität erweitert, um Benutzern Ihres Online-Shops die Suche nach Kategorien, benutzerdefinierten Produktattributen, Stichwort und durch personalisierte Preise.

Es bietet unzählige professionelle und Premium-Funktionen und ohne Zweifel wird dies diejenige sein, die Ihnen am meisten auffällt, wenn Sie sie alle ausprobieren. Es wird das verbessern Produktsuche in Ihrem Online-Shop mit außergewöhnlicher Benutzerfreundlichkeit.

Download | Demo | Web-Hosting

3. Kontaktformular 7-Erfolgsumleitung

Kontaktformular 7 Erfolgsumleitung

Kontaktformular 7 Success Redirect ist eine Erweiterung des 7-Plugins für das WordPress-Kontaktformular, mit dem Sie einen Besucher oder einen Benutzer nach Übermittlung seines Kontakts auf eine Seite umleiten können.

Es wurde entwickelt, um das Formular benutzerfreundlicher zu gestalten, wenn der Formularübermittlungsprozess dazu führt, dass auf die vom Administrator ausgewählte Seite umgeleitet wird. Es ist sehr einfach zu konfigurieren. Sie können dies tun, indem Sie eine Seite aus den vorhandenen Seiten Ihres Dashboards auswählen oder eine Benutzerdefinierte URL Umleitung.

Unsere Umsetzung 8 WordPress-Plugins zur Verbesserung der SEO Ihres Blogs

Jedes Formular hat eine eigene Konfiguration. Somit kann jede erfolgreiche Umleitung auf einzigartige Weise definiert werden.

Download | Demo | Web-Hosting

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Fazit

Hier ! Das war's für diesen Artikel. Jetzt wissen Sie, wie Sie mit dem Elementor-Plugin einen herabgesetzten Titel in WordPress erstellen. Lass uns dein commentaires und Anmerkungen, wenn Sie dabei Schwierigkeiten haben.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden zu WordPress-Blog-Erstellung.

Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken

... 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren