Tvorba obsahu v HTML editoru

☝️ Tato nápověda je určena pouze pro e-commerce řešení JZ ONE.

Jak správně psát a formátovat články na e-shopu

Tento průvodce vás naučí správně používat textový editor v administraci. Dozvíte se, jak texty formátovat pro zákazníky i vyhledávače (SEO) a jak správně vkládat obrázky či sloupce.

Pokud je k dispozici formátovaný obsah pomocí HTML, v editaci stránky se zobrazí pouze zjednodušený náhled obsahu bez editoru. Pokud chcete provádět úpravy, klikněte na tlačítko uvnitř obsahu "Upravit v HTML editoru". 

Struktura textu a používání nadpisů

Nadpisy určují strukturu stránky, podle které vyhledávače (Google, Seznam) chápou obsah vašeho webu.

• Nadpis H1 (Hlavní): V textu ho nikdy nepoužívejte. Systém jej vytvoří automaticky z názvu článku, produktu nebo kategorie.
• Nadpis H2 (Hlavní sekce): Používejte pro rozdělení textu do hlavních témat (v editoru zvolte Nadpis 2).
• Nadpis H3 (Podnadpisy): Slouží pro rozdělení dlouhých bloků uvnitř sekce H2 na menší části

TIP: Jak rychle změnit nadpis v editoru?

Nadpis nastavíte jednoduše označením textu - následně se objeví rychlé akce nad označeným textem: 

Formátování textu a vliv na SEO

Pro dobré pozice ve vyhledávačích a přehlednost pro zákazníky udržujte text čistý.

• Správné formátování: Používejte tučné písmo pro klíčové pojmy, kurzívu pro zajímavosti a odrážky pro seznamy vlastností.
• Špatné formátování (Inline styly): Nikdy textu ručně neměňte barvu, velikost (např. 18pt) ani font přímo v liště. Tyto ruční úpravy (tzv. inline styly) dělají nepořádek v kódu, web pak na mobilech vypadá špatně a vyhledávače takové stránky penalizují. Písmo nechte v základním nastavení šablony.

Tvorba odkazů a zvětšení obrázků (Lightbox)

• Klasický odkaz: Označte text (např. „kontaktujte nás“), klikněte na ikonu řetězu a vložte adresu. Text odkazu by měl vždy jasně říkat, kam uživatel přejde (nepoužívejte „klikněte zde“). Pro interní prolinkování stačí vložit adresu za lomítkem.
  
• Zvětšený náhled (Lightbox): Pokud do textu vložíte menší obrázek a uděláte z něj odkaz, který směřuje na ten samý obrázek v plné velikosti. Do stylu v odkazu vložte styl "Náhled obrázku". Zákazníkovi se pak fotka po kliknutí elegantně zvětší přes celou obrazovku.

Práce s obrázky a soubory

• Úprava rozměrů předem: Nikdy nevkládejte obří neupravené fotky (např. v 4K rozlišení) přímo z telefonu. Před nahráním obrázek v počítači zmenšete (šířka 800 px až 1200 px bohatě stačí). Velké soubory zásadně zpomalují web a škodí SEO.
• Rychlé vložení (Drag & Drop): Obrázek stačí jednoduše zkopírovat nebo myší přetáhnout ze složky v počítači přímo do okna editoru na požadované místo.
• Správce souborů: Přes ikonu manažeru můžete na e-shop nahrávat nejen fotky, ale i dokumenty (např. návody či certifikáty v PDF) a v textu na ně vytvořit odkaz ke stažení.

☝️ Více podrobností jak pracovat s obrázky najdete v manuálu Úprava a vkládání obrázků

Tvorba responzivního Gridu (sloupce vedle sebe)

Pro text vedle obrázku nebo dva bloky vedle sebe nepoužívejte tabulky (neumí se přizpůsobit mobilu). Použijte funkci Grid:

1. Klikněte v editoru na tlačítko Grid.
2. Rozlišení nechte nastavené na Medium >= 768px (zajistí sloupce na PC a poskládání pod sebe na mobilu).
3. V kolonce Grid zvolte počet sloupců a jejich poměr (např. 2 sloupce 1:1).
4. Zaškrtněte Přidat mezeru, aby texty nebyly nalepené na sobě, a potvrďte. Do vytvořených sloupců můžete ihned psát nebo vkládat obrázky.