Jak na responzivní zobrazení webu - Elementor

Jak si ohlídat šířku a výšku kontejneru a jednotlivých prvků, aby byl web stále perfektní.

Základní nastavení Elementor

Elementor už má responzivitu zabudovanou, ale je potřeba ji správně nastavit a ohlídat, aby se web zobrazoval dobře na desktopu, tabletu i mobilu.

Jak kontrolovat responzivitu

V editoru Elementor nahoře klikněte na ikonu počítače, tabletu nebo mobilního telefonu a uvidíte jak se stránka zobrazuje na daných zařízeních. Přepínejte si libovolně mezi Desktop / Tablet / Mobil. Vždy si projděte stránku a upravte, co je potřeba (velikosti textů, rozložení sekcí, mezery).

Online nástroj na kontrolu responzivity

Super online nástroj na kontrolu responzivity je https://responsivetesttool.com/, kde si vložíte svoji URL adresu daného webu, který chcete zkontrolovat a poté si sami zvolíte jaké zařízení (počítač, tablet, mobil) se má aplikovat a navíc si ještě můžete vyzkoušet přímo různé velikosti obrazovek, takže se podíváte na web jak z velkého mobilu, tak i prťavého mobílku, co má malinkatou obrazovečku, to samé u dalších zařízení, můžete si vyzkoušet různé velikosti monitorů.

Správné nastavení sekcí / kontejnerů a sloupců

• Používejte flexbox (container) nebo klasické sekce/sloupce místo ručního odsazování.
• Každý sloupec nastavte tak, aby měl šířku v %, ne pevně v px – to zajistí přizpůsobení.
• Pro složitější rozložení využijte wrap (zalomení), aby se na mobilu položky seskládaly pod sebe.

Nastavení šířky sekcí / kontejnerů

Jak nastavit, co které možnosti dělají. Na kartě Rozvržení určujete, jak se chovají prvky uvnitř kontejneru a velikost samotného kontejneru.

Rozvržení kontejneru

• Flexbox (výchozí): widgety uvnitř kontejneru se řadí do řady nebo do sloupce. Máte volbu: směr (řádek / sloupec), zarovnání, mezery. Nejčastější varianta, vhodná pro většinu designů.
• Mřížka: Rozdělí kontejner na buňky (podobně jako CSS Grid). Vhodné pro složitější layouty, galerie, karty v přehledu. Má víc možností, ale je složitější na pochopení.

• V boxu: Obsah se drží uvnitř nastavené maximální šířky (např. 1140 px). Používá se pro čitelnost textu – aby se netáhl přes celou obrazovku.
• Celá šířka: Obsah se roztáhne na 100 % šířky obrazovky. Vhodné pro hero sekce, pozadí, bannery.

Šířka Určuje, jak široký je samotný kontejner (ne obsah). Hodnoty: px, %, em, rem. Např. když máte kontejner uvnitř jiného kontejneru a chcete, aby zabíral jen 50 % šířky.

Min. výška Nastavuje minimální výšku kontejneru. Typicky se používá pro hero sekce → dáte min. výšku třeba 100 vh (100 % výšky obrazovky). Nebo třeba 400 px, aby box vypadal vždy dost vysoký i bez obsahu. „Min“ znamená, že když bude obsah vyšší, kontejner se roztáhne.

Typografie a velikosti

• Velikost písma nastavujte v em/rem nebo %, ne jen v px.
• V typografii Elementoru můžete zadat jiné hodnoty pro desktop, tablet a mobil (přepínáte si ikonkou zařízení vedle hodnoty).

Princip - Typografie a velikosti

• 1rem = základní velikost textu v prohlížeči (obvykle 16 px).
• Pokud tedy nastavíte font-size: 1.25rem, znamená to 20 px (16 × 1.25).
• Výhoda: když někdo v prohlížeči zvětší písmo (kvůli přístupnosti), zvětší se všechny texty úměrně.

Příklad pro běžný web - Typografie a velikosti

Vycházím ze základního textu 1rem = 16 px.

Desktop

• H1 (hlavní nadpis stránky): 2.25–2.5rem (36 - 40 px) / řádkování line-height: 1.8lh, záleží, jak chcete výrazný "hero" hlavní nadpis.
• H2 (hlavní podnadpisy): 1.75rem (28 px) / řádkování line-height: kolem 1.6lh.
• H3 (podsekce): 1.25-1.375rem (20 až 22 px) / řádkování line-height: 1.1lh, vhodné pro nadpisy třetí úrovně v článcích.
• Normální text (p, li, body): 1rem (16 px) / řádkování line-height: 1.6lh.

