5 suggerimenti per organizzare il contenuto della pagina del blog in Divi
Pubblicato: 2019-12-21Il contenuto della pagina del tuo blog può essere organizzato in molti modi. Poiché si tratta di una pagina di blog, la maggior parte del contenuto consisterà in un feed di post di blog recenti. Sapere come organizzare questo contenuto può essere un ottimo modo per rompere la monotonia e aprire la porta a progetti di pagine del blog più unici.
In questo tutorial, condivideremo con te 5 suggerimenti utili per l'organizzazione del contenuto della pagina del blog in Divi che ti aiuteranno a imparare quanto segue:
- Come creare un layout a due colonne
- Come usare i post appiccicosi
- Come usare i post offset
- Come utilizzare più moduli del blog per creare un layout personalizzato per i post del blog
- Come visualizzare i post recenti per categoria
Sbirciata
Ecco uno sguardo ad alcuni modi in cui organizzeremo il contenuto della pagina del blog in Divi.
Utilizzo di un layout a due colonne
Una sezione di post in primo piano sopra il feed del blog principale
Un dispositivo di scorrimento dei post a tutta larghezza sopra il feed del blog principale
Utilizzo di più moduli blog per un layout e un design unici
Con post recenti per categoria
Cosa ti serve per iniziare
Se non l'hai ancora fatto, installa e attiva il tema Divi.
Per questo tutorial, utilizzerò il secondo modello di pagina di categoria del pacchetto di Theme Builder. Se vuoi usarlo per seguire, scarica il pacchetto e importa il file divi-theme-builder-pack-2-category-page-template.json nel generatore di temi utilizzando le opzioni di portabilità. 
Per impostazione predefinita, il modello importato verrà assegnato a "Tutte le pagine di categoria". Apri le impostazioni del modello e assegnalo al Blog.
Ora sei pronto per iniziare il processo di organizzazione del contenuto della pagina del blog all'interno del modello. Per iniziare, fai clic sull'icona di modifica nell'area del corpo del modello.
Ora puoi usare l'editor di layout per modificare il layout.
5 suggerimenti per organizzare il modello di pagina del blog in Divi
In questo modello, abbiamo un modulo blog che si trova in una riga di una colonna che mostra i post (in tre colonne sul desktop) per la pagina corrente. Questa è una configurazione standard per i modelli di pagine di blog e archivio. Tuttavia, non dobbiamo mantenere questo layout standard per la visualizzazione dei post. Ecco alcuni suggerimenti utili per organizzare il contenuto della pagina del blog in Divi.
#1 Crea un layout a due colonne
Il modulo blog (se impostato sul layout a griglia) visualizzerà i post in una struttura a tre colonne se il modulo viene aggiunto a una riga a una colonna (proprio come nel nostro modello).
Se vuoi modificare il layout per visualizzare i post in un layout a due colonne, ecco qualcosa che puoi fare.
Innanzitutto, modifica il layout delle colonne della riga in un layout di due terzi e un terzo. Questo mostrerà i post del blog in due colonne nella colonna di sinistra della riga.
Quindi, apri le impostazioni per la colonna 1 (quella contenente il modulo blog) e aggiungi il seguente CSS personalizzato all'elemento principale:
width: 100% !important;
Ciò farà sì che la colonna si estenda per l'intera larghezza della riga.
Ora tutto ciò che dobbiamo fare è nascondere la colonna a destra. Apri le impostazioni per la colonna 2 (quella vuota) e disabilita la visibilità della colonna su tutti i dispositivi.
Ora puoi organizzare il contenuto della pagina del blog con due colonne sul desktop anziché tre, se lo desideri.
#2 Usa post appiccicosi
Se hai familiarità con WordPress, potresti già conoscerlo. Ogni post creato in Divi (o WordPress) può essere reso appiccicoso. Quando rendi un post permanente, il post verrà automaticamente visualizzato nella parte anteriore del feed del blog nella pagina del blog, anche prima del post pubblicato più di recente. Questo è un ottimo modo per mettere in evidenza i post che sai che il tuo pubblico vorrà (o avrà bisogno) di vedere.
Per rendere permanente un post, modifica semplicemente un post in Divi e seleziona l'opzione "Rimani in cima al blog" nella barra laterale destra.
Ogni post che crei sarà etichettato come "Appiccicoso" quando visualizzi tutti i post sul backend.
Ora, quando visiti la pagina del blog, puoi vedere che i post appiccicosi sono saltati in primo piano nel feed dei post del blog.
Nota: i post persistenti potrebbero non funzionare come previsto quando si utilizzano gli offset dei post nel modulo Blog. Ad esempio, se imposti il modulo blog per visualizzare 3 post con un offset post di 3, i tuoi post permanenti verranno comunque visualizzati prima (e in aggiunta) ai 3 post.
Prima di passare al suggerimento successivo, ti suggerisco di sbarazzarti dei post appiccicosi.
#3 Usa gli offset dei post per organizzare il contenuto della pagina del blog in sezioni separate
Ogni modulo del blog ha un'opzione per inserire un numero di offerta postale. Questo dice al modulo blog di saltare un certo numero di post recenti del blog prima di visualizzare il feed del blog. Questa opzione è utile ogni volta che vuoi mischiare un po' il layout della pagina del tuo blog utilizzando più moduli del blog per visualizzare i tuoi post. Questo ti dà più flessibilità con il design del layout perché puoi progettare ogni modulo del blog in modo diverso.
Presenta i post più recenti con un modulo blog separato utilizzando Post Offset
Un modo per organizzare il contenuto della pagina del blog sul layout del modello consiste nell'aggiungere una sezione di post del blog in primo piano nella parte superiore della pagina. Questo è un modo per evidenziare i primi tre post più recenti in un modo unico. Ecco ora per farlo.
Aggiungi una nuova sezione regolare al layout.
Quindi aggiungi una riga a una colonna.
Copia il modulo del blog fornito con il modello e incollalo nella nuova riga.
Aggiorna le impostazioni del blog come segue:
- Conteggio post: 3
- Mostra il pulsante Leggi di più: NO
- Mostra categorie: NO
- Mostra conteggio commenti: NO
- Mostra estratto: NO
- Mostra impaginazione: NO
Avremo i tre post più recenti visualizzati nella sezione superiore della pagina.
Ora dobbiamo aggiungere un numero di offset del post al modulo del blog originale in modo che salti i primi tre post che sono già visualizzati sopra.
Apri le impostazioni del blog per il modulo blog originale e aggiorna quanto segue:
- Numero di post-offset: 3
Ora il feed del blog inizierà con il post n. 4.
Per far risaltare la sezione in primo piano nella parte superiore della pagina, puoi aggiungere un gradiente di sfondo.
Ecco un esempio di come sarebbe.
Aggiunta di un dispositivo di scorrimento post a larghezza intera sopra il feed del blog principale
Proprio come la sezione in primo piano sopra, possiamo anche organizzare il contenuto dei post del blog aggiungendo uno slider a tutta larghezza nella parte superiore della pagina del blog. Questo è un design popolare per le pagine del blog e puoi usarlo in combinazione con un modulo blog che ha un post offset.
Ecco come farlo.
Innanzitutto, aggiungi una sezione a larghezza intera al layout.
Quindi aggiungi un modulo di scorrimento post a larghezza intera alla sezione.
Quindi aggiorna le seguenti impostazioni:
- Post per la pagina corrente: SI
- Conteggio post: 3
Quindi aggiorna il design del cursore del post in modo che corrisponda al layout come segue:
- Carattere del titolo: Lato
- Peso del carattere del titolo: grassetto
- Dimensione del testo del titolo: 40px
- Dimensione del testo del corpo: 16px
- Dimensione del testo del pulsante: 14px
- Colore del testo del pulsante: #ff0071
- Colore di sfondo del pulsante: #ffffff
- Larghezza bordo pulsante: 0px
- Carattere pulsante: Lato
- Peso del carattere del pulsante: grassetto
- Stile carattere pulsante: TT
Assicurati che il modulo del blog visualizzi il feed principale con un numero di offset del post ancora impostato su 3 per adattarsi ai 3 post del cursore del post.
Quindi controlla il risultato.
Sembra buono finora.
Ora prendiamo l'idea di utilizzare un modulo blog separato un ulteriore passo avanti con questo prossimo suggerimento.
#4 Aggiunta di più moduli blog ciascuno con un singolo post
Non dobbiamo limitarci ad aggiungere un modulo blog in più a un layout di modello. In effetti, possiamo utilizzare tutti i moduli del blog di cui abbiamo bisogno. Possiamo anche scegliere di visualizzare un solo post per modulo del blog per dare un design unico a una singola cartolina del blog. Quindi, utilizzando gli offset dei post, possiamo creare un layout completamente unico per visualizzare dinamicamente i post del blog.
Ecco come farlo.
Innanzitutto, aggiungi una nuova riga di mezza colonna sopra la riga contenente il modulo blog principale.
Copia il modulo blog originale di seguito e incollalo nella colonna di sinistra della nuova riga. Quindi aggiorna quanto segue:
- Conteggio post: 1
- Post offset numero: 0
- Mostra impaginazione: NO
Quindi, copia il modulo del blog che hai appena creato e incolla un duplicato nella colonna di destra.
Quindi aggiorna quanto segue:
- Numero di offset post: 1
- Mostra immagine in primo piano: NO
- Mostra conteggio commenti: NO
- Mostra estratto: NO
Assicurati di impostare il numero di offset del post su 1 per saltare il primo nella colonna di sinistra.
Ora continua questo processo creando un altro modulo del blog e aumentando il numero di offset del post di 1 ogni volta.
Duplica il modulo del blog nella colonna di destra.
Quindi cambia il numero di post offset su 2.
Duplica il modulo del blog ancora una volta e modifica il numero di offset del post in 3.
Ora puoi avere la libertà di personalizzare il design di ciascuno dei moduli del blog individualmente. Ad esempio, potresti aggiungere un colore di sfondo diverso a ciascuno.
Ecco il risultato.
Se hai intenzione di mantenere il feed del blog principale di seguito, assicurati di aggiornare il numero di offset del post a 4 in modo da ospitare i 4 post nella riga sopra.
Puoi anche vedere questa stessa tecnica utilizzata su alcuni dei nostri modelli di pagine di categoria per il generatore di temi. Dai un'occhiata al nostro tutorial su come creare un modello di pagina di categoria utilizzando lo stesso concetto.
#5 Visualizza i post recenti per categoria sulla pagina del blog
Oltre al feed del blog principale nel modello di pagina del blog, puoi anche visualizzare i tuoi post recenti per categoria. Questo è un ottimo modo per organizzare il contenuto della pagina del blog suddividendo un po' il layout ed evidenziando diverse categorie allo stesso tempo.
Ecco come farlo.
Innanzitutto, aggiungi una nuova riga a una colonna sotto la riga contenente il modulo blog principale.
Quindi aggiorna le impostazioni del blog come segue:
- Messaggi per la pagina corrente: NO
- Tipo di messaggio: Post
- Conteggio post: 3
- Categorie incluse: Business (o una tua)
Verranno visualizzati i tre post più recenti della categoria Affari.
Quindi aggiungi un modulo di testo sopra il modulo blog con un titolo di categoria corrispondente.
E proprio così hai una sezione di categoria in primo piano sulla pagina del tuo blog: un ottimo modo per organizzare il contenuto della pagina del blog!
Puoi anche aggiungere più sezioni di categorie in primo piano, ognuna con un design unico.
Queste sezioni di categoria in primo piano si adattano bene alla parte inferiore del modello di pagina del blog.
Pensieri finali
Questi suggerimenti dovrebbero aiutarti a organizzare il contenuto della pagina del blog in tutti i tipi di modi unici. E questi stessi suggerimenti funzionerebbero per molti altri tipi di modelli (come i modelli di pagine di categoria/archivio) che utilizzano il modulo blog per visualizzare i contenuti. Sentiti libero di esplorare questi suggerimenti e usarli nel tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!