Pokud se rozhodnete vytvořit web na WordPressu, samotný WordPress ještě neurčuje, jak bude váš web vypadat ani jakým způsobem budete jednotlivé stránky vytvářet.
Jednou z možností je Divi od společnosti Elegant Themes. Jde o WordPress šablonu a zároveň vizuální nástroj pro tvorbu webu, který používáme pro většinu našich prezentačních webů také v Almao.
WordPress je redakční systém, na kterém web běží. Divi je nástroj uvnitř WordPressu, pomocí kterého vytváříte jeho vzhled, jednotlivé stránky a šablony.
Co je Divi?
Divi vyvíjí společnost Elegant Themes. Kombinuje WordPress šablonu s vizuálním editorem, ve kterém můžete web stavět přímo na jeho přední straně.
Místo toho, abyste například změnili nadpis v administraci, uložili stránku a potom kontrolovali výsledek v novém okně, otevřete stránku ve Visual Builderu, kliknete na daný prvek a upravujete jej přímo tam, kde jej návštěvník uvidí.
Stejným způsobem můžete upravovat například:
- texty a nadpisy,
- fotografie,
- tlačítka,
- barvy,
- velikosti a typografii,
- mezery mezi prvky,
- sloupce a celé sekce,
- formuláře,
- galerie,
- animace a další vizuální prvky.
To je jedna z hlavních výhod Divi pro naše klienty. Po vytvoření webu nemusí kvůli změně textu, fotografie nebo běžného obsahu pokaždé kontaktovat vývojáře.
Jak se stránka v Divi skládá?
Princip je podobný stavebnici. Stránku rozdělíte na větší části a do nich postupně vkládáte konkrétní obsah.
Větší část stránky, například úvod, služby nebo reference.
Určuje počet sloupců a jejich rozmístění.
Text, obrázek, tlačítko, formulář, galerie a další obsah.
Představte si například sekci služeb. Vytvoříte řádek se třemi sloupci a do každého vložíte ikonu, nadpis, text a tlačítko. Každý z těchto prvků potom můžete samostatně upravovat.
Divi není jen editor jednotlivých stránek
U jednoduchého webu by stačilo upravovat jednu stránku po druhé. U většího webu by ale takový způsob práce rychle vedl k problémům.
Proto Divi obsahuje také Theme Builder. Ten umožňuje vytvořit šablony pro části webu, které se opakují.
Můžete tak například jednou vytvořit:
- hlavičku webu s menu,
- patičku,
- šablonu článků,
- šablonu jednotlivých kategorií,
- šablonu pro konkrétní typ stránky,
- nebo globální prvky používané na více místech webu.
Když potom změníte globální šablonu, změna se může automaticky projevit na všech stránkách, které ji používají.
Máte web s padesáti články a všechny používají stejnou šablonu.
Pokud chcete změnit například vzhled nadpisu, šířku obsahu nebo část pod článkem, není potřeba otevřít všech padesát článků. Upravíte jejich globální šablonu a změna se použije na celý web.
Globální styly jsou důležitější, než se na první pohled zdá
Profesionální web by neměl vznikat tak, že u každého tlačítka zvlášť nastavíte barvu, velikost písma a zaoblení.
Divi umožňuje vytvářet opakovaně použitelné styly a globální nastavení. Můžete si například určit, jak vypadají hlavní tlačítka, jaké používáte barvy nebo jak mají vypadat určité typy prvků.
To je důležité nejen při tvorbě webu, ale hlavně při jeho pozdější správě.
Měl by mít vytvořený systém barev, typografie, tlačítek, rozestupů a globálních prvků. Díky tomu zůstává vzhled konzistentní a budoucí úpravy jsou výrazně jednodušší.
Jak funguje mobilní verze?
To, že web dobře vypadá na počítači, automaticky neznamená, že bude dobře fungovat také na telefonu.
Divi má responzivní editor a umožňuje upravovat vzhled pro různé velikosti obrazovky. U jednotlivých prvků lze například změnit:
- velikost textu,
- mezery,
- šířku a výšku,
- rozložení prvků,
- zarovnání,
- nebo jejich viditelnost.
Současné Divi umožňuje pracovat také s vlastními breakpointy, takže návrh nemusí být omezený pouze na jednoduché rozdělení počítač – tablet – telefon.
Builder vám poskytne nástroje. Stále je potřeba jednotlivé stránky na telefonu skutečně projít a zkontrolovat, zda je obsah čitelný, tlačítka dostupná a rozložení dává smysl.
Co všechno lze pomocí Divi vytvořit?
Firemní web
Úvodní stránka, služby, reference, tým, kontakty a další běžné firemní stránky.
Landing pages
Samostatné prodejní nebo reklamní stránky s formuláři a výrazným CTA.
Blog a magazín
Vlastní šablony článků, kategorií a dalších dynamicky generovaných stránek.
Kontaktní formuláře
Divi obsahuje vlastní formulářový modul a lze jej propojit i s dalšími formulářovými pluginy.
Portfolio a realizace
Fotografie, galerie, případové studie nebo vlastní přehledy realizovaných projektů.
WooCommerce
Divi umí pracovat také s WooCommerce a umožňuje vizuálně upravovat produktové a další e-shopové části. E-shopům se ale v našem manuálu věnujeme samostatně.
Musím používat Divi, když mám WordPress?
Nemusíte. Divi je pouze jedna z několika možností, jak WordPress web vytvářet.
Volba editoru je do určité míry podobná volbě pracovního nástroje. Výsledek může být kvalitní v různých systémech, ale každý má jiné prostředí, způsob práce a možnosti.
Vizuální builder a WordPress šablona od Elegant Themes. Velmi široké možnosti designu, globální šablony, responzivní nastavení a rozsáhlý systém pro tvorbu celého webu.
Právě s Divi máme v Almao největší zkušenosti.
Velmi známý vizuální builder pro WordPress. Funguje podobným principem drag & drop editoru a ve vyšších verzích nabízí také Theme Builder pro globální části webu.
Základní editor přímo ve WordPressu. Pracuje s bloky a při použití vhodné blokové šablony lze přes Site Editor upravovat také hlavičku, patičku a další části webu.
Existují také nástroje jako Bricks, Beaver Builder a další. Bricks je zaměřený na vizuální tvorbu celého WordPress webu a větší kontrolu nad výsledným kódem.
Je Divi lepší než Elementor?
Takové srovnání nemá jednoznačného vítěze.
Elementor i Divi umožňují vizuálně vytvářet WordPress web bez toho, abyste každou stránku programovali ručně. Oba mají responzivní nástroje a možnost vytvářet globální části webu.
Rozhodnutí proto často závisí na tom, s jakým systémem má tvůrce webu větší zkušenosti a jak dobře v něm dokáže web navrhnout.
My jsme si pro většinu prezentačních WordPress webů vybrali Divi a používáme jej dlouhodobě. Díky tomu máme připravené vlastní postupy, známe jeho možnosti a umíme řešit i situace, kdy už základní nastavení builderu nestačí.
Špatně lze postavit web v Divi, Elementoru i ručně. Výsledek závisí hlavně na struktuře, designu, obsahu, responzivitě, technickém provedení a zkušenosti člověka, který web vytváří.
Co když potřebuji něco, co Divi neumí přímo?
Vizuální builder není uzavřená hranice možností WordPressu.
Pokud potřebujeme individuální úpravu, můžeme do webu doplnit například vlastní CSS nebo další WordPress plugin. Divi tedy používáme jako základní nástroj pro stavbu a správu webu, nikoli jako omezení, že lze použít pouze funkce dostupné v jeho základním rozhraní.
To je proti jednoduchým pronajímaným editorům jedna z praktických výhod kombinace WordPressu a builderu.
Jaké má Divi nevýhody?
Divi má velké množství možností, což může být zároveň nevýhoda pro úplného začátečníka. Otevření editoru je jednoduché, ale vytvořit správně celý web vyžaduje pochopení práce s globálními styly, šablonami, responzivitou a strukturou stránky.
Druhou nevýhodou je určitá závislost na zvoleném builderu. Pokud vytvoříte celý web v Divi a později se rozhodnete přejít například na Elementor nebo úplně jiný systém, neznamená to, že pouze přepnete jedno nastavení. Část webu bude potřeba znovu vytvořit v novém nástroji.
Měnit základní technologii hotového webu je vždy složitější než vybrat vhodné řešení na začátku.
Kolik Divi stojí?
Elegant Themes aktuálně nabízí klasickou licenci Divi za 89 USD ročně nebo samostatnou Divi Lifetime licenci za 249 USD jednorázově. Obě varianty umožňují použití Divi na neomezeném počtu webů.
Máme vlastní doživotní licenci Divi pro neomezený počet webů. Pokud tedy při realizaci použijeme Divi, klientovi jeho licenci samostatně nepřipočítáváme.
Po vytvoření webu tak nemusíte každý rok platit další předplatné pouze proto, abyste mohli běžně upravovat stránky v Divi.
Pokud si web vytváříte sami nebo chcete mít vlastní licenci úplně nezávislou na dodavateli, můžete si Divi samozřejmě zakoupit přímo u Elegant Themes.
Dokáže si klient web v Divi upravovat sám?
U běžného obsahu většinou ano – a právě to považujeme za jednu z jeho hlavních výhod.
Po krátkém zaučení můžete například:
- změnit text,
- vyměnit fotografii,
- upravit telefon nebo e-mail,
- změnit tlačítko,
- přidat referenci,
- nebo upravit obsah existující stránky.
To ale není totéž jako navrhovat celý web od začátku. Do globálních šablon, responzivního nastavení nebo složitější struktury je vhodné zasahovat až ve chvíli, kdy víte, co daná změna ovlivní.
Dodavatel vytvoří správně technický a vizuální základ webu. Majitel potom nemusí platit za každou změnu otevírací doby nebo nové fotografie, ale běžný obsah si dokáže spravovat sám.
Divi je nástroj. Nejdříve ale potřebujete vědět, co chcete postavit
Než otevřete Divi a začnete přidávat první sekce, měli byste mít jasno v tom, jaké stránky web potřebuje, komu jsou určené a co má návštěvník na každé z nich udělat.
Bez připravené struktury velmi snadno vznikne web, který sice obsahuje pěkné sekce, ale návštěvníka nikam nevede.
Proto se v dalším článku podíváme na přípravu samotné struktury a obsahu firemního webu.