Obrázky a média

Vkládejte obrázky přes widget Obrázek.

Nepředpokládám, ale raději upozorním, nevkládejte obrázky "natvrdo" do webu přes HTML,nebo jako background (pokud nejde o úmysl), vkládejte obrázky přes Image widget (Elementor je automaticky zmenší pro menší zařízení). Elementor umí automaticky poslat prohlížeči menší variantu obrázku na mobil/tablet (WordPress totiž vytváří víc verzí každého nahraného obrázku). Tím pádem mobil nestahuje třeba 2000 px široký obrázek, ale třeba jen 480 px → stránka se načte rychleji.

Widget obrázek - karta "Obsah"

Když nahrajete obrázek do Knihovny médií, WordPress udělá různé kopie obrázku v různých velikostech (tzv. image sizes). Elementor vám nabídne zvolit vhodnou velikost přimo v nastavení widgetu obrázek.

Karta obsah > obrázek > image resolution, zde najdete možnosti: Thumbnail, Medium, Medium Large, Large, 1536x1536, 2048x2048, Celý, Vlastní.

orientační použití:

• Thumbnail (150×150, čtvercový ořez): Používá se na miniatury (ikonky, loga v seznamu). Nevhodné do článků, protože ořezává.
• Medium (300×300, zachování poměru): Ikony, malé doprovodné obrázky vedle textu. Výhoda: šetří daty, když obrázek je jen dekorace.
• Medium Large (768 px šířka): Optimální pro obrázek přes celou šířku obsahu na mobilu/tabletu. Použijete třeba pro obrázek vložený do textu článku.
• Large (1024 px šířka): Univerzální varianta pro většinu obrázků v článcích nebo menší bannery. Typicky: ilustrační fotka uvnitř obsahu.
• 1536×1536 px a 2048×2048 px: Automaticky novějšími verzemi WP, když nahrajete hodně velký obrázek. Použitelné na větší bannery, fullwidth obrázky přes celou stránku (např. hero sekce), ale pozor na rychlost načítání.
• Full size / Celý: Použije se originál v plném rozlišení (např. 4000 px široká fotka z foťáku). Nedoporučuji, pokud nepotřebujete extrémní kvalitu (zbytečně velký soubor zpomalí web).
• Custom / Vlastní: Elementor umožní vybrat si konkrétní velikost (např. 800×600). Praktické, když víte, že obrázek má být přesně daný (např. ikona v designu). Pokud dáte např. 800 px: Elementor vygeneruje obrázek s touto velikostí → prohlížeč nestáhne originál (třeba 4000 px), což šetří datový objem a zrychlí web.

doporučené hodnoty - u varinaty "custom" / vlastní

Když přidáváte obrázek v Elementoru, tak jakou velikost (Image Size / Custom size) máte nastavit, aby to bylo rychlé a přitom kvalitní.“ Tedy, abyste nenačítali na webu zbytečně obří soubory (což zpomaluje web) ani příliš malé soubory (které by byly zase rozmazané).

• Hero obrázky → 1200 px (hero největší obrázky přes celou stránku, bývají na úvodní stránce hned nahoře, velké bannery, pozadí na šířku celé stránky. Potřebují být větší, aby byly ostré i na velkém monitoru).
• Obrázky v obsahu → 600–800 px (fotky vložené do článku nebo textu. Nemusí být tak velké jako hero, ale musí být dost kvalitní, aby se dobře četly i na tabletu).
• Malé ikonky/loga → 150–300 px (loga partnerů, ikonky vedle textů, malé grafické prvky. Kdyby měly 1000 px, zbytečně by zpomalovaly web).

Widget obrázek > karta "CSS"

karta CSS > Obrázek > Šířka, Maximální výška a Výška = jak se ten obrázek vykreslí na stránce.

Vyhněte se pevné šířce obrázků (px), raději max-width: 100 %. Pokud byste nastavili u obrázku pevnou šířku v px (např. 800 px), na mobilu se nevejde do obrazovky → pak "trčí ven". Proto se používají % např, max-width: 100%;, znamená to, že se obrázek nikdy neroztáhne víc než je šířka jeho rodiče (sekce/sloupce). Takže na mobilu se hezky zmenší na celou šířku displeje, místo aby přetékal mimo.

Šířka / Width

(skoro vždy se používá 100%, aby obrázek vyplnil svůj box/sloupec)

• Určuje, jak široký má obrázek být.
• Hodnoty: px, %, em, rem. Nejčastěji se používá %, např. width: 100% → obrázek se natáhne na celý sloupec.
• Pokud zadáte pevně px, obrázek nebude responzivní (na mobilu může přetékat).

