Lesefortschritt:

Zweite Textzeile zu den Divi-Schaltflächen hinzufügen

25. Januar 2023 | CSS-Stylesheet, Divi-Theme, Scripts

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

 

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