Trick # 12 | Dieser Beitrag beinhaltet 454 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Das Blog-Modul in Divi zeigt die Bilder stets über dem Titel und dem Textauszug. Das gefällt nicht allen. Mit ein paar Zeilen CSS können Sie das Bild links oder rechts des Textes platzieren.
Wählen Sie – je nach Wunsch – einen der folgenden Codes und fügen sie ihn in Ihr CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS ein.
Bild links – Text rechts
.et_pb_post a img {
height: 200px!important;
float: left;
width: 200px;
left: 0;
padding-right: 20px;}@media only screen and (max-width: 980px) {
.et_pb_post a img {
float:none;
width:200px;
height:200px;}}Bild rechts – Text links
.et_pb_post a img {
height: 200px!important;
float: right;
width: 200px;
right: 0;
padding-left: 20px;}@media only screen and (max-width: 980px) {
.et_pb_post a img {
float:none;
width:200px;
height:200px;}}Dieses Snippet gilt nur für die Darstellung «Volle Breite», nicht aber für «Gitter». Ersetzen Sie die Zahlenwerte bei width: und height: mit Ihrer gewünschten Bildgrösse.
Beide Codes haben nur einen Einfluss auf die Desktop-Ansicht. Auf mobilen Geräten bleibt das Bild über dem Text.
Werbung
Im Divi-Theme ist ein Portfolio-Modul enthalten, welches mit Filtern dargestellt wird. Wechselt man den Filter werden die anzuzeigenden Beiträge elegant von links nach rechts ins Bild geschoben. Dieser Effekt lässt sich aber verändern: Beiträge ...
Die Divi-eigenen Pojects geben sich schon an der URL als solche zu erkennen. Der URL-Teil /project/ passt aber meist gar nicht zum dargebotenen Inhalt. Dies lässt sich ganz einfach ändern.
Wenn Sie den Standard-Header verwenden, der mit dem Divi-Theme installiert wird, kann es Ihnen ein Bedürfnis sein, diesen nicht von Beginn weg anzuzeigen. Den Seitenkopf zunächst (und bis zum Scrollen) zu verbergen, geht mit ein wenig Code.
Out oft the box schaut das Suchfeld des Divi-Themes etwas ärmlich aus. Mit unserem CSS-Bausatz können Sie das Suche-Modul aber ganz einfach dem Styling Ihrer Website anpassen.
Keine Inhalte gefunden.
Werbung
