Plovoucí inspektor je ovládací panel pro místní vzhled vybraného prvku. Otevírá se ozubeným kolem nebo podporovaným dvojklikem. Panel Styles vlevo naproti tomu slouží globálnímu designu.
Co se naučíte
- Vybrat správný prvek na plátně.
- Rozlišit místní vzhled od globálního nastavení.
- Nastavit pozadí, odsazení, rámeček nebo stín.
- Kontrolovat změnu na různých šířkách náhledu.
Nejdříve vyberte, co měníte
Editor pracuje podle jednoduchého pravidla: nejprve označíte prvek a potom otevřete jeho místní nastavení. Vybraným prvkem může být celý vodorovný řádek, sloupec neboli Joomla pozice nebo konkrétní modul. Samotné kliknutí prvek zvýrazní. Plovoucí inspektor otevřete ikonou ozubeného kola, případně dvojklikem tam, kde jej daný prvek podporuje. Nabídne jen volby vhodné pro tento typ, takže u řádku uvidíte jiné možnosti než například u menu modulu.
Mezi běžné volby patří barva nebo obrázek pozadí, gradient, vnější a vnitřní odsazení, rozměry, rámeček, zaoblení rohů, stín, zarovnání či průhlednost. Některé prvky podporují také dekorativní děliče. Nelekejte se, když určitou volbu nevidíte: obvykle to znamená, že ji vybraný prvek bezpečně nepodporuje.
Základní postup
- Klikněte na prvek, který chcete upravit, a zkontrolujte jeho zvýraznění. Režim Styles vlevo používejte pro globální tokeny, ne jako automatické otevření místního inspektoru.
- Místní plovoucí inspektor otevřete ozubeným kolem nebo podporovaným dvojklikem. Potom otevřete skupinu vlastností, například pozadí, mezery nebo stín.
- Měňte vždy jednu věc a sledujte plátno. Začněte například pozadím a paddingem, tedy vnitřním odsazením.
- Přepněte náhled na tablet a mobil a hlavně výsledek zkontrolujte. Jen volby, u kterých rozhraní skutečně nabízí responsivní hodnotu, nastavujte samostatně.
- Počkejte na stav úspěšného automatického uložení a poté zkontrolujte čistý Preview.
Místní změna, nebo společné pravidlo?
Plovoucí inspektor mění vybraný prvek. Hodí se například tehdy, když má být pouze jedna karta modrá. Pokud chcete změnit hlavní barvu celé šablony, otevřete levý panel Styles s globálními designovými tokeny. Ty udržují nadpisy, tlačítka a další části ve vzájemném souladu. Jde tedy o dva související, ale odlišné nástroje.
Praktický tip
Nejprve nastavte globální barvy a typografii, teprve potom dolaďujte jednotlivé prvky. Ušetříte si opakované změny a návrh bude působit jednotněji.
Příklad: karta, která potřebuje zvýraznit
Představte si tři vedle sebe umístěné karty služeb. Prostřední má být doporučená. Vyberte pouze její modul, přidejte jemný stín, zaoblení a malé barevné zvýraznění. Ostatní karty zůstanou beze změny. Potom přepněte mobilní náhled: karty se mohou seřadit pod sebe a příliš velký stín nebo odsazení by zabíraly zbytečné místo.
Častou chybou je kliknout na rodičovský řádek místo modulu. Změna pozadí se pak týká celé vodorovné sekce. Sledujte proto název vybraného prvku v panelu a před větší úpravou si všimněte jeho zvýraznění na plátně. Když výsledek zasáhne větší oblast, než jste čekali, vraťte krok a vyberte přesnější cíl.