Come modellare il modulo dei commenti di Divi all'interno di un modello di post sul blog

Progettare un modello di post di blog è piuttosto semplice con il generatore di temi Divi. Ma c'è una cosa che tende a essere trascurata quando si progettano modelli di blog, ed è la sezione dei commenti. Per fortuna, Divi ha un modulo di commenti personalizzabile che può essere facilmente aggiunto a un modello di post di blog. In questo post, ti mostreremo come creare due design di sezioni di commenti personalizzati che puoi includere in qualsiasi modello di blog. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

Diamo un'occhiata a come appaiono i design del layout dei commenti su schermi di diverse dimensioni. Il primo design è uno stile minimal in bianco e nero e il secondo è più colorato.

Desktop

Tavoletta

Telefono

Desktop

Tavoletta

Mobile

Scarica i modelli del modulo dei commenti GRATUITAMENTE

Per mettere le mani sui modelli del modulo dei commenti gratuiti, dovrai prima scaricarli 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!

Ricreiamo il design del modulo dei commenti n. 1

Crea un disegno di sfondo

Il primo passo per ricreare il modello di layout dei commenti in bianco e nero è progettare lo sfondo dei punti. Uno per la visualizzazione desktop e un altro per gli schermi reattivi. Se vuoi crearlo da solo, avrai bisogno dello strumento per la creazione di modelli di Adobe Illustrator. Altrimenti, puoi reperire un modello simile da Internet o utilizzare quello incluso nel file .zip scaricabile sopra.

1. In Adobe Illustrator, crea una tavola da disegno vuota di circa 1920 px di altezza + 670 px di larghezza.
2. Crea un cerchio nero all'interno di un quadrato bianco con margini circa la metà delle dimensioni del cerchio.
3. Seleziona entrambe le forme e crea un motivo facendo clic su oggetto> motivo> crea.
4. Nel creatore di modelli, scegli "mattone per colonna" e salva come campione di pattern.
5. Crea una forma delle dimensioni della tavola da disegno e applica il motivo.
6. Per le dimensioni dello schermo reattive, riduci la forma a metà delle sue dimensioni. Premi MAIUSC per mantenere le proporzioni dei cerchi.
7. Copia e incolla la forma modellata accanto alla prima e ora hai lo stesso motivo con cerchi più piccoli.
8. Scarica entrambi separatamente.

Apri il generatore di temi e aggiungi un nuovo modello

Ora è il momento di aprire il generatore di temi. Aggiungi un nuovo modello.

Seleziona il modello per tutti i post

Usa il nuovo modello su tutti i post.

Aggiungi corpo personalizzato e costruisci da zero

Ultimo ma non meno importante, inizia a creare il corpo personalizzato del modello.

Aggiungi nuova sezione

Sfondo

Ora possiamo iniziare a creare il design per il layout dei commenti. All'interno dell'editor del modello, noterai una sezione. Apri le impostazioni della sezione e carica le immagini di sfondo del motivo. Aggiungi anche una sovrapposizione sfumatura.

• Sfondo: gradiente
• Colore 1: bianco semitrasparente rgba (255,255,255,0.96)
• Colore 2: Bianco #ffffff
• Posiziona il gradiente sopra l'immagine di sfondo: Sì
• Immagine:
  • Desktop: Pattern a punti Immagine 1
  • Tablet e telefono: immagine modello punti 2

Aggiungi nuova riga

Struttura della colonna

Ora aggiungi una nuova riga con due colonne.

Dimensionamento

Quindi, regola le dimensioni della riga.

• Larghezza grondaia personalizzata: 2
• Larghezza: 80%
• Larghezza massima: 100%

Impostazioni colonna 2

Frontiera

Nelle impostazioni delle colonne, aggiungi un bordo superiore alla seconda colonna.

• Stile: solo in alto
• Larghezza: 3px
• Colore: Nero #ffffff

Aggiungi modulo di testo alla colonna 1

Contenuto

