Divi šablona a Elegant Themes WordPress návody

Divi: Nejlepší WordPress šablona roku 2018?

Divi šablona
Autor příspěvku Tomáš Cirkl

Kompletní recenze šablony Divi, víceúčelové WordPress šablony z dílny Elegant Themes.

Divi je jedna z nejlepších šablon, se kterými jsem se setkal. Velice rád ji doporučuji svým klientům a používám ji na své projekty. Divi šablona je doslova nacpaná funkcemi a nastaveními, vypadá skvěle na všech zařízeních a dobře se upravuje. V této recenzi postupně projdu hlavní vlastnosti a funkce šablony a zároveň upozorním na nevýhody.

Šablona Divi je součástí balíčku šablon dostupných u Elegant Themes. Získat ji můžete formou předplatného (stejně jako všechny ostatní šablony) od 89 USD. Více o cenové politice a dalších produktech se dozvíte v článku WordPressový specialista Elegant Themes a na naší microsite s češtinou pro Elegant Themes šablony.

Prohlédnout si Divi na stránkách Elegant Themes.

Divi obecně

Jak už jsem zmínil dříve Divi je komplexní šablona, která obsahuje obrovské množství možností a funkcí.

Práce s Divi je velmi jednoduchá. Obsah se vytváří v uživatelsky přívětivém prostředí, ve kterém se dobře orientuje i WordPress začátečník. Nastavení samotné stránky je pak umístěno v sekci Vzhled -> Přizpůsobit a v sekci Divi. Velkou výhodou je také, že je šablona přeložena do češtiny. Nutno však dodat, že výchozí překlad není dokonalý a některé názvy jsou přeloženy netradičně. Proto jsme vytvořili vlastní překlad, který si zdarma můžete stáhnout jako child šablonu.

Klíčové vlastnosti šablony:

  • Divi Page Builder – slouží pro tvorbu obsahu.
  • Divi Visual Builder – úprava a tvorba stránky přímo v jejím zobrazení. Ihned tedy vidíte, jak vypadá.
  • Přívětivé uživatelské prostředí.
  • Část nastavení přesunuta do sekce Přizpůsobit – takže ihned vidíte náhled změn, které provádíte.
  • Předpřipravené šablony rozložení.
  • Možnost ukládání vlastních šablon rozložení a obsahu.
  • Responzivní design.
  • Divi moduly – různé prvky pomocí nichž se vytváří obsah.
  • Důraz na bezpečnost.
Divi náhled

Divi náhled

Nastavení hlavičky

Bezesporu jedna z nejlepších věcí je nastavení hlavičky webu. Divi poskytuje několik nastavení pro zobrazení hlavičky. Můžete si například vybrat z umístění loga vlevo, na středu nebo uprostřed menu. Také si můžete vybrat zda bude hlavička přes celou šířku stránky nebo jen těla obsahu.

Celkem je zde 24 unikátních možností zobrazení, ze kterých můžete vybírat.

Divi hlavička

Divi hlavička

Vertikální navigace

Hodně uživatelů WordPress preferuje vertikální navigaci nad horizontální. V Divi stačí změnit jeden parametr a okamžitě změníte základní vzhled šablony.

Vše se nastavuje ze sekce Přizpůsobit, takže ihned vidíte, jak bude vaše stránka vypadat.

Vertikální navigace

Vertikální navigace

Divi Theme Builder

Ovšem tou nejlepší součástí šablony je bezesporu Divi page builder. Díky němu je tvorba a úprava obsahu velmi jednoduchá a zvládne ji i začátečník. Page builder transformuje všechny části do jednoduché struktury s možností jejich úpravy.

Divi builder je skvělý prostředek pro začátečníky i pokročilé jak tvořit efektní a krásné stránky během chvilky.

Divi page builder

Divi page builder

Divi Visual Builder

Pomocí Divi Visual Builderu tvoříte stránky přes rozhraní, které vypadá stejně jako když si návštěvník zobrazí stránku. Díky tomu ihned vidíte, jak stránky vypadají a úprava obsahu je velice snadná a rychlá.

Divi Visual Builder náhled

Divi Visual Builder náhled

A/B testování a statistiky

Ve verzi 2.7 byla do Divi přidána možnost A/B testování obsahu. Díky tomu můžete přímo testovat různé prvky stránky a zjišťovat, které z nich mají nejlepší konverzi. Divi Leads opět posunuje šablonu o kus dál.

Součástí jsou také komplexní statistiky pro rychlé a přehledné vyhodnocení dat.

Více o Divi Leads najdete v článku Jak funguje A/B testování v Divi šabloně (Divi Leads).

Divi Leads

Divi Leads

Divi statistiky

Divi statistiky

Divi moduly

