Come modificare il numero di colonne nel modulo Divi Blog

Il modulo blog di Divi può visualizzare i post del blog in un layout a larghezza intera oa griglia. Se scegli il layout della griglia, il numero massimo di colonne che puoi avere è tre. In questo tutorial, esploreremo la combinazione della potenza di CSS Grid con il modulo Divi Blog per creare il numero di colonne desiderato. Con pochi frammenti di CSS, il tuo blog si trasformerà in un bellissimo layout di griglia a più colonne. Inoltre, le colonne risponderanno in modo fluido con tutte le dimensioni del browser, quindi non devi preoccuparti di aggiornare le query multimediali o le impostazioni di risposta. Dopo la magia della griglia CSS, avrai ancora le impostazioni del modulo blog integrato per progettare visivamente il blog senza più CSS personalizzati. Quindi, se stai cercando più colonne per il tuo blog Divi, questo farà il trucco e altro ancora.

Sbirciata

Ecco una rapida occhiata al design che creeremo in questo tutorial.

Ed ecco un codepen che mostra il layout della griglia CSS che aggiungeremo al modulo blog.

Scarica il layout GRATUITAMENTE

Per mettere le mani sul design del modulo blog da questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non verrai "iscritto nuovamente" né riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo pacchetto di layout pagina di destinazione Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi Divi incredibili e gratuiti. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo email qui sotto e clicca su download per accedere al layout pack.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Iscriviti al nostro canale Youtube

Per importare il layout della sezione nella tua Libreria Divi, vai alla Libreria Divi.

Fare clic sul pulsante Importa.

Nel popup di portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta terminato, il layout della sezione sarà disponibile in Divi Builder.

Veniamo al tutorial, vero?

Come modificare il numero di colonne nel modulo Divi Blog utilizzando la griglia CSS

Perché griglia CSS?

Esistono molti modi per creare layout di colonna per il modulo blog utilizzando CSS. Ma per questo caso, ha più senso usare CSS Grid. La proprietà CSS Grid è un modo popolare per creare layout di griglia prevedibili e reattivi per il contenuto con poche righe di CSS. Con esso, possiamo organizzare tutte le schede dei moduli del blog in una griglia completamente reattiva. In breve, offre una soluzione semplice e completa per aggiungere qualsiasi layout di colonna che desideri per il tuo blog Divi. In effetti, l'abbiamo anche usato per creare un layout a griglia per i moduli Divi.

Ora, rivolgiamo la nostra attenzione al modulo blog.

Configurazione di un modulo blog con un layout a larghezza intera

Il modulo Divi Blog può essere utilizzato per aggiungere un blog in qualsiasi punto del tuo sito web. Ciò rende davvero facile creare una pagina del blog in Divi. Tutto quello che devi fare è aggiungere un modulo blog alla pagina usando Divi Builder.

Per questo tutorial, utilizzeremo un modello di pagina del blog predefinito da uno dei nostri pacchetti di layout gratuiti che ha già un modulo blog con alcuni stili di base. Per caricare il layout della pagina del blog predefinito sulla tua pagina, apri il menu delle impostazioni in basso e apri il popup Aggiungi dalla libreria. Da lì, cerca e trova il layout della Pagina del blog di Fashion Design e caricalo nella pagina.

Una volta caricato il layout, trova il modulo blog utilizzato per visualizzare i post del blog e apri le impostazioni del modulo blog.

Imposta conteggio post

Nelle impostazioni del blog, aggiorna il contenuto per limitare il conteggio dei post a 10. (Questo è principalmente per motivi estetici perché la nostra griglia alla fine includerà due righe di cinque post del blog sul desktop.)

• Conteggio post: 10

Seleziona Layout a larghezza intera

Dal momento che creeremo il layout delle colonne per il nostro blog utilizzando CSS Grid, dobbiamo assicurarci che il layout del modulo del blog sia a larghezza intera (non griglia). Ciò garantirà che i post del blog siano impilati verticalmente nel loro normale ordine del documento/della pagina.

Per modificare il layout del modulo blog, apri le impostazioni del modulo blog e, nella scheda Design, apri il menu a discesa Layout e seleziona Larghezza intera .

Ora ogni post del blog dovrebbe occupare l'intera larghezza della colonna (o del contenitore principale).

Solo per i calci, aggiungiamo un bordo ai post del blog in modo da poter avere un'idea migliore di come apparirà la nostra griglia quando aggiungeremo il nostro CSS. Aggiorna le opzioni del bordo come segue:

• Larghezza bordo: 1px
• Colore bordo: rgba(150,104,70,0,35)

Aggiunta della classe CSS personalizzata al modulo Blog

Per indirizzare in modo efficiente questo particolare modulo del blog (e nessun altro) con il nostro CSS, dobbiamo fornire al nostro modulo una classe CSS personalizzata. Nella scheda Avanzate, aggiungi la seguente Classe CSS:

• Classe CSS: et-blog-css-grid

Creazione del layout a più colonne con griglia CSS

