Cum să creați o schemă de flux în Divi

Știind cum să creați o schemă de flux în Divi deschide multe oportunități de comunicare a proceselor și ideilor pe un site web. În unele cazuri, diagramele de flux pot fi utilizate pentru a explica idei extrem de complexe care implică un număr mare de articole. Cu toate acestea, pe un site web, 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 un aspect practic al diagramei pe care să îl puteți utiliza pe site-ul dvs. web, simplu, eficient și receptiv. Practic, vom deveni creativi cu margini, separatoare, blurbs și opțiuni de transformare Divi pentru a crea un aspect al diagramei pe care îl puteți personaliza cu ușurință pentru nevoile dvs. În plus, vom folosi opțiunile integrate Divi doar pentru a-l crea, deci nu trebuie să vă faceți griji cu privire la adăugarea de coduri personalizate sau pluginuri.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra proiectării diagramei pe care o vom construi în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Cum să creați o schemă de flux în Divi

Pasul 1: Crearea unui rând cu un text centrat

Pentru a începe crearea schemei de flux în Divi, vom începe cu crearea unui rând care conține un blurb centrat. Acesta va fi primul element din diagramă.

Căptușirea secțiunii

Mai întâi, deschideți setările secțiunii pentru secțiunea implicită și setați umplutura inferioară la 0 px.

Randul

În secțiune, adăugați un rând cu o coloană.

Deschideți setările rândului și actualizați următoarele setări de proiectare:

• Lățimea jgheabului: 1
• Căptușeală: 0 px sus, 0 px jos

Aceste două setări de proiectare vor fi utilizate pentru toate rândurile din această schemă de flux, pentru a vă asigura că nu se adaugă spațiu suplimentar între module și rânduri.

Designul modulului Blurb

Pentru a crea primul nostru element de diagramă de flux, vom folosi un modul blurb.

Adăugați un nou modul de blurb pe rând.

Setări Blurb

Deschideți setările pentru blurb. Sub fila conținut, puteți păstra textul implicit al titlului și al corpului.

Apoi actualizați imaginea cu o imagine cu pictograme mici sau utilizați una dintre pictogramele Divi încorporate. Pentru acest tutorial, voi folosi pictograme din Crowdfunding Layout Pack.

Apoi dați blurbului o culoare de fundal:

• Culoare fundal: # f8f8f8

Sub fila Proiectare, actualizați următoarele:

• Aliniere text: centru
• Lățime maximă: 400 px (desktop și tabletă), 90% (telefon)
• Alinierea modulului: centru
• Căptușeală: 6% sus, 6% jos, 3% stânga, 3% dreapta

NOTĂ: Această dimensiune blurb va fi partajată de toate blurbs în schema de flux. Această dimensiune funcționează pentru acest aspect, deoarece diagrama de flux nu va avea niciodată mai mult de două blurbs adiacente (una lângă alta). Acest lucru ne permite să păstrăm designul receptiv și să arătăm minunat și pe tabletă și telefon.

Apoi, conferați bordurii o margine după cum urmează:

• Lățimea chenarului: 2 px

Pasul 2: Crearea rândului conectorului cu linie verticală și săgeată

Pentru următoarea parte a schemei noastre de diagramă, vom crea un rând de conector care are o linie verticală și o săgeată centrate. Acest rând va fi folosit pentru a conecta rânduri de conținut al diagramei care trebuie să continue în josul paginii.

În acest caz, vrem să începem diagrama prin adăugarea unei linii și a unei săgeți sub rândul anterior cu modulul de blurb centrat.

Creați noi rânduri și copiați / lipiți stiluri de rând din rândul anterior

Pentru a face acest lucru, adăugați un nou rând cu o coloană sub rândul anterior.

Folosind meniul „Mai multe opțiuni” (sau opțiuni de clic dreapta), copiați stilurile de rând din rândul anterior de mai sus și lipiți-le pe noul rând.

Crearea unui divizor de linie verticală

Pentru a crea divizorul de linie verticală, adăugați un nou modul divizor la rând.

Sub setările divizorului, actualizați setările de proiectare după cum urmează:

• Culoare linie: # 333333
• Poziția liniei: jos
• Greutatea divizorului: 150 px
• Lățime: 2 px
• Alinierea modulului: centru
• Marja: -1 px de jos

Sub fila avansată, ascundeți preaplinul după cum urmează:

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Crearea unei săgeți cu un modul Blurb

Apoi, vom crea o pictogramă săgeată pentru a sta deasupra liniei de separare folosind un modul de blurb.

Pentru a crea săgeata, adăugați un nou modul de blurb sub divizor.

Setări Blurb săgeată