Divi moduly jsou bloky, pomocí kterých se v Divi Builderu vytváří obsah. Díky těmto modulům docílíte požadovaného vzhledu a funkčnosti v přehledném, uživatelsky přívětivém prostředí.

Najdete zde bloky jako obrázek, galerie, sidebar a další. Zároveň jsou také speciální bloky pro propojení například s Woocommerce.

Každý z modulů pak má vlastní nastavení, kde lze vytvořit jeho obsah, ovlivnit jeho vzhled a další.

Divi moduly

Divi moduly

Více než 20 předpřipravených rozložení stránky

Aby toho nebylo málo, obsahuje Divi také 20+ předpřipravených rozložení stránky. Stačí si jen vybrat a ihned máte stránku připravenou.

Zároveň si toto rozložení můžete vytvářet sami a ukládat je do vlastní knihovny.

Divi rozložení

Divi rozložení

Další nové designy každý týden

Tým z Elegant Themes každé pondělí vytváří specifické designy určené pro Divi šablonu. Tyto designy jsou zdarma ke stažení a k použití pro osobní i komerční účely, včetně všech obrázků a ikonek. Každý design podle svého účelu obsahuje vždy alespoň sedm typových stránek. Seznam všech dosud zveřejněných designů najdete v článku Krásné designy pro Divi šablonu.

Divi designy

Divi designy

Responzivní

Dnes je to u moderních šablon bráno již jako standard, ale je dobré to zmínit. Vzhled Divi se automaticky přizpůsobuje jakémukoliv zařízení.

Divi responzive

Divi responzive

Nastavení responzivity

Součástí nastavení každého modulu je také možnost ovlivnit parametry pro mobilní zařízení a tablety.

Díky tomu získáte kompletní kontrolu nad každým prvkem stránky.

Divi jako jednostránkový web

Jednostránkové weby jsou poslední dobou poměrně populární. S Divi stačí vybrané sekci přiřadit její ID a využít ho jako kotvy v pro menu. Šablona následní při kliknutí na položku v menu automaticky provede postupnou animaci na stránce. Možnost pevného menu zajistí, že se uživatel na stránce bude dobře pohybovat.

Další možností je umístění tečkové navigace k okraji stránky.

Divi jednostránková šablona

Divi jednostránková šablona

Klonovací nástroj

Další skvělou funkcí je duplikování obsahu na úrovni sekce, řádku nebo modulu. Díky tomu nemusíte vše znovu nastavovat a jen díky jednomu kliknutí docílíte stejného prvku.

Divi klonovací tlačítko

Divi klonovací tlačítko

Tvorba vstupních stránek

S pomocí Divi si také můžete vytvořit různé vstupní stránky, kde můžete skrýt hlavičku i patičku stránky. Získáte tak čistou stránku, kterou můžete přesně uzpůsobit vaším potřebám.

Divi landing pages

Divi landing pages

Typy příspěvků

Šablona podporuje několik typů příspěvků. Podle vybraného typu se pak může ovlivnit zobrazení příspěvku v sekci blog nebo rubriky. Typ příspěvku může být standardní, galerie, citace, audio, video a odkaz. Díky těmto příspěvkům uděláte blog pro své čtenáře poutavější.

Ukázku, jak jednotlivé příspěvky vypadají, najdete na obrázku.

Typy příspěvků

Typy příspěvků

Portfolio

Jestliže chcete na stránce zobrazit své portfolio, Divi k tomu má speciální sekci. Můžete si vybrat z několika různých rozložení (přes celou šířku stránky, s filtrem nebo podle kategorií).

Toto je další skvělá funkce pro využití jako firemní šablona.

Divi portfolio

Divi portfolio

E-shop

Divi je kompatibilní s populárním pluginem WooCommerce. Díky tomu je opravdu jednoduché vytvořit pomocí Divi internetový obchod. Divi zároveň obsahuje předpřipravené šablony pro stránky obchodu.

Divi a Woocommerce

Divi a Woocommerce

Divi knihovna

Je to centrum, kam si můžete ukládat své šablony stránek, sekce, řádky nebo i moduly. Zároveň zde můžete tyto uložené prvky upravovat a spravovat. Prvky lze také řadit do kategorií a vyhledávat v nich. Obsah z Divi knihovny lze snadno exportovat a importovat do nového webu. Jestli máte rádi specifický design, tak jej vytvoříte jednou, exportujete a když tvoříte nový web, tak si jej jen importujete.

Zajímavou možností je také označení prvku jako globální. Díky tomu pak budou automaticky změny v tomto bloku provedeny na všech stránkách, kde je použit.

Divi knihovna

Divi knihovna

Aktivní pravé tlačítko na myši

