Divi 5 Presety vysvětlené: Element, Option Group a Nested Presety

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.

Znáte to z vlastního webu: tlačítka mají tři různé velikosti, karty na každé stránce trochu jinak, odsazení nahodile podle nálady toho dne, kdy jste je dělali. Nekonzistence je nejčastější známka webu, který stavěl jeden člověk bez systému. Divi 5 od Elegant Themes na to má presety — a stojí za to rozumět tomu, že nejsou jen jeden typ. Píšeme prakticky pro freelancery a malé agentury, ne pro vývojáře.

Co je preset a proč na něm záleží

Preset je uložená konfigurace stylu, kterou pak aplikujete na další prvky místo toho, abyste je stylovali znovu od nuly. Místo "tohle tlačítko udělám zelené, zaoblené, s tímhle odsazením" si jednou nadefinujete preset "primární tlačítko" a používáte ho všude. Konzistence pak nevzniká z toho, že si pamatujete přesné hodnoty, ale z toho, že sáhnete po stejném presetu.

V Divi 5 jsou tři druhy presetů a každý řeší jinou úroveň problému. Pochopit rozdíl mezi nimi je celé jádro tohoto článku.

Tři druhy presetů v Divi 5

Element presety — celý vzhled jednoho modulu

Element preset uloží kompletní styl jednoho modulu. Vystylujete jedno tlačítko — barvu, okraje, font, odsazení, hover — a uložíte jako preset. Každé další tlačítko pak vznikne jedním kliknutím v identickém stavu. Tohle je nejčastější a nejsilnější použití: vaše standardní tlačítko, vaše standardní karta, vaše standardní nadpisová sekce.

Option Group presety — jen jedna část stylu

Option Group preset uloží jen určitou skupinu nastavení — třeba jen pozadí, jen text nebo jen mezery — nezávisle na zbytku. Hodí se, když chcete kombinovat: máte jeden preset pro "firemní pozadí", jiný pro "základní odsazení", a skládáte je na různé moduly. Místo jednoho velkého presetu na všechno míchá menší, znovupoužitelné kostky.

Nested presety — vrstvení s ponechanou editovatelností

Nested presety ("stacked and nested") vrství víc úrovní presetů na sebe a — to je klíčové — každá vrstva zůstává editovatelná. Postavíte si základní preset a nad ním specifičtější variantu, aniž byste ztratili napojení na ten spodní. Když změníte základ, varianta se posune s ním. Je to nejpokročilejší úroveň, kterou ocení hlavně agentury s rozsáhlou šablonou.

Preset Manager: kde to celé žije

Všechny presety vidíte na jednom místě v Preset Manageru — rozhraní s vizuálními náhledy, kde presety organizujete, přejmenováváte a aplikujete bez nutnosti vlézt do jednotlivých modulů. Pro agenturní šablonu je to centrální katalog vašeho design systému.

Reálný workflow pro agenturní šablonu

Když tohle máte, nekonzistence prakticky zmizí: každé tlačítko na webu je stejné, protože všechna vznikla ze stejného presetu. A když chcete tlačítka po celém webu změnit, upravíte preset jednou.

Časté dotazy

Jaký je rozdíl mezi presetem a Design Variable?

Design Variable je jednotlivá hodnota (barva, mezera), kterou používáte napříč prvky. Preset je celá sada nastavení pro modul. Dobře postavený preset přitom vnitřně používá proměnné — pak měníte i barvu napříč presety jednou změnou.

Musím používat všechny tři typy presetů?

Ne. Pro většinu freelancerů stačí Element presety na tlačítka a karty. Option Group a Nested presety jsou užitečné, až když máte rozsáhlou šablonu a chcete kombinovat a vrstvit.

Co když preset upravím — projeví se to zpětně?

Záleží na nastavení aplikace. Smysl presetů ale je právě v napojení: úprava presetu se má promítnout do prvků, které ho používají. Proto se vyplatí stavět web z presetů, ne z jednorázových stylů.

Závěr

Nekonzistentní tlačítka, karty a odsazení nejsou otázka nedostatku disciplíny, ale chybějícího systému. Presety v Divi 5 ten systém dodají: Element presety sjednotí celé moduly, Option Group presety dovolí kombinovat dílčí styly a Nested presety umožní vrstvit varianty bez ztráty napojení. Postavte si jednou agenturní šablonu v Preset Manageru a každý další web bude konzistentní automaticky.

Jak na to navázat barevný systém, ze kterého presety čerpají, řešíme v článku o Design Variables; širší pohled na agenturní workflow najdete v textu o Divi 5 pro agentury.

Vyzkoušet Divi 5

Zdroje a další čtení