Trick # 261 | Dieser Beitrag beinhaltet 796 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Mit dem Divi-Modul «Blurb» (zu deutsch: «Informationstexte») lassen sich Zusatzinformationen in einer Box vorzüglich neben Texten platzieren. Das Modul lässt sich mit einem Icon versehen, das dann aber konsequent über dem Inhalt oder links daneben dargestellt wird. Eine Option für eine Darstellung rechts fehlt – sie lässt sich aber nachrüsten. Das geht ganz einfach.
Hier sehen Sie ein Beispiel für den Einsatz eines Blurb-Moduls (oder eben: für ein Informationstext-Modul):
Das Icon links des Textes passt hier ganz gut; Jedoch wünscht man sich ab und an, dass das Icon rechts stünde.
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Das geht ziemlich einfach. Zunächst vergeben Sie dem Blurb-Modul eine CSS-Klasse. Dazu bearbeiten Sie das Modul, klicken auf Erweitert/CSS-ID & Klassen und fügen Sie ins Feld CSS-Klasse z.B. «blurb-icon-right» ein.
Nun kopieren Sie den nachfolgenden CSS-Code und fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein – im WordPress-Backend unter Design/Customizer/Zusätzliches CSS:
@media (min-width:981px) {
.blurb-icon-right .et_pb_blurb_content {
display: flex;
flex-direction: row-reverse;
padding-right: 20px
}
.blurb-icon-right.et_pb_blurb_position_left .et_pb_blurb_container {
padding: 10px;
}
}Das Icon Ihres Blurb-Moduls wird nun rechts platziert. Etwa so wie im nebenstehenden Beispiel:
Der Code bewirkt dank der media-query ausserdem, dass er erst ab einer Anzeigenbreite von mehr als 980 Pixel greift. Auf Desktops wandert das Icon nach rechts, auf Mobilgeräten wird es nach wie vor links dargestellt.
Wenn Sie diesen Effekt nicht benötigen, lassen Sie im CSS-Code einfach die Zeilen 1 und 10 weg.
Werbung
Werbung
