Dëshironi të krijoni një grafik organizativ në Divi?
Dini se si të krijoni një plan urbanistik në Divi hap shumë mundësi për të komunikuar procese dhe ide mbi a Site Web. Në disa raste, grafikët e rrjedhës mund të përdoren për të shpjeguar ide jashtëzakonisht komplekse që përfshijnë një numër të madh elementësh.
Ne nje Site Web, megjithatë, këto diagrame më komplekse të rrjedhës mund të jenë të vështira për t'u arritur, veçanërisht nëse dëshironi që ato të jenë të përgjegjshme.
Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një plan urbanistik të dobishëm që mund ta përdorni në Site Web, e thjeshtë, efektive dhe e përgjegjshme.
Plus, ne do të përdorim vetëm opsionet e integruara të Divi për ta krijuar atë, kështu që nuk duhet të shqetësoheni për shtimin e kodit ose shtojcave të personalizuara.
Le të fillojmë!
studim
Ja një vështrim i shpejtë i dizajnit të grafikut të rrjedhës që do të krijojmë në këtë tutorial.
Krijo një faqe të re me Divi Builder
Për të filluar, do t'ju duhet të bëni sa më poshtë:
Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.
Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Si të krijoni një paraqitje të grafikut të rrjedhës në Divi
Hapi 1: Krijo një rresht me turbullirë në qendër
Për të filluar krijimin e paraqitjes së grafikut të rrjedhës në Divi, do të fillojmë duke krijuar një rresht që përmban turbullim në qendër. Ky do të jetë elementi i parë i grafikut të rrjedhës.
Mbushja e seksionit
Së pari, hapni cilësimet e seksionit për seksionin e paracaktuar dhe vendosni mbushjen e poshtme në 0px.
- Mbushje (në fund): 0 px
Linjë
Brenda seksionit, shtoni një rresht në një kolonë.
Hapni cilësimet e linjës dhe përditësoni cilësimet e mëposhtme të dizajnit:
- Gjerësia e kanalit: 1
- Mbushje (lart dhe poshtë): 0 px
Blurb Mod Design
Për të krijuar elementin tonë të parë të grafikut të rrjedhës, ne do të përdorim një modul Blurb.
Fut një modul Blurb në linjë.
Cilësimet e modulit
Hapni cilësimet e modulit Blurb. Nën skedën Përmbajtja, mund të mbani titullin e paracaktuar dhe tekstin e trupit.
Më pas përditësoni imazhin me një imazh të vogël ikone ose përdorni një nga ikonat e integruara Divi. Për këtë tutorial, ne përdorim ikona nga Paketa e Planifikimit të Crowdfunding .
Pastaj jepni modulit një ngjyrë sfondi:
- Sfondi: #f8f8f8
Nën skedinë Projektimi, përditësoni sa vijon:
- Rreshtimi i tekstit: në qendër
- Gjerësia maksimale: 400 px (Desktop dhe tablet), 90% (Telefon)
- Moduli i shtrirjes: Qendra
- Mbushja: 6% (lart dhe poshtë), 3% (majtas dhe djathtas)
Më pas, jepni Modulit Blurb një kufi si më poshtë:
- Gjerësia e kufirit: 2 px
Hapi 2: Krijimi i vijës lidhëse me një vijë vertikale dhe një shigjetë
Për pjesën tjetër të paraqitjes së grafikut tonë të rrjedhës, ne do të krijojmë një rresht lidhësish që kanë një vijë vertikale të përqendruar dhe një shigjetë. Kjo linjë do të përdoret për të lidhur linjat e përmbajtje të grafikut organizativ i cili duhet të vazhdojë drejt fundit të faqes.
Në këtë rast, ne duam të fillojmë grafikun e rrjedhës duke shtuar një vijë dhe një shigjetë poshtë vijës së mëparshme me modulin Blurbn në qendër.
Krijoni një rresht të ri dhe kopjoni/ngjisni stilet nga rreshti i mëparshëm
Për ta bërë këtë, shtoni një rresht të ri në një kolonë poshtë rreshtit të mëparshëm.
Duke perdorur " Cilësimet e modulit të tjerë (ose kliko me të djathtën në opsionet), kopjoni stilet nga rreshti i mëparshëm i mësipërm dhe ngjitini ato në rreshtin e ri.
Krijimi i një ndarësi të vijës vertikale
Për të krijuar ndarësin e vijës vertikale, shtoni një modul të ri Divider në linjë.
Nën cilësimet e ndarësit, përditësoni cilësimet e dizajnit si më poshtë:
- Ngjyra e linjës: #333333
- Pozicioni i linjës: Poshtë
- Pesha e ndarësit: 150 px
- Gjerësia: 2 piksele
- Moduli i shtrirjes: Qendra
- Margjina: -1 px (poshtë)
Nën skedinë Avancuar, fshihni tejmbushjen si më poshtë:
- Vërshimi horizontal: I fshehur
- Vërshimi vertikal: I fshehur
Krijo një shigjetë me një modul Blurb
Më pas, ne do të krijojmë një ikonë shigjete që do të vendoset mbi vijën ndarëse duke përdorur një modul prezantimi.
Për të krijuar shigjetën, shtoni një modul të ri Blurb poshtë ndarësit.
Cilësimet e modalitetit blurb
Nën cilësimet e modulit, hiqni titullin e paracaktuar dhe tekstin e trupit dhe klikoni Përdor ikonën, pastaj zgjidhni ikonën e shigjetës (shih pamjen e ekranit).
Nën skedinë Projektimi, përditësoni sa vijon:
- Ngjyra e ikonës: #bbbbbb
- Shtrirja e imazhit/ikonës: në qendër
- Përdorni madhësinë e shkronjave të ikonës: PO
- Madhësia e shkronjave të ikonës: 50 px (desktop), 40 px (tableti dhe telefoni)
- Gjerësia maksimale: 50%
- Moduli i shtrirjes: qendër
- Lartësia: 50 px (Desktop), 40 px (Tableti dhe telefoni)
Nën skedinë Avancuar, shtoni CSS-në e mëposhtme në Imazhi i turbullt :
margin-bottom: 0px;
background: #ffffff;
Për të vendosur shigjetën mbi vijën, përditësoni sa vijon:
- Pozicioni: Absolut
- Vendndodhja: Qendër
- Z Indeksi: 10
Hapi 3: Krijimi i një linje për pjesët ngjitur të grafikut të rrjedhës
Pasi të përfundojë rreshti i lidhësve, ne do të shtojmë një rresht tjetër me disa module Blurb ngjitur për të vazhduar dizajnin e grafikut të rrjedhës.
Për të shtuar rreshtin, thjesht kopjoni dhe ngjisni rreshtin e parë (vijën me turbullimin e përqendruar që krijuam në krye të paraqitjes) poshtë vijës së lidhësit.
Hapni Cilësimet e linjës dhe përditësoni sa vijon:
- Gjerësia maksimale: 50%
- Gjerësia e kufirit: 2 px
Ana e majtë e grafikut të rrjedhës
Tani që kufiri ynë i shtohet linjës, ne do ta pozicionojmë modulin Blurb mbi vijën e majtë të kufirit.
Për ta bërë këtë, përditësoni parametrat e mëposhtëm të dizajnit:
- Moduli i shtrirjes: majtas
- Margjina: 70 px (lart dhe poshtë)
- Boshti Transformo Translate X: -50%
Ky është çelësi që moduli Blurb të jetë i përqendruar horizontalisht mbi vijën kufitare.
Ana e djathtë e grafikut të rrjedhës
Për të shtuar një tjetër Modul Blurb në vijën e kufirit të djathtë, dubliko turbullimin ekzistues.
Për të pozicionuar turbullimin në vijën e djathtë të kufirit, shkoni te skeda Avancuar dhe jepini një pozicion absolut:
- Pozicioni: Absolut
- Vendndodhja: në qendër djathtas
Më pas, përditësoni opsionet e mëposhtme:
- Margjinat: asnjë
- Boshti Y Transformo Translate: -50%
- Boshti Transformo Translate X: 50%
Shtohen shigjeta në qoshet e secilës vijë kufitare
Për ta bërë diagramin e rrjedhës më të qartë për drejtimin ku rreshtat po përparojnë, ne do të shtojmë ikona shtesë të shigjetave në rreshtat e kufirit të rreshtit.
Shigjeta lart majtas
Për të shtuar një shigjetë në rreshtin e sipërm majtas të kufirit, dublikojeni modulin Blurb të shigjetës që krijuam në rreshtin lidhës dhe tërhiqeni atë në rreshtin që përmban modulet Blurb ngjitur.
Hapni modulin Duplicate Arrow Blurb dhe ndryshoni ikonën në një shigjetë me drejtim majtas.
Më pas, përditësoni vendndodhjen e pozicionit të modulit:
- Vendndodhja: majtas lart
Më në fund, përditësoni opsionin e përkthimit të transformimit si më poshtë:
- Boshti Y Transformo Translate: -50%
Shigjeta lart djathtas
Për të krijuar një shigjetë që qëndron në vijën e sipërme të kufirit djathtas, dubliko shigjetën " në këndin e sipërm majtas që sapo krijuam. Pastaj hapni cilësimet dhe ndryshoni vendndodhjen e pozicionit:
- Vendndodhja: lart djathtas
Përditësoni gjithashtu ikonën e shigjetës me një shigjetë me drejtim djathtas.
Shigjeta poshtë majtas
Për të krijuar një shigjetë që qëndron në vijën e poshtme të kufirit majtas, dubliko shigjetën " lart djathtas që sapo krijuam.
Pastaj hapni cilësimet dhe ndryshoni vendndodhjen e pozicionit:
- Vendndodhja: poshtë majtas
Më pas, përditësoni opsionin Transformo Translate:
- Boshti Y Transformo Translate: 50%
Shigjeta poshtë djathtas
Për të krijuar një shigjetë që qëndron në vijën e poshtme të kufirit djathtas, dubliko shigjetën " në pjesën e poshtme të majtë që sapo krijuam.
Pastaj hapni cilësimet dhe ndryshoni vendndodhjen e pozicionit:
- Vendndodhja: Poshtë djathtas
Përditësoni gjithashtu ikonën e shigjetës me një shigjetë me drejtim majtas.
Pasi të vendosen të gjitha shigjetat, mund të përditësoni etiketat për secilën duke përdorur pamje e shtresës .
Hapi 4: Shtimi i një linje tjetër lidhëse
Pasi të kemi përfunduar vijën me dy pjesët ngjitur të grafikut të rrjedhës dhe të gjitha shigjetat, mund të vazhdojmë grafikun e rrjedhës duke shtuar një linjë tjetër lidhëse.
Për ta bërë këtë, dublikojeni linjën lidhëse që krijuam më lart dhe ngjisni atë poshtë vijës që përmban modulet Blurb nga pjesa ngjitur e grafikut të rrjedhës.
Hapi 5: Përshtatja e rrjedhës me një lidhës të vijës së drejtë
Në dizajnin ekzistues të grafikut të rrjedhës, rrjedha fillon me elementin e sipërm, pastaj degëzohet në elementët ngjitur djathtas dhe majtas, pastaj kthehet në mes dhe shkon në elementin tjetër të mesëm.
Për të personalizuar rrjedhën, ne do të dublikojmë seksionin në mënyrë që të mund të personalizojmë grafikun e rrjedhës që të ndalet në elementin(ët) ngjitur të prezantimit në të majtë dhe të vazhdojë nga elementi i prezantimit në të djathtë.
Seksioni i kopjuar
Për ta bërë këtë, së pari kopjoni të gjithë seksionin që përmban grafikun e rrjedhës.
Shto një tjetër modul të turbullimit të majtë
Në seksionin e kopjuar (poshtë), gjeni modulin e majtë Blurb në rreshtin që përmban dy modulet ngjitur. Më pas, dublikojeni turbullimin në të majtë për të krijuar një të re direkt më poshtë.
Hiqni shigjetat e poshtme dhe kufirin
Më pas, fshini shigjetën e poshtme majtas dhe shigjetën e poshtme djathtas.
Hapni cilësimet e linjës për rreshtin që përmban turbullira të shumta dhe hiqni kufirin e poshtëm:
- Gjerësia e kufirit të poshtëm: 0 px
Krijo një linjë me një lidhës të vijës së drejtë kufitare
Tani ne duam të personalizojmë dizajnin e diagramit të rrjedhës me një lidhës të vijës së djathtë të kufirit që do të lidhë vijën kufitare të djathtë të linjës me linjën lidhëse më poshtë.
Për ta bërë këtë, ne do të krijojmë një linjë tjetër dhe do të shtojmë një vijë ndarëse të personalizuar dhe një shigjetë skicë në anën e djathtë.
Shtoni një rresht të ri një kolonë poshtë rreshtit ekzistues me tre paraqitjet.
Përditësoni cilësimet e rreshtit si më poshtë, nën skedën Projektimi :
- Gjerësia e kanalit: 1
- Gjerësia maksimale: 50%
- Mbushja: 0 px (lart dhe poshtë)
Tjetra, shtoni një kufi të drejtë në vijë.
- Gjerësia e kufirit të djathtë: 2 px
Pastaj shtoni një modul Divider në linjë.
Përditësoni cilësimet e ndarësit si më poshtë:
- Ngjyra e linjës: #333333
- Pozicioni i linjës: Poshtë
- Pesha e ndarësit: 2 px
- Gjerësia: 50%
- Margjina: -2 px (poshtë)
Nën skedën e avancuar, përditësoni pozicionin e ndarësit:
- Pozicioni: Absolut
- Vendndodhja: Poshtë djathtas
Me ndarësin në vend, kopjoni modulin Blurb nga shigjeta e poshtme djathtas e rreshtit të tretë të seksionit të parë dhe ngjisni atë në rreshtin me vijën ndarëse të djathtë.
Hapni cilësimet e modulit Blurb të shigjetës që sapo keni dublikuar dhe zhvendosur dhe përditësoni sa vijon:
- Pozicioni: E paracaktuar
- Moduli i shtrirjes: djathtas
Ndalimi i rrjedhës së vijës kufitare të majtë
Aktualisht, një pjesë e kufirit të majtë është e ekspozuar poshtë turbullirës në pjesën e poshtme të majtë. Për ta fshehur atë, thjesht hiqni kufirin e poshtëm nga kjo turbullim i poshtëm.
Hapi 6: Përditësimi i linjës me një lidhës të linjës së skajit të majtë
Grafiku juaj i rrjedhës mund të ketë nevojë gjithashtu për një lidhës të vijës kufitare të majtë. Për ta krijuar atë, ne mund ta përditësojmë linjën me lidhësin e djathtë të linjës kufitare si më poshtë:
- Gjerësia e Boprderit të majtë: 2 px
- Gjerësia e kufirit të djathtë: 0
Përditësoni ndarësin brenda linjës me një vendndodhje të re:
- Vendndodhja: poshtë majtas
Më pas, përditësoni shtrirjen e shigjetave:
- Moduli i shtrirjes: majtas
Dhe ndryshoni ikonën në një shigjetë djathtas.
Rezultati përfundimtar
Shikoni rezultatin përfundimtar.
Shkarkoni DIVI tani!!!
Përfundim
Në këtë tutorial, ne kemi krijuar një plan urbanistik të dobishëm që çdokush mund ta përdorë për të komunikuar procesin dhe idetë vizitorët me një dizajn mahnitës të përgjegjshëm.
Përdoreni atë për të shfaqur shërbimet ose procesin e projektimit, për të krijuar një infografikë ose për të udhëhequr klientët përmes përmbajtje në një mënyrë të re.
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.
Mos hezitoni të konsultoheni edhe me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