Sub setările pentru blurb, scoateți titlul implicit și textul corpului și faceți clic pentru a utiliza pictograma săgeată de jos (consultați captura de ecran).

Sub fila Proiectare, actualizați următoarele:

• Culoare pictogramă: #bbbbbb
• Aliniere imagine / pictogramă: centru
• Dimensiune font pictogramă: 50 px (desktop), 40 px (tabletă și telefon)

• Lățime maximă: 50%
• Alinierea modulului: centru
• Înălțime: 50 px (desktop), 40 px (tabletă și telefon)

Sub fila avansată, adăugați următorul CSS în imaginea Blurb:

margin-bottom: 0px;
background: #ffffff;

Aceasta va elimina marja implicită a textului și va adăuga un fundal alb pentru a crea aspectul spațiului dintre pictogramă și linie odată ce am poziționat pictograma deasupra liniei.

Pentru a poziționa săgeata deasupra liniei, actualizați următoarele:

• Poziție: Absolută
• Locație: centru
• Indicele Z: 10

Pasul 3: Crearea unui rând cu Blurbs și săgeți ale diagramelor de flux adiacente

Odată ce rândul conectorului este complet, vom adăuga un alt rând de mai multe blurbs adiacente pentru a continua proiectarea diagramei.

Pentru a adăuga rândul, pur și simplu copiați și lipiți primul rând (rândul cu un blurb centrat pe care l-am creat în partea de sus a aspectului) sub rândul conectorului.

Deschideți setările rândului și actualizați următoarele:

• Lățime maximă: 50%
• Lățimea chenarului: 2 px

Lățimea maximă de 50% este importantă pentru ca aspectul să funcționeze receptiv. Se va asigura că estompările care se revarsă în dreapta și în stânga rândului nu vor depăși lățimea browserului.

Crearea unei diagrame de flux pe linia de margine stânga

Acum că marginea noastră este adăugată la rând, vom poziționa blurb-ul deasupra liniei de margine din stânga.

Pentru aceasta, actualizați următoarele setări de proiectare:

• Alinierea modulului: stânga
• Marja: 70 px de sus, 70 px de jos

• Transformă axa X tradusă: -50%

Aceasta este cheia pentru a face ca blurbul să stea orizontal centrat deasupra liniei de frontieră.

Crearea unei diagrame de flux adiacente pe linia de margine dreaptă

Pentru a adăuga o altă combinație pe linia de margine dreaptă, duplicați combinația existentă.

Pentru a poziționa blurb-ul pe linia de margine dreaptă, accesați fila avansată și acordați-i o poziție absolută:

• Poziție: Absolută
• Locație: Centrul din dreapta

Apoi actualizați marja și transformați opțiunile de traducere după cum urmează:

• Marja: niciuna
• Transformă axa Y tradusă: -50%
• Transformă axa X Traducere: 50%

Adăugarea Blurbs săgeată la colțurile de pe fiecare linie de frontieră

Pentru a face diagrama de flux mai clară cu privire la direcția în care progresează liniile, vom adăuga pictograme săgeți suplimentare pe liniile de margine ale rândului.

Săgeata din stânga sus

Pentru a adăuga o săgeată la linia de margine din stânga sus, copiați blurbul săgeții pe care l-am creat în rândul conectorului și trageți-l în rândul care conține blurbs adiacente.

Deschideți comanda săgeată duplicat și schimbați pictograma cu o săgeată la stânga.

Apoi, actualizați poziția poziției fluturii săgeții:

• Locație: stânga sus

În cele din urmă, actualizați opțiunea de traducere transformată după cum urmează:

• Transformă axa Y tradusă: -50%

Săgeata sus dreapta

Pentru a crea o săgeată care se află pe linia de margine din dreapta sus, copiați săgeata „sus-stânga” pe care tocmai am creat-o. Apoi deschideți setările și modificați locația poziției:

• Locație: dreapta sus

De asemenea, actualizați pictograma săgeată cu o săgeată dreapta.

Săgeata din stânga jos

Pentru a crea o săgeată care stă pe linia de margine din stânga jos, copiați săgeata „sus dreapta” pe care tocmai am creat-o.

Apoi deschideți setările și modificați locația poziției:

• Locație: în partea stângă jos

Apoi, actualizați opțiunea de traducere transformată:

• Transformă axa Y tradusă: 50%

Săgeata din dreapta jos

Pentru a crea o săgeată care stă pe linia de margine din dreapta jos, copiați săgeata „jos stânga” pe care tocmai am creat-o.

Apoi deschideți setările și modificați locația poziției:

• Locație: în partea dreaptă jos

