5 modi per essere creativi con il modulo Persona di Divi

Tutti i nuovi aggiornamenti delle funzionalità Divi che sono avvenuti negli ultimi due mesi hanno innegabilmente ampliato la gamma di possibilità che hai durante la progettazione di siti web. Per questo tutorial, abbiamo creato 5 modi diversi per essere creativi con il Divi Person Module senza utilizzare alcun codice CSS aggiuntivo. L'obiettivo principale di questo post è ispirarti prima di iniziare il tuo prossimo progetto Divi. Il modulo Persona viene spesso utilizzato per condividere più informazioni sui membri del team o per condividere testimonianze. Con questi 5 diversi esempi, sei pronto per dare una spinta al design alle tue pagine.

Arriviamo ad esso!

Anteprima

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

Desktop

Mobile

Iscriviti al nostro canale Youtube

Ricrea l'esempio n. 1

Aggiungi nuova sezione

Iniziamo a creare il primo esempio! Apri una pagina nuova o esistente e aggiungi una sezione normale.

Aggiungi nuova riga

Struttura della colonna

Senza modificare le impostazioni della sezione, aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Apri le impostazioni della riga e apporta alcune modifiche alle impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Quindi, apri le impostazioni di spaziatura e aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 100 px (desktop), 80 px (tablet e telefono)
• Imbottitura inferiore: 100 px (desktop), 80 px (tablet e telefono)
• Imbottitura sinistra: 100 pixel (desktop), 30 pixel (tablet), 25 pixel (telefono)
• Imbottitura destra: 100 pixel (desktop), 30 pixel (tablet), 25 pixel (telefono)

Aggiungi modulo immagine alla colonna 1

Carica immagine

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo immagine alla prima colonna e carica un'immagine quadrata a tua scelta.

Scatola ombra

Continua andando alla scheda Design e applicando un'ombra sottile.

Filtri

Puoi anche giocare con le impostazioni dei filtri per aggiungere un effetto alla tua immagine.

• Saturazione: 40%
• Contrasto: 130%

Aggiungi modulo persona n. 1 alla colonna 2

Aggiungi contenuto

Il prossimo modulo di cui avremo bisogno è un Modulo Persona. Vai avanti e aggiungine uno alla seconda colonna e compila i campi del nome e della posizione.

Sfondo sfumato

Aggiungi uno sfondo sfumato a questo modulo.

• Colore 1: rgba(11,15,229,0.41)
• Colore 2: RGB (45,237,255,0,87)
• Direzione del gradiente: 150 gradi

Impostazioni del testo del titolo

Quindi, modifica le impostazioni del testo del titolo nella scheda Design.

• Carattere del titolo: Baloo
• Colore del testo del titolo: #ffffff
• Dimensione del testo del titolo: 20px

Impostazioni del corpo del testo

Modifica anche le impostazioni del testo del corpo.

• Peso del carattere del corpo: leggero
• Colore del corpo del testo: #ffffff

Spaziatura

E aggiungi alcuni margini personalizzati e valori di riempimento nelle impostazioni di spaziatura.

• Margine sinistro: -4vw (desktop e tablet), 0vw (telefono)
• Margine destro: 8vw (desktop e tablet), 0vw (telefono)
• Imbottitura superiore: 25px
• Imbottitura inferiore: 25px
• Imbottitura sinistra: 20px

Frontiera

Stiamo anche aggiungendo un sottile bordo sinistro al modulo.

• Larghezza bordo sinistro: 3px
• Colore bordo sinistro: #ffffff

Scatola ombra

Insieme a un'ombra di scatola che ti aiuterà a creare profondità sulla pagina.

• Intensità della sfocatura dell'ombra della scatola: 80 px

Aggiungi il modulo persona n. 2 alla colonna 2

Aggiungi contenuto

Aggiungi un altro modulo Persona proprio sotto il precedente. Usiamo questo modulo per mostrare i profili dei social media e la descrizione.

Impostazioni icona

Vai alla scheda Design e cambia il colore dell'icona nelle impostazioni dell'icona.

• Colore icona: #50e8fe

Spaziatura

Ultimo ma non meno importante, apri le impostazioni di spaziatura e aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 30px
• Imbottitura sinistra: 30px (desktop e tablet), 0px (telefono)

Ricrea l'esempio n. 2

Aggiungi nuova sezione

Al prossimo esempio! Aggiungi una nuova sezione alla tua pagina.

