Come progettare una casella autore dinamica per il modello di post del tuo blog con Divi

È essenziale menzionare l'autore del post nei post del tuo blog. Ora, con Divi's Theme Builder puoi aggiungere una casella autore dinamica a livello di sito ai tuoi post. Puoi anche modellare la casella dell'autore usando le opzioni integrate di Divi, questo può portare a un bel web design. In questo tutorial, ti mostreremo esattamente come progettare una bellissima casella dell'autore dinamica all'interno del tuo modello di post. Potrai anche scaricare gratuitamente il file JSON del modello di post!

Andiamo ad esso.

Anteprima

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

Desktop

Mobile

Scarica il modello di post GRATUITAMENTE

Per mettere le mani sul modello di post gratuito, 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 "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!

1. Vai a Divi Theme Builder e aggiungi un nuovo modello di post

Vai a Divi Theme Builder e aggiungi un nuovo modello

Inizia andando al Divi Theme Builder. Una volta lì, aggiungi un nuovo modello.

Usa il modello su tutti i post

Usa il nuovo modello su tutti i tuoi post.

• Usa su: tutti i post

Inizia a costruire il corpo del modello

E inizia a costruire il corpo del modello.

2. Costruisci il corpo del modello di post sul blog

Impostazioni della sezione

Colore di sfondo

All'interno dell'editor del modello, noterai una sezione. Apri le impostazioni della sezione e aggiungi un colore di sfondo.

• Colore di sfondo: #270ffff

Immagine di sfondo

Carica l'immagine di sfondo che trovi nella cartella zippata che hai potuto scaricare all'inizio di questo post.

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Apri le impostazioni della riga e modifica la larghezza massima nelle impostazioni di dimensionamento.

• Larghezza massima: 1380 px

Aggiungi il modulo del titolo del post alla colonna

Elementi

L'unico modulo di cui abbiamo bisogno in questa riga è un modulo Post Title. Stiamo disabilitando l'immagine in primo piano del post nelle impostazioni degli elementi.

• Mostra immagine in primo piano: No

Impostazioni testo

Passa alla scheda di progettazione del modulo e cambia il colore del testo nelle impostazioni generali del testo.

• Colore del testo: chiaro

Impostazioni del testo del titolo

Modifica le impostazioni del testo del titolo in seguito.

• Carattere del titolo: Work Sans
• Dimensione del testo del titolo: 7rem (desktop), 4rem (tablet), 2rem (telefono)
• Spaziatura delle lettere del titolo: -2px

Impostazioni meta testo

Insieme alle impostazioni del meta testo.

• Meta Font: Work Sans
• Dimensione del meta testo: 1 rem

Aggiungi nuova sezione

Spaziatura

Aggiungi una nuova sezione normale al corpo del modello, apri le impostazioni della sezione e rimuovi tutto il riempimento superiore predefinito.

• Imbottitura superiore: 0px

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza massima: 1380 px

Spaziatura

Rimuovi anche tutta l'imbottitura superiore predefinita.

• Imbottitura superiore: 0px

Impostazioni colonna 1

Spaziatura

Quindi, apri le impostazioni della colonna 1 e aggiungi alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 200 pixel (desktop), 50 pixel (tablet), 20 pixel (telefono)
• Imbottitura inferiore: 200 px (desktop), 50 px (tablet), 20 px (telefono)
• Imbottitura sinistra: 100 pixel (desktop), 50 pixel (tablet), 20 pixel (telefono)
• Imbottitura destra: 100 px (desktop), 50 px (tablet), 20 px (telefono)

Scatola ombra

Aggiungi anche un'ombra di casella alla prima colonna.

• Forza sfocatura ombra scatola: 60 px
• Colore ombra: rgba(0,0,0,0.09)

Aggiungi modulo contenuto post alla colonna 1

Impostazioni testo

È ora di iniziare ad aggiungere moduli! Posiziona il modulo Post Content nella colonna 1 e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Work Sans
• Dimensioni del testo: 1 rem (desktop), 0,9 rem (tablet e telefono)
• Altezza riga di testo: 2,3 em

Impostazioni del testo dell'intestazione

Modifica anche le diverse impostazioni del testo dell'intestazione.

• Carattere dell'intestazione: Work Sans
• Titolo 2: Dimensione testo: 1.6rem (H2), 1.5rem (H3), 1.4rem (H4), 1.3rem (H5), 1.2rem (H6)
• Altezza della linea di prua: 1,3 em

ID CSS

Completa le impostazioni del modulo aggiungendo un ID CSS.

• ID CSS: blog-post-content

Aggiungi modulo codice alla colonna 1

Inserisci il codice CSS dell'intestazione

Per aggiungere dello spazio tra i diversi elementi del contenuto del post, aggiungeremo un modulo di codice alla colonna 1 e inseriremo le seguenti righe di codice CSS:

<style>
#blog-post-content h2, h3, h4, h5, h6 {
margin-top: 50px;
margin-bottom: 50px;
}

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Aggiungi modulo persona alla colonna 2

Contenuto dinamico

Nella seconda colonna, l'unico modulo di cui abbiamo bisogno è un Modulo Persona. Selezioneremo i seguenti contenuti dinamici:

• Nome: Post Autore
• Posizione: Autore
• Corpo: biografia dell'autore

Contenuto dinamico dell'immagine

Aggiungi anche l'immagine dinamica del profilo dell'autore al modulo.

• Immagine: immagine del profilo dell'autore

Colore di sfondo al passaggio del mouse

Quindi, aggiungi un colore di sfondo bianco al passaggio del mouse.

• Colore di sfondo: #ffffff

Impostazioni del testo del titolo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H3 di conseguenza:

• Livello titolo titolo: H3
• Carattere del titolo: Work Sans
• Dimensione del testo del titolo: 1.1rem

Impostazioni del corpo del testo

Modifica anche le impostazioni del testo del corpo.

• Carattere del corpo: Work Sans
• Dimensione del testo del corpo: 0,9 rem
• Altezza della linea del corpo: 2em

Impostazioni testo posizione

Quindi, modifica le impostazioni del testo del carattere di posizione.

• Carattere posizione: Work Sans
• Dimensione testo posizione: 0,9 rem

Dimensionamento predefinito

Modificare l'altezza nelle impostazioni di dimensionamento.

• Altezza: 160 px (desktop), automatico (tablet e telefono)

Dimensionamento al passaggio del mouse

E riporta l'altezza all'auto al passaggio del mouse.

• Altezza: auto

Spaziatura

Successivamente, aggiungiamo dello spazio attorno al modulo utilizzando il riempimento personalizzato.

• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Bordo predefinito

E useremo anche un bordo.

• Larghezza bordo sinistro: 0 px (desktop), 4 px (tablet e telefono)
• Colore bordo sinistro: #270fff

Confine al passaggio del mouse

Modifica la larghezza del bordo al passaggio del mouse.

• Larghezza bordo sinistro: 4px

Ombra casella predefinita

Quindi, aggiungi un'ombra di scatola.

• Forza sfocatura ombra scatola: 60 px
• Colore ombra: rgba(0,0,0,0) (desktop), rgba(0,0,0,0.11) (tablet e telefono)

Ombra del riquadro al passaggio del mouse

Cambia il colore dell'ombra al passaggio del mouse.

• Colore ombra: rgba(0,0,0,0.11)

Filtri predefiniti

Andando avanti, cambieremo l'opacità.

• Opacità: 41% (desktop), 100% (tablet e telefono)

Filtri al passaggio del mouse

Riporta l'opacità al 100% al passaggio del mouse.

• Opacità: 100%

Elemento principale CSS

Per aggiungere l'effetto appiccicoso che hai potuto notare nell'anteprima di questo post, aggiungeremo alcune righe di CSS personalizzato all'elemento principale del modulo.

position: sticky;
position: -webkit-sticky;
top: 50px !important;

Immagine membro CSS

Ci assicuriamo che l'immagine del profilo dell'autore sia allineata a sinistra aggiungendo una singola riga di codice CSS all'immagine del membro del modulo.

text-align: left;

Visibilità predefinita

Per nascondere il contenuto del modulo sul desktop, modificheremo gli overflow nella scheda Avanzate.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Visibilità al passaggio del mouse

Faremo apparire il contenuto al passaggio del mouse modificando gli overflow in visibili.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Aggiungi nuova sezione

Aggiungi un'altra sezione al tuo design.

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento di conseguenza:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza massima: 1380 px

Aggiungi il modulo dei commenti alla colonna

Impostazioni dei campi

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

• Colore di sfondo dei campi: #ffffff
• Imbottitura superiore dei campi: 20px
• Imbottitura inferiore dei campi: 20 px
• Font Fields: Work Sans
• Dimensioni del testo dei campi: 1rem

Conteggio commenti Impostazioni testo

Modifica anche le impostazioni del testo del conteggio dei commenti.

• Livello di intestazione del conteggio dei commenti: H2
• Carattere conteggio commenti: Work Sans
• Dimensione del testo del conteggio dei commenti: 1,5 rem

Impostazioni del testo del titolo del modulo

Quindi, modifica le impostazioni del testo del titolo del modulo.

• Titolo del modulo Livello titolo: H3
• Carattere del titolo del modulo: Work Sans
• Dimensione del testo del titolo del modulo: 1.2rem

Impostazioni meta testo

Modifica anche le impostazioni del meta testo.

• Meta Font: Work Sans
• Dimensione del meta testo: 1 rem

Impostazioni testo commento

Stiamo modificando anche le impostazioni del testo dei commenti.

• Carattere del commento: Work Sans
• Dimensione del testo del commento: 1rem
• Altezza della riga di commento: 2,3 em

Impostazioni dei pulsanti

Completa le impostazioni del modulo applicando uno stile al pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1rem
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #270fff
• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px

• Carattere pulsante: Work Sans

3. Salva le modifiche del generatore di temi e visualizza il risultato

Una volta completato il modello, assicurati di salvare tutte le modifiche, esci dal Theme Builder e visualizza 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 progettare un bellissimo box autore dinamico utilizzando le opzioni integrate di Divi, la funzione dinamica e il Theme Builder. Con queste tre cose combinate, ora è più facile che mai personalizzare il modello del tuo post sul blog e accreditare l'autore del post in modo creativo. Sei stato anche in grado di scaricare il file JSON gratuitamente! 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.