Divi Tutorial: Button mit 2 Zeilen

Über eine Facebook-Gruppe bin ich heute über eine interessante Frage gestolpert: Kann man Buttons (Tasten) in Divi auch 2-zeilig nutzen. Nun, dies ist gar nicht so leicht, denn das Modul TASTE unterstützt kein HTML. Günstigerweise kam die Antwort im Laufe der Diskussion stehenden Fußes von Michelle Nun an (divisoup.com). Da die Anleitung etwas länger und zudem auf Englisch ist, fasse ich diese hier einmal für euch zusammen.

Divi Taste mit 2 Zeilen

Natürlich kann man die Buttons über Javescript modifizieren. Aber das ist gar nicht nötig, denn dank der einfachen Anweisungen :before und :after können wir mit ein wenig CSS den gewünschten Effekt direkt im Modul erzeugen.

Zunächst füge wie immer einen Button über das Modul TASTE ein. Gestalte diesen wie gewohnt.

divi-taste-2-zeilig

Hinweis: Beachte, dass du bei einem Button auch ein Icon nutzen kannst. Entsprechend musst du den Code gleich ein wenig für die Versionen mit/ohne Icon anpassen.

Gehe zunächst in den Tab „Erweitert“ und füge dann folgende Zeile in das Feld „Before“ (Vorher) ein:

content: 'Add your text here';
position: relative;
display: block;
opacity: 1;
margin: 0;

divi-taste-2-zeilig-vorher

du kannst die Schriftgröße und den Abstand natürlich auch anpassen. Füge dazu folgende Zeilen deinem Code hinzu: Einmal „font-size“ (Schriftgröße) und ein weiteres Mal „Padding-top“ (Abstand nach oben)

font-size: 20px;
padding-top: 5px;

Taste mit oder ohne Icon?

Prima, jetzt müssen wir uns noch um die Icons kümmern. dabei haben wir folgende Szenarien:

Du nutzt kein Icon:

Kopiere den CSS-Code in: Feld Before (Vorher)
Text Position: Die erste Zeile schreibst du in den CSS-Code (Vorher) und die zweite Zeile als normalen Button-Text.

Du nutzt ein Icon rechts:

Kopiere den CSS-Code in: Feld Before (Vorher)
Text Position: Die erste Zeile schreibst du in den CSS-Code (Vorher) und die zweite Zeile als normalen Button-Text.

Du nutzt ein Icon links:

Kopiere den CSS-Code in: Feld After (Nachher)
Text Position: Die erste Zeile schreibst du als normalen Button-Text und die zweite Zeilein den CSS-Code (Vorher).

Außerdem musst du bei dieser Konstellation den Code im Feld „After“ (Nachher)ein wenig anpassen.

content: 'Hier steht dein Text' !important;
position: relative;
display: block !important;
opacity: 1;
margin: 0;

Fertig. Ich hoffe, dass dir diese Anleitung weiterhilft und viel Spaß mit deinen neuen Buttons!

Tool-Tipp:

Folgende Apps nutze ich in meinem Blog. Zu den meisten dieser Apps findest du auf meinem YouTube-Kanal oder direkt hier eine ausführliche Review.

Keyword-Strategie: WriterZen, LongTailPro, Link Assistant
Content-Erstellung: Frase, StoryChief, Bramework
Optimierung Pagespeed: WP Rocket, ShortPixel
Optimierung Conversion: Convertbox
Sicherheit: WPVivid

Du suchst nach einer Lösung für dein Marketing, deiner SEO- oder Content-Strategie? Dann schau auch gern in meiner Akademie vorbei: Businesserfolg.de

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!
WordPress Themes deinstallieren bzw. löschen: Anleitung.

WordPress Themes deinstallieren bzw. löschen: Anleitung.

Eines der größten Vorteile von WordPress ist, dass es sehr einfach zu bedienen ist. Du kannst ein Theme in nur wenigen Minuten installieren. Es kann jedoch der Zeitpunkt kommen, an dem du WordPress Themes deinstallieren bzw. löschen möchtest. In diesem Leitfaden...

Automatische Blindtexte für dein Webdesign

Automatische Blindtexte für dein Webdesign

Die Erstellung eines Webdesigns ist ein komplizierter Prozess: Die Website soll schick aussehen, modern sein, Kunden in den Verkaufskanal leiten, eine Exit-Strategie in der Hinterhand haben und vieles mehr. Und ja ... dann möchte der Kunde natürlich auch wissen, wo...

Elementor Pro Kosten: Wirklich ein guter Deal?

Elementor Pro Kosten: Wirklich ein guter Deal?

Welche Elementor Pro Kosten erwarten dich? Es gibt viele Theme-Builder auf dem Markt, sodass die Entscheidung schwierig sein kann, welcher der beste für die eigenen Bedürfnisse ist. Einer der beliebtesten Theme-Builder ist Elementor Pro. Elementor ist ein großartiger...

|

Platz für deinen Kommentar!

0 Kommentare

Neue Themes

Neu: Scroll-Effekte, WooCommerce-Module u.v.m.

Galerie

Workshops

Workshops, Academy, Magazin, Masterclass

Starten

Geschenkt

Handbuch WordPress,
Workshop SEO & Marketing

Download