WordPress: Divi, Blog con immagine a sinistra, codice css.

Vuoi rendere il tuo blog su WordPress impaginato con l'immagine a sinistra? Se stai utilizzando Divi di Elegantthemes , avrai not...

Vuoi rendere il tuo blog su WordPress impaginato con l'immagine a sinistra? Se stai utilizzando Divi di Elegantthemes, avrai notato che, nonostante la sua grande flessibilità, alcune impaginazioni richiedono un pizzico di personalizzazione extra. Oggi vedremo insieme come applicare una modifica che consente di impaginare i post del blog con un layout quasi un po' nostalgico come i siti web di alcuni anni fa ma che erano seplici e chiari e ordinati.

Cosa faremo?

Con questo codice CSS personalizzato, impagineremo i post del blog come nell'immagine allegata. In particolare:

1. L'immagine in evidenza del post verrà mostrata a sinistra.
2. Il titolo, i metadati e il testo del post saranno allineati a destra dell'immagine.
3. Aggiungeremo uno stile boxato con ombreggiatura e un effetto elegante per ogni post.
4. Gestiremo il rapporto d’aspetto delle immagini per un risultato visivo armonioso.

Esempio di Layout

Codice Css per personalizzare la pagina Blog

/*LISTING BLOG CON IMMAGINE A SINISTRA*/ /*add media query so changes only affect tablet and desktop*/ @media (min-width: 767px) { /*set the image width*/ .pa-blog-list .entry-featured-image-url { width: 40%; float: left; margin-bottom: 0!important; } /*set the details width*/ .pa-blog-list .entry-title, .pa-blog-list .post-meta, .pa-blog-list .post-content { width: 60%; float: left; padding-left: 30px; } } /*LISTING BLOG POST BOXED*/ /*style the individual posts*/ .pa-blog-list .et_pb_post, .pa-blog-list-in-evidenza .et_pb_post{ box-shadow: 0px 2px 80px 0px rgba(160,190,212,0.22); border-radius: 6px; padding: 60px; background-color:#ffffffdd; } /* RATIO IMMAGINE IN EVIDENZA*/ /*blog image aspect ratio landscape 3:2*/ .pa-blog-image-5-4 .entry-featured-image-url { padding-top: 30.0%; display: block; } .pa-blog-image-5-4 .entry-featured-image-url img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; }

Dove copiare il codice CSS

Nel lato admin all'interno della tua pagina, dopo aver attivato il l'editor di Divi per la pagina, nella prima barra viola dove c'è scritto "Il Divi Builder" devi cliccare sulla icona a forma di rotellina (vedi immagine qui sotto)

Poi bisogna cliccare in Impostazioni Pagina > CSS Personalizzato (vedi immagine)

Analisi del codice CSS

1. Media Query per layout su tablet e desktop

@media (min-width: 767px) {

Questo codice assicura che la personalizzazione si applichi solo sui dispositivi con una larghezza dello schermo di almeno 767px (tablet e desktop). Sugli schermi più piccoli, invece, Divi continuerà a mostrare il layout standard, garantendo una visualizzazione ottimale anche su mobile.

2. L'immagine del post a sinistra

.pa-blog-list .entry-featured-image-url { width: 40%; float: left; margin-bottom: 0!important; }

.pa-blog-list .entry-featured-image-url: selezioniamo l'immagine in evidenza del post all'interno della lista del blog.

width: 40%: assegniamo all'immagine il 40% della larghezza del contenitore.

float: left: spostiamo l'immagine a sinistra per ottenere il layout desiderato.

margin-bottom: 0!important: azzeriamo il margine inferiore per evitare spaziature indesiderate sotto l'immagine.

3. Il testo del post a destra

.pa-blog-list .entry-title, .pa-blog-list .post-meta, .pa-blog-list .post-content { width: 60%; float: left; padding-left: 30px; }

Selezioniamo il titolo, i metadati e il contenuto del post.

width: 60%: assegniamo al blocco di testo il restante 60% della larghezza del contenitore, complementare al 40% dell’immagine.

float: left: allineiamo il testo accanto all'immagine.

padding-left: 30px: aggiungiamo un po' di spazio a sinistra del testo per distanziarlo dall’immagine.

4. Stile boxato per i singoli post

.pa-blog-list .et_pb_post, .pa-blog-list-in-evidenza .et_pb_post { box-shadow: 0px 2px 80px 0px rgba(160,190,212,0.22); border-radius: 6px; padding: 60px; background-color: #ffffffdd; }

Box-shadow: aggiunge un'ombra morbida attorno ai post per dare un effetto di rilievo.

Border-radius: 6px: arrotonda leggermente gli angoli del box per un look più moderno.

Padding: 60px: aggiunge un’imbottitura interna al box, creando spazio tra il contenuto e i bordi del post.

Background-color: #ffffffdd: assegna un colore di sfondo bianco semi-trasparente.

5. Gestione del rapporto d’aspetto delle immagini

.pa-blog-image-5-4 .entry-featured-image-url { padding-top: 30.0%; display: block; } .pa-blog-image-5-4 .entry-featured-image-url img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; }

Questa sezione serve a mantenere un rapporto d’aspetto fisso (landscape 3:2) per le immagini in evidenza, evitando che risultino troppo alte o troppo basse, indipendentemente dalla dimensione del contenitore.

• .pa-blog-image-5-4 .entry-featured-image-url: viene impostato un padding-top del 30%, che determina l’altezza proporzionale del contenitore immagine.
• .pa-blog-image-5-4 .entry-featured-image-url img: l’immagine viene posizionata in modo assoluto e ridimensionata per coprire l’intero contenitore grazie a object-fit: cover, che mantiene il corretto rapporto d’aspetto senza distorcere l’immagine.

Ecco fatto

Con poche righe di CSS hai trasformato l'aspetto del blog, ottenendo un layout moderno e ben strutturato, con immagini in evidenza a sinistra e contenuti a destra. Questa personalizzazione, se applicata correttamente, migliorerà non solo l'estetica ma anche la leggibilità del blog.

Se vuoi continuare a esplorare altre personalizzazioni di Divi, resta sintonizzato sul blog sitiweb-tutorial.divento.it

Buon design!