DIVI Blog Modul: Wie positioniert man den Text und das Bild nebeneinander?

von | Nov 28, 2023 | Allgemein | 0 Kommentare

Schlagwörter: DIVI

Heute möchte ich euch mal kurz Zeiten wie ihr das Blog Modul bei Divi ein wenig anders Designen könnt. Es gibt ja eigentlich nur 2 Designmöglichkeiten im Blog Modul – entweder volle Breite oder im Grid. Aber ich zeige euch jetzt wie ihr es hinbekommt, dass das Beitragsbild auf der rechten Seite ist und daneben auf der Linken Seite euer Vorschautext.

Video

Blog Modul einbauen und vorbereiten

Als erstes müsst ganz einfach das Blogmodul einbauen und zwar als Fullwidth und dann gebt ihr dem Modul noch eine eigene CSS Klasse:

1
cb-blog-design

Design auswählen

Nun gibt es 2 Möglichkeiten entweder habt ihr das Bild links oder rechts und dafür müsst ihr den entsprechenden CSS nehmen und in euer Child-Theme oder unter ≪Divi ➤ Theme Options ➤ Custom CSS≫ eingeben

Bild rechts & Text links

1
2
3
4
5
6
7
8
9
10
11
/* new blog bild rechts text links */
@media only screen and (min-width: 1080px) {
    .cb-blog-design .et_pb_post.has-post-thumbnail .entry-featured-image-url {
        float: left;
        width: 30%;
        margin-right: 4%;
    }
    .cb-blog-design .et_pb_post.has-post-thumbnail:not(.format-gallery) > .post-content {
        padding-left: 34%;
    }
}

Bild links & Text rechts

1
2
3
4
5
6
7
8
9
10
11
/* new blog bild links text rechts */
@media only screen and (min-width: 1080px) {
    .cb-blog-design .et_pb_post.has-post-thumbnail .entry-featured-image-url {
        float: right;
        width: 30%;
        margin-left: 4%;
    }
    .cb-blog-design .et_pb_post.has-post-thumbnail:not(.format-gallery) > .post-content {
        padding-right: 34%;
    }
}

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert