Come progettare un modello di post di blog con Divi's Theme Builder (download GRATUITO)

Pubblicato: 2019-11-05

Un modello di post di blog è probabilmente il modello più importante che puoi aggiungere a un sito di blog. Fornisce una struttura e un design che vengono applicati "magicamente" a tutti i post del blog sul front-end, mentre i blogger devono solo preoccuparsi di scrivere il post sul back-end. Ciò consente di risparmiare drasticamente tempo semplificando il processo di creazione per pubblicare rapidamente il tuo post sul web. E con Divi Theme Builder, non dovrai accontentarti di un modello di post noioso che assomiglia a tutti gli altri post di blog sul web. Puoi creare innumerevoli design autentici (visivamente) e aggiungere facilmente diverse combinazioni di contenuti statici e dinamici in tutto il tuo modello.

In questo post, tratteremo tutto ciò che devi sapere per creare un modello di post per blog utilizzando Divi Theme Builder. Tratteremo molti contenuti, ma penso che rimarrai sorpreso dalla facilità con cui questi modelli possono prendere vita davanti ai tuoi occhi.

Ora cominciamo!

Sbirciata

Ecco una rapida occhiata al modello di post del blog che creeremo in questo tutorial.

Potresti aver notato la somiglianza di questo design con il nostro Digital Marketing Layout Pack. Questo modello di post è stato creato per adattarsi al layout in modo da poterlo utilizzare in combinazione con il pacchetto di layout per il marketing digitale.

Divertiti!

Scarica GRATUITAMENTE il modello di post del blog

Per mettere le mani sul modello di 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 sarai iresubscribei o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

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!

Per importare il layout del modello sul tuo sito Web, dovrai accedere a Divi Theme Builder e utilizzare l'opzione di portabilità per importare il file .json nel generatore di temi.

modello di pagina di categoria divi

Che cos'è un modello di post sul blog e perché ne hai bisogno?

Un modello di post di blog è un modello a livello di sito utilizzato per tutti (o alcuni) dei tuoi singoli post sul tuo sito web. È un modello predefinito costruito con contenuto dinamico in modo che qualsiasi post nuovo o esistente erediterà automaticamente il layout e il design del modello assegnato.

Ci sono alcuni validi motivi per utilizzare un modello di post di blog. Il motivo principale per utilizzare un modello di post di blog è per snellire il processo di blogging. Avere un modello già pronto per i tuoi post può velocizzare drasticamente il processo di creazione eliminando la necessità di progettare gli elementi del post al volo e lasciando ai blogger più tempo per fare ciò che sanno fare meglio: scrivere contenuti. Ma non è tutto! Un modello di post di blog può incorporare elementi extra (come commenti, pulsanti di condivisione e opzioni di posta elettronica) al post per aumentare il coinvolgimento degli utenti e aumentare le conversioni.

Con Divi Theme Builder, creare un modello di post per blog è sorprendentemente facile. Il segreto per creare un modello di post di blog in Divi è capire quali moduli utilizzare e come incorporare in modo efficace elementi di contenuto dinamico nel modello.

Prima di iniziare a costruire insieme un modello di post di blog, esaminiamo prima alcuni degli strumenti disponibili per crearne uno.

Elementi costitutivi di un modello di post sul blog

I modelli di post sul blog possono variare a seconda delle esigenze del blog. Ma in genere, un modello di post di blog sarà costituito dalla seguente struttura:

Intestazione: l'area superiore del post che di solito include il titolo del post, l'immagine in primo piano e i metadati del post (categorie, tag, autore, data del post, ecc.)
Contenuto del post: il contenuto principale dell'articolo.
Articoli correlati: collegamenti ad altri articoli a cui i lettori potrebbero essere interessati.
Commenti: una sezione in cui gli utenti possono aggiungere e rispondere ai commenti sul post.
Invito all'azione: di solito un modulo di attivazione e-mail, icone di condivisione social o un'offerta promozionale di qualche tipo.

Moduli Divi e contenuto dinamico

Un modello di post di blog può essere creato in Divi Theme Builder utilizzando le funzionalità di contenuto dinamico integrate di Divi inerenti ai moduli Divi. Esistono alcuni moduli Divi creati appositamente per i post. Tuttavia, la maggior parte dei moduli Divi avrà la capacità di inserire contenuti dinamici disponibili relativi a un post. Ecco una ripartizione di alcune delle opzioni disponibili quando si progetta un modello di post di blog in Divi.

