Come creare un albero genealogico con le impostazioni di trasformazione di Divi

Hai mai provato a creare un albero genealogico per il tuo sito web, ma non sapevi esattamente come affrontarlo? Bene, nel tutorial Divi di oggi, ti mostreremo esattamente come farlo. Oltre a creare l'albero genealogico, ci stiamo anche assicurando che rimanga reattivo su tutte le dimensioni dello schermo. Una volta che hai finito di creare l'albero genealogico, sarai sempre in grado di modificare le immagini, il testo e il design secondo le tue preferenze e renderlo pronto per essere pubblicato! Vuoi iniziare subito con questo disegno dell'albero genealogico? Potrai scaricare gratuitamente il file JSON e aggiungerlo a qualsiasi sito web che stai creando!

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 layout dell'albero genealogico

Per mettere le mani sul layout gratuito dell'albero genealogico, dovrai prima scaricarlo utilizzando il pulsante qui sotto. 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

Posizionamento dei familiari

Aggiungi nuova sezione

Spaziatura

Iniziamo a creare! La prima cosa che dobbiamo fare è aggiungere una nuova sezione regolare alla pagina su cui stiamo lavorando. Apri le impostazioni della sezione e aggiungi del riempimento superiore e inferiore personalizzato utilizzando la larghezza della finestra.

• Imbottitura superiore: 8vw
• Imbottitura inferiore: 8vw

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo la prima riga alla tua sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza della sezione e dello schermo.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Per aggiungere spazi bianchi a sinistra ea destra della riga sul desktop, aggiungeremo un'imbottitura sinistra e destra personalizzata utilizzando l'unità di larghezza della finestra.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura sinistra: 15vw (desktop), 0vw (tablet e telefono)
• Imbottitura destra: 15vw (desktop), 0vw (tablet e telefono)

Aggiungi modulo immagine alla colonna

Carica immagine

È ora di iniziare ad aggiungere moduli! Il primo di cui abbiamo bisogno è un modulo immagine. Carica un'immagine con una larghezza e un'altezza di "180 px".

Allineamento

Quindi, vai alla scheda Design e modifica l'allineamento dell'immagine.

• Allineamento immagine: centro

Dimensionamento

Modificare le impostazioni di dimensionamento successivamente.

• Larghezza: 49%
• Allineamento del modulo: Centro

Frontiera

E trasforma l'immagine in un cerchio aggiungendo un valore alto a ciascuno degli angoli nelle impostazioni del bordo. Stiamo usando '20vw' ma puoi usare qualsiasi numero alto che desideri.

Aggiungi modulo di testo alla colonna

Aggiungi contenuto

Al modulo successivo, che è un modulo di testo. Aggiungi qui il nome del membro della famiglia.

Colore di sfondo

Quindi, vai alle impostazioni dello sfondo e cambia il colore di sfondo in bianco.

• Colore di sfondo: #ffffff

Impostazioni testo

Modificare le impostazioni del testo successivamente. Se vuoi creare un altro aspetto grafico per l'albero genealogico, sentiti libero di giocare con queste impostazioni.

• Carattere del testo: Open Sans
• Colore del testo: #000000
• Dimensione del testo: 0.8vw (desktop), 1.2vw (tablet), 1.9vw (telefono)
• Altezza riga di testo: 0,4 em
• Orientamento del testo: al centro

Spaziatura

Passa alle impostazioni di spaziatura e aggiungi alcuni margini personalizzati e valori di riempimento. Questi valori ci aiuteranno a modellare il modulo di testo e a sovrapporlo leggermente al modulo immagine.

• Margine superiore: -0,5 vw
• Margine sinistro: 1vw
• Margine destro: 1vw
• Imbottitura superiore: 2vw (Desktop), 4vw (Tablet), 5vw (Telefono)
• Imbottitura inferiore: 2vw (desktop), 4vw (tablet), 5vw (telefono)

Frontiera

Passa alle impostazioni del bordo e aggiungi anche un bordo superiore.

• Larghezza bordo superiore: 5px
• Colore bordo superiore: #000000

Scatola ombra

Insieme a un Box Shadow per creare profondità sulla pagina.

• Posizione verticale dell'ombra del riquadro: 10 px
• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0.17)

Indice Z

Per assicurarci che il modulo di testo rimanga sopra il modulo di immagine, aumenteremo l'indice Z nelle impostazioni di visibilità del modulo di testo.

• Indice Z: 2

Clona riga tre volte

Una volta che hai finito di creare la prima riga e di modificare tutti i moduli in essa contenuti, puoi andare avanti e clonare la riga tre volte. Questo ci aiuterà a risparmiare tempo nei prossimi passaggi del tutorial. Ognuna di queste righe verrà utilizzata per creare un livello diverso nell'albero genealogico.