Aggiungi nuova riga

Struttura della colonna

Aggiungi una nuova riga a questa sezione utilizzando la seguente struttura di colonne.

Colore di sfondo della colonna 2

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un colore di sfondo della colonna 2.

• Colore di sfondo della colonna 2: #f4f4f4

Dimensionamento

Quindi, vai alla scheda Design e apporta alcune modifiche alle impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati nelle impostazioni di spaziatura.

• Imbottitura superiore: 100 px (desktop), 80 px (tablet e telefono)
• Imbottitura inferiore: 100 px (desktop), 80 px (tablet e telefono)
• Imbottitura sinistra: 100 pixel (desktop), 30 pixel (tablet), 25 pixel (telefono)
• Imbottitura destra: 100 pixel (desktop), 30 pixel (tablet), 25 pixel (telefono)

Aggiungi modulo immagine alla colonna 1

Carica immagine

È ora di iniziare ad aggiungere moduli! Il primo modulo di cui avremo bisogno è un modulo immagine nella colonna 1. Carica un'immagine a tua scelta.

Scatola ombra

Quindi, aggiungi un'ombra di scatola all'immagine.

• Intensità sfocatura ombra scatola: 160 px

Filtri

Puoi anche giocare con le impostazioni dei filtri.

• Saturazione: 40%
• Contrasto: 130%

Aggiungi modulo persona n. 1 alla colonna 2

Aggiungi contenuto

Nella seconda colonna, il primo modulo di cui avremo bisogno è un Modulo Persona. Compila i campi nome e posizione.

Colore di sfondo

Vai alle impostazioni dello sfondo e aggiungi un colore di sfondo trasparente.

• Colore di sfondo: rgba (255,255,255,0.7)

Impostazioni testo

Quindi, cambia l'orientamento del testo nelle impostazioni del testo.

• Orientamento del testo: al centro

Impostazioni del testo del titolo

Modifica anche le impostazioni del testo del titolo.

• Carattere del titolo: Abril Fatface
• Colore del testo del titolo: #000000
• Dimensione del testo del titolo: 40px

Impostazioni del corpo del testo

Insieme alle impostazioni del testo del corpo.

• Peso del carattere del corpo: leggero
• Colore del corpo del testo: #000000
• Dimensione del testo del corpo: 15px

Spaziatura

Stiamo creando una sovrapposizione utilizzando un margine sinistro negativo nelle impostazioni di spaziatura.

• Margine sinistro: -21.64vw (Desktop), -46.1vw (Tablet), 0vw (Telefono)
• Imbottitura superiore: 30px
• Imbottitura inferiore: 30px

Scatola ombra

E stiamo anche applicando una sottile ombra a scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px

Aggiungi il modulo persona n. 2 alla colonna 2

Aggiungi contenuto

Il secondo modulo di cui abbiamo bisogno nella colonna 2 è un altro modulo Persona. Qui, stiamo aggiungendo i collegamenti e la descrizione dei social media.

Impostazioni icona

Continua andando alla scheda Design e cambiando il colore dell'icona nelle impostazioni dell'icona.

• Colore icona: #000000

Spaziatura

Aggiungi anche alcuni margini personalizzati e valori di riempimento.

• Margine superiore: 3vw
• Imbottitura superiore: 30px
• Imbottitura inferiore: 30px
• Imbottitura sinistra: 30px
• Imbottitura destra: 30px

Ricrea l'esempio n. 3

Aggiungi nuova sezione

Al terzo esempio! Aggiungi una nuova sezione alla tua pagina.

Aggiungi nuova riga

Struttura della colonna

Quindi, aggiungi una nuova riga alla sezione utilizzando la seguente struttura di colonne:

Dimensionamento

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 100 px (desktop), 80 px (tablet e telefono)
• Imbottitura inferiore: 100 px (desktop), 80 px (tablet e telefono)
• Imbottitura sinistra: 100 pixel (desktop), 30 pixel (tablet), 25 pixel (telefono)
• Imbottitura destra: 100 pixel (desktop), 30 pixel (tablet), 25 pixel (telefono)

Aggiungi il modulo n. 1 della persona alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi il primo modulo persona alla colonna 1 e compila i campi nome e posizione.

Colore di sfondo

Quindi, aggiungi un colore di sfondo al modulo.

• Colore di sfondo: #ffffff

Impostazioni del testo del titolo

Modifica anche le impostazioni del testo del titolo.

