Cambiare il modulo Blog Divi per immagine a sinistra e testo a destra

Introduzione

In questo post vedremo come è possibile ottenere un terzo stile di blog Divi, ben diverso da quello “a griglia”.

Ti mostrerò come cambia il classico modulo Blog Divi usando l’impostazione layout “a larghezza piena” con cui è possibile modificare il classico stile ad una colonna con del codice CSS e creare un effetto a due colonne: immagine a sinistra e testo a destra.

Si tratta soltanto di 3 passaggi. Quindi, iniziamo!

Passaggio #1

Modifica le impostazioni e nella scheda Avanzate> Classe CSS imposta una classe CSS personalizzato, ad esempio dt-blog :
Personalizzare il modulo blog

Passaggio #2

Clicca su Design> Layout e imposta il modulo Blog in modo che abbia il layout “a larghezza intera”.
Personalizzare il modulo blog

Passaggio #3

Vai su Divi > Opzioni tema > CSS personalizzato aggiungi il seguente codice CSS:
@media only screen and (min-width: 1080px) {
    .dt-blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
        float: left;
        width: 30%;
        margin-right: 4%;
    }
    .dt-blog .et_pb_post.has-post-thumbnail:not(.format-gallery) > .post-content {
        padding-left: 34%;
    }
}

Risultato

Dovresti ottenere un risultato come in figura:
Personalizzare il modulo blog

Conclusione

Speriamo che in questa breve guida tu abbia imparato a cambiare il classico modulo Blog Divi per avere l’immagine a destra e il testo a sinistra usando il layout a larghezza intera. Se hai dubbi o domande, lascia un commento nella sezione qua sotto. Ciao, alla prossima!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Divi Design Studio rende semplice l’evoluzione digitale di aziende ambiziose.

Chi sono

Mi chiamo Riccardo Bertolini e sono un web designer freelance appassionato del web e di tecnologie digitali.
P.IVA 04891580237 – Divi Design Studio © 2023