Lesefortschritt:

Beitragsbild im Divi-Blog neben dem Text platzieren

12. Januar 2021 | CSS-Stylesheet, Divi-Theme

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

Content zentriert im Browserfenster anzeigen

Einen Websiteinhalt - sei es nun ein Bild, Text oder ein anderes Element - können Sie ganz einfach vertikal und horizontal zentriert im Browserfenster anzeigen. Bei Bedarf werden Sie sogar den Scrollbalken los, falls Sie dieser stört.

Mobilmenü im Divi-Footer deaktivieren

Standardmässig macht das Divi-Theme aus jedem Menü auch eine mobile Variante für Tablets und Mobiltelefone. Das ist meist patent - oft braucht man auf diesen Geräten aber kein Footer-Menu. Wenn Ihnen das Standardmenu im Header auf Mobilgeräten ...
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.