Řádky jsou různá uspořádání sloupců, která lze umístit do sekcí. Stejně jako moduly mají i řádky různá nastavení, ke kterým lze přistupovat kliknutím na ikonu nastavení v levé horní části řádku. V tomto tutoriálu se podíváme na některé funkce a na to, jak je lze použít k vytvoření velmi jedinečných rozvržení. Zejména nastavení čar lze použít k výraznému zvýšení rozmanitosti vytvořených rozvržení divi Builder, protože vytvářejí strukturu, ve které jsou vaše moduly hostovány.

line modul divi builder.png

nastavení parametrů řádek divi.png

Nastavení obsahu

Barva pozadí

Obrázky na pozadí lze použít na celý řádek. Ve výchozím nastavení mají řádky průhlednou barvu pozadí.

Obrázek na pozadí

Obrázky na pozadí lze použít na celý řádek.

Video na pozadí MP4

Les videí pozadí lze aplikovat na čáry. Pokud chcete použít video na pozadí, musíte nahrát video MP4 a WEBM a zadat videí zde.

Video na pozadí webu

Les videí pozadí lze aplikovat na čáry. Pokud chcete použít video na pozadí, musíte si stáhnout MP4 a WEBM video a zadat videa zde.

Šířka videa na pozadí

Jakmile jsou vaše videa nahrána, musíte zde zadat šířku vašeho videa. Musí se rovnat skutečné šířce videa, jinak bude poloha pozadí nesprávná.

Výška videa na pozadí

Jakmile jsou vaše videa nahrána, musíte zde zadat výšku videa. Musí se rovnat skutečné výšce videa, jinak bude pozice na pozadí nesprávná.

Video pauza

Pokud chcete, aby se videa po kliknutí pozastavila, povolte tuto možnost.

Barva pozadí sloupce

Pro každý sloupec v řádku můžete přiřadit jedinečnou barvu pozadí.

Obrázek na pozadí sloupce

Ke každému sloupci v řádku můžete přiřadit jedinečný obrázek na pozadí.

Štítek správce

Tím se změní štítek modulu v generátoru pro snadnou identifikaci. Při použití zobrazení WireFrame ve Visual Builderu se tyto štítky objeví v bloku modulu rozhraní divi Stavitel.

sekiton design divi builder.png

Konstrukční parametry

Použijte efekt paralaxy

Chcete-li použít efekt paralaxy pro obrázek pozadí čáry, můžete zde povolit a poté zvolit požadovanou metodu paralaxy.

Parallaxový efekt sloupce

Zde si můžete vybrat, zda použít paralaxový efekt pro obrázek na pozadí konkrétního sloupce ve vašem řádku.

Proveďte celou řádek

Pokud je tato možnost povolena, bude čára pokrývat celou šířku okna prohlížeče (podobně jako sekce s plnou šířkou). To je skvělý způsob, jak vytvořit skvělá rozvržení sloupců na celou šířku.

Použít vlastní šířku

Můžete také přiřadit vlastní šířku čáře. Například pokud chcete do kanálu přidat variaci a zvětšit jeden řádek než ostatní, můžete zde zadat vlastní hodnotu šířky

Použijte vlastní šířku okapu

Šířka okapu nastavuje vzdálenost mezi sloupy. K dispozici jsou 4 velikosti okapů, počínaje 0. The definice nastavením šířky okapu na 1 nebudou mezi sloupky žádné mezery. V kombinaci s možností Full Width to může vytvářet efekty podobné modulu Portfolio Full Screen.

Vyrovnejte výšky sloupců

To je skvělá volba, zvláště užitečná, když jste na jednotlivé sloupce použili barvy pozadí. Povolením této možnosti vynutíte, aby všechny sloupce v řádku měly stejnou hodnotu výšky.

Vlastní polstrování

Chcete-li upravit vyplnění řádku, můžete to udělat zde.

Vlastní marže

Pokud chcete upravit okraj linky, můžete to udělat zde.

Vlastní výplň sloupců

Chcete-li upravit výplň konkrétního sloupce v řádku, můžete tak učinit zde.

Vlastní okraj sloupce

Chcete-li upravit okraj konkrétního sloupce v řádku, můžete tak učinit zde.

předvolba sloupce divi.png

Pokročilá nastavení

CSS ID

Řádku můžete přiřadit ID CSS, pokud jej chcete zacílit do šablony stylů nebo pomocí kotevních odkazů.

CSS třídy

Řádku můžete přiřadit třídu CSS, pokud ji chcete zacílit ve svém seznamu stylů.

ID sloupce CSS

ID CSS můžete přiřadit ke konkrétnímu sloupci v řádku, pokud jej chcete zacílit do šablony stylů nebo pomocí kotevních odkazů.

Sloupec třídy CSS

Třídu CSS můžete přiřadit ke konkrétnímu sloupci ve svém řádku, pokud ji chcete zacílit na svůj styl.

Před

Zde se použije položka CSS: před hlavní řádek div.

Hlavní prvek

CSS vstup zde použít pro hlavní div div.

Po

Použijte zde vstup CSS: za hlavní řádek div.

Přední sloupec

Sem zadejte CSS pro použití: před zadaným sloupcem div.

Prvek hlavního sloupce

Sem zadejte CSS a aplikujte se na určený sloupec div.

Sloupec po

Zde se použije položka CSS: po zadání sloupce div.

viditelnost

Tato možnost umožňuje ovládat zařízení, na kterých se váš linkový modul zobrazuje. Můžete se rozhodnout deaktivovat svůj modul na tabletech, chytrých telefonech nebo stolních počítačích jednotlivě. To je užitečné, pokud chcete použít různé mody na různých zařízeních nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.

Uvedení tutoriálu do praxe

Nyní, když jsme prošli všemi nastaveními, otestujeme několik, abychom vám ukázali, co je možné, když je každé nastavení použito kreativně. V tomto příkladu uvedu nastavení Úvod na celou obrazovku. Možnost vytvořit řádek „Celá obrazovka“ je jednou z nejuniverzálnějších možností sady. Tím se rozšíří šířka čáry k okraji prohlížeče, podobně jako v části Celá obrazovka (nebo Celá šířka). Na rozdíl od sekce Fullwidth však řádky FullWidth mohou mít sloupcovou strukturu a mohou obsahovat libovolný modul! V níže uvedeném příkladu jsem vytvořil řádek se 4 sloupci a do každého sloupce jsem přidal čtvercový obrázek. Dále jsem povolil možnost „Vytvořit tento řádek na celou šířku“, aby se řádek rozšířil k okrajům okna prohlížeče.

příklad designu divi.jpg

Potom jsem zmenšil velikost „Žlabu“ na „1“, aby se odstranily mezery mezi sloupy v řádku.

odstranění mezery mezi sloupci divi.jpg

Nakonec jsem odstranil polstrování nad a pod řádkem změnou horních a dolních hodnot s možností „Custom Fill“ na „0“.
modifikace plnění.jpg

Výsledkem je úplná transformace řádků, která promění naši běžnou řadu 4 sloupců obrázků na galerii obrázků s plnou šířkou a krvácením, která ve srovnání se zelenou částí níže vypadá ohromující. Stejný efekt lze také vytvořit pomocí vlastních barev pozadí sloupců a textových režimů. Možnosti jsou neomezené!