Moduli Divi creati per i modelli di post
- Modulo di navigazione dei post: utile per fornire collegamenti di navigazione ai post precedenti e successivi.
- Modulo Post Slider: utile per fornire una galleria di post organizzati in base ai più recenti o per categoria.
- Modulo titolo post: utile per visualizzare il titolo del post con un'immagine in primo piano in un comodo modulo.
- Modulo contenuto post: un modulo necessario per il modello di post per visualizzare il contenuto di un post. Il modulo del contenuto del post include anche opzioni di design che possono essere utilizzate come design predefinito per il contenuto del post a livello di sito.

Elementi di contenuto dinamico per modello di post disponibili in tutti i moduli Divi
- Titolo post/archivio
- Estratto del messaggio
- Data odierna
- Tagline del sito
- Biografia dell'autore
- Autore post
- Link del post
- Categorie di post
- Conteggio commenti post
- Data di pubblicazione successiva
- Campi personalizzati

Ora che hai una buona idea degli strumenti disponibili, passiamo a come possiamo creare un modello di post di blog in Divi da zero.

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

Se non lo hai ancora fatto, installa e attiva il tema Divi (o il plug-in Divi Builder se non utilizzi il tema Divi).
Assicurati di aver creato almeno alcuni post del blog per visualizzare i risultati del modello di post del blog che creeremo. Assicurati di includere più contenuto possibile in ogni post (es. immagine in primo piano, categorie, ecc.) in modo da avere un buon esempio di un post reale.

Dopodiché, sei pronto per iniziare a creare un nuovo modello per i post del tuo blog in Divi.

Come costruire un modello di post di blog nel Divi Theme Builder

Iscriviti al nostro canale Youtube

Come tutti i modelli, in Divi Theme Builder viene creato un modello di post di blog che ti consentirà di creare il modello completamente da zero con la potenza di Divi Builder.

Creazione di un nuovo modello

Dal dashboard di WordPress, vai a Divi > Generatore di temi. Quindi fare clic sul riquadro vuoto "aggiungi nuovo modello".

Assegnazione del modello a tutti i post del blog

Una volta aggiunto un nuovo modello, verrà visualizzata la finestra delle impostazioni del modello che ti consentirà di assegnare il modello alle pagine e/o ai post del tuo sito web. Poiché vogliamo creare un modello di post di blog per tutti i post di blog in tutto il sito, seleziona "Tutti i post" e fai clic sul pulsante Crea modello.

Creazione di un layout personalizzato per l'area del corpo

Quindi, fai clic sull'area "Aggiungi corpo personalizzato" del modello per creare una nuova area del corpo per il modello di post. Quindi seleziona "Costruisci corpo personalizzato".

Seleziona l'opzione "Costruisci da zero" per avviare il processo di costruzione.

Costruire il layout del corpo personalizzato per il modello di post

Una volta avviato Template Layout Editor, hai la libertà di creare da zero l'intero corpo del modello di post del tuo blog utilizzando Divi Builder.

Per iniziare, aggiungi una riga di una colonna alla sezione normale predefinita.

Quindi, prima di aggiungere un modulo, aggiorna le impostazioni della sezione con un design di sfondo e un po' di riempimento come segue:

Colore sfondo sfumato sinistro: #8624e1
Colore di sfondo sfumato a destra: #3607a6
Direzione del gradiente: 130 gradi
Posizione di partenza: 25%
Immagine di sfondo: inserisci immagine
Usa effetto parallasse: S
Imbottitura: 7vw superiore, 7vw inferiore

Creazione dell'intestazione del titolo del post come contenuto dinamico con il modulo di testo

All'interno della riga a una colonna, aggiungi un modulo di testo.

Quindi fare clic sull'icona del contenuto dinamico quando si passa con il mouse sull'area del contenuto del corpo.

Seleziona l'elemento Post/Archivio Titolo dall'elenco.

Quindi, fai clic sull'icona a forma di ingranaggio sull'elemento Post/Archive Title e aggiorna le aree di input prima e dopo con i tag h1 come segue:

Prima:

<h1>

Dopo:

</h1>

Ora progetta il titolo con le seguenti impostazioni di design:

Carattere del testo: Roboto
Dimensione del testo del testo: 16px
Altezza riga di testo: 1,8 em
Allineamento del testo: centro
Carattere dell'intestazione: Roboto
Peso del carattere dell'intestazione: grassetto
Dimensione del testo dell'intestazione: 60 px (desktop), 40 px (tablet), 32 px (telefono)
Altezza della linea di prua: 1.2em

Aggiunta dell'immagine in primo piano utilizzando un modulo immagine come contenuto dinamico

