Creazione di un sorprendente dashboard di navigazione con le nuove strutture di colonne di Divi

Pubblicato: 2018-09-10

Cerchi un modo nuovo e unico per strutturare la tua home page? La creazione di un dashboard di navigazione potrebbe essere la strada da percorrere. In questo tutorial, ti mostreremo come ottenere esattamente una splendida pagina dashboard che puoi utilizzare per molti scopi.

Sia che tu voglia cambiare il modo in cui le persone navigano sulla tua pagina, sia che tu voglia mettere in evidenza i servizi offerti dalla tua azienda, la creazione di una dashboard ti aiuterà a ottenere esattamente ciò che avevi in mente. Utilizziamo solo le opzioni integrate di Divi e, oltre a ciò, ti abbiamo anche fornito una tavolozza di colori chiari e scuri che puoi utilizzare. Questo tutorial è ispirato a uno dei disegni di Edoardo Mercati.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata al risultato finale su schermi di diverse dimensioni:

divi dashboard

Tavolozze dei colori

Prima di iniziare, puoi scegliere se vuoi creare una dashboard chiara o scura. I colori di cui avresti bisogno per ogni tavolozza di colori sono elencati di seguito. Assicurati di mantenere questi codici colore vicini in modo da poterli utilizzare dopo aver seguito il tutorial. Quando si utilizza un colore specifico per la tavolozza dei colori, faremo riferimento al numero del colore.

Leggero

Colore #1: #f6f6f6 (sfondo della sezione)
Colore n. 2: #ffffff (sfondo della colonna)
Colore #3: #333333 (colore del testo del titolo)
Colore #4: #000000 (colore divisore)
Colore n. 5: # 6F6B68 (sfocatura del colore del testo del corpo)
Colore #6: #e5e5e5 (colonna di sfondo 2)
Colore n. 7: #ffffff (colore di sfondo sfocato)

Buio

Colore #1: #141414
Colore #2: #212121
Colore #3: #ffffff
Colore 4: #ffffff
Colore #5: #dddddd
Colore #6: #212121
Colore #7: #333333

colori reciproci

Colore #7: #0457ff
Colore #8: #cc0432
Colore #9: #839e00
Colore n. 10: #c68e00

Iniziamo a creare

Aggiungi nuova sezione standard

Colore di sfondo

Inizia aggiungendo una nuova sezione alla tua pagina. Quindi, apri le impostazioni della sezione e aggiungi un colore di sfondo:

Colore di sfondo: Colore n. 1 (Trova nella tavolozza dei colori)

divi dashboard

Spaziatura

Per creare uno spazio extra in alto e in basso, applicheremo anche un'imbottitura personalizzata:

Imbottitura superiore: 100 px
Imbottitura inferiore: 100 px

divi dashboard

Aggiungi riga n. 1

Struttura della colonna

Ora che abbiamo finito di modificare le impostazioni della sezione, possiamo iniziare ad aggiungere righe. Scegli la seguente struttura di colonne per la tua prima riga:

divi dashboard

Colore di sfondo della colonna 1

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

Colore di sfondo della colonna 1: Colore n. 2 (Trova nella tavolozza dei colori)

divi dashboard

Dimensionamento

Vai alla scheda Design successivo e modifica le impostazioni di dimensionamento della tua riga:

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

divi dashboard

Spaziatura

Infine, aggiungi un po' di riempimento alla riga e alla prima colonna:

Imbottitura inferiore: 100 px
Imbottitura superiore colonna 1: 100 px
Imbottitura inferiore colonna 1: 100 px
Colonna 1 Imbottitura sinistra: 50 px
Imbottitura destra colonna 1: 50 px

divi dashboard

Aggiungi il modulo di testo del titolo alla colonna 1

Impostazioni testo H1

È ora di iniziare ad aggiungere moduli! Inizieremo aggiungendo un titolo Modulo di testo. Dopo aver aggiunto la tua copia H1, modifica le impostazioni del testo dell'intestazione del tuo modulo:

Peso del carattere dell'intestazione: grassetto
Allineamento del testo dell'intestazione: a sinistra
Colore del testo dell'intestazione: Colore n. 3 (Trova nella tavolozza dei colori)
Dimensione del testo dell'intestazione: 75 px (desktop), 55 px (tablet), 36 px (telefono)

divi dashboard

Aggiungi modulo divisore alla colonna 1

Colore divisore

Proprio sotto il titolo Modulo di testo, vai avanti e aggiungi un modulo divisore con il seguente colore:

Colore divisore: Colore #4 (Trova nella tavolozza dei colori)

divi dashboard

Dimensionamento

Apri quindi le impostazioni di dimensionamento e regola la larghezza del divisore:

Larghezza: 27%

divi dashboard

Spaziatura

Aggiungi un po' di spazio anche nella parte superiore del divisorio:

Margine superiore: 50 px

divi dashboard

Aggiungi il modulo di testo descrittivo alla colonna 1

Impostazioni testo

Il modulo successivo e ultimo in questa riga è una descrizione del modulo di testo. Dopo aver aggiunto il contenuto, modifica l'orientamento del testo nelle impostazioni del testo:

Orientamento del testo: giustifica

divi dashboard

Dimensionamento

Modifica anche le impostazioni di dimensionamento di questo modulo:

Larghezza: 80% (desktop), 100% (tablet e telefono)

divi dashboard

Spaziatura

E aggiungi dello spazio nella parte superiore del modulo utilizzando il margine personalizzato:

Margine superiore: 50 px

divi dashboard

Aggiungi modulo Blurb alla colonna 2

Icona

Ora possiamo passare alla seconda colonna. Inizieremo creando uno dei moduli Blurb. Successivamente, possiamo clonare questo modulo e modificarlo di conseguenza. Dopo aver aggiunto il modulo Blurb e modificato il contenuto, seleziona un'icona a tua scelta.

divi dashboard