Lesefortschritt:

Zweite Textzeile zum Divi-Button hinzufügen

28. August 2024 | CSS-Stylesheet, Divi-Theme

Dieser Beitrag beinhaltet 657 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Im Button-Modul des Divi-Themes lässt sich standardmässig bloss eine einzige Textzeile platzieren. Wem das nicht genügt und wer gerne eine zweite Textzeile hätte, muss ein wenig nachhelfen. Wir zeigen Ihnen wie.

Normalerweise sieht der Button mit einer Textzeile etwa so aus wie nebenan:

Da sich im Buttontext kein HTML platzieren lässt, benötigen Sie für die zweite Zeile Button-Text ein kurzes Stück CSS-Code. Dieser Block folgt unten – fügen Sie ihn im Button-Modul, unter dem Tab «Erweitert» und «Benutzdefinierte CSS» ins Feld «Vorher» ein:

content: 'Zusätzliche Textzeile';
position: relative;
display: block;
opacity: 1;
margin: 0;
font-size: 20px;
padding-top: 5px;

Der Text  in Zeile 1 ist beispielhaft – Sie sollten ihn natürlich anpassen.

Ebenfalls wichtig: Den Button-Text im «Inhalt»-Tab des Buttons müssen Sie ebenfalls ausfüllen. Der Text aus dem CSS-Code wird dann oberhalb dieses «normalen» Buttontexts angezeigt.

Das Ergebnis sieht dann aus wie nebenan:

Leider funktioniert der Hack nur zuverlässig, wenn Sie das Button-Icon rechts verwenden. Ohne Icon wird bisweilen gar keine zweite Zeile angezeigt – mit Button links nur eine in Hieroglyphen.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This