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%;
    }
}