Personalizza riga n. 1

Clona entrambi i moduli 7 volte

Iniziamo a personalizzare il primo livello dell'albero genealogico! Passa alla modalità wireframe e clona i due moduli nella tua riga 7 volte. Una volta che hai finito, il backend della tua riga dovrebbe assomigliare a questo:

Elemento principale della colonna CSS

Stiamo trasformando l'intera colonna in una griglia. In totale, ci dovrebbero essere 16 moduli nella tua colonna. Collocheremo questi 16 moduli in 8 colonne della griglia. Ciò significa che ognuna delle 8 colonne della griglia conterrà 2 moduli; un modulo immagine e un modulo testo. Apri le impostazioni di riga della prima riga e aggiungi le seguenti righe di codice CSS all'elemento principale della colonna:

display: grid;
grid-template-columns: repeat(8, 12.5%);

Personalizza riga #2

Clona entrambi i moduli 3 volte

In seconda fila! Qui, cloneremo entrambi i moduli 3 volte.

Elemento principale della colonna

Stiamo trasformando la colonna in una griglia con 4 colonne della griglia aggiungendo le seguenti righe di codice CSS all'elemento principale della colonna della riga:

display: grid;
grid-template-columns: repeat(4, 25%);

Il motivo per cui stiamo utilizzando questo approccio, invece di scegliere semplicemente una struttura di colonne di righe esistente con 4 colonne, è che vogliamo che tutto rimanga reattivo al 100% su schermi di dimensioni più piccole.

Personalizza riga #3

Clona entrambi i moduli

Alla terza fila! Clonare ogni modulo una volta.

Elemento principale della colonna

Quindi, aggiungi le seguenti righe di codice CSS all'elemento principale della colonna:

display: grid;
grid-template-columns: repeat(2, 50%);

Personalizza riga #4

Spaziatura tra le righe

Alla prossima e ultima riga! Qui, l'unica cosa che dobbiamo fare è modificare i valori di riempimento delle righe.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura sinistra: 31vw
• Imbottitura destra: 31vw

Collegamento dei membri della famiglia utilizzando i moduli immagine

Aggiungi riga n. 1

Struttura della colonna

Ora che abbiamo messo in fila tutti i membri della famiglia, possiamo iniziare a connetterli! Per fare ciò, aggiungi una nuova riga tra la prima e la seconda riga.

Dimensionamento

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

• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Vai alle impostazioni di spaziatura successiva e aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura sinistra: 15vw (desktop), 0vw (tablet e telefono)
• Imbottitura destra: 15vw (desktop), 0vw (tablet e telefono)

Aggiungi modulo immagine alla colonna

Carica illustrazione

Quindi, aggiungi un modulo immagine e carica l'illustrazione che puoi trovare nella cartella che hai scaricato all'inizio di questo post.

Dimensionamento

Vai alle impostazioni di dimensionamento del modulo immagine e abilita l'opzione "Forza larghezza intera".

• Forza intera larghezza: Sì

Spaziatura

Assicurati di disabilitare l'opzione "Mostra spazio sotto l'immagine" nelle impostazioni di spaziatura.

• Mostra spazio sotto l'immagine: No

Clona fila due volte e cambia la loro posizione

Una volta che hai finito di modificare la riga e il modulo immagine al suo interno, vai avanti e clonalo due volte. Posiziona i duplicati di conseguenza:

Personalizza riga n. 1

Clona modulo immagine tre volte

Torna alla prima riga e clona il modulo 3 volte.

Elemento principale della colonna

Posiziona questi moduli immagine in una griglia con 4 colonne della griglia aggiungendo le seguenti righe di codice CSS all'elemento principale della colonna della riga:

display: grid;
grid-template-columns: repeat(4, 25%);

Personalizza riga #2

Modulo clone immagine

Passa alla seconda riga e clona il modulo immagine una volta.

Elemento principale della colonna

Posiziona entrambi i moduli in una griglia con due colonne della griglia aggiungendo le seguenti righe di codice CSS all'elemento principale della colonna della riga:

display: grid;
grid-template-columns: repeat(2, 50%);

Personalizza riga #3

Cambia spaziatura

Al prossimo e ultimo duplicato. Qui, l'unica cosa che devi fare è modificare i valori di riempimento personalizzato e il gioco è fatto!

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura sinistra: 27vw
• Imbottitura destra: 27vw

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 albero genealogico moderno con Divi! L'albero genealogico che abbiamo ricreato ha un bell'aspetto su tutte le dimensioni dello schermo. All'inizio di questo tutorial, sei stato anche in grado di scaricare il file JSON gratuitamente e iniziare subito. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!