Aggiungi il primo modulo di testo alla colonna 1 con alcuni contenuti H3 a tua scelta.

• Testo: paragrafo

Testo dell'intestazione

Quindi, nella scheda Progettazione, modella il testo dell'intestazione.

• Livello di intestazione: H3
• Carattere: GFS Didot
• Colore: Nero #000000
• Taglia:
  • Desktop: 5vw
  • Tablet: 9vw
  • Telefono: 13vw

Spaziatura

Inoltre, regola la spaziatura.

• Imbottitura inferiore
  • Desktop: 3vw
  • Tablet e telefono: 7vw

Aggiungi il modulo delle testimonianze alla colonna 1

Contenuto

Ora aggiungi un modulo di testimonianza alla colonna 1 con alcuni contenuti a tua scelta. Carica anche un'immagine.

• Autore: lettore fedele
• Titolo di lavoro: Responsabile marketing dei contenuti
• Azienda: Tiger Media Company
• Corpo: testo del paragrafo
• Immagine: foto ritratto

Sfondo

Assicurati che lo sfondo sia trasparente

• Colore di sfondo: trasparente

Elementi

Nella scheda elementi, seleziona per mostrare l'icona del preventivo.

• Mostra icona preventivo: Sì

Icona citazione

Quindi, modella l'icona della citazione come segue.

• Colore: Nero #000000
• Sfondo: Bianco #ffffff
• Dimensione carattere icona:
  • Desktop: 2vw
  • Tablet: 5vw
  • Telefono: 9vw

Immagine

Modificare le impostazioni dell'immagine successivamente.

• Larghezza e altezza:
  • Desktop: 110 px
  • Tablet e telefono: 90 px
• Angoli arrotondati: 90 px
• Colore del bordo: trasparente

Testo

Modifica anche l'allineamento del testo.

• Allineamento: Centro

Corpo del testo

Quindi, modella il corpo del testo.

• Carattere: Verdana
• Colore nero
• Taglia:
  • Desktop: 0.7vw
  • Tablet: 2vw
  • Telefono: 3vw

Testo dell'autore

Continua stilizzando il testo dell'autore.

• Carattere: GFS Didot
• Peso: grassetto
• Colore: Nero #ffffff
• Taglia:
  • Desktop: 1.2vw
  • Tablet: 2.5vw
  • Telefono: 4vw
• Spaziatura lettere: 1px

Posizione del testo

Quindi, il testo della posizione.

• Carattere: GFS Didot
• Colore: Nero #ffffff
• Taglia:
  • Desktop: 0.9vw
  • Tablet: 2vw
  • Telefono: 3vw
• Altezza della linea: 2em

Testo aziendale

Inoltre, il testo dell'azienda.

• Carattere: GFS Didot
• Colore: Nero #ffffff
• Taglia:
  • Desktop: 0.7vw
  • Tablet: 2vw
  • Telefono: 3vw
• Altezza della linea: 2em

Dimensionamento

Continuare regolando il dimensionamento del modulo.

• Larghezza:
  • Desktop: 60%
  • Compressa: 65%
  • Telefono: 75%
• Allineamento del modulo: Centro

Spaziatura

Inoltre, regola la spaziatura.

• Imbottitura superiore:
  • Desktop: 1.5vw
  • Tablet: 5vw
  • Telefono: 6vw

Frontiera

Infine, aggiungi un bordo superiore al modulo.

• Stili bordo: solo in alto
• Larghezza: 2px
• Colore: Nero #ffffff

Aggiungi modulo commenti alla colonna 2

Elementi

Passando alla colonna 2, aggiungi un modulo commenti. Modificare le impostazioni degli elementi come segue.

• Mostra l'avatar dell'autore: No
• Mostra pulsante Rispondi: Sì
• Mostra conteggio commenti: No

Campi

Passa alla scheda di progettazione del modulo e modifica le impostazioni dei campi.

