Vuoi creare un organigramma in Divi?
Sapere come creare un layout del diagramma di flusso in Divi apre molte opportunità per comunicare processi e idee su a sito web. In alcuni casi, i diagrammi di flusso possono essere utilizzati per spiegare idee estremamente complesse che coinvolgono un gran numero di elementi.
A sito web, tuttavia, questi diagrammi di flusso più complessi possono essere difficili da ottenere, soprattutto se si desidera che siano reattivi.
In questo tutorial ti mostreremo come creare un pratico layout di diagramma di flusso che puoi utilizzare sul tuo sito web, semplice, efficace e reattivo.
Inoltre, utilizzeremo solo le opzioni integrate di Divi per crearlo, quindi non dovrai preoccuparti di aggiungere codice o plug-in personalizzati.
Cominciamo!
Panoramica
Ecco una rapida occhiata al design del diagramma di flusso che creeremo in questo tutorial.
Crea una nuova pagina con Divi Builder
Per iniziare, dovrai fare quanto segue:
Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.
Dagli un titolo che abbia senso per te e fai clic Usa Divi Builder
quindi fare clic su Inizia a costruire (Costruisci 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: crea una riga con sfocatura centrata
Per iniziare a creare il layout del diagramma di flusso in Divi, inizieremo creando una riga contenente blurb centrato. Questo sarà il primo elemento del diagramma di flusso.
Imbottitura della sezione
Innanzitutto, apri le impostazioni della sezione per la sezione predefinita e imposta il riempimento inferiore su 0px.
- Imbottitura (inferiore): 0px
Linea
All'interno della sezione, aggiungi una riga a una colonna.
Apri le impostazioni della linea e aggiorna le seguenti impostazioni di progettazione:
- Larghezza della grondaia: 1
- Imbottitura (superiore e inferiore): 0px
Design Mod Blurb
Per creare il nostro primo elemento del diagramma di flusso, useremo un modulo Blurb.
Inserisci un modulo Blurb in linea.
Impostazioni del modulo
Apri le impostazioni del modulo Blurb. Sotto la scheda Contenuti, puoi mantenere il titolo e il corpo del testo predefiniti.
Quindi aggiorna l'immagine con una piccola immagine icona o usa una delle icone Divi integrate. Per questo tutorial, utilizziamo le icone di Pacchetto layout crowdfunding .
Quindi dai al modulo un colore di sfondo:
- Sfondo: #f8f8f8
Sotto la scheda Design, aggiorna quanto segue:
- Allineamento del testo: centrato
- Larghezza massima: 400px (desktop e tablet), 90% (telefono)
- Modulo di allineamento: centro
- Imbottitura: 6% (sopra e sotto), 3% (sinistra e destra)
Quindi, dai un bordo al modulo Blurb come segue:
- Larghezza bordo: 2px
Passaggio 2: creare la linea di collegamento con una linea verticale e una freccia
Per la parte successiva del layout del nostro diagramma di flusso, creeremo una riga di connettori con una linea verticale centrata e una freccia. Questa linea verrà utilizzata per collegare le linee di contenuto dell’organigramma che dovrà proseguire verso il fondo della pagina.
In questo caso, vogliamo iniziare il diagramma di flusso aggiungendo una riga e una freccia sotto la riga precedente con il modulo Blurbn centrato.
Crea una nuova linea e copia/incolla gli stili dalla linea precedente
Per fare ciò, aggiungi una nuova riga a una colonna sotto la riga precedente.
Usando il " Altre impostazioni del modulo (o fare clic con il pulsante destro del mouse sulle opzioni), copia gli stili dalla riga precedente sopra e incollali nella nuova riga.
Creazione di un separatore di linea verticale
Per creare il separatore di linea verticale, aggiungi un nuovo modulo Divisore alla linea.
Sotto le impostazioni del divisore, aggiorna le impostazioni del design come segue:
- Colore linea: #333333
- Posizione della linea: in basso
- Peso del divisore: 150px
- Larghezza: 2 pixel
- Modulo di allineamento: centro
- Margine: -1px (in basso)
Sotto la scheda Tecnologia, nascondere l'overflow come segue:
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Crea una freccia con un modulo Blurb
Successivamente, creeremo un'icona a forma di freccia che si troverà sopra la linea di demarcazione utilizzando un modulo di presentazione.
Per creare la freccia, aggiungi un nuovo modulo Blurb sotto il divisore.
Impostazioni Mod Blurb
Nelle impostazioni del modulo, rimuovi il titolo predefinito e il corpo del testo e fai clic Usa icona, quindi scegli l'icona della freccia (vedi screenshot).
Sotto la scheda Design, aggiorna quanto segue:
- Colore icona: #bbbbbb
- Allineamento immagine/icona: centro
- Usa dimensione carattere icona: SÌ
- Dimensione carattere icona: 50px (desktop), 40px (tablet e telefono)
- Larghezza massima: 50%
- Modulo di allineamento: centro
- Altezza: 50px (desktop), 40px (tablet e telefono)
Sotto la scheda Tecnologia, aggiungi il seguente CSS a Immagine sfocata :
margin-bottom: 0px;
background: #ffffff;
Per posizionare la freccia sopra la linea, aggiorna quanto segue:
- Posizione: Assoluta
- Località: Centro
- Indice Z: 10
Passaggio 3: creazione di una linea per le parti adiacenti del diagramma di flusso
Una volta completata la riga di connettori, aggiungeremo un'altra riga di diversi moduli Blurb adiacenti per continuare la progettazione del diagramma di flusso.
Per aggiungere la linea, copia e incolla semplicemente la prima linea (la linea con il blurb centrato che abbiamo creato nella parte superiore del layout) sotto la linea del connettore.
Apri Impostazioni linea e aggiorna quanto segue:
- Larghezza massima: 50%
- Larghezza bordo: 2px
Lato sinistro del diagramma di flusso
Ora che il nostro bordo è stato aggiunto alla linea, posizioneremo il modulo Blurb sopra la linea di confine sinistra.
A tale scopo, aggiornare i seguenti parametri di progettazione:
- Modulo di allineamento: a sinistra
- Margine: 70px (superiore e inferiore)
- Trasforma Traslazione asse X: -50%
Questa è la chiave per il modulo Blurb da centrare orizzontalmente sopra la linea di confine.
Lato destro del diagramma di flusso
Per aggiungere un altro Blurb Module sulla linea di confine destra, duplica il blurb esistente.
Per posizionare il blurb sulla linea di confine destra, vai alla scheda Tecnologia e dargli una posizione assoluta:
- Posizione: Assoluta
- Posizione: centro destra
Quindi, aggiorna le seguenti opzioni:
- Margini: nessuno
- Trasforma Traslazione asse Y: -50%
- Trasforma Traslazione asse X: 50%
Aggiunte frecce agli angoli di ciascuna linea di confine
Per rendere più chiaro il diagramma di flusso sulla direzione di avanzamento delle righe, aggiungeremo ulteriori icone freccia sulle righe del bordo della riga.
Freccia in alto a sinistra
Per aggiungere una freccia alla riga del bordo in alto a sinistra, duplica il modulo Blurb freccia che abbiamo creato nella riga del connettore e trascinalo nella riga contenente i moduli Blurb adiacenti.
Apri il modulo Sfocatura freccia duplicata e cambia l'icona in una freccia rivolta a sinistra.
Quindi, aggiorna la posizione della posizione del modulo:
- Posizione: in alto a sinistra
Infine, aggiorna l'opzione di conversione della trasformazione come segue:
- Trasforma Traslazione asse Y: -50%
Freccia in alto a destra
Per creare una freccia che si trova sulla linea di confine in alto a destra, duplica la freccia " nell'angolo in alto a sinistra che abbiamo appena creato. Quindi apri le impostazioni e cambia la posizione della posizione:
- Posizione: in alto a destra
Aggiorna anche l'icona della freccia con una freccia rivolta verso destra.
Freccia in basso a sinistra
Per creare una freccia che si trova sulla linea di confine in basso a sinistra, duplica la freccia " in alto a destra che abbiamo appena creato.
Quindi apri le impostazioni e cambia la posizione della posizione:
- Posizione: in basso a sinistra
Quindi, aggiorna l'opzione Trasforma traduzione:
- Trasforma Traslazione asse Y: 50%
Freccia in basso a destra
Per creare una freccia che si trova sulla linea di confine in basso a destra, duplica la freccia " in basso a sinistra che abbiamo appena creato.
Quindi apri le impostazioni e cambia la posizione della posizione:
- Posizione: in basso a destra
Aggiorna anche l'icona della freccia con una freccia rivolta a sinistra.
Una volta posizionate tutte le frecce, puoi aggiornare le etichette per ciascuna utilizzando il vista a strati .
Passaggio 4: aggiunta di un'altra linea di connessione
Una volta completata la riga con le due parti adiacenti del diagramma di flusso e tutte le frecce, possiamo continuare il diagramma di flusso aggiungendo un'altra riga di raccordo.
Per fare ciò, duplica la linea del connettore che abbiamo creato sopra e incollala sotto la linea contenente i moduli Blurb dalla parte adiacente del diagramma di flusso.
Passaggio 5: personalizzazione del flusso con un connettore a linea retta
Nella progettazione del diagramma di flusso esistente, il flusso inizia con l'elemento superiore, quindi si dirama agli elementi adiacenti destro e sinistro, quindi torna al centro e passa all'elemento intermedio successivo.
Per personalizzare il flusso, duplichiamo la sezione in modo da poter personalizzare il diagramma di flusso per fermarci agli elementi di presentazione adiacenti a sinistra e continuare dall'elemento di presentazione a destra.
Sezione duplicata
Per fare ciò, duplica prima l'intera sezione contenente il diagramma di flusso.
Aggiungi un altro modulo di sfocatura sinistro
Nella sezione duplicata (in basso), individua il modulo Blurb sinistro nella riga contenente i due moduli adiacenti. Quindi, duplica il blurb a sinistra per crearne uno nuovo direttamente sotto.
Rimuovi le frecce e il bordo in basso
Quindi, elimina la freccia in basso a sinistra e la freccia in basso a destra.
Apri le impostazioni della linea per la linea contenente le sfocature multiple e rimuovi il bordo inferiore:
- Larghezza bordo inferiore: 0px
Creare una linea con un connettore di linea di confine rettilineo
Ora vogliamo personalizzare il design del diagramma di flusso con un connettore della linea di confine destra che collegherà la linea di confine destra della linea con la linea di connessione sottostante.
Per fare ciò, creeremo un'altra linea e aggiungeremo una linea di divisione personalizzata e una freccia di contorno sul lato destro.
Aggiungi una nuova riga una colonna sotto la riga esistente con i tre layout.
Aggiorna le impostazioni della riga come segue, nella scheda Design :
- Larghezza grondaia: 1
- Larghezza massima: 50%
- Imbottitura: 0px (superiore e inferiore)
Quindi, aggiungi un bordo dritto alla linea.
- Larghezza bordo destro: 2px
Quindi aggiungi un modulo Divisore alla linea.
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 separatore:
- Posizione: Assoluta
- Posizione: in basso a destra
Con il divisore in posizione, copia il modulo Blurb dalla freccia in basso a destra della terza riga della prima sezione e incollalo nella riga con la linea di divisione destra.
Apri le impostazioni del modulo Blurb della freccia che hai appena duplicato e spostato e aggiorna quanto segue:
- Posizione: predefinita
- Modulo di allineamento: a destra
Arresto del flusso della linea di confine sinistra
Attualmente, parte del bordo sinistro è esposta sotto il blurb in basso a sinistra. Per nasconderlo, rimuovi semplicemente il margine inferiore di questo blurb inferiore.
Passaggio 6: aggiornamento della linea con un connettore di linea del bordo sinistro
Il tuo diagramma di flusso potrebbe anche aver bisogno di un connettore della linea di confine sinistro. Per crearlo, possiamo aggiornare la linea con il connettore della linea di confine destra come segue:
- Larghezza Boprder sinistra: 2px
- Larghezza bordo destro: 0
Aggiorna il separatore all'interno della riga con una nuova posizione:
- Posizione: in basso a sinistra
Quindi, aggiorna l'allineamento della freccia:
- Modulo di allineamento: a sinistra
E cambia l'icona in una freccia destra.
Risultato finale
Scopri il risultato finale.
Scarica DIVI ora!!!
Conclusione
In questo tutorial, abbiamo creato un utile layout del diagramma di flusso che chiunque può utilizzare per comunicare processi e idee Visitatori con uno straordinario design reattivo.
Usalo per mostrare i servizi o il processo di progettazione, creare un'infografica o guidare i clienti attraverso il contenuto in un modo nuovo.
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
