Riadky sú rôzne usporiadania stĺpcov, ktoré možno umiestniť do sekcií. Rovnako ako moduly, aj riadky majú rôzne nastavenia, ku ktorým sa dostanete kliknutím na ikonu nastavení v ľavej hornej časti riadka. V tomto návode si prejdeme niektoré funkcie a ako ich možno použiť na vytvorenie veľmi jedinečných rozložení. Najmä nastavenia čiar možno použiť na výrazné zvýšenie rozmanitosti vytvorených rozložení divi Builder, pretože vytvárajú štruktúru, v ktorej sú hosťované vaše moduly.

line modul divi builder.png

nastavenie parametrov riadok divi.png

Nastavenia obsahu

Farba pozadia

Obrázky na pozadí je možné použiť na celý riadok. Štandardne majú riadky priehľadnú farbu pozadia.

Obrázok pozadia

Obrázky na pozadí je možné použiť na celý riadok.

Video na pozadí MP4

Les videí pozadia je možné použiť na čiary. Ak chcete použiť video na pozadí, musíte nahrať video vo formáte MP4 a WEBM a zadať videí tu.

Video na pozadí webu

Les videí pozadia je možné použiť na čiary. Ak chcete použiť video na pozadí, musíte si stiahnuť video vo formáte MP4 a WEBM a zadať videá sem.

Šírka videa na pozadí

Po nahraní videí musíte tu zadať šírku videa. Musí sa rovnať skutočnej šírke videa, inak bude poloha pozadia nesprávna.

Výška videa na pozadí

Po nahraní videí musíte tu zadať výšku videa. Musí sa rovnať skutočnej výške videa, inak bude pozícia na pozadí nesprávna.

Video pauza

Ak chcete, aby sa videá po kliknutí pozastavili, povoľte túto možnosť.

Farba pozadia stĺpca

Pre každý stĺpec v rade môžete priradiť jedinečnú farbu pozadia.

Obrázok na pozadí stĺpca

Pre každý stĺpec v rade môžete priradiť jedinečný obrázok na pozadí.

Štítok správcu

Tým sa zmení štítok modulu v generátore pre jednoduchú identifikáciu. Pri použití zobrazenia WireFrame v programe Visual Builder sa tieto označenia zobrazia v bloku modulov rozhrania divi Staviteľ.

sekiton design divi builder.png

Konštrukčné parametre

Využite paralaxový efekt

Ak chcete pre obrázok pozadia čiary použiť efekt paralaxy, tu môžete povoliť a potom zvoliť požadovanú metódu paralaxy.

Efekt parallaxu v stĺpci

Tu môžete zvoliť, či sa má alebo nemá používať efekt paralaxy pre obrázok na pozadí konkrétneho stĺpca v riadku.

Urobte celý riadok celú šírku

Ak je táto možnosť povolená, riadok bude pokrývať celú šírku okna prehliadača (podobne ako časť s celou šírkou). Je to skvelý spôsob, ako vytvoriť vynikajúce rozloženia stĺpcov s celou šírkou.

Použite vlastnú šírku

Čiare môžete tiež priradiť vlastnú šírku. Ak napríklad chcete pridať variáciu do informačného kanála stránok a urobiť jeden riadok väčší ako ostatné, môžete tu zadať vlastnú hodnotu šírky

Použite vlastnú šírku odkvapov

Šírka žľabu nastavuje vzdialenosť medzi stĺpmi. K dispozícii sú 4 veľkosti odkvapov od 0. The definícia nastavenie šírky odkvapu na 1 nebude mať za následok žiadne medzery medzi stĺpmi. V kombinácii s možnosťou Full Width to môže vytvárať efekty podobné modulu Portfolio Full Screen.

Vyrovnajte výšky stĺpcov

Je to skvelá voľba, ktorá je obzvlášť užitočná, ak ste na jednotlivé stĺpce použili farby pozadia. Povolenie tejto možnosti vynúti, aby všetky stĺpce v riadku mali rovnakú hodnotu výšky.

Vlastné vypchávky