• Colore del testo: nero #oooooo
• Colore di sfondo: grigio pallido # f7f7f7
• Colore del testo in primo piano: nero #oooooo
• Colore di sfondo della messa a fuoco: grigio pallido # f7f7f7
• Carattere: GFS Didot
• Dimensione del testo:
  • Desktop: 0.9vw
  • Tablet: 1.5vw
  • Telefono: 2.5vw
• Spaziatura lettere: 1px

Testo del titolo del modulo

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

• Carattere: GFS Didot
• Colore: Nero #ffffff
• Taglia:
  • Desktop: 0.9vw
  • Tablet: 2.5vw
  • Carattere: 3.5vw

Meta testo

Continua stilizzando il meta testo.

• Carattere: GFS Didot
• Colore: Nero #ffffff
• Taglia:
  • Desktop: 1.3vw
  • Tablet: 3vw
  • Telefono: 4vw

Testo del commento

Inoltre, il testo del commento.

• Carattere: Verdana
• Colore: Nero #ffffff
• Taglia:
  • Desktop: 0.7vw
  • Tablet: 1.7vw
  • Telefono: 2.7vw
• Spaziatura lettere: 1px
• Altezza della linea: 1,8 em

Pulsante

Andando avanti, dai uno stile ai pulsanti.

• Dimensione del testo:
  • Desktop: 0.9vw
  • Tablet: 2.5vw
  • Telefono: 3.5vw
• Colore del testo: bianco #000000
• Sfondo: Nero #ffffff
• Spaziatura lettere: 1px
• Carattere: GFS Didot

Dimensionamento

Quindi, regola le impostazioni di dimensionamento del modulo.

• Larghezza: 90%
• Allineamento del modulo: Centro

Spaziatura

Infine, anche il distanziamento.

• Imbottitura superiore:
  • Desktop: 4vw
  • Tablet e telefono: 8vw
• Imbottitura sinistra e destra: 3vw

Ricreare il design del modulo commenti #2

Crea un disegno di sfondo

Il primo passo per ricreare il layout del modulo dei commenti dei cerchi colorati è preparare uno sfondo. Puoi creare un semplice design circolare all'interno del tuo editor grafico preferito. Questi sono i passaggi da eseguire per creare l'immagine di sfondo:

1. Crea una tela larga 1800 px e alta circa 1800 px.
2. Aggiungi due cerchi, uno più grande dell'altro.
3. Colora i cerchi e aggiungi un po' di trasparenza.
4. Posiziona i due cerchi leggermente sovrapposti in alto a sinistra della tela.
5. Raggruppa i cerchi come un oggetto e duplicali.
6. Capovolgi i cerchi e posizionali in diagonale verso il basso ea destra dai primi due.
7. Assicurati di lasciare spazio in alto e in basso. Quando ci sono molti commenti, l'immagine si ripeterà e verrà affiancata verticalmente.

Il design dello sfondo che abbiamo creato per questo modello di layout dei commenti è disponibile anche nella cartella zippata che puoi scaricare all'inizio del tutorial.

Apri il generatore di temi e aggiungi un nuovo modello

Ora è il momento di aprire il generatore di temi. Aggiungi un nuovo modello.

Seleziona il modello per tutti i post

Applica il modello a tutti i post.

Aggiungi corpo personalizzato e costruisci da zero

E inizia a creare il corpo personalizzato del modello.

Aggiungi nuova sezione

Una volta nell'editor dei modelli, noterai una sezione. Apri quella sezione e carica l'immagine di sfondo. Includi anche una sovrapposizione di colori sfumati.

Sfondo

• Sfondo: gradiente
• Colore sfumato 1: rgba bianco trasparente (255,255,255,0,55)
• Colore sfumato 2: rgba bianco trasparente (255,255,255,0,55)
• Immagine: sfondo di cerchi

Spaziatura

Inoltre, regola la spaziatura della sezione prima di aggiungere una riga.

• Imbottitura superiore e inferiore: 200 px

