Come creare dinamicamente un modello di post di blog semplice e intuitivo con Divi

Quando condividi nuovi post di blog sul tuo sito web, è importante rendere l'esperienza di lettura il più semplice possibile per i tuoi visitatori. Ciò significa sbarazzarsi del maggior numero possibile di distrazioni, pur mantenendo la corrispondenza del marchio sul tuo sito web. È anche importante consentire ai visitatori di controllare la dimensione del testo tramite il browser, è qui che l'unità di font rem relativa torna utile. Consente alle persone di regolare la dimensione del carattere visualizzato all'interno del browser. In questo tutorial, creeremo un modello di post di blog bello e semplice che tenga molto in considerazione l'esperienza dell'utente. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il modello di post del blog semplice e intuitivo

Per mettere le mani sul modello di post del blog gratuito semplice e intuitivo, devi 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 "riabbonato" 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.

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

1. Vai a Divi Theme Builder e crea un nuovo modello

Vai a Divi Theme Builder

Inizia andando al Divi Theme Builder.

Crea nuovo modello

Crea un nuovo modello e utilizzalo su tutti i tuoi post.

• Usa su: tutti i post

2. Inizia a costruire il corpo del post sul blog

Quindi, inizia a creare il corpo personalizzato del tuo modello di post.

Aggiungi la riga n. 1 alla sezione esistente

Struttura della colonna

All'interno dell'editor del modello, aggiungi una nuova riga alla sezione già presente utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Bordo colonna 1 e 2

Aggiungi un bordo destro alla prima e alla seconda colonna successiva.

• Larghezza bordo destro: 1 px (desktop), 0 px (tablet e telefono)
• Colore bordo destro: #333333

Aggiungi un modulo di testo a ogni colonna

Contenuto dinamico

Continua aggiungendo un modulo di testo a ciascuna colonna e seleziona del contenuto dinamico per ogni modulo individualmente.

• Modulo di testo nella colonna 1: categorie di post

• Modulo di testo nella colonna 2: data di pubblicazione successiva

• Modulo di testo nella colonna 3: Conteggio commenti post
• Dopo: commenti

Impostazioni testo

Passa alla scheda di progettazione di ciascun modulo e modifica le impostazioni del testo come segue:

• Carattere del testo: Lato
• Dimensione del testo: 1.1rem
• Spaziatura delle lettere del testo: 1px
• Altezza riga di testo: 2em

Aggiungi riga #2

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Aggiungi il modulo di testo n. 1 alla colonna

Contenuto dinamico

Aggiungi un modulo di testo e seleziona il contenuto dinamico del titolo del post.

• Contenuto dinamico: titolo del post

• Prima: <H1>
• Dopo: </H1>

Impostazioni testo H1

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H1 come segue:

• Carattere dell'intestazione: Display Playfair
• Allineamento del testo dell'intestazione: al centro
• Dimensione del testo dell'intestazione: 6.2rem (desktop), 3.2rem (tablet), 2.3rem (telefono)

Spaziatura

Aggiungi successivamente un margine superiore e inferiore personalizzato.

• Margine superiore: 50 px
• Margine inferiore: 100 px

Aggiungi il modulo di testo n. 2 alla colonna

Contenuto dinamico

Aggiungi un altro modulo di testo proprio sotto il precedente e seleziona il contenuto dinamico dell'estratto del post.

• Contenuto dinamico: post estratto

Impostazioni testo

Modificare le impostazioni del testo del modulo come segue:

• Carattere del testo: Lato
• Dimensione del testo: 1.1rem
• Spaziatura delle lettere del testo: 1px
• Altezza riga di testo: 2em
• Allineamento del testo: Centro

Aggiungi riga #3

Struttura della colonna

Aggiungi un'altra riga alla sezione utilizzando la seguente struttura di colonne:

Schermo

Assicurati che le colonne rimangano una accanto all'altra aggiungendo una riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi modulo immagine alla colonna 1

Contenuto dinamico

Continua aggiungendo un modulo immagine alla colonna 1 e seleziona il contenuto dinamico dell'immagine del profilo dell'autore.

• Contenuto dinamico: immagine del profilo dell'autore

Allineamento

Passa alla scheda di progettazione del modulo e modifica l'allineamento dell'immagine.

• Allineamento immagine: a destra

Dimensionamento

Modificare la larghezza successiva.

• Larghezza: 50px

Spaziatura

Aggiungi un margine destro su tablet e telefono.

• Margine destro: 20 px (tablet e telefono)

Frontiera

E completa le impostazioni del modulo aggiungendo un raggio di bordo alle impostazioni del bordo.

• Tutti gli angoli: 100 px

Aggiungi modulo di testo alla colonna 2

Contenuto dinamico

Nella seconda colonna, avremo bisogno di un modulo di testo. Seleziona il contenuto dinamico dell'autore del post.