Ak chcete upraviť výplň linky, môžete to urobiť tu.

Vlastná marža

Ak chcete upraviť okraj riadku, môžete to urobiť tu.

Vlastné vypchávanie stĺpcov

Ak chcete upraviť výplň konkrétneho stĺpca v riadku, môžete to urobiť tu.

Vlastný okraj stĺpca

Ak chcete upraviť okraj konkrétneho stĺpca v riadku, môžete to urobiť tu.

záloha voľba stĺpec divi.png

Rozšírené nastavenia

CSS ID

Riadku môžete priradiť ID CSS, ak ho chcete zacieliť vo svojej šablóne so štýlmi alebo pomocou ukotvovacích odkazov.

Triedu CSS

Tomuto riadku môžete priradiť triedu CSS, ak ju chcete zacieľovať na svoj štýl.

ID stĺpca CSS

ID CSS môžete priradiť konkrétnemu stĺpcu v riadku, ak ho chcete zacieliť v šablóne so štýlmi alebo pomocou ukotvovacích odkazov.

Stĺpec triedy CSS

Triedu CSS môžete priradiť ku konkrétnemu stĺpcu vo svojom riadku, ak ju chcete zacieľovať na svoj štýl.

Avant

Použite tu vstup CSS: pred hlavným riadkom div.

Hlavný prvok

Vstup CSS tu platí pre hlavný riadok div.

Po

Použite tu vstup CSS: za hlavný riadok div.

Predný stĺpec

Zadajte CSS, aby ste ich mohli použiť: pred určeným stĺpcom div.

Prvok hlavného stĺpca

Sem zadajte CSS a použite pre zadaný stĺpec div.

Stĺpec po

Použite tu položku CSS: po zadanom stĺpci div.

viditeľnosť

Táto možnosť vám umožňuje ovládať zariadenia, na ktorých sa zobrazuje váš linkový modul. Môžete sa rozhodnúť deaktivovať svoj modul na tabletoch, smartfónoch alebo stolových počítačoch jednotlivo. To je užitočné, ak chcete použiť rôzne moduly na rôznych zariadeniach alebo ak chcete zjednodušiť mobilný dizajn odstránením určitých prvkov zo stránky.

Uvedenie tutoriálu do praxe

Teraz, keď sme prešli všetkými nastaveniami, otestujme niekoľko, aby sme vám ukázali, čo je možné, keď sa každé nastavenie použije kreatívne. V tomto príklade sa budem na úvod venovať nastaveniam riadku Celá obrazovka. Možnosť vytvoriť riadok „Celá obrazovka“ je jednou z najuniverzálnejších možností sady. Týmto sa rozšíri šírka čiary po okraj prehliadača, napríklad v časti Celá obrazovka (alebo Celá šírka). Na rozdiel od sekcie Fullwidth však môžu riadky FullWidth mať stĺpcovú štruktúru a môžu obsahovať akýkoľvek modul! V príklade nižšie som vytvoril riadok so štyrmi stĺpcami a do každého stĺpca pridal štvorcový obrázok. Ďalej som povolil možnosť „Nastaviť tento riadok na celú šírku“, aby sa riadok rozšíril k okrajom okna prehliadača.

príklad dizajnu divi.jpg

Potom som zmenšil veľkosť „Odkvapu“ na „1“, aby sa odstránili medzery medzi stĺpmi v rade.

odstránenie medzery medzi stĺpmi divi.jpg

Nakoniec som výplň nad a pod čiarou odstránil zmenou hornej a dolnej hodnoty s možnosťou „Vlastné vyplnenie“ na „0“.
modifikácia plnenia.jpg

Výsledkom je úplná transformácia riadkov, ktorá premení náš bežný rad so 4 stĺpcami obrázkov na galériu obrázkov s presahom celej šírky, ktorá vyzerá úžasne v porovnaní so zelenou časťou nižšie. Rovnaký efekt je možné vytvoriť aj pomocou vlastných farieb pozadia stĺpca a textových režimov. Možnosti sú neobmedzené!