Vai al contenuto principale

Divi Tutorial: come utilizzare il modulo Divi Builder Person

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Il modulo Divi Person è il modo migliore per creare un blocco del profilo personale. Questo è un ottimo componente aggiuntivo da utilizzare nelle pagine Informazioni personali o in quelle che includono i membri del team in cui desideri creare una biografia di singole persone. Questo modulo combina testo, immagini e link ai social media in un unico modulo coerente.

Come configurare il modulo Divi Persona

Prima di poter aggiungere un modulo Divi Person alla tua pagina, devi prima passare a Divi Builder. Una volta installato il tema Divi sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Fare clic su questo pulsante per attivare Divi Builder e accedere a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.

costruttore di divi

Dopo essere entrato in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, ricordati di aggiungere prima una riga alla tua pagina. Abbiamo ottimi tutorial sull'utilizzo degli elementi di Linee e di sezioni di Divi.

modulo persona divi.png

Individua il modulo persona nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "persona" e quindi fare clic su Invio per trovare e aggiungere automaticamente il modulo Persona! Una volta aggiunto il modulo, sarai accolto dall'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

Esempio di caso d'uso: aggiunta di una sezione "Il nostro team" a una pagina Chi siamo

La pagina Chi siamo è un buon posto per presentare i membri del tuo team utilizzando il modulo Persona. Aggiunge un tocco personale e può aiutare a creare fiducia con i nuovi clienti.

Per questo esempio, ti mostrerò come utilizzare il modulo Persona per aggiungere una sezione "Il nostro team" a una pagina su una piccola impresa. Userò un layout a tre persone e tre colonne che mantiene la sezione più compatta e corrisponde al design generale della pagina.

pagina su di noi.jpg

Utilizzando Visual Builder, inserisci una nuova sezione standard con una riga di tre colonne (1/3 1/3 1/3). Quindi aggiungi un modulo Persona alla prima colonna.

modulo persona wordpress divi.png

Aggiorna le impostazioni del modulo Persona come segue:

Opzioni di contenuto

