Jak na Webflow Editor

2. Přihlášení do administrace

Pokud přijdete na web a nevidíte editační lištu, stačí za URL v adresním řádku prohlížeče přidat „/?edit“.

Příště už by si vás měl prohlížeč zapamatovat a vpravo dole tak uvidíte jenom tlačítko Edit site, kterým můžete editační lištu otevřít.

POZOR: Některé prvky se v Editoru mohou zobrazovat jinak, než je uvidí návštěvníci vašeho webu. Pokud se chcete podívat na reálnou stránku, zkontrolujte publikované změny v anonymním režimu.

3. Základy – administrační lišta

Po přihlášení do Editoru najdete v liště tyto záložky:

• V záložce Pages najdete seznam všech podstránek.

• Collections uvidíte, pokud váš web obsahuje dynamický obsah (jako například blog). Najdete tady celou databázi příspěvků nebo dalších částí podobného obsahu.

• Forms uvidíte, pokud na webu používáte formuláře. V této záložce můžete prohlížet data, která návštěvníci ve formulářích vyplnili, nebo si je vyexportovat ve formě tabulky.

• Rozkliknutí ozubeného kolečka ⚙️ zobrazí nastavení vašeho účtu.

• Pod ikonou záchranného kruhu 🛟 najdete odpovědi na často kladené dotazy.

• Vedlejší ikona se šipkou vás z administrace odhlásí.

4. Úpravy obsahu na stránce

Upravovat obsah můžete přímo na jednotlivých stránkách. Najeďte kurzorem na text, obrázek nebo tlačítko a klikněte na ikonu tužky ✏️.

4.1. Úprava a formátování textu

Když najedete kurzorem na text, objeví se ikona tužky a textové pole se zvýrazní. Když na něj kliknete, můžete upravit obsah a formátování textu.

Některé texty jsou nastavené jako tzv. rich text. Ty umožňují více možností formátování a dozvíte se o nich více v kapitole 6.2.

4.2. Změna obrázků

Najeďte kurzorem na obrázek, který chcete změnit, a klikněte na ikonu obrázku.

TIP: Aby se váš web načítal rychle, nahrávejte na něj komprimované obrázky. Můžete využit například službu tinyjpg.com

4.3. Úpravy tlačítek

Najeďte kurzorem na tlačítko a klikněte na ⚙️.

Upravovat můžete 2 parametry:

• Edit link settings umožňuje změnit adresu odkazu a nechat ho otevírat v novém panelu (Open in a new tab).
  

• Tlačítkem Edit text upravíte text tlačítka.

5. Stránky

Pod záložkou Pages najdete následující funkce:

5.1. Vyhledávací pole

V něm můžete vyhledávat mezi stránkami podle jejich názvu.

5.2. Seznam stránek

Po svém webu se můžete pohybovat i klikáním na tlačítka v navigaci apod., ale spolehlivější je právě tento seznam všech podstránek.

5.3. Nastavení stránky

Najeďte kurzorem na stránku v seznamu a klikněte na tlačítko ⚙️ Settings.

Tady můžete spravovat meta data a další nastavení související se SEO. Například obsah označený jako Open Graph se zobrazuje při sdílení stránky na sociálních sítích.

Titulek (Title Tag) a popis (Meta Description) jsou texty, které uvidí lidé ve vyhledávačích. Může to vypadat například takto:

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.

• Open Graph Image URL: Pošlete nám obrázek, my ho nahrajeme na Webflow a pošleme vám zpět URL, kterou zde vložíte. Doporučené parametry obrázku jsou 1200 px × 630 px a velikost do 300 kB.
  

• RSS feed: U dynamických stránek (z Collections) můžete povolit RSS feed a upravit nastavení.
  

6. Kolekce

V Collections můžete vytvářet a spravovat dynamický obsah, jako je třeba blog.

Když kliknete na některou ze svých kolekcí, odkaz se automaticky přidá do navigace vedle základních odkazů. Stane se z něj tím pádem záložka, která vám usnadní orientaci, až budete chtít kolekci najít a otevřít příště. Křížkem ji můžete zase skrýt.

6.1. Navigace

Interagovat se svými kolekcemi můžete takto:

• Search vám pomůžeš najít stránky podle názvu.

• Filter výpis stránek třídí.

• Select umožňuje vybrat více stránek pro hromadnou úpravu jako export, smazání nebo změnu parametrů.

• Tlačítkem Export si můžete stáhnout obsah všech stránek v kolekci ve formátu CSV tabulky.

• Ikona špendlíku 📌 zobrazí další vlastnosti stránek, podle kterých můžete filtrovat.

6.2. Detail položky

Klikněte na konkrétní stránku pro její úpravu nebo vytvořte novou zeleným tlačítkem + New.

• URL Slug: Když stránku pojmenujete, její URL adresa se vyplní automaticky. Pokud název změníte dodatečně, měli byste URL adresu přepsat sami. Myslete ale na to, že stará adresa přestane fungovat (a můžou se tak rozbít odkazy, které na stránku vedou z jiných webů).

• Obrázky: Obecně je dobré nahrávat komprimované obrázky, aby se zbytečně nezpomalovalo načítání stránek. V některých případech se zobrazí podrobnější specifikace přímo u pole pro nahrání obrázku.

• Rich text: Pokud chcete formátovat text, označte ho a vyberte tuto vlastnost z menu.

Pro správnou přístupnost a SEO používejte hierarchii nadpisů. Nadpis netvořte tím, že text vytučníte, ale označte ho jako H2, H3 atd., podle toho, jak jsou do sebe sekce textu významově zanořené. Nepoužívejte v textech nadpis H1 – ten musí být na stránce vždy jenom jeden a generuje se automaticky jako součást designu.

V editoru se vám mohou zdát nadpisy malé, ale na stránce se zobrazí správně. Jejich velikost je dána celkovým designem stránky. Proto doporučujeme zkontrolovat vzhled článku v náhledu.

Podobně to funguje s mezerami. Nemusíte používat klávesu Enter mezi odstavci víckrát. Správné velikosti mezer jsme předpřipravili v designu a projeví se až na stránce.

7. Náhled změn a publikování

Vždy, když na stránce něco změníte, ukáže se vpravo dole informace o tom, kolik změn se uložilo. Editor změny uloží, i když se odhlásíte a stránku nepublikujete. Když se přihlásíte příště, můžete pokračovat tam, kde jste skončili.

V sekci Changelog (vpravo dole, vedle tlačítka Publish) můžete vidět seznam provedených změn.

Pro reálné zobrazení změn klikněte na tlačítko Back to live site a prohlížejte si svůj web jako obvykle. Jak už jsme zmínili, lišta Editoru může narušovat některé funkce kódu na stránkách a měnit tak vzhled některých prvků – proto doporučujeme změny kontrolovat i po zveřejnění v anonymním okně nebo jiném prohlížeči.

Jakmile budete s prací hotovi, publikujte stránku kliknutím na Publish.

TIP: Dokud stránku nepublikujete, všechny provedené změny uvidíte pouze v Editoru.