Maximální výška / Max-height

(používá se u log nebo ikon, když chcete hlídat, aby nebyly moc vysoké)

• Omezuje, jak vysoký může obrázek být, ale dovolí mu být menší (nerozplácne ho).
• Příklad: dáte max-height 300 px → obrázek bude max 300 px vysoký, ale zachová poměr stran.
• Užitečné třeba pro loga v hlavičce, aby nebyla moc vysoká.

Výška / Height

(raději nepoužívat kromě speciálních případů, protože deformuje.)

• Natvrdo určuje výšku obrázku.
• Pokud není „auto“, tak se obrázek deformuje (mění poměr stran).
• Používá se výjimečně (např. u oříznutých náhledů, kde to nevadí).

Widget obrázek > karta "Pokročilé"

karta Pokročilé > Rozvržení > Šířka > na výber máte: Výchozí, Celá šířka (100%), Inline (auto), Vlastní = neurčuje velikost obrázku, ale způsob, jak se widget chová v rámci sloupce/řádku.

možnosti:

• Výchozí (Default): Widget se chová podle toho, jak ho Elementor vložil. Šířku řídí kontejner (sloupec, sekce). Většinou to stačí a není nutné měnit.
• Celá šířka (100%): Widget se roztáhne přes celou šířku svého rodiče (sloupce/sekce). Praktické třeba u tlačítek nebo obrázků, které mají být na 100 % šířky boxu / sloupce. Časté pro hero obrázky nebo bannery.
• Inline (auto): Widget se chová jako inline prvek (podobně jako text). To znamená, že může stát vedle jiných prvků (např. ikonka + text vedle sebe). Užitečné, pokud chcete mít v jednom řádku logo a menu, ikonku a nadpis atd.
• Vlastní (Custom): Umožní nastavit šířku ručně (v px, %, em, rem). Příklad: chcete, aby obrázek v boxu měl přesně 200 px, ať je sloupec větší nebo menší. Nevýhoda: pokud to přeženete s pevnými px, může to ztratit responzivitu.

Margin, padding / Vnější okraj, odsazení

• Nastavujte mezery v % nebo em, ne v px.
• Elementor dovoluje nastavit odlišné hodnoty pro desktop/tablet/mobil.
• Vyhněte se velkým prázdným mezerám, které na mobilu „natahují“ stránku.

Globální nastavení barev

Nastavení stránky > Globální barvy:

Globální nastavení pisma

Nastavení stránky > Globální písma:

Nastavení pisma

Nastavení stránky > Písmo:

Globální nastavení

Nastavení stránky > Rozvržení:

Nastavení uspořádání

• Šířka obsahu: (Content width) nastavuje maximální šířku, do které se bude roztahovat obsah (texty, obrázky). Hodnota 1200 px je ideální pro většinu firemních webů, běžně se používá max. 1140 px (desktop). Pokud dáte 100 %, obsah se bude natahovat přes celou obrazovku (na velkém monitoru často nevypadá dobře). Pokud dáte menší (např. 960 px), web působí užší, vhodné spíš pro blogy.
• Padding containeru: (okraje uvnitř stránky). Určuje vnitřní odsazení stránky od kraje prohlížeče. Zadává se: nahoře | vpravo | dole | vlevo. Obvykle stačí nastavit 0 a paddingy řešit na úrovni sekcí (každý blok má vlastní mezery). Pokud tu zadáte třeba 20 px → celá stránka dostane kolem sebe rámeček (padding).
• Mezery: Řídí mezery mezi jednotlivými sloupci a řádky uvnitř stránky. Obvyklé hodnoty: 20–30 px.
• Výchozí rozvržení stránky:
  -- Šablona: Elementor použije nastavení rozvržení z aktivní WordPress šablony (např. Astra).

  -- Elementor plátno: úplně čistá stránka bez hlavičky/patičky. Používá se pro landing pages, coming soon, 404 apod.

  -- Elementor plná šířka: stránka se roztáhne na celou šířku, ale hlavička a patička zůstanou. Obsah je pak na vás, vy řídíte paddingy a šířku.

Body zlomu

• Body zlomu: Mobil 767 px, Tablet 1024 px.

Skrytí/nahrazení prvků

V Nastavení daného prvku > Pokročilé > Responzivní > a např. "Skrýt na v Mobilu na výšku"

• Pokud máte složitý blok, který na mobilu vypadá špatně, použijte funkci Hide on Desktop / Tablet / Mobile..
• Můžete vytvořit alternativní verzi pro mobil a tu desktopovou skrýt.