1. Výhody nového editoru
Nový Webflow editor přináší pohodlnější a přehlednější správu obsahu vašeho webu. Oproti původní verzi nabízí:
- Editaci přímo v náhledu stránky — vidíte přesně to, co uvidí návštěvníci
- Úpravy uvnitř složitějších prvků — navigace, taby, slidery i další komponenty
- Komentáře a spolupráci v reálném čase — můžete diskutovat o změnách přímo u konkrétních prvků
- Náhled na různých zařízeních — přepínání mezi desktopem, tabletem a mobilem přímo v editoru
2. Jak se přihlásit do editoru
Obdržíte pozvánku na e-mail. Přijměte pozvánku a přihlašte se na adrese webflow.com. Otevře se vám dashboard s vaším webem — klikněte na něj a dostanete se do editoru.
TIP: Pro opakované přihlášení do editoru používejte Webflow dashboard nebo přidejte za adresu svého webu ve vyhledávači ?update (www.vasweb.cz/?update).
3. Orientace v editoru
Po přihlášení se otevře editor, který zobrazuje náhled webu tak, jak ho vidí návštěvníci. Rozhraní má tři hlavní části:
3.1 Horní lišta
Obsahuje záložku CMS, přepínání mezi stránkami, přehled právě aktivních uživatelů, nástroj pro komentáře a sdílení a tlačítko Publish pro zveřejnění změn.
Je zde také možné přepínat mezi jednotlivými breakpointy (desktop / tablet / mobil), a kontrolovat tak zobrazení webu na různě velkých obrazovkách.
3.2 Levý panel
Zde najdete přehled všech stránek v záložce Pages (klávesová zkratka P) a správu médií v záložce Assets (klávesová zkratka J).
3.3 Editor (canvas)
Hlavní plocha s náhledem webu. Editovatelné prvky se po najetí kurzorem zvýrazní rámečkem — dvojklikem na vybraný element začnete upravovat obsah.
POZOR: Některé prvky se v Editoru mohou kvůli custom kódu zobrazovat jinak, než je uvidí návštěvníci vašeho webu. Pokud se chcete podívat na reálný výsledek, klikněte v horní liště na ikonu Preview a zaklikněte Enable custom code nebo zkontrolujte publikované změny na webu v anonymním režimu.
4. Co můžete upravovat
Jako Content editor máte přístup k těmto akcím:
- úprava textů a formátovaného obsahu přímo na stránce
- výměna obrázků a médií
- úprava alt textů
- přidání nebo změna odkazů
- vytváření, editace a správa CMS položek (např. blogové příspěvky, členové týmu)
- úprava SEO nastavení jednotlivých stránek
- přidávání komentářů a spolupráce s kolegy
- publikování změn (pokud vám bylo toto oprávnění přiděleno)
TIP: V závislosti na nastavení vašeho webu můžete mít přístup i k dalším funkcím, jako jsou analytiky (Analyze), optimalizace (Optimize) nebo jazykové verze (Localization). Pokud k těmto sekcím máte přístup, rádi vám vysvětlíme, jak je používat.
4.1 Co naopak upravovat nelze
Rozložení stránek, styly, komponenty, strukturu CMS kolekcí ani vlastní kód. Struktura kolekcí (jaká pole existují, jak se obsah zobrazuje) je nastavena z naší strany — pokud potřebujete změnu, kontaktujte nás. Díky těmto omezením vaše úpravy nikdy nenaruší design webu.
5. Jak editovat obsah na stránce
Otevřete stránku v editoru. Najeďte kurzorem na prvek, který chcete upravit. Pokud se zobrazí rámeček (outline), je prvek editovatelný a dvojklikem ho můžete začít upravovat. Změny se ukládají automaticky — nemusíte nic ručně potvrzovat.
Na rozdíl od předchozí verze editoru můžete nyní upravovat obsah i uvnitř složitějších prvků, jako jsou navigace, taby nebo slidery.
5.1 Úprava textu a formátování
Klikněte na textový prvek a začněte psát. Nad textem se zobrazí formátovací lišta, kde můžete měnit tučné písmo, kurzívu, přidávat odkazy a další.
Některé textové bloky jsou nastavené jako rich text, který umožňuje pokročilejší formátování. Správné mezery mezi odstavci jsou součástí designu, nemusíte je přidávat ručně. Při práci s delším textem dodržujte hierarchii nadpisů (H2, H3 atd.).
POZOR: U rich textu nikdy nepoužívejte nadpis H1, ten je na stránce vždy jen jeden a generuje se automaticky.
5.2 Výměna obrázků
Klikněte na obrázek, který chcete změnit. Zobrazí se dialogové okno, kde můžete nahrát nový soubor nebo vybrat obrázek ze záložky Assets.
Po nahrání obrázku nezapomeňte vyplnit alt text (alternativní popis) — krátký popisek toho, co je na obrázku. Alt text zlepšuje přístupnost webu pro nevidomé uživatele a pomáhá vyhledávačům lépe porozumět obsahu stránky.
TIP: Aby se web načítal rychle, nahrávejte komprimované obrázky. Obrázky můžete komprimovat přímo ve Webflow — v záložce Assets najeďte pravým tlačítkem na obrázek a zvolte Compress (doporučujeme zvolit formát WebP). Případně můžete obrázky komprimovat ještě před nahráním pomocí služby tinyjpg.com.
5.3 Úprava odkazů
Klikněte na odkaz nebo tlačítko — v pravém panelu se zobrazí nastavení odkazu. Můžete změnit cílovou URL adresu, nastavit otevírání v novém panelu nebo odkaz odebrat.
6. Náhled a publikování změn
Uložené změny se nezobrazují automaticky na živém webu. Publikování řídí, kdy se změny skutečně zobrazí návštěvníkům.
Pokud máte oprávnění publikovat, uvidíte v pravém horním rohu tlačítko Publish. Před publikováním si projděte změny a ujistěte se, že jsou kompletní a že nikdo jiný momentálně needituje stejnou stránku.
Pokud oprávnění k publikování nemáte, Webflow vás na to upozorní — vaše změny zůstanou uloženy a my je zveřejníme za vás.
Při publikování si Webflow vyžádá výběr domény. Na výběr máte dvě možnosti:
- Staging (adresa končící na .webflow.io) — testovací verze webu, kterou návštěvníci nevidí. Slouží ke kontrole změn před zveřejněním na živém webu.
- Production (vaše doména, např.: vasweb.cz) — živý web, který vidí návštěvníci.
TIP: Dokud změny nepublikujete, uvidíte je pouze v editoru. Pro kontrolu doporučujeme po publikaci otevřít stránku v anonymním okně prohlížeče.
7. Statický vs. dynamický obsah
Na webu existují dva typy obsahu:
- Statický obsah — text, obrázky a odkazy přímo na konkrétní stránce. Změna se projeví jen na dané stránce.
- Dynamický obsah (CMS) — obsah spravovaný v CMS, například blog, členové týmu nebo případové studie. Změna se automaticky projeví na všech místech webu, kde se daná položka zobrazuje.
TIP: Pokud změníte jméno člena týmu v CMS, aktualizuje se všude, kde je daná informace napojená — např. na stránce O nás, v patičce, v seznamu členů týmu apod.
8. Jak přidávat a upravovat CMS obsah
V záložce CMS (ikona databáze v horním panelu) najdete přehled všech kolekcí dynamického obsahu — například blogové příspěvky, členy týmu nebo případové studie. Zde můžete existující položky upravovat i vytvářet nové.
8.1 Přidání nové položky
Otevřete záložku CMS (ikona databáze v horním panelu). Vyberte příslušnou kolekci (např. Blog Posts). Klikněte na modré tlačítko New item. Vyplňte požadovaná pole — název, text, obrázek, datum apod.
Každá CMS položka má jeden z těchto stavů:
- Published — položka je publikovaná a zobrazuje se na webu
- Draft — rozpracovaný koncept, na webu se nezobrazuje
- Changes in draft — publikovaná položka, u které máte rozpracované úpravy, které ještě nejsou zveřejněné
- Queued to publish — položka čekající na publikaci (zobrazí se po nejbližším publikování webu)
Pomocí náhledu (Preview) zkontrolujte, jak bude položka vypadat na webu. Obsah můžete dále upravovat, nebo položku rovnou publikovat.
8.2 Editace existující položky
Obsah CMS položek můžete kromě CMS panelu upravovat i přímo v náhledu stránky — stačí kliknout na text nebo obrázek stejně jako u statického obsahu.
POZOR: Pokud upravíte již publikovanou CMS položku, je potřeba ji publikovat znovu, aby se změny propsaly na webu.
V náhledu můžete mezi položkami přepínat přes tlačítko na horní liště nebo v levém postranním panelu s přehledem všech stránek.
V přehledu stránek poznáte typ stránky podle barvy:
- Bílé stránky = statické stránky
- Fialové stránky = CMS stránky
- Oranžové stránky = stránky s konkrétními CMS položkami s nepublikovanými změnami
9. Jak upravit SEO nastavení stránky
V levé liště v záložce Pages najeďte kurzorem na vybranou stránku a klikněte na tlačítko ⚙️ Page settings.
Tady můžete spravovat meta data a další nastavení související se SEO.
Titulek (Title Tag) a popis (Meta Description) jsou texty, které uvidí lidé ve vyhledávačích. Obsah označený jako Open Graph se zobrazuje při sdílení stránky na sociálních sítích.
Když zaškrtnete políčka Same as SEO Title Tag a Same as SEO Meta Description, budou se meta data automaticky kopírovat do polí Open Graph. Výsledek může vypadat takto:
Webflow nabízí v nastavení SEO možnost nechat si vygenerovat návrh titulku a popisu pomocí AI. Výsledek doporučujeme vždy zkontrolovat a upravit.
POZOR: Změny v nastavení jednotlivých stránek je vždy potřeba uložit přes modré tlačítko Save v pravém horním rohu okna.
10. Spolupráce a podpora
10.1 Komentáře
Pokud si nejste jistí editací nebo chcete upozornit kolegu, využijte komentáře. V horní liště klikněte na ikonu komentáře, nebo stiskněte "C" na klávesnici. Klikněte na prvek, ke kterému chcete komentář přidat, a napište zprávu.
Kolegy můžete označovat pomocí symbolu @. Pokud někoho v komentáři označíte, přijde mu upozornění.
Komentáře jsou viditelné přímo na stránce při editaci. Můžete na ně odpovídat ve vláknech, sdílet odkaz na konkrétní komentář, nebo je po vyřešení označit jako hotové (Resolve).
10.2 Když editujete současně s kolegy
Na webu může editovat více lidí najednou — Webflow zobrazuje, kde se ostatní na stránce nacházejí. Platí pravidlo „poslední změna vyhrává“, proto doporučujeme domluvit se předem, kdo edituje kterou stránku nebo sekci. Před publikováním si ověřte, že nikdo jiný momentálně neprovádí změny.
Užitečné klávesové zkratky:
Ctrl+Z (Mac: Cmd+Z) = krok zpět
Ctrl+Shift+Z (Mac: Cmd+Shift+Z) = krok vpřed
10.4 Další zdroje
Podrobnější návody a videa najdete na Webflow University — oficiální vzdělávací platformě Webflow s kurzy a tutoriály v angličtině. Pro rychlý přehled doporučujeme zejména sekci věnovanou Editor mode.
10.3 Pokud něco nefunguje
Pokud narazíte na prvek, který nejde editovat, nebo potřebujete změnu mimo rozsah Content editora (rozložení, nová stránka, změna struktury CMS), napište nám — tyto změny musí připravit designér a my je rádi provedeme za vás.
Chcete poradit s Webflow?