V Divi page builderu lze také používat pravé tlačítko myši. Pokud jej použijete, objeví se menu, kde jsou položky: Přejmenovat, Split test, Zakázat, Zámek, Kolaps, Kopie a Náhled.

Menu pod pravým myšítkem

Menu pod pravým myšítkem

Rychlý náhled

Při úpravě každého modulu si můžete přímo v administraci zobrazit náhled jak bude prvek na stránce vypadat. Díky tomu můžete vidět změnu ještě předtím, než ji zveřejníte. Náhled může být jako na PC, tabletu nebo mobilním zařízení.

Náhled modulu

Náhled modulu

Dopředu a zpět

V Divi page builderu můžete také procházet historii pomocí funkce zpět a vpřed. Ovšem je to dostupné pouze po dobu úpravy. Jakmile session vyprší, tak se i historie ztratí.

Dopředu a zpět

Vpřed a zpět

Editor role

V Divi je také nastavení určeno pro správu uživatelských rolí. Díky tomu můžete svým klientům udělit přístup pouze k těm funkcím Divi, kam skutečně potřebují přístup mít. Takto lze jednoduše předcházet problémům. Součástí tohoto nastavení je i správa přístupu k modulům.

Divi role editor

Divi role editor

Obrázky s textem

V Divi je jednoduché udělat sekci, kde pozadí tvoří obrázek s textem a tlačítkem. Zároveň je možné nastavit podklad pro text i jeho průhlednost.

Obrázek s textem

Obrázek s textem

Důraz na bezpečnost

Bezpečnost je důležitou součástí Divi. Vývojáři proto oslovili odborníky na bezpečnost z Sucuri.net a společně šablonu prověřili, aby docílili co nejbezpečnějšího možného produktu.

Prověřeno Sucuri

Prověřeno Sucuri

Přeloženo do 32 jazyků

Dalším velkým plusem, například vůči šablonám z Themeforest, je hotový překlad do 32 jazyků. Mezi nimi je i čeština. Ovšem nutno dodat, že čeština není dokonalá (pro Divi jsme vytvořili vlastní češtinu a child šablonu) a některé názvy mohou být trochu zavádějící.

Jazyky

Jazyky

Neustálý vývoj

Divi šablona je vlajkovou lodí Elegant Themes a proto se jí pořádně věnují. Každý týden je dostupná aktualizace, která vylepšuje kompatibilitu, výkon nebo přidává novou funkčnost. O těch nejzajímavějších změnách v Divi pravidelně informujeme.

Několik posledních aktualizací:

Další články najdete pod štítkem Nově v Divi.

Divi jednou a napořád

Pokud se rozhodnete Divi pro svůj projekt použít, je dobré pamatovat na to, že by to mělo být “napořád”. Jakmile totiž změníte šablonu, deaktivuje se Divi builder a obsah bude zobrazen včetně shortcodů, které jsou jinak skryty. Očistit pak obsah je poměrně zdlouhavé a sice se to dá částečně řešit pomoci Divi builder pluginu, ale není to ono.

Divi licence a cena

Divi je jednou z nejlepších šablon pro WordPress. Možností jejího využití jsou obrovské a práce s ní je radost. Divi licence je neomezená. Jakmile si ji koupíte můžete ji použít tolikrát, kolikrát chcete a zároveň ji můžete poskytnout svým klientům. Zároveň s Divi získáte i dalších 86 šablon a případně i pluginy.

Cena Divi je různá, protože ji získáte při zakoupení členství v klubu Elegant Themes. V závislosti na vybraném typu členství pak máte přístup k aktualizacím trvale nebo na určité časové období. Šablonu pak ale můžete používat i nadále.

Můžete si vybrat z následující typů členství:

  • Roční – 89 USD za rok, roční přístup k šablonám a pluginům a jejich aktualizacím + podpora.
  • Lifetime (celoživotní) – 249 USD, neomezený přístup k šablonám a jejich aktualizacím + podpora.

Koupit členství u Elegant Themes

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

