Call-To-Action im Divi-Theme: Höhe angleichen

15. Februar 2021 | CSS-Stylesheet, Divi-Theme

Geschätzte Lesezeit für diesen Beitrag: ca. 4 Minuten.

Die «Call To Action»-Module (in der deutschen Version «Handlungsaufrufe» genannt) des Divi-Themes sind eine feine Sache, haben aber den Nachteil, dass deren Höhe von der eingegebenen Textlänge abhängig ist. Bisweilen sieht das nicht sehr hübsch aus; die Darstellung lässt sich aber verbessern.

Wenn Sie in mehreren nebeneinanderstehenden Modulen sehr unterschiedliche Textlängen verwenden, kann das Bild sehr unruhig werden. Hier ein Beispiel, wie das ausschaut:

Titel #1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l

Titel #2

Lorem ipsum dolor sit amet.

Titel #3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu

Das lässt sich aber nachbessern. Vergeben Sie einfach eine neue CSS-Klassen. Das tun Sie, indem Sie bei der Bearbeitung des Moduls Advanced (oder Erweitert) anklicken. Hier wählen Sie CSS-ID und Klassen. Bei den CSS-Klassen setzen Sie nun

cta-hoehe

ein. Wiederholen Sie dies bei allen weiteren Call-To-Action-Modulen in der Reihe.

Nun wechseln Sie ins CSS-Stylesheet. Das geht via Design/Customizer/zusätzliches CSS. Dort fügen Sie die folgenden Zeilen ein:

.cta-hoehe .et_pb_promo_description {
min-height: 14em !important;
}

Ihren Gegebenheiten anpassen sollten Sie den Wert nach

min-height

Sie können anstelle der Einheit em auch Pixel oder Prozentwerte eingeben. In unserem Beispiel (mit 14em) sieht die Reihe nun so aus:

Titel #1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l

Titel #2

Lorem ipsum dolor sit amet.

Titel #3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu

Sie werden vermutlich ein wenig experimentieren müssen, um den für Sie geeigneten min-height-Wert zu finden. Wenn alle Module gleich hoch erscheinen wie das höchste, haben Sie’s geschafft.

Call-to-action-Höhe gegebenenfalls für unterschiedliche Anzeigen definieren

Unter Umständen könnte es ratsam sein, unterschiedliche Werte – je nach Anzeigengrösse zu vergeben. Im Beitrag Media-Queries: Diesen CSS-Baukasten benötigen Sie fürs Responsive Webdesign haben wir Ihnen einen Codeschnipsel zum gelungenen Start vorbereitet.

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