Začněte zde

Styling

Začněme se stylizací šablony.

Barvy

Šablona Web3 X je vytvořena pomocí vzorníků barev, což znamená, že můžete snadno upravit vzorník barev, který se aktualizuje na celém webu.

K tomu stačí přejít na kartu Styl v pravém postranním panelu, pak přejít na položku Barvy v části Typografie, a pokud kliknete na barvu, budete moci zobrazit všechny barevné vzorníky a upravit je tak, aby byly aktualizovány pro celý web na jakoukoli potřebnou barvu.

Písma

Šablona Web3 X používá jedno jediné písmo na celé straně a je nastaveno ve voliči Tělo (všechny stránky ), takže můžete snadno aktualizovat písmo na celém webu jedním kliknutím.

Na libovolné stránce klikněte na oranžový volič v pravém horním rohu karty Styl a poté vyberte možnost Tělo (všechny stránky). Jakmile tak učiníte, můžete přejít do části Typografie níže a změnit písmo na libovolné písmo pro vaši firemní značku.

Pokud potřebujete vlastní nebo prémiové písmo, které není k dispozici ve Webflow, můžete vždy přejít do Nastavení projektu > Písma a budete moci nahrát vlastní písma nebo připojit svůj účet Adobe Fonts.

Grafika a ikony

Některé ikony nebo grafika v šabloně jsou normální obrázky/grafika, takže si všimnete, že při aktualizaci všech barev budou mít stále barvu šablony.

Děje se tak proto, že tato grafika jsou obrázky (PNG, JPG, SVG atd.), takže aktualizace CSS (stylování) Webflow je neovlivní. Pokud byste chtěli tuto grafiku znovu použít, můžete si ji vždy stáhnout a upravit pomocí libovolného návrhářského softwaru (tj. Photoshop, Illustrator, Sketch, Figma atd.) nebo přímo nahrát vlastní obrázky/grafiku, které odpovídají vaší značce.

Statické stránky

Statický obsah je veškerý obsah, který není založen na systému CMS, což znamená, že není dynamický (jako například příspěvek na blogu).

Veškerý tento obsah můžete snadno identifikovat, protože je v levém postranním panelu Navigátoru zobrazen šedě a po kliknutí nebo najetí myší na něj se zobrazí modrý rámeček.

Pokud chcete tento typ obsahu upravit, stačí na něj dvakrát kliknout a budete moci přímo psát.

Dynamický obsah (CMS)

Dynamický obsah je veškerý obsah, který je dynamický a bude automaticky generován na základě obsahu přidaného v části CMS v levém postranním panelu (hned pod ikonou Stránky).

To vše snadno poznáte podle toho, že se v levém postranním panelu Navigátoru zobrazuje fialově a po kliknutí nebo najetí myší se zobrazí fialový rámeček.

Tento obsah by měl být aktualizován přímo v sekci CMS. To má velmi usnadnit jeho aktualizaci, protože je velmi pravděpodobné, že bude třeba jej neustále aktualizovat (Například přidáním nového příspěvku na blog).

Pokud chcete upravit celou automaticky vygenerovanou stránku CMS (například příspěvek na blogu), najdete tuto stránku k úpravám v dolní části všech stránek v sekci Stránky v levém postranním panelu.

Produkty (elektronické obchodování)

Produkty nebo obsah elektronického obchodu fungují podobně jako dynamický obsah CMS, ale jsou zaměřeny výhradně na produkty elektronického obchodu.

Obsah e-shopu můžete identifikovat podobně jako obsah CMS, protože je také zobrazen fialově v levém postranním panelu Navigátoru a má fialový rámeček, když na něj kliknete nebo na něj najedete myší.

Tento obsah by měl být aktualizován přímo na kartě eCommerce v levém postranním panelu. To vám má velmi usnadnit jeho aktualizaci, protože je velmi pravděpodobné, že bude třeba jej neustále aktualizovat (Například změna ceny produktu nebo přidání dalších skladových zásob).

Pokud chcete upravit automaticky vygenerovanou stránku elektronického obchodu s produkty, najdete tuto stránku k úpravám téměř v dolní části všech stránek hned nad stránkami kolekce CMS.

Užitečné poznámky

Kromě hlavního základního vysvětlení, které jsme uvedli výše, se s vámi podělíme o několik tipů a návodů, které vycházejí z nejčastějších dotazů, které dostáváme.

Interakce

Pokud chcete upravit některou interakci šablony (např. odstranit efekt vzhledu), můžete snadno identifikovat prvky, které mají interakce, protože mají malou ikonu interakce (malý hrom) v levém postranním panelu Navigátor.

Pokud kliknete na tuto malou ikonu Interakce, otevře se karta Interakce na pravém bočním panelu pro tento prvek, kde můžete interakci upravit.

Zobrazení na mobilu nebo tabletu

Pokaždé, když provedete nějakou změnu (například vytvoříte nový design sekce), je dobré přejít do horní navigace na panelu Viewport a podívat se, jak vypadá na tabletu a mobilu.

Pokud pouze upravujete sekci Šablony s aktualizovaným textem nebo obrázky a nemažete žádnou třídu Šablony, nemělo by to být potřeba, pokud však šablonu upravujete hlouběji, upravujete třídy nebo vytváříte nové sekce, je vždy dobré neustále upravovat zobrazení pro mobilní zařízení a tablety, abyste se ujistili, že vše vypadá perfektně.

Úprava meta názvu, popisku a doporučeného obrázku

Pokud chcete upravit název, popis a obrázek, který se zobrazí při sdílení vašich webových stránek na libovolném místě (např. na Facebooku, Twitteru atd.), můžete snadno přejít do sekce Stránky v levém postranním panelu, kliknout na malou ikonu Nastavení stránky, kterou chcete upravit, a všechna tato nastavení se zobrazí.

Vezměte prosím na vědomí, že je důležité měnit to na základě stránek.

Zálohování

Pokud se něco pokazí, například pokud se vám nelíbí, kam se webové stránky ubírají, pokud jste odstranili některé kritické třídy, které byly nutné k tomu, aby šablona vypadala hezky, nebo pokud se prostě chcete z jakéhokoli důvodu vrátit k předchozí verzi, můžete vždy přejít do sekce Zálohy.

Najdete ji v sekci Nastavení v levém postranním panelu a pak už jen uvidíte všechny automatické nebo ruční zálohy. Obnovení staré zálohy je otázkou jednoho kliknutí.