Divi-Button: Responsive-Zeilenabstand anpassen

von | Divi

Videoanleitung:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Das Problem des Divi-Buttons

Ein Website-Button mit einem viel zu großen Zeilenabstand

Der Divi Button ist ein großartiges Modul, das sich schnell anpassen lässt. Kurzer Hand besitzt man ohne viel Aufwand einen voll funktionsfähigen Button mit einer passenden Hover-Animation.

Dem ein oder anderen wird aber schon aufgefallen sein, dass in der mobilen Ansicht der Zeilenabstand schnell eine unschöne Größe annimmt. Dann wird der Button riesig und gestalterisch ist das keine schöne Angelegenheit mehr. Blöderweise lässt sich der Zeilenabstand nicht innerhalb des Moduls per Mausklick konfigurieren. Wir benötigen also etwas CSS-Code.

Die Lösung: So änderst Du den Responsive-Zeilenabstand

Gehe in den Moduleinstellungen Deines Buttons unter Erweitert/Benutzerdefinierte CSS/Hauptelement

Wähle das Smartphone oder Tablet  aus (dort tritt der Fehler mit dem Zeilenabstand in der Regel auf)

Füge dann den folgenden CSS-Code dort ein:

line-height: 1.1;

Danach sollte der Button auf dem Smartphone einen optisch schönen Zeilenabstand besitzen. Natürlich kannst Du den Wert von 1.1 auch ändern und so anpassen, wie Du es für richtig hältst.

Falls der Code oben nicht funktioniert, füge dem Code noch ein „!important“ hinzu. Damit sagst Du dem Divi-Theme, dass Deine CSS-Anweisung Vorrang hat. So sollte es ganz sicher funktionieren:

line-height: 1.1 !important;

Fertig!

Das wars, Du hast Deinen Divi-Button nun für die mobile Ansicht optimiert.

Ein gut aussehender junger Mann auf einem schwarz-weißen Foto

Dennis Petschik

Autor
Nach fast 10 Jahren in der Branche möchte ich mein Wissen zum Thema Marketing & Webdesign auf diesem Blog teilen. Ich wünsche Dir viel Spaß beim Lesen meiner Beiträge und noch mehr Spaß bei der Umsetzung!

Bild des blauen Buchcovers in 3D

Kostenfreies E-Book!

Generiert Deine Website regelmäßig neue Kundenanfragen für Dich?
Falls nicht, steht hier Deine kostenfreie Praxisanleitung zum Download bereit!
In meinem E-Book zeige ich Dir, wie Du durch reine Psychologie mehr Kundenanfragen erhältst!