Dopo che la sezione del titolo è a posto, aggiungiamo l'immagine in primo piano per il modello di post. Per fare ciò, aggiungi un'altra sezione normale con un layout di due terzi e un terzo di colonna.

Quindi aggiungi un modulo immagine alla colonna di sinistra.

Quindi aggiungi l'elemento di contenuto dinamico dell'immagine in primo piano per l'immagine.

Progettazione del modulo immagine

Passa alla scheda Design e personalizza l'immagine come segue:

Allineamento immagine: centro
Margine: -9vw (desktop), 0vw (tablet)
Angoli arrotondati: 8px
Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 16 px
Intensità sfocatura ombra scatola: 96 px
Forza di diffusione dell'ombra della scatola: -24px

Aggiungi post autore e biografia dell'autore al modulo Blurb come contenuto dinamico

Successivamente, aggiungeremo un post autore e una biografia dell'autore post utilizzando un modulo blog. Quindi, vai avanti e aggiungi un modulo blog nella colonna di destra.

Nelle impostazioni del blurb, passa il mouse sopra la casella di inserimento del titolo e fai clic sull'icona del contenuto dinamico. Quindi aggiungi l'elemento di contenuto dinamico dell'autore del post per il contenuto del titolo.

Quindi, apri le impostazioni dell'autore del post e aggiorna l'input precedente come segue:

Prima: scritto da

Per il contenuto del corpo del modulo blurb, fai clic sull'icona del contenuto dinamico e seleziona l'elemento di contenuto dinamico "Biografia dell'autore" dall'elenco.

Per l'immagine del modulo blurb, aggiungi la "Immagine del profilo dell'autore del post" come contenuto dinamico.

Design Post Autore e Bio Modulo Blurb

Ora ottimizza il design dell'immagine come segue:

Posizionamento immagine/icona: a sinistra
Angoli arrotondati immagine: 50%
Carattere del titolo: Roboto
Peso del carattere del titolo: grassetto
Altezza della riga del titolo: 1,3 em
Carattere del corpo: Lato
Altezza della linea del corpo: 1,4 em
Larghezza immagine: 50 px

Aggiungi categorie di post al modulo Blurb come contenuto dinamico

Sotto l'autore e il modulo biografico dell'autore appena creato, aggiungi un altro modulo blurb sotto di esso e seleziona l'elemento di contenuto dinamico Categorie di post per il titolo.

Quindi aggiorna il blurb con un'icona come segue:

Usa l'icona: S
Icona: vedi screenshot

Modulo Blurb per la categoria Post Design

Aggiorna le impostazioni di progettazione come segue:

Colore icona: #dddddd
Posizionamento immagine/icona: a sinistra
Usa la dimensione del carattere dell'icona: S
Dimensione carattere icona: 20px
Carattere del titolo: Roboto
Peso del carattere del titolo: medio
Colore del testo del titolo: #f92c8b
Dimensione del testo del titolo: 16px
Altezza della riga del titolo: 20 px
Imbottitura: 16px a sinistra

Aggiungi il conteggio dei commenti al modulo Blurb come contenuto dinamico

Per aggiungere il conteggio dei commenti al post per il modello di post del blog, duplica il modulo blurb appena creato.

Quindi aggiorna il contenuto del titolo con l'elemento di contenuto dinamico Post Comment Count.

Poiché il conteggio dei commenti visualizza solo un numero, è necessario integrare il numero con del testo aggiuntivo dopo il numero. Per fare ciò, apri le impostazioni Conteggio commenti post e aggiorna quanto segue:

Dopo: commento/i

Quindi aggiorna l'icona come segue:

Usa l'icona: S
Icona: vedi screenshot

Aggiungi la data di pubblicazione al modulo Blurb come contenuto dinamico

Per l'ultimo pezzo di metadati, duplica il modulo blurb con il conteggio dei commenti. Quindi aggiorna il contenuto del titolo con l'elemento di contenuto dinamico "Data di pubblicazione".

Suggerimento: puoi sempre aprire le impostazioni dell'elemento dinamico Post pubblicazione data per modificare il formato della visualizzazione della data.

Quindi aggiorna l'icona come segue:

Usa l'icona: S
Icona: vedi screenshot

Aggiungi modulo contenuto post con impostazioni di progettazione per il contenuto

Con il titolo del post, l'immagine in primo piano, l'autore del post e i metadati in atto, siamo pronti per il contenuto principale del post.

Aggiungi una nuova riga con un layout a una colonna.

