Webflow #3: Kdy, proč a jak používat vlastní kontejner pro ohraničení obsahu webu?
Pokud navrhujete nebo kódujete weby, jistě nemusím vysvětlovat, co je to kontejner webu. Z pohledu designu jde o ohraničení webu, přes které nepřeteče obsah (česky kontejner/obal — angl. container/wrapper).
Jak na kontejner ve Webflow?
V rozhraní pro přidání prvků máte možnost přidat kontejner. Jde o klasický <div></div> blokový prvek jehož šířka je nastavena na 940 px s tím, že se centruje na střed okna prohlížeče.
Je velikost 940 px ta správná?
Webflow vychází z oblíbené a léta zaběhlé 960px mřížky (grid). Touto velikostí nic nezkazíte a zaručíte si to, že všichni uživatelé na zařízeních s velkým rozlišením váš web uvidí v původním návrhu, aniž by muselo na řadu dojít responzivní řešení. Jeho šířka je tzv. bezpečná.
Na druhou stranu statistiky ukazují, že lidé postupem času používají mnohem vetší rozlišení obrazovek a tak se 960px mřížka stává passé a je škoda obsah trochu více neroztáhnout.
Jak kontejner zvětšit?
Pokud chcete, aby se šířka kontejneru pro váš obsah webu rozšířila, máte dvě možnosti:
1) Ruční úprava výchozí třídy po publikování webu
Navrhněte a vytvořte si web s výchozím kontejnerem o velikosti 940 px. Po dokončení projektu běžte do nastavení projektu a vložte do hlavičky (head) webu vlastní kus kódu (párový prvek <style>, který nese CSS definice):
<style>.w-container {max-width: 1170px;}</style>
Nevýhodou tohoto řešení je, že změnu uvidíte až na publikovaném webu a ne v režime „Designer“ při návrhu. To může být někdy limitující.
Poznámka k vkládanému kódu:
Třída .w-container je automaticky Webflow přidaná třída. Pokud kontejneru v rozhraní Webflow přidáváte vlastní selektor (např. „Container“), můžete použít i třídu .container. Webflow totiž převádí selektory na CSS třídy. Pokud chcete zjistit, na jakou třídu je selektor převeden, můžete prozkoumat kód webu.
Hodnotu maximální šířky kontejneru 1170 px můžete samozřejmě změnit na libovolnou hodnotu.
2) Vytvořte si vlastní kontejner!
Ve Webflow máte maximální svobodu a nikdo vám nepřikazuje, abyste předpřipravený kontejner používali. Dost často se hodí vytvořit si vlastní.
Jak si vytvořit vlastní kontejner?
- Do potřebné sekce webu vložte klasický Div blok.
- Tomuto bloku přidejte vlastní selektor (třídu) např. „Container Large“.
- Nastavte vnější levé a pravé odsazení (margin-left a margin-right) na hodnotu „auto“. Tím se blok vycentruje na střed obrazovky prohlížeče (více o centrování v CSS zde).
- Nastavte bloku maximální možnou šířku, aby se vám neroztahoval až ke krajům obrazovky.
Od teď, když budete chtít kontejner použít, vložíte pouze Div blok a tomu přiřaďte vytvořenou třídu. A voila!
Je škoda šířku obsahu trochu více neroztáhnout.
Komunita kolem Webflow
Vytvořil jsem facebookovou skupinu pro rozvoj česko-slovenské komunity týkající se návrhu a vývoje webu na platformě Webflow. Přidejte se, pozvěte kolegy a diskutujte.
► https://www.facebook.com/groups/332943110833881/.
Váš názor?
Máte s Webflow zkušenosti? Podělte se v komentářích. Zajímá mě to. A pokud se vám názor líbí, klidně zatleskejte. 👏
Hledáte někoho na návrh nebo tvorbu webu?
👋 Chcete pomoct s tvorbou webu na Webflow? Dejte mi vědět nebo se podívejte na můj web https://www.lukasaugusta.cz/.
Moje sociální sítě
Budu rád když mě budete sledovat třeba na ► Facebooku, ► Instagramu nebo třeba ► Dribbblu.
Neunikne vám žádný nový článek a sem tam můžete nakouknout do mého workflow návrhu a tvorby webu. 🙂
Navrhujte weby a aplikace?
Možná by se vám mohl líbit můj nový projekt, kde najdete lekce, jak lépe navrhovat uživatelská rozhraní (UI). Jmenuje se Designui.
