Šablona Divi – pozicování, vrstvení a velikost prvků a modulů

V minulém článku jsme se věnovali obecně tvorbě vlastního motivu v prémiové šabloně Divi, dnes vám ukážeme pozicování jednotlivých prvků vůči sobě navzájem a také nastavení jejich velikosti

Ukázku provedeme na novém záhlaví sestavovaném námi, tedy bez užití cizího motivu. Popsané však bude fungovat i u těla a záhlaví webu a samozřejmě i u připravených motivů v knihovně.

Tři vrstvy prvků

Když se pustíte do sestavení layoutu od začátku, ihned si všimnete, že se design vrství. V minulém článku o tvorbě vlastního motivu jsme na to narazili a zběžně jsme vám to ukázali i na printscreenech. Dnes se budeme věnovat čistě pozicování a velikosti, takže pokud budete tápat v tom, jak jsme se do builderu Divi dostali, podívejte se na odkazovaný článek.

První – spodní vrstvou je tzv. sekce. Je označena modře. V ní např. můžete upravit pozadí, které bude platit pro všechny prvky na ní, a nastavit rozměry, do nichž se další vrstvy musejí vejít.

Divi šablona
Série o vynikající šabloně Divi

Šablona Divi - sekce
Modře ohraničená vrstva = sekce

Druhou – prostřední vrstvou je tzv. řádek. Ten je označený zeleně a udává rozložení jednotlivých modulů v horní vrstvě. I zde můžete mj. nastavit na pozadí obrázek a zajímavě tak vrstvit design stránek.

Šablona Divi - řádek
Zeleně ohraničená vrstva = řádek

Třetí – horní vrstvou je tzv. modul. Moduly jsou označeny šedě a představují prvky předem připravené k dalším uživatelským úpravám.

Šablona Divi - modul
Šedě ohraničená vrstva = modul

Vnější a vnitřní okraje (padding, margin)

Jednotlivým prvkům můžete nastavit vnitřní a vnější okraje, čímž je zároveň pozicujete.

Vnitřní okraj (padding) odsazuje obsah od hrany vrstvy (sekce, řádku nebo modulu). Nastavit jej můžete jednoduše pomocí drag & drop. Stačí najet myší na požadovanou vnitřní stranu konkrétního prvku, kliknout levým tlačítkem, držet a táhnout požadovaným směrem. Okraj nepřehlédnete, zobrazí se jako průhledný modrý, resp. zelený, resp. šedý obdélník i s počtem pixelů.

Vnější okraje (margin) se nastavují podobně, avšak celý prvek odsazují po vnější hraně, tedy od jiného prvku.

Na následující obrázku uvidíte rozdíl mezi vnitřním a vnějším okrajem u dvou sousedících prvků. Druhé tlačítko v pořadí má nastavený vnější okraj, to vpravo od něj vnitřní.

Šablona Divi - pozicování - okraje
Vnější vs. vnitřní okraj

Velikost prvku

Podobně jako můžete nastavit vnitřní a vnější okraje, můžete také změnit velikost daného prvku, tedy šířku a výšku. V tomto případě uchopte myší rámeček vrstvy. Správnost podržení myší poznáte tak, že rámeček ztuční. Tahem pak měníte velikost.

Při práci můžete také narazit na limity, které jste dříve udali např. vnitřními okraji. Pokud se tedy nemůžete dostat na např. menší výšku jako my na třetím obrázku, zkontrolujte nastavení okrajů daného prvku.

Velikost můžete nastavit také v menu prvku (druhá ikonka) v záložce Návrh > Změny velikosti.

Rámeček

Rámeček prvku nastavujete v nastavení prvku (záložka Návrh > Okraj). Rámeček také do jisté míry ovlivňuje pozicování dalších prvků.

Šablona Divi - pozicování - nastavení rámečku
Nastavení rámečku

Vystrčení prvku (offset)

V menu nastavení také najdete pokročilou funkci vystrčení prvku ven mimo jeho rámec (záložka Pokročilé > Pozice).

Vrstvení pomocí z-index

Pokud byste z nějakého důvodu potřebovali prohodit viditelnost vrstev nad sebou, můžete jim nastavit různý z-index (záložka Pokročilé > Pozice). Tato CSS vlastnost vám to umožňuje. Základní z-index je udáván jako 0 a pozici prvku nad či pod jinými prvky pak udáváte v kladných, nebo naopak záporných číslech podle potřeby.

Na příkladu jsme nastavili z-index -1 prvku řádek, jak si můžete všimnout, zmizel, resp. se schoval pod vrstvu sekce. Pro lepší představu jsme na druhém obrázku sekci zprůhlednili pozadí, aby to bylo jasnější.

Napsat komentář