Chcete vytvořit organizační schéma v Divi?
Vědět, jak vytvořit rozložení vývojového diagramu v divi otevírá mnoho příležitostí ke komunikaci procesů a nápadů na a Webové stránky. V některých případech lze vývojové diagramy použít k vysvětlení extrémně složitých myšlenek zahrnujících velké množství prvků.
Na Webové stránky, nicméně těchto složitějších vývojových diagramů může být obtížné dosáhnout, zvláště pokud chcete, aby byly responzivní.
V tomto tutoriálu vám ukážeme, jak vytvořit praktické rozložení vývojového diagramu, které můžete použít na svém Webové stránky, jednoduché, efektivní a citlivé.
Navíc k jeho vytvoření použijeme pouze vestavěné možnosti Divi, takže se nemusíte starat o přidávání vlastního kódu nebo pluginů.
Začněme!
přehled
Zde je rychlý pohled na návrh vývojového diagramu, který vytvoříme v tomto tutoriálu.
Vytvořte novou stránku pomocí Divi Builder
Chcete-li začít, budete muset provést následující:
Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.
Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder
poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)
Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.
Jak vytvořit rozložení vývojového diagramu v Divi
Krok 1: Vytvořte řádek se středovou reklamou
Chcete-li začít s vytvářením rozložení vývojového diagramu v Divi, začneme vytvořením řádku obsahujícího centrovanou reklamu. Toto bude první prvek vývojového diagramu.
Výplň sekce
Nejprve otevřete nastavení sekce pro výchozí sekci a nastavte spodní výplň na 0px.
- Výplň (dole): 0px
Čára
Uvnitř sekce přidejte řádek do sloupce.
Otevřete nastavení čar a aktualizujte následující nastavení návrhu:
- Šířka okapu: 1
- Výplň (nahoře a dole): 0 pixelů
Blurb Mod Design
K vytvoření našeho prvního prvku vývojového diagramu použijeme modul Blurb.
Vložte modul Blurb do řádku.
Nastavení modulu
Otevřete nastavení modulu Blurb. Pod záložkou Obsah, můžete ponechat výchozí název a hlavní text.
Poté aktualizujte obrázek pomocí malé ikony nebo použijte jednu z vestavěných ikon Divi. Pro tento tutoriál používáme ikony z Crowdfunding Layout Pack .
Poté modulu dejte barvu pozadí:
- Pozadí: #f8f8f8
Na kartě Design, aktualizujte následující:
- Zarovnání textu: Na střed
- Maximální šířka: 400 pixelů (stolní počítač a tablet), 90 % (telefon)
- Modul zarovnání: Střed
- Polstrování: 6 % (nahoře a dole), 3 % (vlevo a vpravo)
Dále ohraničte modul Blurb následovně:
- Šířka okraje: 2px
Krok 2: Vytvoření spojovací čáry pomocí svislé čáry a šipky
Pro další část našeho rozvržení vývojového diagramu vytvoříme řadu spojnic, které mají vycentrovanou svislou čáru a šipku. Tato linka bude použita pro připojení linek z obsah organizačního diagramu, který by měl pokračovat směrem ke spodní části stránky.
V tomto případě chceme vývojový diagram začít přidáním čáry a šipky pod předchozí řádek s modulem Blurbn uprostřed.
Vytvořte nový řádek a zkopírujte/vložte styly z předchozího řádku
Chcete-li to provést, přidejte nový řádek do sloupce pod předchozím řádkem.
Za použití " Ostatní Nastavení modulu (nebo možnosti kliknutí pravým tlačítkem), zkopírujte styly z předchozího řádku výše a vložte je do nového řádku.
Vytvoření svislého oddělovače čar
Chcete-li vytvořit svislý oddělovač čáry, přidejte na čáru nový modul Děliče.
V části nastavení rozdělovače aktualizujte nastavení návrhu následovně:
- Barva čáry: #333333
- Pozice čáry: Spodní
- Hmotnost oddělovače: 150px
- Šířka: 2px
- Modul zarovnání: Střed
- Okraj: -1px (dole)
Na kartě pokročilý, skryjte přetečení následovně:
- Horizontální přetečení: Skryté
- Vertikální přetečení: Skryté
Vytvořte šipku pomocí modulu Blurb
Dále pomocí prezentačního modulu vytvoříme ikonu šipky, která bude sedět nad dělicí čárou.
Chcete-li vytvořit šipku, přidejte pod přepážku nový modul Blurb.
Nastavení Blurb Mod
V nastavení modulu odeberte výchozí nadpis a hlavní text a klikněte Použijte ikonu, poté vyberte ikonu šipky (viz snímek obrazovky).
Na kartě Design, aktualizujte následující:
- Barva ikony: #bbbbbb
- Zarovnání obrázku/ikony: střed
- Použít velikost písma ikony: ANO
- Velikost písma ikony: 50 pixelů (počítač), 40 pixelů (tablet a telefon)
- Max. šířka: 50 %
- Modul zarovnání: střed
- Výška: 50 pixelů (počítač), 40 pixelů (tablet a telefon)
Na kartě pokročilý, přidejte následující CSS do Blurb obrázek :
margin-bottom: 0px;
background: #ffffff;
Chcete-li umístit šipku nad čáru, aktualizujte následující:
- Pozice: Absolutní
- Umístění: Centrum
- Index Z: 10
Krok 3: Vytvoření čáry pro sousední části vývojového diagramu
Jakmile bude řada konektorů kompletní, přidáme další řadu několika sousedních modulů Blurb, abychom mohli pokračovat v návrhu vývojového diagramu.
Chcete-li přidat řádek, jednoduše zkopírujte a vložte první řádek (řádek se středovým nápisem, který jsme vytvořili v horní části rozvržení) pod spojnici.
Otevřete Nastavení linky a aktualizujte následující:
- Max. šířka: 50 %
- Šířka okraje: 2px
Levá strana vývojového diagramu
Nyní, když je naše ohraničení přidáno k čáře, umístíme modul Blurb nad levou hraniční čáru.
Chcete-li to provést, aktualizujte následující nastavení návrhu:
- Zarovnávací modul: vlevo
- Okraj: 70px (nahoře a dole)
- Transformace osy X: -50 %
To je klíčové pro to, aby byl modul Blurb vycentrován vodorovně nad hraniční čarou.
Pravá strana vývojového diagramu
Chcete-li přidat další modul Blurb na pravou hraniční čáru, zkopírujte existující reklamu.
Chcete-li umístit reklamu na pravý okraj, přejděte na kartu pokročilý a dát mu absolutní pozici:
- Pozice: Absolutní
- Umístění: Uprostřed vpravo
Dále aktualizujte následující možnosti:
- Okraje: žádné
- Transformace osy Y: -50 %
- Transformace osy X: 50 %
Přidány šipky do rohů každé hraniční čáry
Aby byl vývojový diagram jasnější, pokud jde o směr, kterým řádky postupují, přidáme další ikony šipek na řádky ohraničení řádků.
Šipka vlevo nahoře
Chcete-li přidat šipku do řádku s levým horním okrajem, duplikujte modul šipky Blurb, který jsme vytvořili, v řádku spojnice a přetáhněte jej do řádku obsahujícího sousední moduly Blurb.
Otevřete modul Duplicate Arrow Blurb a změňte ikonu na šipku směřující doleva.
Dále aktualizujte umístění pozice modulu:
- Umístění: Vlevo nahoře
Nakonec aktualizujte možnost překladu transformace následovně:
- Transformace osy Y: -50 %
Šipka vpravo nahoře
Chcete-li vytvořit šipku, která se nachází na pravém horním okraji, duplikujte šipku " v levém horním rohu které jsme právě vytvořili. Poté otevřete nastavení a změňte umístění pozice:
- Umístění: Vpravo nahoře
Aktualizujte také ikonu šipky pomocí šipky směřující doprava.
Šipka dolů doleva
Chcete-li vytvořit šipku, která se nachází na levém dolním okraji, duplikujte šipku " vpravo nahoře které jsme právě vytvořili.
Poté otevřete nastavení a změňte umístění pozice:
- Umístění: vlevo dole
Dále aktualizujte možnost Transformovat překlad:
- Transformace osy Y: 50 %
Šipka dolů doprava
Chcete-li vytvořit šipku, která se nachází na pravém dolním okraji, duplikujte šipku " vlevo dole které jsme právě vytvořili.
Poté otevřete nastavení a změňte umístění pozice:
- Umístění: vpravo dole
Aktualizujte také ikonu šipky pomocí šipky směřující doleva.
Jakmile jsou všechny šipky umístěny, můžete aktualizovat štítky pro každý pomocí zobrazení vrstvy .
Krok 4: Přidání dalšího spojovacího vedení
Jakmile dokončíme řádek se dvěma sousedními částmi vývojového diagramu a všemi šipkami, můžeme pokračovat ve vývojovém diagramu přidáním dalšího spojovacího řádku.
Chcete-li to provést, duplikujte spojovací řádek, který jsme vytvořili výše, a vložte jej pod řádek obsahující moduly Blurb ze sousední části vývojového diagramu.
Krok 5: Přizpůsobení toku pomocí konektoru Straight Edge Line
Ve stávajícím návrhu vývojového diagramu tok začíná horním prvkem, pak se větví k pravému a levému sousednímu prvku, poté se vrací do středu a přechází k dalšímu prostřednímu prvku.
Abychom tok přizpůsobili, zduplikujeme sekci, abychom mohli vývojový diagram upravit tak, aby se zastavil na sousedním prvku (prvcích) prezentace nalevo a pokračoval od prvku prezentace napravo.
Duplicitní sekce
Chcete-li to provést, nejprve duplikujte celou sekci obsahující vývojový diagram.
Přidejte další levý modul Blurb
V sekci duplikátů (dole) najděte levý modul Blurb v řádku obsahujícím dva sousední moduly. Poté duplikujte reklamu vlevo a vytvořte novou přímo pod ní.
Odstraňte spodní šipky a ohraničení
Dále odstraňte levou dolní šipku a pravou dolní šipku.
Otevřete nastavení čáry pro čáru obsahující více reklam a odstraňte spodní okraj:
- Šířka dolního okraje: 0px
Vytvořte čáru s přímou spojnicí hraniční čáry
Nyní chceme upravit návrh vývojového diagramu pomocí pravé hraniční čáry, která spojí pravou hraniční čáru s níže uvedenou spojnicí.
Za tímto účelem vytvoříme další čáru a přidáme vlastní dělicí čáru a šipku obrysu na pravé straně.
Přidejte nový řádek o jeden sloupec pod stávající řádek se třemi rozloženími.
Aktualizujte nastavení řádku následovně na kartě Design :
- Šířka žlabu: 1
- Max. šířka: 50 %
- Odsazení: 0px (nahoře a dole)
Dále přidejte na čáru rovné ohraničení.
- Šířka pravého okraje: 2px
Poté přidejte na řádek modul Divider.
Aktualizujte nastavení rozdělovače následovně:
- Barva čáry: #333333
- Pozice čáry: Spodní
- Hmotnost oddělovače: 2px
- Šířka: 50 %
- Okraj: -2px (dole)
Na kartě Upřesnit aktualizujte pozici oddělovače:
- Pozice: Absolutní
- Umístění: vpravo dole
S nasazenou přepážkou zkopírujte modul Blurb z pravé dolní šipky třetí řady první sekce a vložte jej do řady s pravou dělicí čárou.
Otevřete nastavení modulu Blurb šipky, kterou jste právě duplikovali a přesunuli, a aktualizujte následující:
- Pozice: Výchozí
- Vyrovnávací modul: vpravo
Zastavení toku levé hraniční čáry
V současné době je část levého okraje vystavena pod reklamou vlevo dole. Chcete-li jej skrýt, jednoduše odstraňte spodní okraj této spodní reklamy.
Krok 6: Aktualizace vedení pomocí spojnice levého okraje
Váš vývojový diagram může také potřebovat spojnici levého okraje. Chcete-li jej vytvořit, můžeme aktualizovat čáru pomocí pravé spojnice hraniční čáry takto:
- Šířka levého Boprdera: 2px
- Šířka pravého okraje: 0
Aktualizujte oddělovač uvnitř řádku novým umístěním:
- Umístění: vlevo dole
Dále aktualizujte zarovnání šipky:
- Zarovnávací modul: vlevo
A změňte ikonu na šipku vpravo.
Konečný výsledek
Podívejte se na konečný výsledek.
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
V tomto tutoriálu jsme vytvořili užitečné rozložení vývojového diagramu, které může kdokoli použít ke sdělování procesů a nápadů Návštěvníci s úžasným responzivním designem.
Použijte jej k předvedení služeb nebo procesu návrhu, k vytvoření infografiky nebo k průvodci klientů obsah novým způsobem.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.
Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
