Desideri visualizzare la pagina del tuo blog DIVI come una griglia a più colonne?
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, con solo pochi frammenti CSS, il tuo blog si trasformerà in un bellissimo layout a griglia multicolonna. Inoltre, le colonne saranno fluide e reattive su tutte le dimensioni dei browser, quindi non dovrai preoccuparti di aggiornare le query multimediali o le impostazioni reattive.
Puoi anche consultare il nostro articolo per sapere Come creare una pagina blog con il modulo DIVI Blog.
Panoramica
Prima di saltare in questo tutorial, diamo prima un'occhiata al risultato che vogliamo ottenere.
Scarica DIVI ora!!!
Configurazione di un modulo Blog con layout a schermo intero
Il modulo Blog di DIVI può essere utilizzato per aggiungere un blog in qualsiasi punto del tuo sito web. Semplifica davvero la creazione di 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 layout di blog predefinito da uno dei pacchetti di layout gratuiti di DIVI che contiene già un modulo Blog con uno stile base.
Per caricare il layout del blog predefinito:
- Crea una nuova pagina dalla dashboard di WordPress
- Dagli un nome pertinente e fai clic su "Usa Divi Builder"
- Clicca su “Scegli layout”
- Digita nella barra di ricerca 'Fashion Designer' e scegli il layout 'Fashion Designer Blog Page'
- Assicurati di scegliere Layout blog e quindi fai clic su "Scegli layout"
Una volta caricato il layout, trova il modulo Blog utilizzato per visualizzare i post del blog e apri le impostazioni.
Imposta il numero di post
Nelle impostazioni del blog, aggiorna il file contenuto per limitare il numero di post a 10. (Ciò è principalmente per ragioni estetiche, poiché la nostra griglia alla fine includerà due righe di cinque post del blog.)
- Numero di posizioni: 10
Seleziona Layout a schermo intero
Dato che disegneremo il nostro blog in colonne usando CSS Grid, dobbiamo assicurarci che il layout del modulo Blog sia 'Schermo intero' (non 'Griglia'). Ciò garantirà che i post del blog siano impilati verticalmente nel loro normale ordine di pagina.
Per modificare il layout del modulo Blog, apri le impostazioni del modulo e nella scheda Stile apri il menu a discesa Modello e seleziona Schermo intero .
Ora ogni post del blog si estenderà per l'intera larghezza della colonna (o del contenitore principale).
Aggiungiamo un bordo ai post del blog. Aggiorna le opzioni del bordo come segue:
- Larghezza bordo: 1px
- Colore bordo: rgba (150,104,70,0.35)
Aggiunta di una classe CSS personalizzata al modulo Blog
Per indirizzare efficacemente questo particolare modulo Blog (non un 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 CSS Grid
Ora che il nostro modulo Blog è configurato con un layout a schermo intero, siamo pronti per aggiungere il nostro CSS personalizzato.
Inseriamo un modulo Codice sotto il modulo Blog per aggiungere CSS alla pagina.
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 codice CSS:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
La prima riga del CSS presenta il file contenuto (o moduli) sotto forma di griglia.
display: grid;La seconda riga di CSS definisce il modello della colonna della griglia.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));La terza riga determina la spaziatura tra gli elementi della griglia.
gap : 20px ;A questo punto, la griglia reattiva a cinque colonne è pronta per l'uso. In effetti, se non vuoi usare l'impaginazione o i bordi per i tuoi post del blog, puoi fermarti qui.
Ecco il risultato finora.
Personalizza gli elementi della griglia
Quindi possiamo aggiungere alcune righe di CSS che prendono di mira gli elementi della griglia in modo che siano allineati alla parte superiore di ogni riga e abbiano un po' di riempimento.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Rimossa l'impaginazione della griglia
Attualmente, se hai l'impaginazione attiva sul modulo blog, verrà trattata come l'ultimo elemento della griglia nella griglia CSS. Per rimuovere completamente 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%);
}
Vediamo il risultato finora!
Suggerimento: regola le dimensioni di tutte le immagini in primo piano (o miniature)
A questo punto, potresti notare l'incoerenza nell'altezza delle immagini presenti in ogni post del blog. Se vuoi che abbiano tutti la stessa altezza, puoi anche utilizzare 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;
}
Con un margine interno superiore del 56,25%, dovremmo ottenere un rapporto di aspetto di 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
Ed ecco un'anteprima finale del nostro modulo Blog con le nostre nuove colonne e griglia. E come possiamo vedere, la griglia è completamente reattiva.
Scarica DIVI ora!!!
Conclusione
È fatta ! In questo tutorial ti abbiamo mostrato come organizzare i post del tuo blog in colonne.
Siamo stati in grado di ristrutturare l'intero modulo Divi Blog in un layout fluido a cinque colonne. Spero che questo ti faccia risparmiare tempo e ti dia più opzioni per creare bellissime pagine di blog. Puoi anche consultare Come creare una pagina Blog con il modulo Blog di Divi
Vedi anche le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
