Želite li izraditi organizacijsku shemu u Diviju?
Znati kako stvoriti izgled dijagrama toka u Divi otvara mnoge prilike za komuniciranje procesa i ideja na a web stranica. U nekim slučajevima dijagrami toka mogu se koristiti za objašnjenje izuzetno složenih ideja koje uključuju veliki broj elemenata.
Na a web stranica, međutim, ove složenije dijagrame toka može biti teško postići, posebno ako želite da bude osjetljiv.
U ovom vodiču ćemo vam pokazati kako izraditi zgodan dijagram toka koji možete koristiti na web stranica, jednostavan, učinkovit i osjetljiv.
Osim toga, koristit ćemo samo Divi ugrađene opcije za njegovu izradu, tako da ne morate brinuti o dodavanju prilagođenog koda ili dodataka.
Krenimo!
pregled
Evo kratkog pregleda dizajna dijagrama toka koji ćemo izraditi u ovom vodiču.
Stvorite novu stranicu s Divi Builderom
Da biste započeli, morat ćete učiniti sljedeće:
S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder
zatim kliknite Počnite graditi (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.
Kako stvoriti dijagram toka u Diviju
Korak 1: Napravite redak s centriranim istaknutim natpisom
Da bismo započeli s izradom izgleda dijagrama toka u Diviju, počet ćemo s izradom retka koji sadrži centrirani blurb. Ovo će biti prvi element dijagrama toka.
Ispuna odjeljaka
Prvo otvorite postavke odjeljka za zadani odjeljak i postavite donji dio na 0px.
- Ispuna (dno): 0px
Crta
Unutar odjeljka dodajte red u stupac.
Otvorite postavke linije i ažurirajte sljedeće postavke dizajna:
- Širina oluka: 1
- Razmak (gornji i donji dio): 0 px
Blurb Mod Design
Za izradu našeg prvog elementa dijagrama toka koristit ćemo modul Blurb.
Inline umetnite Blurb modul.
Postavke modula
Otvorite postavke modula Blurb. Ispod kartice Sadržaj, možete zadržati zadani naslov i tijelo teksta.
Zatim ažurirajte sliku slikom male ikone ili upotrijebite jednu od ugrađenih Divi ikona. Za ovaj vodič koristimo ikone iz Crowdfunding Layout Pack .
Zatim dajte modulu boju pozadine:
- Pozadina: #f8f8f8
Ispod kartice dizajnažurirajte sljedeće:
- Poravnanje teksta: centrirano
- Maksimalna širina: 400 piksela (stolno računalo i tablet), 90% (telefon)
- Modul poravnanja: centar
- Ispuna: 6% (gore i dolje), 3% (lijevo i desno)
Zatim dajte modulu Blurb obrub na sljedeći način:
- Širina obruba: 2 px
Korak 2: Stvaranje linije povezivanja okomitom linijom i strelicom
Za sljedeći dio našeg izgleda dijagrama toka, stvorit ćemo red konektora koji imaju središnju okomitu liniju i strelicu. Ova linija će se koristiti za spajanje linija sadržaj organizacijske sheme koja bi se trebala nastaviti prema dnu stranice.
U ovom slučaju želimo započeti dijagram toka dodavanjem linije i strelice ispod prethodne linije s Blurbn modulom u sredini.
Napravite novi redak i kopirajte/zalijepite stilove iz prethodnog retka
Da biste to učinili, dodajte novi red u stupac ispod prethodnog retka.
Koristiti " Ostale postavke modula (ili opcije desnog klika), kopirajte stilove iz prethodnog retka iznad i zalijepite ih u novi red.
Stvaranje okomitog razdjelnika linija
Da biste stvorili okomiti razdjelnik linija, dodajte novi modul Razdjelnik u liniju.
U postavkama razdjelnika ažurirajte postavke dizajna na sljedeći način:
- Boja linije: #333333
- Položaj linije: dolje
- Težina razdjelnika: 150 px
- Širina: 2 piksela
- Modul poravnanja: centar
- Margina: -1px (dno)
Ispod kartice napredan, sakrijte preljev na sljedeći način:
- Horizontalni preljev: skriven
- Vertikalni preljev: skriveno
Stvorite strelicu s Blurb modulom
Zatim ćemo pomoću prezentacijskog modula izraditi ikonu strelice koja će se nalaziti iznad razdjelne linije.
Da biste stvorili strelicu, dodajte novi Blurb modul ispod razdjelnika.
Postavke Blurb moda
U postavkama modula uklonite zadani naslov i tekst tijela i kliknite Koristi ikonu, zatim odaberite ikonu strelice (pogledajte snimak zaslona).
Ispod kartice dizajnažurirajte sljedeće:
- Boja ikone: #bbbbbb
- Poravnanje slike/ikone: središte
- Koristi veličinu fonta ikone: DA
- Veličina fonta ikone: 50 px (stolno računalo), 40 px (tablet i telefon)
- Maksimalna širina: 50%
- Modul poravnanja: centar
- Visina: 50 px (stolno računalo), 40 px (tablet i telefon)
Ispod kartice napredan, dodajte sljedeći CSS u Blurb slika :
margin-bottom: 0px;
background: #ffffff;
Da postavite strelicu iznad crte, ažurirajte sljedeće:
- Pozicija: Apsolutna
- Lokacija: Centar
- Z indeks: 10
Korak 3: Stvaranje linije za susjedne dijelove dijagrama toka
Nakon što je red konektora dovršen, dodat ćemo još jedan red od nekoliko susjednih Blurb modula kako bismo nastavili dizajn dijagrama toka.
Da biste dodali liniju, jednostavno kopirajte i zalijepite prvu liniju (linija s centriranim natpisom koju smo stvorili na vrhu izgleda) ispod linije konektora.
Otvorite postavke linije i ažurirajte sljedeće:
- Maksimalna širina: 50%
- Širina obruba: 2px
Lijeva strana dijagrama toka
Sada kada je naš obrub dodan liniji, postavit ćemo Blurb modul iznad lijeve obrubne linije.
Da biste to učinili, ažurirajte sljedeće parametre dizajna:
- Modul poravnanja: lijevo
- Margina: 70px (gornja i donja)
- Transform Translate X os: -50%
Ovo je ključno za Blurb modul da bude centriran vodoravno iznad granične linije.
Desna strana dijagrama toka
Da biste dodali još jedan Blurb modul na desnu rubnu liniju, duplicirajte postojeći blurb.
Da biste oglas postavili na desnu rubnu liniju, idite na karticu napredan i dati mu apsolutnu poziciju:
- Pozicija: Apsolutna
- Mjesto: sredina desno
Zatim ažurirajte sljedeće opcije:
- Margine: nema
- Transformacija Translate Y os: -50%
- Transform Translate X os: 50%
Dodane su strelice u kutove svake rubne linije
Kako bi dijagram toka bio jasniji o smjeru napredovanja redaka, dodat ćemo dodatne ikone strelica na rubne retke.
Strelica gore lijevo
Da biste dodali strelicu u gornji lijevi granični red, duplicirajte modul Blurb strelice koji smo stvorili u retku konektora i povucite ga u red koji sadrži susjedne module Blurb.
Otvorite modul Duplicate Arrow Blurb i promijenite ikonu u strelicu koja pokazuje lijevo.
Zatim ažurirajte lokaciju položaja modula:
- Mjesto: gore lijevo
Na kraju, ažurirajte opciju prijevoda transformacije na sljedeći način:
- Transformacija Translate Y os: -50%
Strelica gore desno
Da biste stvorili strelicu koja se nalazi na gornjoj desnoj rubnoj liniji, duplicirajte strelicu " u gornjem lijevom kutu koje smo upravo stvorili. Zatim otvorite postavke i promijenite lokaciju položaja:
- Mjesto: gore desno
Također ažurirajte ikonu strelice sa strelicom koja pokazuje desno.
Strelica dolje lijevo
Da biste stvorili strelicu koja se nalazi na donjoj lijevoj rubnoj crti, duplicirajte strelicu " Gore desno koje smo upravo stvorili.
Zatim otvorite postavke i promijenite lokaciju položaja:
- Lokacija: dolje lijevo
Zatim ažurirajte opciju Transform Translate:
- Transform Translate Y os: 50%
Strelica dolje desno
Da biste stvorili strelicu koja se nalazi na donjoj desnoj rubnoj liniji, duplicirajte strelicu " dolje lijevo koje smo upravo stvorili.
Zatim otvorite postavke i promijenite lokaciju položaja:
- Mjesto: dolje desno
Također ažurirajte ikonu strelice sa strelicom koja pokazuje lijevo.
Nakon što su sve strelice postavljene, možete ažurirati oznake za svaku pomoću prikaz slojeva .
Korak 4: Dodavanje drugog konektora
Nakon što smo dovršili liniju s dva susjedna dijela dijagrama toka i svim strelicama, možemo nastaviti dijagram toka dodavanjem još jedne konektorske linije.
Da biste to učinili, duplicirajte liniju konektora koju smo stvorili iznad i zalijepite je ispod linije koja sadrži Blurb module iz susjednog dijela dijagrama toka.
Korak 5: Prilagodba protoka s ravnim rubnim konektorom
U postojećem dizajnu dijagrama toka tok počinje s gornjim elementom, zatim se grana na desne i lijeve susjedne elemente, zatim se vraća u sredinu i ide do sljedećeg srednjeg elementa.
Da bismo prilagodili tok, duplicirat ćemo odjeljak tako da možemo prilagoditi dijagram toka da se zaustavi na susjednom elementu(ima) prezentacije s lijeve strane i nastavi od elementa prezentacije s desne strane.
Duplicirani odjeljak
Da biste to učinili, najprije duplicirajte cijeli odjeljak koji sadrži dijagram toka.
Dodajte još jedan lijevi Blurb modul
U odjeljku duplikata (dolje) pronađite lijevi Blurb modul u retku koji sadrži dva susjedna modula. Zatim duplicirajte reklamni oglas s lijeve strane kako biste stvorili novi izravno ispod.
Uklonite donje strelice i obrub
Zatim izbrišite donju lijevu strelicu i donju desnu strelicu.
Otvorite postavke retka za redak koji sadrži višestruke reklamacije i uklonite donji obrub:
- Širina donjeg ruba: 0px
Napravite crtu s ravnim konektorom granične linije
Sada želimo prilagoditi dizajn dijagrama toka s konektorom desne obrubne linije koji će povezati desnu obrubnu liniju retka s donjom linijom konektora.
Da bismo to učinili, stvorit ćemo još jednu liniju i dodati prilagođenu razdjelnu liniju i obrisnu strelicu na desnoj strani.
Dodajte novi red jedan stupac ispod postojećeg retka s tri izgleda.
Ažurirajte postavke reda kako slijedi, pod karticom dizajn :
- Širina oluka: 1
- Maksimalna širina: 50%
- Ispod: 0px (gornji i donji dio)
Zatim dodajte ravnu granicu na liniju.
- Širina desnog obruba: 2 px
Zatim dodajte modul Divider na liniju.
Ažurirajte postavke razdjelnika na sljedeći način:
- Boja linije: #333333
- Položaj linije: dolje
- Težina razdjelnika: 2 px
- Širina: 50%
- Margina: -2px (dno)
Na naprednoj kartici ažurirajte položaj separatora:
- Pozicija: Apsolutna
- Mjesto: dolje desno
Dok je razdjelnik na mjestu, kopirajte Blurb modul iz donje desne strelice trećeg retka prvog odjeljka i zalijepite ga u red s desnom razdjelnom linijom.
Otvorite postavke modula Blurb strelice koju ste upravo duplicirali i pomaknuli i ažurirajte sljedeće:
- Pozicija: Zadana
- Modul poravnanja: desno
Zaustavljanje protoka lijeve granične linije
Trenutno je dio lijevog ruba izložen ispod reklamne slike u donjem lijevom kutu. Da biste ga sakrili, jednostavno uklonite donju marginu ovog donjeg oglasa.
Korak 6: Ažuriranje linije pomoću priključka linije lijevog ruba
Vaš dijagram toka također može trebati konektor lijeve rubne linije. Da bismo ga stvorili, možemo ažurirati liniju s desnim konektorom granične linije na sljedeći način:
- Širina lijevog boprdera: 2 px
- Širina desnog obruba: 0
Ažurirajte razdjelnik unutar retka novom lokacijom:
- Lokacija: dolje lijevo
Zatim ažurirajte poravnanje strelice:
- Modul poravnanja: lijevo
I promijenite ikonu u desnu strelicu.
Konačni rezultat
Provjerite krajnji rezultat.
Preuzmite DIVI sada!!!
Zaključak
U ovom vodiču stvorili smo koristan izgled dijagrama toka koji svatko može koristiti za prenošenje procesa i ideja posjetitelji sa zadivljujućim responzivnim dizajnom.
Upotrijebite ga za predstavljanje usluga ili procesa dizajna, stvaranje infografike ili vođenje klijenata kroz sadržaj na nov način.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