Aggiungi nuova riga

Struttura della colonna

Ora aggiungi una riga con tre colonne.

Dimensionamento

Prima di aggiungere moduli, regola il dimensionamento della riga.

• Larghezza grondaia personalizzata: 2
• Larghezza: 80%
• Larghezza massima: 100%

Impostazioni colonna 2

Sfondo

Ora, modella la seconda colonna aggiungendo uno sfondo blu.

• Colore di sfondo: blu # 51a2ff

Frontiera

Continua arrotondando i bordi.

• Angoli arrotondati: 1vw tutti e quattro gli angoli

Scatola ombra

Infine, aggiungi anche un'ombra di scatola.

• Ombra: terza opzione
• Intensità sfocatura: 80px
• Colore: rgba(0,0,0,0.13)

Aggiungi modulo persona alla colonna 1

Contenuto

È ora di aggiungere i moduli. Inizia con un modulo persona nella colonna 1 e aggiungi il contenuto.

• Nome: Jenny McAbee
• Posizione: Collaboratore regolare
• Corpo: testo in paragrafo
• Immagine: foto ritratto

Sfondo

Aggiungi uno sfondo bianco al modulo.

• Colore di sfondo: bianco #000000

Immagine

Nella scheda Design, modella il bordo dell'immagine come segue.

• Angoli arrotondati: 0.5vw in alto a sinistra e in alto a destra
• Stili di bordo: bordo inferiore
  • Larghezza: 5px
  • Colore: blu # 51a2ff

Testo del titolo

Continua stilizzando il testo dell'intestazione.

• Livello di intestazione: H4
• Carattere: Alegreya Sans SC
• Stile: TT
• Colore: #021859
• Taglia:
  • Desktop: 1vw
  • Tablet: 3vw
  • Telefono: 5vw
• Spaziatura lettere: 1px
• Altezza della linea: 1,6 em

Corpo del testo

Poi anche il corpo del testo.

• Carattere: Lato
• Colore: Blu #1a1f73
• Taglia:
  • Desktop: 0.7vw
  • Tablet: 2vw
  • Telefono: 3vw
• Altezza della linea: 2em

Posizione del testo

Continua con il testo della posizione.

• Carattere: Lato
• Stile: corsivo
• Colore: #021859
• Taglia:
  • Desktop: 0.8vw
  • Tablet: 3vw
  • Telefono: 3.5vw

Dimensionamento

Quindi, regola le dimensioni.

• Larghezza:
  • Scrivania: 100%
  • Compressa: 50%
  • Telefono: 70%
• Allineamento del modulo: Centro

Spaziatura

Inoltre, il distanziamento.

• Imbottitura superiore e inferiore: 4vw

Frontiera

Quindi, aggiungi alcuni angoli arrotondati.

• Angoli arrotondati: o.5vw su tutti e quattro gli angoli
• Stili bordo: 24 px tutti e quattro i lati
  • Colore: Bianco #ffffff

Scatola ombra

Infine, aggiungi un'ombra di scatola.

• Ombra: terza opzione
• Intensità sfocatura: 80px
• Colore: rgba(0,0,0,0.13)

Aggiungi il modulo Segui social media alla colonna 1

Reti

Sotto il modulo persona, aggiungi un modulo follow sui social media con tre social network.

• Facebook
• Linkedin
• Twitter

Impostazioni di rete

Applica un colore di sfondo trasparente a ciascun social network. Devi farlo uno per uno.

• Sfondo: trasparente

Allineamento

Nelle impostazioni di progettazione principali, centrare l'allineamento del modulo.

• Allineamento del modulo: Centro

Icona

Infine, colora le icone di blu.

• Colore: blu # 51a2ff
• Taglia:
  • Desktop: 1vw
  • Tablet e telefono: 4vw

Aggiungi modulo di testo alla colonna 2

Contenuto

Passa alla colonna 2. Aggiungi un modulo di testo con alcuni contenuti h3 a tua scelta.