• Peso del carattere del titolo: Ultra grassetto
• Colore del testo del titolo: #000000
• Dimensione del testo del titolo: 40px
• Spaziatura delle lettere del titolo: -4px

Impostazioni del corpo del testo

Fai lo stesso per le impostazioni del testo del corpo.

• Peso del carattere del corpo: leggero
• Colore del corpo del testo: #000000
• Dimensione del testo del corpo: 15px

Spaziatura

Continua andando alle impostazioni di spaziatura e aggiungi alcuni margini personalizzati e valori di riempimento.

• Margine superiore: 40 px (desktop), 0 px (tablet e telefono)
• Imbottitura superiore: 30px
• Imbottitura inferiore: 30px
• Imbottitura sinistra: 30px
• Imbottitura destra: 30px

Frontiera

Aggiungi '20px' anche nell'angolo in alto a sinistra nelle impostazioni del bordo.

Scatola ombra

E dai al modulo un'ombra colorata.

• Forza sfocatura ombra scatola: 140 px
• Colore ombra: rgba (31,15,255,0.66)

Aggiungi il modulo persona n. 2 alla colonna 1

Aggiungi contenuto

Al modulo della seconda persona nella colonna 1! Utilizza questo modulo per visualizzare i collegamenti e la descrizione dei social media.

Colore di sfondo

Quindi, vai alle impostazioni dello sfondo e aggiungi un colore di sfondo bianco.

• Colore di sfondo: #ffffff

Impostazioni icona

Cambia anche il colore dell'icona.

• Colore icona: #000000

Spaziatura

Continua aggiungendo alcuni valori di spaziatura personalizzati nelle impostazioni di spaziatura.

Frontiera

E aggiungi "20px" nell'angolo in basso a sinistra.

Scatola ombra

Ultimo ma non meno importante, aggiungi l'ombra della scatola.

• Posizione verticale dell'ombra del riquadro: 50 px
• Forza sfocatura ombra scatola: 140 px
• Forza di diffusione dell'ombra della scatola: -10px
• Colore dell'ombra: rgba (2,219,219,0,26)

Aggiungi modulo immagine alla colonna 2

Carica immagine

Il prossimo modulo di cui avremo bisogno è un modulo immagine. Vai avanti e aggiungine uno alla seconda colonna e carica un'immagine a scelta.

Frontiera

Assegna a questo modulo '20px' di angoli arrotondati nelle impostazioni del bordo.

Scatola ombra

E aggiungi una sottile ombra a scatola.

Filtri

Ancora una volta, sentiti libero di giocare con le impostazioni dei filtri per modificare l'aspetto dell'immagine.

Ricrea l'esempio #4

Aggiungi nuova sezione

Al quarto esempio! Aggiungi una nuova sezione alla tua pagina.

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Modifica anche le impostazioni di spaziatura.

• Imbottitura superiore: 100 px (desktop), 80 px (tablet e telefono)
• Imbottitura inferiore: 100 px (desktop), 80 px (tablet e telefono)
• Imbottitura sinistra: 100 pixel (desktop), 30 pixel (tablet), 25 pixel (telefono)
• Imbottitura destra: 100 pixel (desktop), 30 pixel (tablet), 25 pixel (telefono)

Aggiungi modulo persona alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi un Modulo Persona alla colonna 1 e compila tutti i campi.

Impostazioni icona

Quindi, vai alle impostazioni dell'icona e cambia il colore dell'icona.

• Colore icona: #000000

Impostazioni testo

Modifica anche l'orientamento del testo nelle impostazioni del testo.

• Orientamento del testo: al centro

Impostazioni del testo del titolo

Quindi, apri le impostazioni del testo del titolo e apporta alcune modifiche.

• Peso del carattere del titolo: Ultra grassetto
• Colore del testo del titolo: #000000
• Dimensione del testo del titolo: 40px
• Spaziatura delle lettere del titolo: -4px

Impostazioni del corpo del testo

Modifica anche le impostazioni del testo del corpo.

• Peso del carattere del corpo: leggero
• Colore del corpo del testo: #000000
• Dimensione del testo del corpo: 15px
• Altezza della linea del corpo: 2em

Spaziatura

E crea una forma utilizzando valori di riempimento personalizzati nelle impostazioni di spaziatura.

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

Frontiera

Crea un cerchio aggiungendo "700 px" a ciascuno degli angoli nelle impostazioni del bordo e aggiungi anche un bordo sottile.

