Come creare un layout del diagramma di flusso in Divi
Pubblicato: 2021-07-14Saper creare un layout di diagramma di flusso in Divi apre molte opportunità per comunicare processi e idee su un sito web. In alcuni casi, i diagrammi di flusso possono essere utilizzati per spiegare idee estremamente complesse che coinvolgono un gran numero di elementi. Su un sito Web, tuttavia, questi diagrammi di flusso più complessi possono essere difficili da ottenere, soprattutto se si desidera che sia reattivo.
In questo tutorial, ti mostreremo come creare un pratico layout del diagramma di flusso che puoi utilizzare sul tuo sito Web che sia semplice, efficace e reattivo. Fondamentalmente, diventeremo creativi con bordi Divi, divisori, blurb e opzioni di trasformazione per creare un layout del diagramma di flusso che puoi facilmente personalizzare per le tue esigenze. Inoltre, utilizzeremo solo le opzioni integrate di Divi per crearlo, quindi non devi preoccuparti di aggiungere codice personalizzato o plug-in.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design del diagramma di flusso che creeremo in questo tutorial.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo 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 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.
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!
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Come creare un layout del diagramma di flusso in Divi
Passaggio 1: creazione di una riga con una sfocatura centrata
Per iniziare a creare il layout del diagramma di flusso in Divi, inizieremo con la creazione di una riga che contiene una trama centrata. Questo sarà il primo elemento nel diagramma di flusso.
L'imbottitura della sezione
Innanzitutto, apri le impostazioni della sezione per la sezione predefinita e imposta il riempimento inferiore su 0 px.
La riga
All'interno della sezione, aggiungi una riga a una colonna.
Apri le impostazioni della riga e aggiorna le seguenti impostazioni di progettazione:
- Larghezza grondaia: 1
- Imbottitura: 0px in alto, 0px in basso
Queste due impostazioni di progettazione verranno utilizzate per tutte le righe in questo layout del diagramma di flusso per assicurarsi che non venga aggiunto spazio aggiuntivo tra i moduli e le righe.
Il design del modulo Blurb
Per creare il nostro primo elemento del diagramma di flusso, utilizzeremo un modulo blurb.
Aggiungi un nuovo modulo blurb alla riga.
Impostazioni sfocatura
Apri le impostazioni del blurb. Nella scheda contenuto, puoi mantenere il testo predefinito del titolo e del corpo.
Quindi aggiorna l'immagine con una piccola icona o usa una delle icone Divi integrate. Per questo tutorial, utilizzerò le icone del Crowdfunding Layout Pack.
Quindi dai al blurb un colore di sfondo:
- Colore di sfondo: #f8f8f8
Nella scheda Progettazione, aggiorna quanto segue:
- Allineamento del testo: Centro
- Larghezza massima: 400 px (desktop e tablet), 90% (telefono)
- Allineamento del modulo: Centro
- Imbottitura: 6% in alto, 6% in basso, 3% a sinistra, 3% a destra
NOTA: questa dimensione del blurb sarà condivisa da tutti i blurb nel layout del diagramma di flusso. Questa dimensione funziona per questo layout perché il diagramma di flusso non avrà mai più di due blurb adiacenti (affiancati). Questo ci consente di mantenere il design reattivo e di avere un bell'aspetto anche su tablet e telefono.
Quindi, dai al blurb un bordo come segue:
- Larghezza bordo: 2px
Passaggio 2: creazione della riga del connettore con linea verticale e freccia
Per la parte successiva del layout del nostro diagramma di flusso, creeremo una riga del connettore con una linea e una freccia verticali centrate. Questa riga verrà utilizzata per collegare righe di contenuto del diagramma di flusso che devono continuare lungo la pagina.
In questo caso, vogliamo iniziare il diagramma di flusso aggiungendo una linea e una freccia sotto la riga precedente con il modulo blurb centrato.
Crea nuova riga e copia/incolla stili di riga dalla riga precedente
Per fare ciò, aggiungi una nuova riga a una colonna sotto la riga precedente.
Utilizzando il menu "Altre opzioni" (o le opzioni del tasto destro del mouse), copia gli stili di riga dalla riga precedente in alto e incollali nella nuova riga.
Creazione di un divisore di linea verticale
Per creare il divisore di linea verticale, aggiungi un nuovo modulo divisore alla riga.
Sotto le impostazioni del divisore, aggiorna le impostazioni di progettazione come segue:
- Colore linea: #333333
- Posizione della linea: In basso
- Peso del divisore: 150 px
- Larghezza: 2px
- Allineamento del modulo: Centro
- Margine: -1px in basso
Nella scheda Avanzate, nascondi l'overflow come segue:
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Creazione di una freccia con un modulo Blurb
Successivamente creeremo un'icona a forma di freccia da posizionare sopra la linea di divisione utilizzando un modulo blurb.
Per creare la freccia, aggiungi un nuovo modulo blurb sotto il divisore.
Impostazioni sfocatura freccia
Sotto le impostazioni del blurb, elimina il titolo predefinito e il testo del corpo e fai clic per utilizzare l'icona della freccia in basso (vedi screenshot).
Nella scheda Progettazione, aggiorna quanto segue:
- Colore icona: #bbbbbb
- Allineamento immagine/icona: centro
- Dimensione carattere icona: 50 px (desktop), 40 px (tablet e telefono)
- Larghezza massima: 50%
- Allineamento del modulo: centro
- Altezza: 50 px (desktop), 40 px (tablet e telefono)
Nella scheda Avanzate, aggiungi il seguente CSS all'immagine Blurb:
margin-bottom: 0px; background: #ffffff;
Questo eliminerà il margine predefinito del blurb e aggiungerà uno sfondo bianco per creare l'aspetto dello spazio tra l'icona e la linea una volta posizionata l'icona sopra la linea.
Per posizionare la freccia in cima alla linea, aggiorna quanto segue:
- Posizione: Assoluta
- Posizione: Centro
- Indice Z: 10
Passaggio 3: creazione di una riga con frecce e blurb del diagramma di flusso adiacenti
Una volta completata la riga del connettore, aggiungeremo un'altra riga di più blurb adiacenti per continuare la progettazione del diagramma di flusso.
Per aggiungere la riga, copia e incolla semplicemente la prima riga (la riga con una macchia centrata che abbiamo creato nella parte superiore del layout) sotto la riga del connettore.
Apri le impostazioni della riga e aggiorna quanto segue:
- Larghezza massima: 50%
- Larghezza bordo: 2px
La larghezza massima del 50% è importante affinché il layout funzioni in modo reattivo. Farà in modo che i blurb che traboccano a destra e a sinistra della riga non superino la larghezza del browser.
Creazione di un blurb del diagramma di flusso sulla linea del bordo sinistro
Ora che il nostro bordo è stato aggiunto alla riga, posizioneremo il blurb sopra la linea del bordo sinistro.
Per fare ciò, aggiorna le seguenti impostazioni di progettazione:
- Allineamento del modulo: a sinistra
- Margine: 70px in alto, 70px in basso
- Trasforma Trasla asse X: -50%
Questa è la chiave per far sì che il blurb si trovi orizzontalmente al centro sopra la linea di confine.
Creazione di un blurb del diagramma di flusso adiacente sulla linea di confine destra
Per aggiungere un altro contrassegno sulla linea del bordo destro, duplica il contrassegno esistente.
Per posizionare il contrassegno sulla linea del bordo destro, vai alla scheda Avanzate e assegnagli una posizione assoluta:
- Posizione: Assoluta
- Posizione: al centro a destra
Quindi aggiorna il margine e trasforma le opzioni di traduzione come segue:
- Margine: nessuno
- Trasforma Trasla asse Y: -50%
- Trasforma Trasla asse X: 50%
Aggiunta di sfumature di freccia agli angoli su ciascuna linea di confine
Per rendere il diagramma di flusso più chiaro sulla direzione in cui stanno procedendo le linee, aggiungeremo ulteriori icone a forma di freccia sulle linee di confine della riga.
Freccia in alto a sinistra
Per aggiungere una freccia alla linea del bordo in alto a sinistra, duplica la freccia che abbiamo creato nella riga del connettore e trascinala nella riga contenente le macchie adiacenti.
Apri il contrassegno della freccia duplicata e cambia l'icona in una freccia a sinistra.
Quindi aggiorna la posizione della posizione della freccia blurb:
- Posizione: in alto a sinistra
Infine, aggiorna l'opzione di traduzione di trasformazione come segue:
- Trasforma Trasla asse Y: -50%
Freccia in alto a destra
Per creare una freccia che si trova sulla linea del bordo in alto a destra, duplica la freccia "in alto a sinistra" che abbiamo appena creato. Quindi apri le impostazioni e modifica la posizione della posizione:
- Posizione: in alto a destra
Inoltre, aggiorna l'icona della freccia con una freccia a destra.
Freccia in basso a sinistra
Per creare una freccia che si trova sulla linea del bordo in basso a sinistra, duplica la freccia "in alto a destra" che abbiamo appena creato.
Quindi apri le impostazioni e modifica la posizione della posizione:
- Posizione: in basso a sinistra
Quindi, aggiorna l'opzione di traduzione di trasformazione:
- Trasforma Trasla asse Y: 50%
Freccia in basso a destra
Per creare una freccia che si trovi sulla linea del bordo in basso a destra, duplica la freccia "in basso a sinistra" che abbiamo appena creato.
Quindi apri le impostazioni e modifica la posizione della posizione:
- Posizione: in basso a destra
Inoltre, aggiorna l'icona della freccia con una freccia sinistra.
Una volta posizionate tutte le frecce, è possibile aggiornare le etichette di ciascuna utilizzando la vista dei livelli.
Passaggio 4: aggiunta di un'altra riga di connettori
Una volta completata la riga con i due blurb del diagramma di flusso adiacenti e tutte le frecce, possiamo continuare il diagramma di flusso aggiungendo un'altra riga del connettore.
Per fare ciò, duplica la riga del connettore che abbiamo creato sopra e incollala sotto la riga contenente i blurb del diagramma di flusso adiacenti.
Passaggio 5: personalizzazione del flusso con un connettore della linea di confine destro
Nella progettazione del diagramma di flusso esistente, il flusso inizia con l'elemento in alto e poi si dirama verso gli elementi adiacenti a destra e a sinistra, quindi torna al centro e procede all'elemento centrato successivo. Per personalizzare il flusso, duplicheremo la sezione in modo da poter personalizzare il diagramma di flusso in modo che si fermi sull'elemento o sugli elementi della descrizione adiacenti a sinistra e continui dall'elemento della descrizione a destra.
Sezione duplicata
Per fare ciò, prima duplica l'intera sezione del contenuto del diagramma di flusso.
Aggiungi un altro elemento di sfocatura a sinistra
Nella sezione duplicata (in basso), individua il contrassegno sinistro nella riga contenente i due contrassegni adiacenti. Quindi duplica il blurb sinistro per crearne uno nuovo direttamente sotto di esso.
Elimina frecce e bordo inferiori
Quindi, elimina la freccia in basso a sinistra e la freccia in basso a destra.
Apri le impostazioni della riga per la riga contenente i diversi blurb ed elimina il bordo inferiore:
- Larghezza bordo inferiore: 0px
Crea una riga con un connettore della linea del bordo destro
Ora vogliamo personalizzare il design del diagramma di flusso con un connettore della linea del bordo destro che collegherà la linea del bordo destro della riga con la riga del connettore sottostante.
Per fare ciò, creeremo un'altra riga e aggiungeremo una linea di divisione personalizzata e una freccia sul lato destro.
Aggiungi una nuova riga a una colonna sotto la riga esistente con i tre contrassegni.
Aggiorna le impostazioni di progettazione della riga come segue:
- Larghezza grondaia: 1
- Larghezza massima: 50%
- Imbottitura: 0px in alto, 0px in basso
Quindi, aggiungi un bordo destro alla riga.
- Larghezza bordo destro: 2px
Quindi aggiungi un modulo divisore alla riga.
Aggiorna le impostazioni del divisore come segue:
- Colore linea: #333333
- Posizione della linea: In basso
- Peso del divisore: 2px
- Larghezza: 50%
- Margine: -2px in basso
Nella scheda Avanzate, aggiorna la posizione del divisore:
- Posizione: Assoluta
- Posizione: in basso a destra
Una volta che il divisore è a posto, copia il blurb della freccia in basso a destra dalla terza riga nella prima sezione e incollalo nella riga con la linea di divisione destra.
Apri le impostazioni della freccia blurb che hai appena duplicato e spostato e aggiorna quanto segue:
- Posizione: predefinita
- Allineamento del modulo: a destra
Arresto del flusso della linea di confine sinistra
In questo momento, c'è una parte della linea di confine sinistra esposta sotto la macchia in basso a sinistra. Per nasconderlo, elimina semplicemente il margine inferiore di quella macchia in basso.
Passaggio 6: aggiornamento della riga con un connettore della linea del bordo sinistro
Il tuo diagramma di flusso potrebbe anche dover disporre di un connettore per la linea del bordo sinistro. Per crearlo, possiamo aggiornare la riga con il connettore della linea di confine destra come segue:
- Larghezza bordo sinistro: 2px
- Larghezza bordo destro: 0
Aggiorna il divisore all'interno della riga con una nuova posizione:
- Posizione: in basso a sinistra
Quindi aggiorna l'allineamento della freccia blurb:
- Allineamento del modulo: a sinistra
E cambia l'icona in una freccia a destra.
Risultato finale
Controlla il risultato finale. Sono andato avanti e ho duplicato la seconda sezione e ho aggiunto il connettore della linea del bordo sinistro in modo che tu possa vedere entrambi.
Pensieri finali
In questo tutorial, abbiamo creato un utile layout del diagramma di flusso che chiunque può utilizzare per comunicare processi e idee ai visitatori con uno straordinario design reattivo. Usalo per mostrare il processo di servizi o design, creare un'infografica o guidare i clienti attraverso i contenuti in un modo nuovo. Spero che possa tornare utile per il tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!