• Testo: lasciaci un commento

Sfondo

Aggiungi uno sfondo bianco.

• Colore di sfondo: bianco #ffffff

Testo dell'intestazione

Quindi passa alla scheda Design e modella il testo dell'intestazione.

• Livello di intestazione: H3
• Carattere: Alegreya Sans SC
• Peso: grassetto
• Stile carattere: TT
• Colore: Blu #021859
• Taglia:
  • Desktop: 2vw
  • Tablet e telefono: 5.5vw

Spaziatura

Infine, regola la spaziatura.

• Imbottitura superiore:
  • Desktop: 3vw
  • Tablet: 2vw
  • Telefono: 6vw
• Imbottitura inferiore
  • Desktop e Tablet: 3vw
• Imbottitura sinistra e destra:
  • Desktop e Tablet: 1vw

Aggiungi modulo commenti alla colonna 2

Elementi

Ora aggiungi il modulo dei commenti alla colonna 2. Abilita tutti gli elementi.

• Mostra l'avatar dell'autore: Sì
• Mostra pulsante Rispondi: Sì
• Mostra conteggio commenti: Sì

Sfondo

Aggiungi uno sfondo bianco al modulo dei commenti.

• Colore di sfondo: bianco #ffffff

Campi

Quindi, inizia a modellare il modulo regolando le impostazioni dei campi come segue

• Colore di sfondo: bianco #ffffff
• Colore del testo: blu #1a1f73
• Colore di sfondo della messa a fuoco: bianco #ffffff
• Colore del testo di messa a fuoco: blu # 1a1f73
• Carattere: Alegreya Sans SC
• Stile: TT
• Taglia:
  • Desktop: 1vw
  • Tablet: 3vw
  • Telefono: 4vw
• Angoli arrotondati: 5px tutti gli angoli

Immagine

Modifica anche le impostazioni dell'immagine.

• Angoli arrotondati: 5px
• Stile del bordo: tutti i lati
• Larghezza: 3px
• Colore: Blu #1a1f73

Testo conteggio commenti

Quindi, il testo del conteggio dei commenti.

• Livello di intestazione: H3
• Carattere: Alegreya Sans SC
• Stile carattere: TT
• Colore: Blu #021859
• Taglia:
  • Desktop: 1.3vw
  • Tablet: 3vw
  • Telefono: 5vw
• Altezza della linea: 2 em

Testo del titolo del modulo

Inoltre, dai uno stile al testo del titolo del modulo.

• Livello di intestazione: H3
• Carattere: Alegreya Sans SC
• Stile carattere: TT
• Colore: Blu #021859
• Taglia:
  • Desktop: 1vw
  • Tablet: 3vw
  • Telefono: 5vw
• Altezza della linea: 2 em

Meta testo

Passa al meta testo e allo stile come segue.

• Carattere: Lato
• Colore: #021859
• Taglia:
  • Desktop: 1vw
  • Tablet: 2.7vw
  • Telefono: 3.5vw

Testo del commento

Poi il testo del commento.

• Carattere: Lato
• Colore: #021859
• Taglia:
  • Desktop: 0.9vw
  • Tablet: 1.8vw
  • Telefono: 2.5vw

Pulsante

Non dimenticare di modellare anche i pulsanti.

• Dimensione del testo:
  • Desktop: 0.9vw
  • Tablet: 2.5vw
  • Telefono: 3.5vw
• Colore del testo: bianco #ffffff
• Raggio del bordo: 5px
• Carattere: Lato

Spaziatura

Inoltre, la spaziatura del modulo commenti.

• Margine superiore:
  • Desktop: -1vw
  • Tablet e telefono: -3.3vw
• Imbottitura superiore:
  • Desktop e tablet: 3vw
  • Telefono: 4vw
• Imbottitura inferiore:
  • Desktop: 3vw
  • Telefono e tablet: 0vw
• Imbottitura sinistra e destra:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefono: 7vw

