Trick # 202 | Dieser Beitrag beinhaltet 1038 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Eine gute Möglichkeit, zusätzliche Marketinginformationen auf einer Landing-Page bereitzustellen, ist eine zweite Textzeile auf einer Call-to-Action-Schaltfläche. Da es standardmässig keine Möglichkeit gibt, dem Divi-Button eine zweite Textzeile hinzuzufügen, werden wir dies mit einigen Codeschnipseln tun.
Von Haus aus können Sie die Buttons im Divi-Thee mit bloss einer Textzeile versehen. Hier zeigen wir Ihnen, wie Sie eine zweite Zeile zu jeder Divi-Schaltfläche hinzufügen können.
Dazu gehören das Button-Modul, die Schaltfläche des Call-To-Action-Moduls, die Schaltfläche des WooCommerce-Moduls «In den Warenkorb», die Schaltfläche des E-Mail-Optin-Moduls und die Schaltfläche des Kontaktformulars.
Doch beginnen wir mit dem Button-Modul: Diesem müssen Sie eine CSS-Klasse zuweisen. In unserem Fall «button-tagline». Die Klasse können Sie im Bearbeitungsmodus des Button-Moduls unter Erweitert/CSS-ID & Klassen/CSS-Klasse eintragen.
Nun müssen Sie dem <head>-Bereich (unter Dvi/Theme-Optionen/Integration oder wahlweise mittels eines Code-Moduls) einige Zeilen jQuery-Code hinzufügen. Das nötige Script ist das untenstehende:
<script>
jQuery(document).ready(function () {
jQuery(".button-tagline").append("<div class= 'tagline-wrap'>Ihre zweite Textzeile</div>");
})
</script>Den anzuzeigenden Text auf Zeile 3 sollten Sie natürlich anpassen.
Weiter geht’s mit ein wenig CSS-Code. Diesen fügen Sie in Ihr CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS ein:
/* Vertikale Position des Button-Icons anpassen */
.button-tagline:after {
line-height: 0 !important;
}
/* Container der zweiten Textzeile stylen */
.tagline-wrap {
display: inline-block;
width: 100%;
}
/* Zweite Textzeile stylen */
.tagline-wrap {
color: #ffffff!important;
}
/* Zweite Textzeile ausrichten */
.button-tagline {
text-align: center
}Natürlich können Sie die Darstellung nach Lust & Laune und passend zu Ihrem Website-Design variieren.
Damit ist der Divi-Standard-Button schon mal angepasst.
Zweite Textzeile für den «In den Warenkorb»-Button des WooCommerce-Moduls
Dieses Snippet verwenden Sie, wenn Sie WooCommerce verwenden. Es fügt eine zweite Textzeile zum Warenkorb-Modul hinzu. Auch dieses Script in ein Code-Modul einfügen oder Websiteweit unter Divi/Theme-Optionen/Integration im <head>-Bereich platzieren:
<script>
jQuery(document).ready(function () {
jQuery(".button-tagline .single_add_to_cart_button").append("<div class= 'tagline-wrap'>Ihre zusätzliche Textzeile</div>");
})
</script>Auch hier: Anzuzeigenden Text auf Zeile 3 mit etwas sinnvollem ersetzen. Eine CSS-Klasse müssen Sie hier nicht vergeben – sie wird vom Script bereits eingetragen. Den CSS-Code von weiter oben legen wir Ihnen trotzdem ans Herz.
Buttons anderer Divi-Module mit zweiter Textzeile nachrüsten
Der Divi-Button kommt noch in weiteren Modulen vor: «Call To Action», «E-Mail OptIn», «Kontaktformular». Damit alle Module eine zweite Zeile erhalten, benötigen Sie folgendes Script, welches in ein Code-Modul abgefüllt werden kann oder unter Divi/Theme-Optionen/Integration in den <head>-Bereich gehört:
<script>
jQuery(document).ready(function () {
jQuery(".button-tagline .et_pb_button").append("<div class= 'tagline-wrap'>Ihre zweite Textzeile</div>");
})
</script>Und wiederum: Anzuzeigenden Text auf Zeile 3 mit etwas passendem ersetzen. Eine CSS-Klasse ist auch hier nicht nötig – die Arbeit übernimmt das Script. Jedoch ist die Gestaltung mittels CSS-Code (weiter oben in diesem Beitrag) ratsam.
Ein nettes Gadget, finden wir.
Werbung
Werbung
