Elementor bento grid

Webový dizajn je dynamický a stále sa vyvíja. Každý rok prichádzajú nové technológie, nástroje a trendy, ktoré posúvajú hranice kreativity. Jedným z trendov, ktorý naberá na sile, je bento grid. Tento jedinečný dizajn je viac než len vizuálne príťažlivý – je to spôsob, ako efektívne organizovať obsah na vašej webovej stránke tak, aby bol nielen krásny, ale aj funkčný.

Čo je to Bento?

Bento pochádza z japonskej kultúry a pôvodne označuje jednoduchú, úhľadne usporiadanú krabičku s jedlom (tzv. Bento box). Všetky jedlá v nej sú esteticky rozložené do oddelených priehradiek, čím vytvárajú vizuálne atraktívny a funkčný dizajn.

V dizajne webových stránok sa bento grid inšpiruje touto myšlienkou – obsah je rozdelený do rôznych blokov rôznych veľkostí a tvarov, namiesto klasických sekcií pod sebou. Tento štýl robí web vizuálne dynamickejším, pestrejším a moderným. Obsah je rozdelený do samostatných, ale súvisiacich sekcií, ktoré spoločne vytvárajú atraktívne a usporiadané rozloženie. Výsledkom je moderné a čisté rozloženie, ktoré upúta návštevníkov. 

Prečo je bento grid taký populárny?

Hlavným dôvodom jeho rastúcej obľuby je jeho schopnosť kombinovať estetiku s funkčnosťou. Rozloženie bento grid nie je len o tom, aby vyzeralo pekne – je navrhnuté tak, aby zlepšilo použiteľnosť a efektívnosť stránky. Obsah je vizuálne oddelený do rôznych sekcií, čo pomáha návštevníkom rýchlejšie sa orientovať a získať informácie, ktoré hľadajú. Viac blokov, farieb, obrázkov a dynamických zalomení robí z tejto techniky vizuálne pútavejší zážitok než obyčajné sekcie usporiadané pod sebou. Pre používateľov je to intuitívne a pre dizajnérov ideálne pre vytvorenie čistého, moderného vzhľadu.

Ako vytvoriť bento grid v Elementore?

Pre všetkých, ktorí chcú vyskúšať tento trend na svojej webovej stránke, Elementor – populárny nástroj na tvorbu stránok pre WordPress – ponúka jednoduchý spôsob, ako vytvoriť toto rozloženie. Nástroj je užívateľsky prívetivý a ponúka množstvo možností na prispôsobenie dizajnu, takže ho môže využiť každý, bez ohľadu na to, či je začiatočník alebo skúsený dizajnér.

V Elementore pridáme cez záložku rozloženie položku grid. V rozložení grid položky si nastavíme počet stĺpcov a počet riadkov. Môžeme si vybrať, koľko stĺpcov bude mať každá sekcia a prispôsobiť ich podľa svojich predstáv. V našom prípade som dal 4×4.

Teraz je čas naplniť grid systém obsahom. Môžete pridať texty, obrázky, videá a rôzne widgety, ktoré sa budú zobrazovať v každom bloku vašej stránky. Umiestnime prvú položku do gridu. V našom prípade sme umiestnili do prvej položky gridu widget “call to action”. V záložke pokročilé si ako šírku necháme hodnotu default, pretože bude na jeden stĺpec. Výšku však nastavíme na 2. To znamená, že bude mať výšku dvoch riadkov. V poradí druhej a tretej položke zadáme výšku na 2, čo znamená, že budú rovnako vysoké, výška dvoch stĺpcov. Poslednej položke dáme opačné poradenie ako prvej, čiže prvému kontajneru necháme defalt, lebo je na šírku aj výšku defaultne, nie je cez dva stlpce alebo riadky.

Nakoniec v nastavení gridu pridáme medzery medzi stĺpce a riadky.

V poslednom kroku sa môžeme pohrať s tým, ako budú bloky zarovnané.

Bento grid je skvelým spôsobom, ako dať vašej stránke nový, moderný vzhľad. Jeho modularita a čistota robia weby prehľadné a atraktívne. Navyše, s Elementorom to zvládne každý, kto sa chce naučiť niečo nové v oblasti webového dizajnu.

Ak ste pripravení objaviť nové možnosti webového dizajnu a posunúť svoje zručnosti na vyššiu úroveň, bento grid je ideálny trend, ktorý si určite zaslúži vašu pozornosť.