Trick # 506 | Dieser Beitrag beinhaltet 536 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Das Blogmodul kennt eine Rasteransicht und die Ansicht in voller Breite. Die Gestaltungsmöglichkeiten sind damit beschränkt. Eine interessante Form – nämlich die alternierende Anzeige des Beitragsbilds links und rechts – können Sie mit ein wenig CSS-Code erreichen.
In der Raster- (oder Gitter-Ansicht) zeigt das Blog-Modul des Divi-Themes die Beiträge so wie nebenan:
Die Blog-Übersicht kann aber auch so dargestellt werden, dass die Bilder abwechslungsweise rechts und links des Anrisstexts erscheinen. Hierfür wählen Sie im Tab «Design» unter «Layout» nicht die Gitter-Ansicht, sondern die Ansicht auf der vollständigen Breite.
Weiter kopieren Sie den folgenden CSS-Code und verfrachten ihn in das CSS-Stylesheet Ihrer Divi-Website – im Backend unter Design/Customizer/Zusätzliches CSS:
@media only screen and (min-width: 980px) {
/* Bild bei ungeraden Posts links platzieren */
.et_pb_post:nth-child(odd) img {
float: left !important;
overflow: hidden;
width: calc(50% + 60px);
height: auto;
padding-right: 30px;
margin: -30px 0 -30px -30px;
}
/* Bild bei geraden Posts rechts platzieren */
.et_pb_post:nth-child(even) img {
float: right;
overflow: hidden;
width: calc(50% + 60px);
height: auto;
padding-left: 30px;
margin: -30px -30px -30px 0;
}
}Der Code greift nur auf Anzeigen, welche mindestens 980 Pixel breit sind. Das ist sinnvoll, weil die Bildwechsel von links nach rechts (und umgekehrt) auf Mobilanzeigen unschön aussähen.
Die Blog-Übersicht wird hernach so dargestellt, wie hier ersichtlich:
Werbung
Werbung
