Divi 5 Design Variables: jak z jedné firemní barvy udělat celou paletu webu

Tento článek obsahuje affiliate odkaz na Divi. Pokud si přes něj službu pořídíte, můžeme získat provizi — vás to nestojí nic navíc a na náš názor to nemá vliv.

Klient vám pošle jednu barvu: "Naše firemní je tahle modrá." A vy z ní máte postavit celý web — nadpisy, tlačítka, pozadí, hover stavy, gradienty. Donedávna to znamenalo ručně vymýšlet a zadávat desítky odstínů. Divi 5 od Elegant Themes na to má Design Variables a generátor barevné palety, který z jedné brand barvy odvodí celý systém. Píšeme prakticky pro freelancery a malé firmy, ne pro vývojáře.

Proč nestačí "mít jednu barvu"

Funkční web nepostavíte z jedné barvy — potřebujete jich celou sadu, která spolu ladí: primární, světlejší a tmavší odstíny pro pozadí a okraje, kontrastní barva textu, akcent pro tlačítka, hover stav. Když je vymýšlíte ručně, dvě věci jdou skoro vždy špatně. Za prvé nejsou konzistentní — modrá tlačítka mají o chlup jiný odstín než modré nadpisy. Za druhé se těžko mění — když klient řekne "víc do tyrkysu", procházíte web a přebarvujete každý prvek zvlášť.

Design Variables řeší obojí tím, že z barev udělají systém propojených hodnot místo sady jednorázových voleb.

Jak Design Variables fungují

V Divi 5 je barevná paleta globální a každá barva je proměnná, ne statická hodnota. Když proměnnou použijete na webu a později ji změníte v Variable Manageru, změna se promítne na celý web naráz. Místo přebarvování padesáti prvků měníte jednu hodnotu.

Nad tím stojí dvě věci, které z jedné barvy dělají celou paletu:

• Generátor barevné palety. Ve Variable Manageru najedete na skupinu barev a kliknete na "Generate Color Palette Variables". Z primární barvy vám Divi vygeneruje kompletní sadu barevných proměnných a uloží je do skupiny Colors. Z jedné brand barvy tak vznikne celá škála během chvíle.
• Relativní barvy. Místo ručního míchání světlých a tmavých odstínů vytvoříte relativní barvu odvozenou z primární a upravíte jen její světlost. Když pak změníte primární barvu, všechny odvozené se přepočítají samy. To je jádro celého triku: jedna brand barva řídí celý systém.

Z jedné barvy celá paleta — co všechno pokryje

U gradientů je klíčové, že jednotlivé barevné stopy nezadáváte ručně, ale vybíráte je ze seznamu svých proměnných. Gradient se tím napojí na systém a změní se s ním. Divi 5 navíc konsolidoval nastavení gradientů do jednoho gradient pickeru a gradient se dá použít i jako výplň textu.

Praktický workflow pro klientskou značku

1. Zadejte primární brand barvu klienta jako základní proměnnou.
2. Spusťte generátor a nechte si z ní vytvořit paletu odstínů.
3. Doplňte akcent a relativní barvy pro tlačítka a hover stavy odvozené z primární.
4. Používejte výhradně proměnné, nikdy ne natvrdo zadané hodnoty — jen tak funguje hromadná změna.
5. Při revizi klienta měňte zdrojovou barvu ve Variable Manageru; web se přebarví sám.

Bod 4 je ten, na kterém to stojí. Jakmile jednou zadáte barvu "natvrdo" místo přes proměnnou, vypadne z celého systému a budete ji při změnách hledat ručně.

Časté dotazy

Funguje to i zpětně na hotovém webu?

Nejlépe se to dělá od začátku. Na existujícím webu musíte projít prvky a přepnout je z natvrdo zadaných barev na proměnné — jednorázová práce, která se ale při příští revizi vyplatí.

Co když klient nemá ujasněnou brand barvu?

Pak generátor můžete použít obráceně — vyberete primární, necháte vygenerovat paletu a klientovi ukážete hotový systém. Často je pro něj snazší reagovat na návrh než barvy vymýšlet.

Je relativní barva totéž co odstín?

Relativní barva je odstín, který je trvale napojený na zdrojovou barvu. Když změníte zdroj, relativní barva se přepočítá — to ji odlišuje od ručně zadaného odstínu.

Závěr

Branding na webu nejsou jednotlivé barvy, ale systém vztahů mezi nimi. Design Variables v Divi 5 z jedné firemní barvy odvodí celou paletu — pozadí, texty, tlačítka, hover stavy i gradienty — a drží ji propojenou tak, že revize klienta vyřešíte jednou změnou místo hodiny přebarvování. Pro freelancera to znamená rychlejší dodání a weby, které drží značku bez ruční dřiny.

Jak na takto postavený design systém navázat presety tlačítek a karet, rozebíráme v navazujícím článku o presetech.

Vyzkoušet Divi 5

Zdroje a další čtení