• Larghezza bordo: 1px
• Colore bordo: #333333

Aggiungi modulo immagine alla colonna 2

Carica immagine

Continua aggiungendo un modulo immagine alla seconda colonna e carica un'immagine quadrata a tua scelta.

Spaziatura

Modifica le impostazioni di spaziatura di questo modulo.

• Margine superiore: 7vw (desktop), -15vw (tablet), -5vw (telefono)
• Margine sinistro: -5vw (desktop), 0vw (tablet e telefono)

Frontiera

Crea una forma circolare da questa immagine aggiungendo "1000px" a ciascuno degli angoli del modulo.

Scatola ombra

Aggiungi anche un'ombra sottile.

• Intensità sfocatura ombra scatola: 160 px
• Forza di diffusione dell'ombra della scatola: -10px

Filtri

E finisci il design giocando con le impostazioni dei filtri dell'immagine.

• Saturazione: 0%
• Contrasto: 130%

Ricrea l'esempio n. 5

Aggiungi nuova sezione

Al prossimo e ultimo esempio! Aggiungi una nuova sezione alla tua pagina.

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Sfondo sfumato colonna 1

Apri le impostazioni della riga e aggiungi uno sfondo sfumato della colonna 1.

• Colore 1: #dddddd
• Colore 2: #ffffff
• Colonna 1 Direzione gradiente: 90 gradi
• Colonna 1 Posizione iniziale: 40%
• Posizione finale della colonna 1: 40%

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e apporta alcune modifiche.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati alla riga.

• Imbottitura superiore: 100 px (desktop), 80 px (tablet e telefono)
• Imbottitura inferiore: 100 px (desktop), 80 px (tablet e telefono)
• Imbottitura sinistra: 100 pixel (desktop), 30 pixel (tablet), 25 pixel (telefono)
• Imbottitura destra: 100 pixel (desktop), 30 pixel (tablet), 25 pixel (telefono)

Aggiungi modulo persona alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi un Modulo Persona alla colonna 1 e compila tutti i campi.

Impostazioni icona

Quindi, cambia il colore dell'icona nelle impostazioni dell'icona.

• Colore icona: #000000

Impostazioni testo

Modifica anche l'orientamento del testo nelle impostazioni del testo.

• Orientamento del testo: a destra

Impostazioni del testo del titolo

Successivamente, apporta alcune modifiche alle impostazioni del testo del titolo.

• Carattere del titolo: Chenla
• Colore del testo del titolo: #000000
• Dimensione del testo del titolo: 50px
• Spaziatura delle lettere del titolo: -1px

Impostazioni del corpo del testo

Fai lo stesso per le impostazioni del testo del corpo.

• Peso del carattere del corpo: leggero
• Colore del corpo del testo: #000000
• Dimensione del testo del corpo: 15px
• Altezza della linea del corpo: 2em

Spaziatura

Continua aggiungendo alcuni valori di riempimento personalizzati alle impostazioni di spaziatura del modulo.

• Imbottitura superiore: 200 px (desktop), 100 px (tablet e telefono)
• Imbottitura inferiore: 200 px (desktop), 100 px (tablet e telefono)
• Imbottitura sinistra: 500 px (desktop), 250 px (tablet), 50 px (telefono)
• Imbottitura destra: 200 px (desktop), 100 px (tablet), 50 px (telefono)

Frontiera

Infine, aggiungi un bordo al modulo.

Aggiungi modulo immagine alla colonna 2

Carica immagine

Il modulo successivo di cui avremo bisogno è un modulo immagine nella colonna 2. Vai avanti e carica un'immagine quadrata a tua scelta.

Spaziatura

Quindi, apporta alcune modifiche alle impostazioni di spaziatura di questo modulo.

• Margine superiore: 7vw (desktop), -2vw (tablet e telefono)
• Margine sinistro: -10vw (desktop), 0vw (tablet e telefono)

Scatola ombra

Assegna anche un'ombra al modulo immagine.

• Intensità sfocatura ombra scatola: 160 px
• Forza di diffusione dell'ombra della scatola: -10px

Filtri

E per finire, gioca con le impostazioni dei filtri.

• Saturazione: 50%
• Contrasto: 130%

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 5 modi diversi per essere creativi con il Divi Person Module. Puoi utilizzare questi esempi per qualsiasi sito web che stai costruendo e creare le tue versioni alternative modificando le impostazioni di ciascun elemento di design. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!