Immagine della guida Layout Divi: Modificare il modulo del blog in 3 passaggi del sito Cionfs.it

Divi offre la possibilità di utilizzare, per il suo blog, due diversi stili di layout. Uno in modalità classica e uno a griglia. Tuttavia è possibile, grazie ad alcune aggiunge e/o modifiche al CSS, la personalizzazione della componente grafica di immagine, testo, tag ed altro.

La prima cosa da fare è inserire il modulo blog nella pagina/post dove si vuole richiamare.

Immagine della guida Layout Divi: Modificare il modulo del blog in 3 passaggi del sito Cionfs.it

Successivamente bisogna configurare il modulo in questo modo

Immagine della guida Layout Divi: Modificare il modulo del blog in 3 passaggi del sito Cionfs.it

1. Selezionare il modello a larghezza piena

2. Inserire una classe CSS personalizzata. Un esempio può essere layout-blog.

Immagine della guida Layout Divi: Modificare il modulo del blog in 3 passaggi del sito Cionfs.it

Una volta inserita la classe si vada su Divi>Opzioni tema e a fondo pagina bisogna posizionarsi alla voce relativa il CSS personalizzato

Immagine della guida Layout Divi: Modificare il modulo del blog in 3 passaggi del sito Cionfs.it

Per inserire i poi questo codice

@media only screen and (min-width: 1080px) {
    .layout-blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
        float: left;
        width: 30%;
        margin-right: 4%;
    }
    .layout-blog .et_pb_post.has-post-thumbnail:not(.format-gallery) > .post-content {
        padding-left: 34%;
    }
}

ed avere questo

Immagine della guida Layout Divi: Modificare il modulo del blog in 3 passaggi del sito Cionfs.it

Una volta salvato il risultato sarà come questo

layout divi blog