De asemenea, actualizați pictograma săgeată cu o săgeată la stânga.

Odată ce toate săgețile au fost plasate, puteți actualiza etichetele fiecăruia folosind vizualizarea straturilor.

Pasul 4: Adăugarea unui alt rând de conector

Odată ce am finalizat rândul cu cele două blurbs ale diagramei de flux adiacente și cu toate săgețile, putem continua diagrama de flux adăugând un alt rând de conector.

Pentru a face acest lucru, copiați rândul conectorului pe care l-am creat mai sus și lipiți-l sub rândul care conține diagrame adiacente.

Pasul 5: Personalizarea fluxului cu un conector de linie de margine dreaptă

În proiectarea diagramelor de flux existente, fluxul începe cu elementul de sus și apoi se ramifică la elementele adiacente din dreapta și din stânga, apoi revine la mijloc și trece la următorul element centrat. Pentru a personaliza fluxul, vom dubla secțiunea, astfel încât să putem personaliza diagrama de flux pentru a se opri în elementele din stânga adiacente și pentru a continua de la elementul din dreapta.

Secțiune duplicat

Pentru a face acest lucru, copiați mai întâi întreaga secțiune a conținutului diagramei.

Adăugați un alt element Blurb stânga

În secțiunea duplicat (jos), localizați blurbul din stânga în rândul care conține cele două blurbs adiacente. Apoi dublează comanda stângă pentru a crea una nouă direct sub ea.

Ștergeți săgețile de jos și marginea

Apoi, ștergeți săgeata stânga jos și săgeata dreapta jos.

Deschideți setările de rând pentru rândul care conține mai multe blurbs și scoateți marginea de jos:

• Lățimea marginii inferioare: 0 px

Creați un rând cu un conector de linie de margine dreaptă

Acum vrem să personalizăm designul diagramei cu un conector de linie de margine dreaptă care va conecta linia de margine dreaptă a rândului cu rândul de conector de mai jos.

Pentru a face acest lucru, vom crea un alt rând și vom adăuga o linie separatoare personalizată și o săgeată în partea dreaptă.

Adăugați un nou rând cu o coloană sub rândul existent cu cele trei blurbs.

Actualizați setările de proiectare ale rândului după cum urmează:

• Lățimea jgheabului: 1
• Lățime maximă: 50%
• Căptușeală: 0 px sus, 0 px jos

Apoi, adăugați un chenar drept la rând.

• Lățimea marginii drepte: 2 px

Apoi adăugați un modul divizor pe rând.

Actualizați setările divizorului după cum urmează:

• Culoare linie: # 333333
• Poziția liniei: jos
• Greutatea divizorului: 2 px
• Lățime: 50%
• Marja: -2 px de jos

Sub fila avansată, actualizați poziția separatorului:

• Poziție: Absolută
• Locație: în partea dreaptă jos

Odată ce divizorul este la locul său, copiați săgeata din dreapta jos de pe al treilea rând din prima secțiune și lipiți-l în rândul cu linia dreaptă a divizorului.

Deschideți setările butonului săgeată pe care tocmai l-ați duplicat și mutat și actualizați următoarele:

• Poziție: implicit

• Alinierea modulului: corect

Oprirea fluxului liniei de margine stângă

Chiar acum, există o parte din linia de margine stângă expusă sub blurbul din stânga jos. Pentru a-l ascunde, scoateți simplu marginea inferioară a acelei discuri de jos.

Pasul 6: Actualizarea rândului cu un conector de linie de margine stânga

Este posibil ca diagrama dvs. de flux să aibă și un conector de linie de margine stânga. Pentru a-l crea, putem actualiza rândul cu conectorul liniei de margine dreapta după cum urmează:

• Lățimea marginii stânga: 2 px
• Lățimea marginii drepte: 0

Actualizați divizorul din rând cu o nouă locație:

• Locație: în partea stângă jos

Apoi actualizați alinierea flotării săgeții:

• Alinierea modulului: stânga

Și schimbați pictograma cu o săgeată spre dreapta.

Rezultat final

Verificați rezultatul final. Am continuat și am duplicat cea de-a doua secțiune și am adăugat conectorul liniei de margine din stânga, astfel încât să le puteți vedea pe amândouă.

Gânduri finale

În acest tutorial, am creat un aspect util al diagramei pe care oricine îl poate folosi pentru a comunica vizitatorilor proces și idei cu un design receptiv uimitor. Utilizați-l pentru a prezenta procesul de servicii sau de proiectare, pentru a crea o infografică sau pentru a conduce clienții prin conținut într-un mod nou. Sperăm că va fi util pentru următorul dvs. proiect.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!