Quindi aggiungi un modulo di contenuto del post alla riga.

Questo modulo di contenuto del post è dove verrà visualizzato il contenuto principale del post. Inoltre, possiamo aggiornare le impostazioni del design per stabilire il design predefinito di tutti i contenuti dei post inseriti utilizzando l'editor predefinito. Possiamo aggiornare le impostazioni per il modulo Post Content proprio come faremmo con qualsiasi altro modulo. E possiamo visualizzare il contenuto fittizio fornito dal modulo mentre aggiorniamo il modulo.

Apri le impostazioni del modulo del contenuto del post e aggiorna le seguenti impostazioni dell'immagine:

Angoli arrotondati immagine: 8px
Image Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 16 px
Intensità sfocatura ombra scatola: 96 px
Forza di diffusione dell'ombra della scatola: -24px

Successivamente, dobbiamo impostare il design per tutti i possibili elementi di contenuto di testo per quando un utente crea un post sul blog utilizzando l'editor predefinito. Apri il gruppo di opzioni di testo per visualizzare le 5 diverse schede di tipi di design di testo: paragrafo, collegamento, elenco non ordinato, elenco ordinato e citazione.

Quindi aggiorna le seguenti opzioni in ciascuna delle schede.

Continua ad aggiornare le impostazioni del testo dell'intestazione per ciascuno dei livelli di intestazione: h1, h2, h3, h4, h5, h6.

Carattere dell'intestazione: Roboto
Peso del carattere dell'intestazione: grassetto
Dimensione testo intestazione (h1): 56 pixel (desktop), 42 pixel (tablet), 28 pixel (telefono)
Dimensione testo intestazione (h2): 45 px (desktop), 35 px (tablet), 24 px (telefono)
Dimensione testo intestazione (h3): 40 px (desktop), 30 px (tablet), 20 px (telefono)
Dimensione testo intestazione (h4): 32 pixel (desktop), 24 pixel (tablet), 18 pixel (telefono)
Dimensione testo intestazione (h5): 28 pixel (desktop), 20 pixel (tablet), 16 pixel (telefono)
Dimensione testo intestazione (h6): 24px (desktop), 18px (tablet), 14px (telefono)

Aggiungi modulo di navigazione post

Sotto il modulo del contenuto del post, aggiungi una nuova riga a una colonna con un modulo di navigazione del post.

Aggiorna il testo del collegamento precedente e successivo come segue:

Link precedente: Prec: %title
Link successivo: Successivo: %title

Quindi aggiorna il design di navigazione del post come segue:

Link Font: Roboto
Peso del carattere dei collegamenti: grassetto
Colore del testo dei collegamenti: #f92c8b

Aggiungi sezione articoli correlati

Dopo la navigazione dei post, siamo pronti per aggiungere una sezione "post correlati" al nostro modello di post del blog. Ciò sarà utile per fornire all'utente post suggeriti in base alla categoria corrente del post visualizzato.

Aggiungi il titolo del post correlato utilizzando il modulo di testo

Prima di aggiungere il modulo blog per inserire i post correlati, è necessario creare un titolo statico per la sezione. Per fare ciò, crea una nuova sezione con una riga a una colonna. Quindi aggiungi un modulo di testo alla riga.

Aggiorna il contenuto del testo con la seguente intestazione H2:

<h2>You May Also Like...</h2>

Quindi aggiorna il design del testo dell'intestazione come segue:

Intestazione 2 Carattere: Roboto
Titolo 2: Dimensione testo: 48 px (desktop), 38 px (tablet), 28 px (telefono)

Ora che il nostro titolo è a posto, siamo pronti per aggiungere i nostri post correlati.

Aggiungi post correlati utilizzando il modulo Blog con i post della categoria corrente

Sotto il modulo di testo contenente il titolo, aggiungi un nuovo modulo Blog.

Quindi aggiorna il contenuto del modulo del blog come segue:

Conteggio post: 3
Categorie incluse: Categoria corrente
Lunghezza dell'estratto: 120
Mostra Autore: NO
Mostra categorie: NO
Mostra impaginazione: NO

L'aspetto più importante di queste impostazioni è la selezione della "categoria corrente". Ciò consentirà al modello di post di estrarre i post più recenti che condividono la stessa categoria del post corrente.

Con le impostazioni del contenuto del modulo blog in atto, passa alle impostazioni di progettazione e aggiorna quanto segue:

Layout: Griglia
Carattere del titolo: Roboto
Dimensione del testo del titolo: 14px
Altezza della riga del titolo: 1,3 em
Carattere del corpo: Lato
Meta Font: Lato
Colore meta testo: #f92c8b
Dimensione del metatesto: 13px
Angoli arrotondati del layout della griglia: 20 px

Continua ad aggiornare il design con un'ombra a scatola come segue:

Larghezza bordo layout griglia: 0px
Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 16 px
Intensità sfocatura ombra scatola: 96 px
Forza di diffusione dell'ombra della scatola: -24px

Modulo Aggiungi commenti

La sezione finale di questo modello di post del blog conterrà i commenti. Per aggiungere commenti al post, crea semplicemente una nuova riga di una colonna e inserisci il modulo dei commenti all'interno.

Modulo Commenti di progettazione

Tutto ciò che resta da fare ora è personalizzare il design del modulo dei commenti in modo che corrisponda al nostro modello. Aggiorna le seguenti impostazioni di progettazione:

Colore di sfondo: #f2f5f9
Colore di sfondo dei campi: #ffffff
Colore sfondo focus campi: #ffffff
Colore del testo di messa a fuoco dei campi: #222222
Margine campi: 3px in basso
Imbottitura campi: 18px in alto, 18px in basso
Carattere dei campi: Lato
Dimensioni del testo dei campi: 16 px
Altezza della linea dei campi: 1.4em

Continua ad aggiornare le impostazioni come segue:

Angoli arrotondati immagine: 60 px
Carattere del titolo: Roboto
Dimensione del testo del titolo: 26 px (desktop), 20 px (tablet), 15 px (telefono)
Altezza della riga del titolo: 1,3 em
Meta Font: Lato
Carattere del commento: Lato
Colore del testo del commento: #222222
Imbottitura: 5% sopra, 5% sotto, 5% sinistra, 5% destra

Infine, personalizza lo stile del pulsante per i commenti come segue:

Dimensione del testo del pulsante: 14px
Larghezza bordo pulsante: 0px
Raggio del bordo del pulsante: 4px
Spaziatura lettere pulsanti: 5 px (desktop), 5,5 px (passa il mouse)
Carattere del pulsante: Roboto
Peso del carattere del pulsante: grassetto
Stile carattere pulsante: maiuscolo (TT)
Imbottitura pulsanti: 16px in alto, 16px in basso

Aggiungi divisore di sezione all'intestazione

Non dimenticare tutte le fantastiche opzioni di design a tua disposizione durante la progettazione del modello di post. Ad esempio, possiamo dare alla sezione dell'intestazione un design divisore. Per fare ciò, torna all'inizio della pagina e apri le impostazioni per la sezione superiore contenente l'intestazione. Quindi aggiorna quanto segue:

Stile divisore inferiore: vedi screenshot
Colore divisore: #ffffff
Altezza divisore: 10vw
Flip divisore: orizzontale

Non dimenticare di salvare le tue impostazioni per il layout e anche per il Theme Builder in modo che le tue modifiche vengano salvate.

Questo è tutto! Diamo un'occhiata al risultato finale.

Risultato finale

Per visualizzare il risultato finale, possiamo aprire qualsiasi post del blog all'interno del nostro sito Divi (poiché il modello è stato assegnato a tutti i post del blog).

Ecco un esempio di post quando lo visualizzi dall'editor di post sul back-end.

Ed ecco il post sul front-end con il nostro modello di post sul blog in atto.

Ed eccolo sul display del Tablet e del Telefono:

Utilizzo di Divi Builder per creare un post sul blog con un modello di post sul blog sul posto

Se lo desideri, puoi facilmente distribuire Divi Builder per progettare un post sul blog utilizzando un modello di post sul blog come questo. Qualsiasi contenuto creato e progettato con Divi Builder verrà visualizzato all'interno dell'area Post Content Module del modello.

Pensieri finali

Spero che questo tutorial sia un buon punto di partenza per creare il tuo modello di post sul blog da zero utilizzando Divi Builder. Non dimenticare di prendere il tempo per considerare tutti gli strumenti disponibili e come vuoi strutturare il layout del modello di post. È sempre importante utilizzare il maggior numero di elementi di contenuto dinamico in tutto il modello di post del blog al fine di semplificare al meglio il processo di creazione coinvolto nel blog. Con un bellissimo modello in atto, un blogger può davvero concentrarsi sulla creazione di contenuti mentre il modello esegue automaticamente tutto il lavoro pesante del design.

Hai creato un modello di post sul blog utilizzando Divi Theme Builder? Fateci sapere cosa ne pensate.

Non vedo l'ora di sentirti nei commenti.

Saluti!