Frontiera

Infine, aggiungi alcuni angoli arrotondati al modulo dei commenti.

• Stili bordo: 2px tutti e quattro i lati
• Colore: Blu #1a1f73

Aggiungi il modulo di attivazione della posta elettronica alla colonna 3

Contenuto

Passa alla colonna 3 e a un modulo di attivazione della posta elettronica. Assegna un titolo al modulo.

• Testo: Ricevi aggiornamenti regolari
• Corpo: testo in paragrafo

Account email

Imposta il tuo provider di posta elettronica nella scheda dell'account di posta elettronica. Scegli un elenco e aggiungi la tua chiave API.

• Provider di posta elettronica
  • Elenco
  • Chiave API

Campi

Quindi, seleziona per utilizzare un solo campo nome.

• Usa campo nome singolo: Sì

Sfondo

Aggiungi uno sfondo bianco al modulo.

• Colore di sfondo: bianco

Disposizione

Passare al design ta e modificare le impostazioni del layout come segue.

• Layout: corpo a sinistra, modulo a destra
• Nome Larghezza intera: Sì
• Nome Larghezza intera: Sì
• Cognome Larghezza intera: Sì
• Larghezza intera e-mail: Sì

Campi

Quindi, modella le impostazioni dei campi.

• Colore del testo: blu #1a1f73
• Colore di sfondo: bianco #ffff
• Colore del testo di messa a fuoco: blu # 1a1f73
• Colore di sfondo della messa a fuoco: bianco #ffff
• Carattere: Lato
• Dimensione del testo:
  • Desktop: 0.7vw
  • Tablet: 2.2vw
  • Telefono: 3.2vw
• Spaziatura lettere: 1px
• Angoli più arrotondati: 0.2vw su tutti gli angoli
• Stili di bordo: tutti e quattro i lati
  • Larghezza: 2px
  • Colore: Blu #1a1f73

Testo del titolo

Segue il testo del titolo.

• Livello di intestazione: H4
• Carattere: Alegreya Sans SC
• Peso: Medio
• Stile carattere: TT
• Colore: Blu #1a1f73
• Taglia:
  • Desktop: 1vw
  • Tablet: 4vw
  • Telefono: 5vw
• Spaziatura lettere: 1px

Corpo del testo

Inoltre, il corpo del testo.

• Carattere: Lato
• Colore: Blu #1a1f73
• Taglia:
  • Desktop: 0.7vw
  • Tablet: 2.3vw
  • Telefono: 3vw

Testo del messaggio di risultato

Non dimenticare il testo del messaggio di risultato.

• Carattere: Lato
• Colore: Blu #1a1f73
• Taglia:
  • Desktop: 0.7vw
  • Tablet: 2.3vw
  • Telefono: 3vw

Pulsante

Inoltre, modella il pulsante.

• Dimensione del testo:
  • Desktop: 0.7vw
  • Tablet: 2.3vw
  • Telefono: 3vw
• Colore del testo: bianco #ffffff
• Colore di sfondo: blu # 51a2ff
• Carattere: Lato

Spaziatura

Regola la spaziatura.

• Imbottitura superiore e inferiore: 4vw

Frontiera

Quindi, aggiungi alcuni angoli arrotondati.

• Angoli arrotondati: o.5vw su tutti e quattro gli angoli

Scatola ombra

Infine, aggiungi un'ombra di scatola.

• Ombra: terza opzione
• Intensità sfocatura: 80px
• Colore: rgba(0,0,0,0.13)

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato di questo tutorial.

Desktop

Tavoletta

Telefono

Desktop

Tavoletta

Mobile

È un modulo per i commenti Wrap!

Questo è tutto! Hai appena aggiunto una sezione commenti personalizzata al modello di post del tuo blog. Ci auguriamo che questi design ispirino le tue creazioni di costruttori di temi Divi. Sei stato in grado di scaricare i file JSON di entrambi i design all'inizio di questo tutorial. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto!