Trick # 559 | Dieser Beitrag beinhaltet 774 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Beim Designen mit dem Divi-Theme bedeutet ein einheitliches und ansprechendes Erscheinungsbild oft, dass man sich mit unterschiedlichen Höhen von Inhalten in Modulen wie dem Testimonial-Modul auseinandersetzen muss. Ungleichmässige Höhen können den visuellen Fluss Ihrer Website stören. Hier erfahren Sie, wie Sie die Höhen Ihrer Testimonial-Module angleichen können.
Stellen wir uns vor, Sie platzieren drei Testimonials unterschiedlicher Länge auf Ihrer Website. Das kann dann so aussehen:
Das wirkt reichlich unruhig – kann aber behoben werden mit etwas CSS-Code.
Den untenstehenden Block kopieren Sie gierfür in das CSS-Stylesheet Ihrer Website. Unter Design/Customizer/Zusätzliches CSS:
@media only screen and ( min-width: 768px ) {
.et_pb_testimonial .et_pb_testimonial_content {
min-height: 250px;
}
}Die minimale Testimonial-Höhe müssen Sie gegebenenfalls mit einer anderen Pixelzahl in Zeile 3 etwas anpassen. Orientieren Sie sich dabei an der Höhe des längsten Testimonials. Der Code ist ausserdem so gestaltet, dass er auf Mobiltelefonen nicht greift.
Unser Beispiel von oben sieht damit so aus:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Ganz einfach, oder?
Wenn Sie möchten, dass dieser Trick nur für bestimmte Testimonials gilt, ändern Sie den CSS-Code, indem Sie .et_pb_testimonial in Zeile 1 durch einen eigenen Klassennamen (z.B. testimonial-equalizer) ersetzen. Weisen Sie diese Klasse in allen betreffenden Testimonial-Modulen unter «Advanced», «CSS-ID und -Klassen» im Feld «CSS-Klasse» zu.
Werbung
Werbung
