Vrei să creezi o organigramă în Divi?
Aflați cum să creați un aspect de diagramă flux în Divi deschide multe oportunități de a comunica procese și idei pe a site-ul web. În unele cazuri, diagramele pot fi folosite pentru a explica idei extrem de complexe care implică un număr mare de elemente.
Pe a site-ul web, cu toate acestea, aceste diagrame mai complexe pot fi dificil de realizat, mai ales dacă doriți să fie receptiv.
În acest tutorial, vă vom arăta cum să creați o diagramă de flux la îndemână pe care o puteți utiliza pe dvs site-ul web, simplu, eficient și receptiv.
În plus, vom folosi doar opțiunile încorporate ale Divi pentru a-l crea, astfel încât să nu vă faceți griji cu privire la adăugarea de cod personalizat sau pluginuri.
Să începem!
studiu
Iată o privire rapidă asupra designului diagramei de flux pe care îl vom crea în acest tutorial.
Creați o pagină nouă cu Divi Builder
Pentru a începe, va trebui să faceți următoarele:
Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.
Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizați Divi Builder
Apoi faceți clic pe Începeți să construiți (Construiește de la zero)
După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.
Cum se creează un aspect de diagramă de flux în Divi
Pasul 1: creați un rând cu blurb centrat
Pentru a începe să creați aspectul diagramei de flux în Divi, vom începe prin a crea un rând care să conțină blurb centrat. Acesta va fi primul element al diagramei.
Umplutura secțiunii
Mai întâi, deschideți setările secțiunii pentru secțiunea implicită și setați umplutura de jos la 0px.
- Umplutură (jos): 0px
Linia
În interiorul secțiunii, adăugați un rând la o coloană.
Deschideți setările liniei și actualizați următoarele setări de design:
- Lățimea jgheabului: 1
- Umplutură (sus și jos): 0px
Blurb Mod Design
Pentru a crea primul nostru element de diagramă, vom folosi un modul Blurb.
Introduceți un modul Blurb în linie.
Setări modul
Deschideți setările modulului Blurb. Sub fila Conţinut, puteți păstra titlul implicit și textul corpului.
Apoi actualizați imaginea cu o imagine de pictogramă mică sau utilizați una dintre pictogramele Divi încorporate. Pentru acest tutorial, folosim pictograme din Pachet de aranjament crowdfunding .
Apoi dați modulului o culoare de fundal:
- Fundal: #f8f8f8
Sub filă Amenajări, actualizați următoarele:
- Alinierea textului: centrat
- Lățime maximă: 400 px (desktop și tabletă), 90% (telefon)
- Modul de aliniere: Centru
- Umplutură: 6% (sus și jos), 3% (stânga și dreapta)
Apoi, dați modulului Blurb un chenar după cum urmează:
- Lățimea chenarului: 2px
Pasul 2: Crearea liniei de legătură cu o linie verticală și o săgeată
Pentru următoarea parte a diagramei noastre, vom crea un rând de conectori care au o linie verticală centrată și o săgeată. Această linie va fi folosită pentru a conecta liniile de cuprins a organigramei care ar trebui să continue spre partea de jos a paginii.
În acest caz, dorim să începem diagrama de flux adăugând o linie și o săgeată sub linia anterioară cu modulul Blurbn centrat.
Creați o linie nouă și copiați/lipiți stilurile din linia anterioară
Pentru a face acest lucru, adăugați un nou rând într-o coloană de sub rândul anterior.
Folosind „ Alte setări ale modulului (sau clic dreapta pe opțiuni), copiați stilurile de pe rândul anterior de mai sus și lipiți-le în noul rând.
Crearea unui separator de linii verticale
Pentru a crea separatorul de linii verticale, adăugați un nou modul Divider la linie.
Sub setările divizorului, actualizați setările de design după cum urmează:
- Culoare linie: #333333
- Poziția liniei: jos
- Greutate separator: 150px
- Latime: 2px
- Modul de aliniere: Centru
- Marja: -1px (jos)
Sub filă Avansat, ascunde preaplinul după cum urmează:
- Overflow orizontal: Ascuns
- Overflow vertical: Ascuns
Creați o săgeată cu un modul Blurb
În continuare, vom crea o pictogramă săgeată care va sta deasupra liniei de despărțire folosind un modul de prezentare.
Pentru a crea săgeata, adăugați un nou modul Blurb sub separator.
Setări Blurb Mod
În setările modulului, eliminați titlul implicit și textul corpului și faceți clic Utilizați pictograma, apoi alegeți pictograma săgeată (vezi captura de ecran).
Sub filă Amenajări, actualizați următoarele:
- Culoare pictogramă: #bbbbbb
- Aliniere imagine/pictogramă: centru
- Utilizați dimensiunea fontului pictogramei: DA
- Dimensiunea fontului pictogramei: 50px (desktop), 40px (tabletă și telefon)
- Latime maxima: 50%
- Modul de aliniere: centru
- Înălțime: 50 px (desktop), 40 px (tabletă și telefon)
Sub filă Avansat, adăugați următorul CSS la Imagine Blurb :
margin-bottom: 0px;
background: #ffffff;
Pentru a poziționa săgeata deasupra liniei, actualizați următoarele:
- Poziție: absolută
- Locație: Centru
- Index Z: 10
Pasul 3: Crearea unei linii pentru părțile adiacente ale diagramei
Odată ce rândul de conectori este complet, vom adăuga un alt rând de mai multe module Blurb adiacente pentru a continua proiectarea diagramei.
Pentru a adăuga linia, pur și simplu copiați și lipiți prima linie (linia cu blurb centrat pe care am creat-o în partea de sus a aspectului) sub linia conectorului.
Deschideți Setări de linie și actualizați următoarele:
- Latime maxima: 50%
- Lățimea chenarului: 2px
Partea stângă a diagramei
Acum că chenarul nostru este adăugat la linie, vom poziționa modulul Blurb deasupra liniei de margine din stânga.
Pentru a face acest lucru, actualizați următoarele setări de design:
- Modul de aliniere: stânga
- Marja: 70 pixeli (sus și jos)
- Transform Translate axa X: -50%
Aceasta este cheia pentru ca modulul Blurb să fie centrat orizontal deasupra liniei de graniță.
Partea dreaptă a diagramei
Pentru a adăuga un alt modul Blurb pe linia de margine din dreapta, duplicați blurb-ul existent.
Pentru a poziționa informația pe linia de margine din dreapta, accesați fila Avansat și dați-i o poziție absolută:
- Poziție: absolută
- Locație: centru dreapta
Apoi, actualizați următoarele opțiuni:
- Marje: niciuna
- Transform Translate axa Y: -50%
- Transform Translate axa X: 50%
S-au adăugat săgeți la colțurile fiecărei linii de margine
Pentru a face diagrama mai clară în ceea ce privește direcția în care progresează rândurile, vom adăuga pictograme săgeți suplimentare pe rândurile de la marginea rândurilor.
Săgeată sus stânga
Pentru a adăuga o săgeată la rândul de margine din stânga sus, duplicați modulul Blurb săgeată pe care l-am creat în rândul conector și trageți-l în rândul care conține modulele Blurb adiacente.
Deschideți modulul Duplicate Arrow Blurb și schimbați pictograma într-o săgeată îndreptată spre stânga.
Apoi, actualizați locația poziției modulului:
- Locație: stânga sus
În cele din urmă, actualizați opțiunea de traducere a transformării după cum urmează:
- Transform Translate axa Y: -50%
Săgeată sus la dreapta
Pentru a crea o săgeată care se află pe linia de margine din dreapta sus, duplicați săgeata " în stânga sus pe care tocmai l-am creat. Apoi deschideți setările și schimbați locația poziției:
- Locație: dreapta sus
De asemenea, actualizați pictograma săgeată cu o săgeată îndreptată spre dreapta.
Săgeată în jos la stânga
Pentru a crea o săgeată care se află pe linia de margine din stânga jos, duplicați săgeata " sus în dreapta pe care tocmai l-am creat.
Apoi deschideți setările și schimbați locația poziției:
- Locație: stânga jos
Apoi, actualizați opțiunea Transform Translate:
- Transform Translate axa Y: 50%
Săgeată în jos la dreapta
Pentru a crea o săgeată care se află pe linia de margine din dreapta jos, duplicați săgeata " în stânga jos pe care tocmai l-am creat.
Apoi deschideți setările și schimbați locația poziției:
- Locație: dreapta jos
De asemenea, actualizați pictograma săgeată cu o săgeată îndreptată spre stânga.
Odată ce toate săgețile sunt plasate, puteți actualiza etichetele pentru fiecare folosind vizualizare strat .
Pasul 4: Adăugarea unei alte linii de conectare
Odată ce am completat linia cu cele două părți adiacente ale diagramei de flux și toate săgețile, putem continua diagrama de flux adăugând o altă linie de conectare.
Pentru a face acest lucru, duplicați linia de conector pe care am creat-o mai sus și lipiți-o sub linia care conține modulele Blurb din partea adiacentă a diagramei.
Pasul 5: Personalizarea fluxului cu un conector de linie dreaptă
În designul diagramei de flux existent, fluxul începe cu elementul de sus, apoi se ramifică la elementele adiacente la dreapta și la stânga, apoi revine la mijloc și merge la următorul element din mijloc.
Pentru a personaliza fluxul, vom duplica secțiunea, astfel încât să putem personaliza diagrama de flux pentru a se opri la elementul(ele) de prezentare adiacent(e) din stânga și continua de la elementul de prezentare din dreapta.
Secțiune duplicat
Pentru a face acest lucru, mai întâi duplicați întreaga secțiune care conține diagrama de flux.
Adăugați un alt modul Blurb din stânga
În secțiunea duplicat (de jos), localizați modulul Blurb din stânga în rândul care conține cele două module adiacente. Apoi, duplicați mențiunea din stânga pentru a crea una nouă direct dedesubt.
Eliminați săgețile de jos și chenarul
Apoi, ștergeți săgeata jos din stânga și săgeata jos din dreapta.
Deschideți setările de linie pentru linia care conține mai multe mesaje și eliminați chenarul de jos:
- Lățimea chenarului de jos: 0px
Creați o linie cu un conector de linie de margine dreaptă
Acum dorim să personalizăm designul diagramei de flux cu un conector de linie de margine dreaptă care va conecta linia de margine dreaptă a liniei cu linia de conector de mai jos.
Pentru a face acest lucru, vom crea o altă linie și vom adăuga o linie de despărțire personalizată și o săgeată de contur în partea dreaptă.
Adăugați un rând nou la o coloană sub rândul existent cu cele trei aspecte.
Actualizați setările rândului după cum urmează, sub filă Amenajări :
- Lățimea jgheabului: 1
- Latime maxima: 50%
- Umplutură: 0px (sus și jos)
Apoi, adăugați un chenar drept la linie.
- Lățimea marginii din dreapta: 2px
Apoi adăugați un modul Divider la linie.
Actualizați setările divizorului după cum urmează:
- Culoare linie: #333333
- Poziția liniei: jos
- Greutate divizor: 2px
- Latime: 50%
- Marja: -2px (jos)
Sub fila avansată, actualizați poziția separatorului:
- Poziție: absolută
- Locație: dreapta jos
Cu separatorul în poziție, copiați modulul Blurb din săgeata din dreapta jos a celui de-al treilea rând al primei secțiuni și inserați-l în rândul cu linia de despărțire din dreapta.
Deschideți setările modulului Blurb ale săgeții pe care tocmai ați duplicat-o și mutat-o și actualizați următoarele:
- Poziție: implicit
- Modul de aliniere: dreapta
Linia de frontieră stânga se oprește
În prezent, o parte a marginii din stânga este expusă sub panoul din stânga jos. Pentru a o ascunde, pur și simplu eliminați marginea de jos a acestui material publicitar de jos.
Pasul 6: Actualizarea liniei cu un conector de linie din partea stângă
Diagrama dvs. poate avea nevoie și de un conector pentru linia de margine din stânga. Pentru ao crea, putem actualiza linia cu conectorul de linie de chenar drept, după cum urmează:
- Lățimea Boprder stânga: 2px
- Lățimea marginii din dreapta: 0
Actualizați separatorul din interiorul liniei cu o nouă locație:
- Locație: stânga jos
Apoi, actualizați alinierea săgeții:
- Modul de aliniere: stânga
Și schimbați pictograma într-o săgeată la dreapta.
Rezultat final
Vezi rezultatul final.
Descărcați DIVI acum!!!
Concluzie
În acest tutorial, am creat o diagramă utilă pe care oricine o poate folosi pentru a-i comunica procesele și ideile vizitatori cu un design receptiv uimitor.
Folosiți-l pentru a prezenta serviciile sau procesul de proiectare, pentru a crea un infografic sau pentru a ghida clienții prin intermediul cuprins într-un mod nou.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.
Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
