Möchten Sie eine mehrfarbige Verlaufsschaltfläche in erstellen Elementor ?
Standardmäßig Elementor verfügt über eine Funktion zum Erstellen einer Verlaufsfarbe für Ihre Schaltfläche, ist jedoch auf zwei Farben beschränkt. In diesem Artikel erfahren Sie, wie Sie eine Schaltfläche mit mehrfarbigem Farbverlauf erstellen Elementor ohne die Hilfe eines Add-ons, einfach mit dem benutzerdefinierten CSS von Elementor.
Durch das Hinzufügen eines mehrfarbigen Verlaufs zu Ihrem Button kann Ihr Button attraktiv aussehen und sich natürlich anfühlen. Sie fragen sich vielleicht: „Ist es möglich, eine mehrfarbige Verlaufsschaltfläche auf Ihrem zu erstellen? Webseite? “. Nun, mit Elementor ist alles möglich und Sie können ganz einfach eine mehrfarbige Verlaufsschaltfläche erstellen.
So erstellen Sie eine mehrfarbige Verlaufsschaltfläche in Elementor
Bevor Sie mit dem Tutorial beginnen, möchten wir Sie darüber informieren, dass dieses Tutorial mit benutzerdefiniertem CSS funktioniert. Die benutzerdefinierte CSS-Funktion ist nur auf verfügbar Elementor Pro; Also unbedingt auf die Pro-Version upgraden.
Gehen Sie nun zu Ihrem Elementor-Editor. Wir fangen bei Null an, erstellen Sie also einen Abschnitt mit nur einer Spalte. Als nächstes wählen Sie bitte das Schaltflächen-Widget im Widget-Panel aus und ziehen es dann per Drag & Drop in den Bearbeitungsbereich von Elementor. Nachdem Sie das Schaltflächen-Widget hinzugefügt haben, können Sie das Widget nach Ihren Wünschen bearbeiten und gestalten.
Navigieren Sie in den Widget-Einstellungen zur Registerkarte fortgeschritten -> Benutzerdefiniertes CSS. Kopieren Sie das CSS-Snippet unten und fügen Sie es dann in das benutzerdefinierte CSS-Feld ein.
selector .elementor-button {
background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}
Wenn Sie mit dem angewendeten mehrfarbigen Verlauf (wie im Bild oben) zufrieden sind, können Sie ihn so beibehalten und Ihr Projekt speichern, wenn Sie möchten. Wenn Sie es jedoch anpassen möchten, können Sie dies tun, indem Sie das CSS-Snippet genauer im CSS-Deklarationsblock ändern.
Der CSS-Deklarationsblock beginnt mit einer öffnenden geschweiften Klammer ( {'' ) und endet mit der schließenden rechten Klammer (''} ).
Um den Deklarationsblock zu erhalten, können Sie mithilfe von einen Farbverlauf erstellen outils Online-Gradienten-CSS. Klicken Sie hier einige zu sehen outils von CSS-Gradienten. Wenn Sie mit dem Erstellen des Farbverlaufs fertig sind, kopieren Sie das CSS und ersetzen Sie den vorhandenen Deklarationsblock durch einen neuen, indem Sie das CSS einfügen.
Remarque: Du kannst auch Gradiententitel in Elementor erstellen .
Holen Sie sich Elementor Pro jetzt!!!
Zusammenfassung
Dieser Artikel zeigt, wie einfach Sie in Elementor eine mehrfarbige Verlaufsschaltfläche erstellen können. Wenn Sie Elementor als Seitenersteller für Ihre verwenden Webseite WordPress und Sie möchten einen atemberaubenden Button mit einem mehrfarbigen Farbverlauf erstellen, dann könnte dieser Artikel Ihre Lösung sein.
Einfarbige oder zweifarbige Schaltflächen können einfach und langweilig aussehen. Aber achten Sie darauf, mehrfarbige Farbverläufe auf Ihren Schaltflächen zu erstellen. Bitte achten Sie auf die Ton- und Farbmischung, die Sie verwenden, damit Ihre Schaltflächen nicht seltsam und langweilig aussehen.
Hier ! Das ist es für diesen Artikel, der dir zeigt, wie es geht Erstellen Sie eine mehrfarbige Verlaufsschaltfläche in Elementor. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.
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 auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