Nome: [Inserisci il nome della persona] Posizione: [Inserisci l'estensione della persona] Inserisci gli URL per i profili dei social media
Descrizione: [Inserisci una breve biografia] Immagine: [Inserisci un'immagine 600 x 600]

Opzioni di design

Icona colore: # fcbf00
Colore icona al passaggio del mouse: # e0a831
Carattere dell'intestazione: Roboto, grassetto, leva in
Dimensione carattere intestazione: 30 px
Colore testo intestazione: # 505050
Spaziatura intestazione lettere: 1 px
Altezza riga di intestazione: 1.5em
Dimensione del carattere del corpo: 18 px
Dimensione linea corpo: 1.4em
Imbottitura personalizzata: 15px su, 15px destra, 15px giù, 15px sinistra

Opzioni avanzate (CSS personalizzato)

Elemento principale:
-webkit-box-ombra: 0 1px 5px RGBA (0, 0, 0, 0.2);
-moz-box-ombra: 0 1px 5px RGBA (0, 0, 0, 0,2);
box-ombra: 0 1px 5px RGBA (0, 0, 0, 0,2);

cambia profilo persona divi.png

Salva le impostazioni

Ora duplica il modulo Persona che hai appena creato due volte e trascina i moduli duplicati sulla seconda e terza colonna della riga. Poiché il design è stato trasferito per ciascuno dei moduli "Persona" duplicati, tutto ciò che devi fare è aggiornare il contenuto con l'immagine, il titolo, la posizione, gli URL dei social media e la descrizione. della persona.

Questo è tutto!

modulo di risultato persona divi.jpg

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Opzioni del contenuto della persona

Nella scheda dei contenuti troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo si troverà sempre in questa scheda.

opzione di contenuto divi.png

Nome di battesimo

Questo è il nome della persona che stai presentando. Il nome viene visualizzato nella parte superiore del modulo in un testo più grande.

Posizione

La posizione viene visualizzata sotto il nome in un testo più piccolo. Questo è spesso usato per riferirsi alla posizione professionale di una persona all'interno di un team aziendale. Ad esempio, Nick Roach, "Graphic Designer".

URL del profilo di Facebook

Inserisci l'URL sulla tua pagina Facebook o lascialo vuoto per disabilitare l'icona di Facebook.

URL del profilo Twitter

Inserisci l'URL sulla tua pagina Twitter o lascialo vuoto per disattivare l'icona di Twitter.

URL del profilo Google+

Inserisci l'URL sulla tua pagina Google+ o lascialo vuoto per disattivare l'icona di Google+.

URL del profilo di LinkedIn

Inserisci l'URL sulla tua pagina LinkedIn o lascialo vuoto per disattivare l'icona di LinkedIn.

Descrizione

Inserisci qui il contenuto del testo principale per il tuo modulo.

URL immagine

Qui puoi scaricare una foto da utilizzare nella biografia.

Colore di sfondo

Definisci un colore di sfondo personalizzato per il tuo modulo o lascia vuoto per utilizzare il colore predefinito.

Immagine di sfondo

Se impostata, questa immagine verrà utilizzata come sfondo per questo modulo. Per rimuovere un'immagine di sfondo, è sufficiente rimuovere l'URL dal campo delle impostazioni. Le immagini di sfondo appariranno sopra i colori di sfondo, il che significa che il colore di sfondo non sarà visibile quando viene applicata un'immagine di sfondo.

Etichetta amministrativa

Questo cambierà l'etichetta del modulo nel costruttore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette vengono visualizzate nel blocco del modulo dell'interfaccia di Divi Builder.

Opzioni di progettazione per il modulo Persona

Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa è la scheda che utilizzerai per modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare qualsiasi cosa.

parametre design module person divi.png

Colore dell'icona

Questa opzione controlla il colore delle icone dei social media che appaiono nel profilo di ogni persona. Di default queste icone sono grigie, acquista puoi cambiare questo colore usando questa impostazione.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Colore dell'icona al passaggio del mouse

Puoi anche modificare il colore del passaggio del mouse per le icone dei social media. Selezionare il colore desiderato utilizzando il selettore di colori in questa impostazione.

Colore del testo

Qui puoi scegliere il valore del tuo testo. Se stai lavorando su uno sfondo scuro, il tuo testo dovrebbe essere acceso. Se stai lavorando con uno sfondo chiaro, il tuo testo dovrebbe essere scuro.

Carattere dell'intestazione

È possibile modificare il carattere del testo dell'intestazione selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, lettere maiuscole e sottolineato.

Dimensione del carattere dell'intestazione

Qui puoi regolare la dimensione del testo dell'intestazione. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo oppure immettere direttamente il valore della dimensione del testo desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.

Colore del testo dell'intestazione

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo dell'intestazione, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.

Spaziatura delle lettere di intestazione

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se desideri aumentare lo spazio tra ogni lettera nel testo dell'intestazione, utilizza il dispositivo di scorrimento dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.

Altezza riga di intestazione

L'altezza della riga influisce sullo spazio tra ogni riga del testo dell'intestazione. Se desideri aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.

Carattere del corpo

È possibile modificare il carattere del corpo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Dimensione del carattere del corpo

Qui puoi regolare la dimensione del testo del tuo corpo. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo oppure immettere direttamente il valore della dimensione del testo desiderato nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.

Colore del testo del corpo

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore del tuo testo, scegli il colore desiderato dal selettore di colori usando questa opzione.

Spaziatura delle lettere del corpo

La spaziatura tra le lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel tuo testo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di input a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Altezza della linea del corpo

L'altezza della riga influisce sullo spazio tra ogni riga di testo nel tuo corpo Se vuoi aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione situato a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Usa il bordo

Abilitando questa opzione verrà posizionato un bordo attorno al modulo. Questo bordo può essere personalizzato utilizzando i seguenti parametri condizionali.

Colore del bordo

Questa opzione influisce sul colore del bordo. Seleziona un colore personalizzato dal selettore di colori per applicarlo al bordo.

Larghezza del confine

Per impostazione predefinita, i bordi sono larghi 1 pixel. È possibile aumentare questo valore trascinando il dispositivo di scorrimento dell'intervallo o immettendo un valore personalizzato nel campo di immissione a destra del dispositivo di scorrimento. Sono supportate unità di misura personalizzate, il che significa che puoi cambiare l'unità predefinita da "px" a qualcos'altro come em, vh, vw ecc.

Stile del bordo

I bordi supportano otto diversi stili: solido, punteggiato, punteggiato, doppio, scanalatura, cresta, sovrapposizione e inizio. Seleziona lo stile desiderato dal menu a discesa per applicarlo al bordo.

Margine personalizzato

Il margine è lo spazio aggiunto all'esterno del modulo, tra il modulo e l'elemento successivo sopra, sotto o a sinistra ea destra di esso. È possibile aggiungere valori di margine personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere il margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Imbottitura personalizzata

Il riempimento è lo spazio aggiunto all'interno del modulo, tra il bordo del modulo ei suoi elementi interni. È possibile aggiungere valori di riempimento personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere il margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Opzioni avanzate del modulo Persona

Nella scheda Avanzate troverai le opzioni che i web designer più esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

opzione design module divi.png

ID CSS

Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID può essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.

Classe CSS

Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare uno stile CSS personalizzato. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tema figlio Divi o nel foglio di stile CSS personalizzato che aggiungi alla tua pagina o al tuo sito Web utilizzando le opzioni del tema Divi o le impostazioni nella pagina Divi Builder.

CSS personalizzato

Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi parte interna del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere fogli di stile CSS personalizzati direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già inserite nei tag di stile. Quindi inserisci le regole CSS separate da punto e virgola.

Animazione

Per impostazione predefinita, le immagini sono animate mentre scorri la pagina. Qui puoi scegliere la direzione dell'animazione o disattivarla.

visibilità

Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Ciò è utile se desideri utilizzare mod diverse su dispositivi diversi o se desideri semplificare il design mobile rimuovendo determinati elementi dalla pagina.

Altri tutorial di Divi

Questo articolo contiene i commenti 3

  1. Buongiorno,
    Grazie per questi articoli molto utili.
    Proprio come gli URL su Facebook, Twitter, Google+ o LinkedIn, sai se è possibile aggiungere un URL al tuo profilo Instagram per favore? Grazie 🙂

  2. Salut!
    Quando creo un progetto o un post e utilizzo il contenitore Persona, perché il campo Posizione scompare quando visualizzo progetti o post utilizzando il blog o il contenitore del blog filtrabile?

    Come rendere visibile il campo Posizione persona in una vista Griglia blog?

    Grazie!

    1. Buonasera e grazie per l'attesa.
      Di solito, i moduli di ricerca non eseguono shortcode. Pertanto, il modulo Persona (come qualsiasi altro modulo) genera uno shortcode che può essere visualizzato solo visualizzando in anteprima l'articolo o la pagina e non da un modulo che offre un'anteprima di detto articolo o pagina.

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
19 azioni
quota10
Tweet3
Enregistrer6