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 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

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

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

<br /> @media (min-width: 767px) {<br />

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

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

.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

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

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

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

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

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

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!