32 komentářů

  • Chci se zeptat v jakém nastavení najdu toto: Jednostránkové weby jsou poslední dobou poměrně populární. S Divi stačí vybrané sekci přiřadit její ID a využít ho jako kotvy v pro menu. Šablona následní při kliknutí na položku v menu automaticky provede postupnou animaci na stránce. Možnost pevného menu zajistí, že se uživatel na stránce bude dobře pohybovat.

    • V Divi Page builderu se pro sekci dá v nastavení přiřadit ID. To se pak při tvorbě menu využije jako kotva u Uživatelského odkazu. Pokusím se na to napsat návod.

  • Zdravím, moc díky za web wplama.cz… chtěl jsem se zeptat… dělám jeden web a chtěl jsem si na něm vyzkoušet divi šablonu, ale klient tam chce flip-boxy jako umí např. Avada. Nenašel jsem je v možnostech divi… přehlídl jsem, nebo nějaká možnost existuje? Díky.

      • díky za odpověď… také jsem nenašel, no nic, zkusím ho ukecat, nebo to obejít… nabídka ElegantThemes se mi líbí, tak do toho asi půjdu 🙂

    • Taky mám Avadu a je to strašně pomalé. Na dvou hostincích (každý jiný) to jede šíleně pomalu, zatím co stránky se šablounou, které zachovávají čistý zdrojový kód, jedou dostatečně rychle. Flipboxy jsou poutavé, ale zřekl bych se jich za dvojnásobně rychlejší načtení. Jak poznat rychlou šablonu?

  • Dobrý. Když si prosím zakoupím licenci za 89 USD na rok, tak si mohu stáhnou třeba všechny šablony, které mi zůstanou napořád? Ale po roce nemám již přístup. V licenci za 249 USD je to samé a výhodou je jen to, že bude přístup i po roce , třeba k novějším šablonám?

  • Ahoj, prosím tě, tady ten web je taky postavený na šabloně Divi? Děkuji a chválím za super stránky. M.

  • Zdravím, jak je na tom Divi s rychlostí třeba na tools.pingdom.com? Často platí, že šablony obsahující “všechno” jsou pak líné a pomalé. Díky

  • Ahoj Tomáši,
    prosím tě dá se v Divi nastavit u jedné stránky zobrazení widgetu Postranní panel? Nemohu to najít.

    • Ahoj,

      ano, v Divi builderu je to modul Postranní panel, kde se pak jen nastaví jaký sidebar si má natahávat.

  • Ahoj Tome,

    nevím, zda máš nějakou zkušenost s českou šablonou od MioWebu. Jestli se to nechá nějak porovnat se šablonou Divi. Chtěl bych začít tvořit webovky a rozhoduji se mezi těmito dvěma.

    • Ahoj,
      MioWeb nemám vůbec rád. Pokaždé, když jsem se k tomu dostal, tak s tím byly akorát problémy.

  • Dobrý den,
    tak jsem dnes do Divi šla. Koupila jsem ji a koukám, že v prostředí Elegant Themes na mě mluví vše anglicky. Kudy se prosím dostanu na tu českou verzi šablony?
    Děkuji!

    • Jazyk šablony Divi se určuje podle nastavení jazykové verze ve WordPress. Pokud máte český WP, máte i české popisky v administraci šablony.

      • Dobrý den, moc děkuji. Mohu ještě poprosit o nasměrování: dnes využívám MioWeb, mám variantu se členskou sekcí. Umožňuje prosím Divi založit Membership se stránkami, kam se návštěvník dostane jen s vlastním přístupovým heslem? Našla jsem jen možnosti plugginů a těch je nepřeberně, ztrácím se. Mohl byste mi prosím doporučit? Děkuji.

        • Dobrý den,

          jak píšete, je třeba si pomoci pluginem. Bohužel nevím, čeho chcete dosáhnout, tak nelze doporučit plugin. Nejlepší je založit si testovací stránku a vyzkoušet si jich pár a podle toho se rozhodnout.

        • Ahoj Matrino, vyřešila jsi tohle nějakým způsobem prosím? řeším stejný problém. Děkuji, Lukáš

  • Ahoj, řeším dva takové zapeklité problémy s Divi šablonou. Ten první je, že při zobrazení na tabletu horizontálně se postranní widget smrskne do nudle a fakt to není hezké. Nedokážu nějak přijít na to, aby se rovnal dolu jako u všech ostatních nedesktopových zobrazeních. Teď mi to teda úplně 100% responzivní nepřijde. Kde by se to dalo upravit? Ten druhý problém je, že se různým lidem zobrazuje obsah různě. Jde o stejný druh telefonu, přitom u mě a v responzatoru se to zobrzauje stejně, klientka tvrdí něco jiného (foto mi poslala a fakt vidí něco jiného). To se dá taky nějak řešit? Děkuju

    • Ahoj,
      @sidebar: určitě by to mělo jít upravit pomocí vlastních CSS stylů, kdy se nastaví to zalomení dříve. Je to drobná úprava.

      @jiné styly: nemá uložený starý CSS v prohlížeči v telefonu? Mělo by se to smazat při aktualizaci webu potažením dolu nebo otevřít web v anonymním okně. Případně doporučuji vypnout ty cachovací funkce a optimalizace CSS+JS v nastavení Divi šablony. Lepší je na to použít specifické pluginy.

Zanechat komentář

25% sleva na Divi šablonu a členství u Elegant Themes

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 3 roky. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.