Elementor – Zweizeiliger Button mit Icon (ohne Plugin)

Anbieter: Elementor

Zweizeiliger Button in Elementor

Wenn du einen Button etwas aufwerten möchtest, kannst du diesen bspw. zweizeilig darstellen. Es gibt dafür zwar verschiedene Plugins, die auch so ein Element mitbringen, aber du bekommst das Ganze auch ganz einfach mit dem Elementor-eigenen Widget, also ohne zusätzlichem Plugin, hin:

In der Anleitung zeige ich, wie der folgende Button gestaltet werden kann:

Anleitung

Element einfügen

Suche dir zunächst das Standard-Button-Widget in Elemntor heraus und ziehe dieses in den Bearbeitungsbereich:

Elementor - Button Widget

Button-Einstellungen anpassen

Nachdem du das Button-Element in den Bearbeitungsbereich gezogen hast, trage Folgendes im „Text“-Feld ein:

				
					<span class="erstezeile">Anhören auf</span><br>Spotify
				
			

Setze anschließend den Icon-Abstand auf 22px.

Nun sind einige Einstellungen im Reiter „Stil“ vorzunehmen:

  • Typographie: hier kannst du die Textgröße und -dicke für die zweite Zeile einstellen
  • Textfarbe: hier habe ich die Spotify-Farbe #1DB954 hinterlegt
  • Farbe: als Hintergrundfarbe habe ich #000000 ausgewählt
  • Eckenradius: hier kannst du die Einstellungen für die Eckenabrundung vornehmen. In meinem Fall 23px
  • Box-Schatten: damit der Button einen kleinen Schatten wirft, habe ich diesen aktiviert
  • Hover: bei „Animation bei Mauszeigerberührung“ habe ich Float hinterlegt

CSS-Code einfügen

Damit die erste Zeile sich von der zweiten etwas abhebt, muss in den Button-Einstellungen unter „Erweitert“ -> „Eigenes CSS“ folgender Code hinterlegt werden:

				
					selector .elementor-button-icon{
    font-size: 62px;
}
selector .erstezeile{
    font-size: 16px;
    color: #ffffff;
}
				
			

Im Code enthalten sind drei Parameter, die angepasst werden können:

  • Icon-Größe: aktuell 62px
  • Textgröße der ersten Zeile: aktuell 16px
  • Farbe der Textzeile: aktuell #ffffff (weiß)

 

Fertig 😉

Video

YouTube

Mit dem Laden des Videos akzeptierst du die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Abonnieren
Benachrichtige mich bei
0 Kommentare
Inline Feedbacks
View all comments

Die mit Sternchen (*) gekennzeichneten Verweise sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und über diesen Link einkaufst, bekomme ich von deinem Einkauf eine Provision. Für dich verändert sich der Preis nicht. 

0
Hast du Fragen? Dann schreibe einen Kommentar ;-)x
Newsletter abonnieren

Erhalte regelmäßig Informationen zu neuen Tipps und Tutorials.