Ora che il nostro modulo blog è configurato con un layout a larghezza intera, siamo pronti per aggiungere il nostro CSS personalizzato. Per ora, useremo un modulo di codice per aggiungere il CSS alla pagina. Ma, quando abbiamo finito, puoi sempre spostare il CSS nella tua posizione preferita (come il CSS personalizzato in Opzioni tema o lo style.css del tuo tema figlio).

Aggiungi un nuovo modulo di codice sotto il modulo blog.

Nella casella di immissione del codice, aggiungi i tag di stile necessari per racchiudere qualsiasi codice CSS aggiunto a una pagina.

All'interno dei tag di stile , incolla il seguente snippet di CSS:

.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

La prima riga di CSS dispone il contenuto (o i moduli) in base al modulo della griglia CSS.

visualizzazione: griglia;

La seconda riga di CSS definisce il modello di colonna della griglia.

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

La terza riga determina la spaziatura tra gli elementi della griglia (come la larghezza della grondaia).

divario: 20px;

Come funzionano le colonne della griglia CSS

In questo caso, la griglia aggiungerà colonne ripetutamente secondo necessità per riempire lo spazio rimanente del contenitore della griglia. Ogni colonna avrà una larghezza minima di 200px e una larghezza massima di 1fr (che è esattamente la stessa di auto). Ciò significa che quando il contenitore principale (la riga/colonna Divi) ha una larghezza massima di 1080 px, la griglia avrà 5 colonne. Ogni colonna avrà una larghezza di 200px (la larghezza minima) che equivale a 1000px. Aggiungi i 4 spazi di griglia di 20px e ottieni un totale di 1080px. Una volta che il viewport stringe la griglia sotto i 1080px, la magia della griglia CSS prende il sopravvento e riempie ogni spazio disponibile con i post del blog fino a raggiungere una larghezza di 200px. Le nuove righe verranno create automaticamente quando diventano necessarie per impostazione predefinita.

Per ottenere più colonne puoi modificare il valore minmax di 200px in qualcosa di più piccolo o aumentare la larghezza massima della riga Divi a qualcosa di più grande di 1080px.

Ecco un codepen che mostra la funzionalità CSS Grid Layout che abbiamo aggiunto qui.

A questo punto, la griglia reattiva a cinque colonne è pronta per l'uso. In effetti, non hai intenzione di utilizzare l'impaginazione o i bordi per i post del tuo blog, puoi fermarti qui.

Ecco il risultato finora.

Stile della cartolina del blog (o dell'elemento della griglia)

Successivamente, possiamo aggiungere alcune righe di CSS che hanno come target gli elementi della griglia (o le cartoline del blog) in modo che siano allineati alla parte superiore di ogni riga e abbiano una piccola spaziatura interna.

.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

Rimozione dell'impaginazione dalla griglia

Attualmente, se hai l'impaginazione attiva sul modulo blog, verrà trattata come l'ultimo elemento della griglia nella griglia CSS. Per rimuovere del tutto l'impaginazione dalla griglia, possiamo darle una posizione assoluta e posizionarla direttamente sotto il modulo blog. Per fare ciò, aggiungi il seguente CSS:

.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

Ora i collegamenti di impaginazione sono al sicuro al di fuori della griglia in modo che non vengano spostati su diverse larghezze del viewport.

Diamo un'occhiata al risultato finora!

Suggerimento bonus: regola le dimensioni di tutte le immagini in primo piano (o miniature)

A questo punto, potresti notare l'incoerenza dell'altezza delle immagini in primo piano su ogni cartolina del blog. Se vuoi renderli tutti della stessa altezza, puoi anche usare CSS aggiuntivi per farlo.

.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

Il primo snippet prende di mira il contenitore dell'immagine in primo piano e aggiunge una percentuale di riempimento che sostanzialmente regola l'altezza del contenitore dell'immagine. Ma il primo frammento non funziona finché non posizioniamo l'immagine in primo piano in modo che si adatti perfettamente al centro del contenitore dell'immagine. Per fare ciò diamo all'immagine una posizione assoluta e utilizziamo "object-fit:cover" per fare in modo che l'immagine si estenda per l'intera larghezza e altezza del contenitore.

Con un riempimento superiore del 56,25%, dovremmo ottenere un rapporto di aspetto 16:9 per tutte le nostre immagini.

Sentiti libero di regolare il riempimento sul contenitore dell'immagine per ottenere le proporzioni desiderate per la tua immagine.

Risultato finale

Ecco un altro sguardo all'intero CSS che abbiamo aggiunto al modulo di codice con alcuni commenti.

/* create css grid column template */
.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
/* style css grid item or blog post */
.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

/* remove pagination from blog module grid with absolute position */
.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

/* Resize Featured Image Thumbnails */
.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

Ed ecco un ultimo sguardo al nostro modulo blog con le nostre nuove colonne e il layout della griglia.

Pensieri finali

Mi sorprende sempre cosa si può ottenere con poche righe di CSS usando CSS Grid. In questo caso, siamo stati in grado di ristrutturare l'intero modulo del blog Divi in ​​un layout fluido a cinque colonne. La parte migliore è che non devi preoccuparti di utilizzare le query multimediali! Si spera che questo ti faccia risparmiare tempo e ti dia più opzioni per creare bellissime pagine di blog.

Non vedo l'ora di sentirti nei commenti.

Saluti!