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 :
Passaggio #2
Clicca su Design> Layout e imposta il modulo Blog in modo che abbia il layout “a larghezza intera”.
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:
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!
0 commenti