Trick # 46 | Dieser Beitrag beinhaltet 751 Wörter. – Geschätzte Lesezeit: 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
Titel #2
Titel #3
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
Titel #2
Titel #3
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
