Lesefortschritt:

Zweite Textzeile zum Divi-Button hinzufügen

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

Trick # 381 | 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

Die Krux mit den verunstalteten Telefon-Links

Kennen Sie das? Da nennen Sie auf Ihrer Website eine harmlose Telefonnummer - und schwups, wird diese in zahlreichen Browsern übel verunstaltet. Einige Browser - ganz besonders solche von Mobilgeräten - erkennen nämlich Telefonnummern auf ...
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.