Chcete vytvoriť organizačnú schému v Divi?
Vedieť, ako vytvoriť rozloženie vývojového diagramu v divi otvára veľa príležitostí na komunikáciu procesov a nápadov na a webové stránky. V niektorých prípadoch môžu byť vývojové diagramy použité na vysvetlenie mimoriadne zložitých myšlienok zahŕňajúcich veľké množstvo prvkov.
Na a webové stránky, tieto zložitejšie vývojové diagramy však môže byť ťažké dosiahnuť, najmä ak chcete, aby boli responzívne.
V tomto návode vám ukážeme, ako vytvoriť praktické rozloženie vývojového diagramu, ktoré môžete použiť na svojom webové stránky, jednoduché, efektívne a pohotové.
Navyše na jeho vytvorenie použijeme iba vstavané možnosti Divi, takže sa nemusíte obávať pridávania vlastného kódu alebo doplnkov.
Začnime!
prehľad
Tu je rýchly pohľad na návrh vývojového diagramu, ktorý vytvoríme v tomto návode.
Vytvorte novú stránku pomocou Divi Builder
Ak chcete začať, budete musieť urobiť nasledovné:
Na hlavnom paneli WordPress prejdite na Stránky> Pridať nové vytvoriť novú stránku.
Dajte tomu názov, ktorý vám dáva zmysel, a kliknite Použite Divi Builder
potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
Ako vytvoriť rozloženie vývojového diagramu v Divi
Krok 1: Vytvorte riadok so stredovou reklamou
Ak chcete začať vytvárať rozloženie vývojového diagramu v Divi, začneme vytvorením riadku obsahujúceho centrovanú reklamu. Toto bude prvý prvok vývojového diagramu.
Výplň sekcie
Najprv otvorte nastavenia sekcie pre predvolenú sekciu a nastavte spodnú výplň na 0px.
- Odsadenie (dole): 0px
Linka
Vo vnútri sekcie pridajte riadok do stĺpca.
Otvorte nastavenia čiar a aktualizujte nasledujúce nastavenia dizajnu:
- Šírka odkvapu: 1
- Výplň (horná a dolná časť): 0 pixelov
Dizajn Blurb Mod
Na vytvorenie nášho prvého prvku vývojového diagramu použijeme modul Blurb.
Vložte modul Blurb inline.
Nastavenia modulu
Otvorte nastavenia modulu Blurb. Pod záložkou obsah, môžete ponechať predvolený názov a hlavný text.
Potom aktualizujte obrázok pomocou malej ikony alebo použite jednu zo vstavaných ikon Divi. Pre tento tutoriál používame ikony z Crowdfunding Layout Pack .
Potom dajte modulu farbu pozadia:
- Pozadie: #f8f8f8
Pod záložkou dizajn, aktualizujte nasledovné:
- Zarovnanie textu: na stred
- Maximálna šírka: 400 pixelov (stolný počítač a tablet), 90 % (telefón)
- Modul zarovnania: Stred
- Polstrovanie: 6 % (hore a dole), 3 % (ľavé a pravé)
Ďalej ohraničte modul Blurb takto:
- Šírka orámovania: 2px
Krok 2: Vytvorenie spojovacej čiary zvislou čiarou a šípkou
Pre ďalšiu časť nášho rozloženia vývojového diagramu vytvoríme rad konektorov, ktoré majú centrovanú zvislú čiaru a šípku. Táto linka sa použije na spojenie liniek z obsah organizačnej schémy, ktorá by mala pokračovať smerom k spodnej časti stránky.
V tomto prípade chceme začať vývojový diagram pridaním riadku a šípky pod predchádzajúci riadok so stredom modulu Blurbn.
Vytvorte nový riadok a skopírujte/prilepte štýly z predchádzajúceho riadku
Ak to chcete urobiť, pridajte nový riadok do stĺpca pod predchádzajúcim riadkom.
Pomocou " Ostatné nastavenia modulu (alebo možnosti kliknutia pravým tlačidlom myši), skopírujte štýly z predchádzajúceho riadka vyššie a vložte ich do nového riadka.
Vytvorenie zvislého oddeľovača čiar
Ak chcete vytvoriť oddeľovač vertikálnej čiary, pridajte na čiaru nový modul Delider.
V nastaveniach rozdeľovača aktualizujte nastavenia dizajnu takto:
- Farba čiary: #333333
- Pozícia riadku: Spodná
- Hmotnosť oddeľovača: 150px
- Šírka: 2px
- Modul zarovnania: Stred
- Okraj: -1px (dole)
Pod záložkou pokročilý, skryte pretečenie takto:
- Horizontálne pretečenie: Skryté
- Vertikálne pretečenie: Skryté
Vytvorte šípku pomocou modulu Blurb
Ďalej pomocou prezentačného modulu vytvoríme ikonu šípky, ktorá bude sedieť nad deliacou čiarou.
Ak chcete vytvoriť šípku, pridajte pod oddeľovač nový modul Blurb.
Nastavenia Blurb Mod
V nastaveniach modulu odstráňte predvolený nadpis a hlavný text a kliknite Použite ikonu, potom vyberte ikonu šípky (pozri snímku obrazovky).
Pod záložkou dizajn, aktualizujte nasledovné:
- Farba ikony: #bbbbbb
- Zarovnanie obrázka/ikony: stred
- Použiť veľkosť písma ikony: ÁNO
- Veľkosť písma ikony: 50 pixelov (počítač), 40 pixelov (tablet a telefón)
- Maximálna šírka: 50 %
- Modul zarovnania: stred
- Výška: 50 pixelov (počítač), 40 pixelov (tablet a telefón)
Pod záložkou pokročilý, pridajte nasledujúci CSS do Blurb Picture :
margin-bottom: 0px;
background: #ffffff;
Ak chcete umiestniť šípku nad čiaru, aktualizujte nasledujúce:
- Pozícia: Absolútna
- Miesto: Stred
- Index Z: 10
Krok 3: Vytvorenie čiary pre susedné časti vývojového diagramu
Po dokončení radu konektorov pridáme ďalší rad niekoľkých susedných modulov Blurb, aby sme pokračovali v návrhu vývojového diagramu.
Ak chcete pridať riadok, jednoducho skopírujte a prilepte prvý riadok (riadok so stredovým nápisom, ktorý sme vytvorili v hornej časti rozloženia) pod spojnicu.
Otvorte Nastavenia linky a aktualizujte nasledovné:
- Maximálna šírka: 50 %
- Šírka orámovania: 2px
Ľavá strana vývojového diagramu
Teraz, keď je k čiare pridaný náš okraj, umiestnime modul Blurb nad ľavú čiaru okraja.
Ak to chcete urobiť, aktualizujte nasledujúce nastavenia dizajnu:
- Modul zarovnania: vľavo
- Okraj: 70 pixelov (hore a dole)
- Transformovať preložiť os X: -50 %
Toto je kľúčové pre to, aby bol modul Blurb vycentrovaný vodorovne nad hraničnou čiarou.
Pravá strana vývojového diagramu
Ak chcete pridať ďalší modul reklamy na pravú okrajovú čiaru, duplikujte existujúcu reklamu.
Ak chcete umiestniť reklamu na pravú hraničnú čiaru, prejdite na kartu pokročilý a dajte mu absolútnu polohu:
- Pozícia: Absolútna
- Umiestnenie: V strede vpravo
Ďalej aktualizujte nasledujúce možnosti:
- Okraje: žiadne
- Transformovať preložiť os Y: -50 %
- Transformovať preložiť os X: 50 %
Pridané šípky do rohov každej hraničnej čiary
Aby bol vývojový diagram jasnejší o smere postupu riadkov, pridáme ďalšie ikony šípok na riadky ohraničenia riadkov.
Šípka vľavo hore
Ak chcete pridať šípku do ľavého horného riadku s okrajom, duplikujte modul šípky Blurb, ktorý sme vytvorili, v riadku konektora a presuňte ho do riadka so susednými modulmi Blurb.
Otvorte modul Duplicate Arrow Blurb a zmeňte ikonu na šípku smerujúcu doľava.
Ďalej aktualizujte umiestnenie polohy modulu:
- Umiestnenie: Vľavo hore
Nakoniec aktualizujte možnosť prekladu transformácie takto:
- Transformovať preložiť os Y: -50 %
Šípka vpravo hore
Ak chcete vytvoriť šípku, ktorá sa nachádza na pravom hornom okraji, duplikujte šípku " v ľavom hornom rohu ktoré sme práve vytvorili. Potom otvorte nastavenia a zmeňte umiestnenie polohy:
- Umiestnenie: Vpravo hore
Aktualizujte tiež ikonu šípky so šípkou smerujúcou doprava.
Šípka dole doľava
Ak chcete vytvoriť šípku, ktorá sa nachádza na ľavom spodnom okraji, duplikujte šípku " hore vpravo ktoré sme práve vytvorili.
Potom otvorte nastavenia a zmeňte umiestnenie polohy:
- Umiestnenie: vľavo dole
Ďalej aktualizujte možnosť Transformovať preklad:
- Transformovať preložiť os Y: 50 %
Šípka vpravo dole
Ak chcete vytvoriť šípku, ktorá sa nachádza na pravom dolnom okraji, duplikujte šípku " vľavo dole ktoré sme práve vytvorili.
Potom otvorte nastavenia a zmeňte umiestnenie polohy:
- Umiestnenie: vpravo dole
Aktualizujte tiež ikonu šípky so šípkou smerujúcou doľava.
Po umiestnení všetkých šípok môžete aktualizovať štítky pre každý pomocou tlačidla zobrazenie vrstvy .
Krok 4: Pridanie ďalšej spojovacej linky
Keď sme dokončili čiaru s dvoma susednými časťami vývojového diagramu a všetkými šípkami, môžeme pokračovať vo vývojovom diagrame pridaním ďalšieho spojovacieho riadku.
Ak to chcete urobiť, duplikujte spojovaciu čiaru, ktorú sme vytvorili vyššie, a prilepte ju pod čiaru obsahujúcu moduly Blurb zo susednej časti vývojového diagramu.
Krok 5: Prispôsobenie toku pomocou priameho okrajového konektora
V existujúcom návrhu vývojového diagramu tok začína horným prvkom, potom sa rozvetvuje na pravý a ľavý susedný prvok, potom sa vracia do stredu a prechádza k ďalšiemu strednému prvku.
Ak chcete prispôsobiť tok, zduplikujeme sekciu, aby sme mohli prispôsobiť vývojový diagram tak, aby sa zastavil na susednom prvku (prvkoch) prezentácie vľavo a pokračoval od prvku prezentácie vpravo.
Duplicitná sekcia
Ak to chcete urobiť, najprv duplikujte celú časť obsahujúcu vývojový diagram.
Pridajte ďalší modul ľavého rozmazania
V sekcii duplikátov (dole) nájdite ľavý modul Blurb v riadku obsahujúcom dva susediace moduly. Potom duplikujte reklamný text vľavo a vytvorte nový priamo pod ním.
Odstráňte spodné šípky a orámovanie
Potom odstráňte šípku vľavo dole a šípku vpravo dole.
Otvorte nastavenia čiary pre čiaru obsahujúcu viaceré reklamy a odstráňte spodný okraj:
- Šírka spodného okraja: 0px
Vytvorte čiaru s priamou spojnicou hraničnej čiary
Teraz chceme prispôsobiť návrh vývojového diagramu pomocou spojnice pravého okraja, ktorá spojí pravú hranicu čiary s čiarou spojky nižšie.
Za týmto účelom vytvoríme ďalšiu čiaru a pridáme vlastnú deliacu čiaru a šípku obrysu na pravej strane.
Pridajte nový riadok o jeden stĺpec pod existujúci riadok s tromi rozloženiami.
Na karte aktualizujte nastavenia riadkov nasledovne dizajn :
- Šírka odkvapu: 1
- Maximálna šírka: 50 %
- Výplň: 0px (horná a dolná časť)
Ďalej k čiare pridajte rovný okraj.
- Šírka pravého okraja: 2px
Potom pridajte na riadok modul Delider.
Aktualizujte nastavenia rozdeľovača takto:
- Farba čiary: #333333
- Pozícia riadku: Spodná
- Hmotnosť oddeľovača: 2px
- Šírka: 50 %
- Okraj: -2px (dole)
Na karte Rozšírené aktualizujte polohu oddeľovača:
- Pozícia: Absolútna
- Umiestnenie: vpravo dole
Keď je oddeľovač na mieste, skopírujte modul Blurb zo šípky vpravo dole v treťom riadku prvej sekcie a prilepte ho do riadku s pravou deliacou čiarou.
Otvorte nastavenia modulu Blurb šípky, ktorú ste práve duplikovali a presunuli, a aktualizujte nasledovné:
- Pozícia: Predvolená
- Modul vyrovnávania: vpravo
Zastavenie toku čiary na ľavej hranici
V súčasnosti je časť ľavého okraja odkrytá pod reklamou vľavo dole. Ak ju chcete skryť, jednoducho odstráňte spodný okraj tejto spodnej reklamy.
Krok 6: Aktualizácia linky pomocou spojky na ľavom okraji
Váš vývojový diagram môže tiež potrebovať spojnicu ľavého okraja. Aby sme ho vytvorili, môžeme aktualizovať riadok pomocou konektora pravého okraja takto:
- Šírka ľavého Boprdera: 2px
- Šírka pravého okraja: 0
Aktualizujte oddeľovač v riadku novým umiestnením:
- Umiestnenie: vľavo dole
Ďalej aktualizujte zarovnanie šípok:
- Modul zarovnania: vľavo
A zmeňte ikonu na šípku doprava.
Konečný výsledok
Pozrite si konečný výsledok.
Stiahnite si DIVI teraz!!!
záver
V tomto návode sme vytvorili užitočný vývojový diagram, ktorý môže ktokoľvek použiť na komunikáciu procesov a nápadov Návštevníci s úžasným responzívnym dizajnom.
Použite ho na predvedenie služieb alebo procesu navrhovania, vytvorenie infografiky alebo sprievodcu klientov cez obsah novým spôsobom.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
