Vzhůru dolů

Návod: Vlastní šablony do Webnode

Český redakční systém Webnode má potenciál pro jednodušší weby nahradit u vývojářů tolik oblíbený Wordpress nebo Drupal.

Nenáročnému a technicky průměrně zdatnému uživateli, který web plní obsahem, se díky drag and drop, wysiwyg a dalším funkcím dostává velmi přívětivého rozhraní.

Horší to mají webdesignéři, kteří by rádi klientům připravili styl stránek výjímající se ze vzhledu šablon Webnode a podporující vizuální styl klienta. Podpora je pro ně ze strany autorů Webnode špatná a tak se nelze divit, že po původních pokusech o implementaci vlastního vzhledu jsem byl skeptický.

Nakonec se to po několika implementacích (1, 2, 3, 4) začíná dařit a rád se podělím o své zkušenosti zjednodušeným postupem implementace vlastního vzhledu do Webnode.

1. Vyberte Webnode šablonu, jejíž HTML kód a rozvržení vám nejvíce vyhovuje a stáhněte si ji
   
   • Cílem je upravovat hlavně CSS, případně javascripty. Je škoda, že jednotlivé Webnode šablony mají velmi rozdílný HTML kód. Osobně jsem pracoval vždy se šablonou 2 nebo 3.
   • Šablonu si stáhněte v záložce Vzhled webu > Šablony, kde najeďte myší na požadovanou a zvolte Stáhnout šablonu.
2. Upravte šablonu do požadovaného vzhledu
   
   • Ještě předtím je nanejvýš vhodné do původní šablony ve Webnode “naklikat” obsah, se kterým budete pracovat.
   • Lokální odladění není příliš komfortní. Osobně jsem si vždy do struktury souborů stažené šablony přidal složku /_templates, kam jsem umísťoval pomocné šablony s HTML kódem stažený z prohlížeče původních šablon, ve kterých jsem upravil cesy k assetům (javascrity a kaskádové styly). Upravené pomocné šablony jsem pak už běžně po úpravě kaskádových stylů testoval v prohlížečích.
   • Stažená Webnode šablona má následující strukturu složek:
     /css - kaskádové styly, váše hlavní pracovní složka
     /formatters - formátovače v XML specifikují funkčnost a HTML kód jednotlivých částí stránek jako detail článku, fotogalerie atd.
     /img - samozřejmě obrázky, přidejte sem svoje, ale původní raději nemažte - některé jsou povinné
     /js - javascripty rovněž klidně přidejte, ale pokud nemáte s Webnode zkušenosti, původní nemažte
     /variants - varianty rozložení stránky. Pokud začínáte, stejně jako formatovače nedoporučuji měnit, snad jen pokud chcete “nalinkovat” vlastní CSS nebo JS soubory.
     index.html je předvolená varianta rozložení stránky
     config.xml můžete měnit, ale není to v prvních krocích potřeba
3. Nahrejte šablonu zpět do Webnode
   
   • Upravené šablony s celou strukturou (bez pracovní složky /_templates) zabalte do ZIPu a ten s využitím funkce Importovat šablonu v záložce Vzhled webu > Šablony nahrejte do Webnode.
   • Webnode má vlastní jednoduchý validátor, který vás upozorní na případné chyby v šabloně.
   • Nahranou šablonu musíte ještě vybrat mezi Šablony > Moje šablony. Bohužel musíte také znovu nastavit varianty rozložení stránky pro jedotlivé typy stránek.

Přeji hodně zdaru.

Pokud také máte jako webdesignér nebo vývojář s Webnode zkušenosti, ozvěte se mi prosím na michalek@shortcat.cz, do Twitteru nebo prostě do komentářů.