• Contenuto dinamico: post autore

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Lato
• Dimensione del testo: 1.1rem
• Spaziatura delle lettere del testo: 1px

Spaziatura

Aggiungi successivamente alcuni valori di margine personalizzati.

• Margine superiore: 15px
• Margine sinistro: 20px (tablet e telefono)

Aggiungi riga #4

Struttura della colonna

Aggiungi un'altra riga alla sezione utilizzando la seguente struttura di colonne:

Aggiungi modulo di testo alla colonna

Lascia la casella del contenuto vuota

Aggiungi un modulo di testo alla colonna e assicurati di lasciare vuota la casella del contenuto.

Immagine di sfondo dinamica

Aggiungi il contenuto dinamico dell'immagine in primo piano all'immagine di sfondo del modulo.

• Contenuto dinamico: immagine in primo piano

Dimensionamento

Continua modificando le impostazioni di dimensionamento del modulo su schermi di diverse dimensioni.

• Larghezza: 800 px (desktop), 500 px (tablet), 300 px (telefono)
• Allineamento del modulo: Centro

Spaziatura

Aggiungi anche un'imbottitura superiore e inferiore personalizzata su schermi di diverse dimensioni.

• Imbottitura superiore: 400 px (desktop), 250 px (tablet), 150 px (telefono)
• Imbottitura inferiore: 400 px (desktop), 250 px (tablet), 150 px (telefono)

Frontiera

E aggiungi un raggio del bordo alle impostazioni del bordo per trasformare il modulo in un cerchio.

• Tutti gli angoli: 500 px

Aggiungi nuova sezione

Alla prossima sezione regolare.

Aggiungi riga n. 1

Struttura della colonna

Aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Aggiungi modulo contenuto post alla colonna

Impostazioni testo

Aggiungi il modulo Post Content alla colonna, passa alla scheda design del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Lato
• Dimensione del testo: 1.1rem
• Spaziatura delle lettere del testo: 1px
• Altezza riga di testo: 2,3 em

Impostazioni del testo dell'intestazione

Modifica anche le impostazioni del testo dell'intestazione.

• Carattere dell'intestazione: Display Playfair
• Dimensioni del testo H2: 3,5 rem (desktop), 2 rem (tablet e telefono)
• Dimensioni del testo H3: 2,5 rem (desktop), 1,5 rem (tablet e telefono)
• Dimensioni del testo H4: 2,3 rem (desktop), 1,3 rem (tablet e telefono)
• Dimensioni del testo H5 e H6: 2rem (desktop), 1rem (tablet e telefono)

Aggiungi riga #2

Struttura della colonna

Aggiungi un'altra riga alla sezione utilizzando la seguente struttura di colonne:

Spaziatura

Aggiungi un margine superiore personalizzato alla riga.

• Margine superiore: 100 px

Aggiungi modulo commento alla colonna

Impostazioni dei campi

L'unico modulo di cui abbiamo bisogno in questa riga è un modulo di commento. Modificare le impostazioni dei campi come segue:

• Colore di sfondo dei campi: #ffffff
• Carattere dei campi: Lato
• Dimensioni del testo dei campi: 1.1rem

• Tutti gli angoli: 0px
• Larghezza bordo campi: 1px
• Colore bordo campi: #000000

Impostazioni immagine

Modifica anche le impostazioni dell'immagine.

• Tutti gli angoli: 100 px

Impostazioni del testo del titolo

Quindi, modifica le impostazioni del testo del titolo.

• Livello titolo titolo: H2
• Carattere del titolo: Display Playfair
• Dimensione del testo del titolo: 3rem (desktop), 2rem (tablet e telefono)
• Altezza della riga del titolo: 1.4em

Impostazioni meta testo

Stile anche il meta testo.

• Meta font: display Playfair
• Dimensione del metatesto: 1.4rem

Impostazioni testo commento

Utilizziamo le seguenti impostazioni per le impostazioni del testo dei commenti:

• Carattere del commento: Lato
• Dimensione del testo del commento: 1.1rem
• Spaziatura delle lettere dei commenti: 1px
• Altezza riga di commento: 2em

Pulsante Impostazioni testo

E completa le impostazioni del modulo stilizzando il pulsante come segue:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1.1rem
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #000000
• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px
• Spaziatura tra le lettere dei pulsanti: 1px
• Carattere pulsante: Lato

• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px

3. Salva le modifiche al modello e al generatore di temi

Una volta completato il design del modello, salva tutte le modifiche di Divi Theme Builder e visualizza in anteprima il risultato sui tuoi post!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare un modello di post di blog bello e semplice incentrato sull'esperienza utente che i tuoi visitatori hanno durante la lettura. Modifica questo modello di post utilizzando le opzioni integrate di Divi per abbinarlo al marchio del tuo sito web. Sei stato anche in grado di scaricare gratuitamente il file JSON del modello! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.