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 modifica al layout può avere un duplice scopo.

Uno scopo “funzionale”, ovvero quello di rendere più fluida la pagina web che si sta visitando evitando immagine+testo sotto che allungano tutto e possono far perdere l’interesse al lettore.

Uno scopo “visivo”, ovvero quello di raggruppare in spazio più contenuto gli argomenti trattati in una categoria. Questo per dare subito l’input al lettore su cosa potrebbe interessargli.

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