Page Builder – Úplný průvodce
Vítejte v dokumentaci Page Builderu pro Merzio. Tato příručka vám pomůže pochopit a ovládat náš vizuální editor bloků, pomocí kterého můžete vytvářet a upravovat stránky vašeho e-commerce obchodu bez potřeby programování. Page Builder je intuitivní drag-and-drop editor, který vám umožňuje pracovat s 28 různými typy bloků a vytvářet profesionálně vypadající stránky rychle a jednoduše.
1. Princip fungování Page Builderu
Page Builder je block-based drag-and-drop editor, který vám umožňuje vizuálně vytvářet obsah stránek. Funguje na základě principu tažení bloků na plátno, kde můžete kdykoliv změnit jejich pořadí, upravit jejich nastavení a vidět změny v reálném čase.
Jak se dostat do Builderu
Cesta: Admin > Obsah > Stránky
Existují dva způsoby, jak se dostat do Page Builderu:
- Nová stránka: Pokud vytváříte novou stránku, klikněte na tlačítko "Vytvořit a otevřít editor". Systém vás automaticky přesměruje do Builderu.
- Existující stránka: Pokud upravujete existující stránku, klikněte na ikonku editoru nebo na tlačítko "Otevřít editor". V adresním řádku uvidíte URL ve tvaru
/admin/pages/{id}/builder.
2. Rozhraní Page Builderu
Rozhraní Builderu je rozděleno do čtyř hlavních částí:
Horní panel (Top Toolbar)
Horní panel obsahuje všechny hlavní akce a nástroje:
- Uložit šablonu stránky — Uloží celé rozložení stránky jako opakovatelnou šablonu
- Použít šablonu stránky — Aplikuje dříve uloženou šablonu stránky
- Vložit šablonu sekce — Vloží uloženou šablonu sekce na pozici na plátně
- Obchod (Store preview) — Náhled stránky v obchodě
- Skrýt šablony — Skryje panel se šablonami bloků
- Náhled (Preview) — Otevře náhled stránky
- Mobil/Tablet přepínače — Změní viewport na mobilní nebo tabletový (pro responzivní testování)
- Nastavení (gear ikona) — Otevře nastavení stránky
- Uložit — Uloží všechny změny na stránce
Levý panel – Šablony bloků
Levý panel zobrazuje seznam všech dostupných typů bloků. Můžete:
- Prohledávat bloky — Použijte vyhledávací pole pro rychlé nalezení specifického typu bloku
- Prohlížet bloky — Posúvejte se seznamem dostupných bloků
- Táhnout bloky — Uchopte libovolný blok a táhněte ho na plátno
Střední panel – Plátno (Canvas)
Střední panel je vaše pracovní plátno, kde se vytváří obsah stránky. Všechny bloky jsou viditelné s:
- Obrysy bloků — Jasně viditelným ohraničením každého bloku
- Ovládacími prvky — Tlačítky pro management bloků (viz část 3)
- Živým náhledem — Reálným náhledem, jak bude stránka vypadat
Pravý panel – Nastavení bloku
Když kliknete na libovolný blok na plátně, objeví se pravý panel s názvem "Upravit blok". Tento panel zobrazuje všechna dostupná nastavení pro vybraný blok, jako jsou:
- Textová pole — Pro názvy, popisy a další obsah
- Barevné výběry — Pro změnu barev
- Volby rozložení — Pro změnu struktury bloku
- Media nástroje — Pro upload obrázků a videí
3. Ovládání bloků
Každý blok na plátně má svůj vlastní set ovládacích prvků. Tyto prvky vám umožňují řídit a upravovat bloky bez potřeby otevírat pravý panel.
Prvky ovládání bloku
U každého bloku na plátně najdete:
- Číslo a název bloku — Například "#1 Hero sekce" nebo "#5 Karta"
- Šipky nahoru/dolů — Přesunou blok o jeden řádek výše nebo níže
- Duplikovat — Vytvoří kopii daného bloku se stejnými nastaveními
- Uložit šablonu sekce — Uloží jednotlivý blok jako opakovatelnou šablonu
- Smazat (ikona koše) — Odstraní blok ze stránky
- Rozbalení/Sbalení — Skryje nebo zobrazí obsah bloku na plátně
4. Dostupné typy bloků
Page Builder nabízí 28 různých typů bloků, z nichž každý je určen pro konkrétní účel. Níže najdete kompletní tabulku a podrobné popisy.
Přehled všech bloků
| Název (CS) | Anglický název | Popis |
|---|---|---|
| Akordeon | Accordion | Rozbalovací sekce s titulkem, podtitulkem a formátovaným obsahem |
| Karta výhody | Benefit Card | DOPORUČENO — Karta s ikonou/obrázkem, titulkem a podtitulkem |
| Blog mřížka | Blog Grid | Mřížka nebo karusel příspěvků z blogu |
| Tlačítko | Button | CTA tlačítko s přizpůsobitelnými styly |
| Karta | Card | Univerzální karta s obsahem, styly a možnostmi rozložení |
| Kontaktní karta | Contact Card | Karta s ikonou/obrázkem, titulkem a kontaktními údaji |
| Kontaktní formulář | Contact Form | Formulář s přizpůsobitelnými poli |
| Kontaktní lišta | Contact Bar | Lišta se 4 kontaktními způsoby, ikonami a odkazy |
| Features Section | Features Section | PROBLEMATICKÝ — JSON pole způsobuje chyby vykreslení |
| Nadpis | Heading | Nadpis s možnostmi velikosti, barvy a zarovnání |
| Hero sekce | Hero Section | Hero banner s možnostmi karuselu/bento, videem a plánem zveřejnění |
| Mřížka produktů | Product Grid | Mřížka produktů s přizpůsobitelným počtem sloupců |
| Mřížka kategorií | Category Grid | Mřížka nebo karusel kategorií |
| Mřížka bannerů | Banner Grid | Horizontální karusel propagačních karet |
| Časté otázky | FAQ | Rozbalovací sekce otázek a odpovědí |
| Sekce reference | Testimonials | Recenze zákazníků načtené ze schválených recenzí |
| Blok formátovaného obsahu | Rich Content Block | WYSIWYG editor s úplným formátovacím panelem |
| Obrázek | Image | Jednoduchý blok s obrázkem |
| Banner s produktem | Product Banner | Banner s textem vlevo a kartou produktu vpravo |
| Newsletter | Newsletter | Formulář pro přihlášení k odběru newsletteru |
| Sekce rozložení | Layout Section | Kontejner pro vnořené bloky s možnostmi rozložení |
| Vložená mapa | Embedded Map | Vložená mapa Google Maps nebo vlastní iframe |
| Doporučovač produktů | Product Recommender | Blok s doporučenými produkty |
| Záložky | Tabs | Obsah v záložkách, každá záložka s formátovaným textem |
| Text | Text | Blok s formátovaným textem |
| UPS statistiky | USP Statistics | Karty se statistikami (objednávky, partneři, zákazníci, zkušenosti) |
| Oddělovač | Divider | Horizontální linie oddělující sekce |
| Ke stažení | Download | Blok pro upload a stažení souborů |
| Fakturační údaje / Formulář | Billing Info / Form | Dvousloupcové rozložení s fakturačními údaji a formulářem |
5. Podrobná nastavení klíčových bloků
Hero sekce
Hero sekce je ideální pro vytvoření poutavého úvodu stránky s obrázkem, textem a možnostmi rozložení.
Rozložení
Vyberte si ze tří možností:
- Single Hero — Jeden velký banner
- Carousel/Slider — Posuvné bannery
- Bento Grid — Mřížka bannerů v různých velikostech
Název (Title)
- Název — Hlavní text (vícejazyčný)
- Zobrazit název — Přepínač pro skrytí/zobrazení
- Barva názvu — Barevný výběr (hex kód)
- Responzivní velikosti — Velikosti textu pro různá zařízení (text-xs až text-4xl)
Popis (Description)
- Popis — Podtitul (vícejazyčný)
- Barva popisu — Barevný výběr
Barvy
- Barva titulku — Barva hlavního textu
- Barva popisu — Barva podtitulku
- Fallback barva textu — Bílá nebo černá (pro případy, kdy obrázek není viditelný)
Maximální šířka obsahu
Vyberte si z následujících možností:
- max-w-sm — Malá šířka
- max-w-md — Střední šířka
- max-w-lg — Velká šířka
- max-w-xl až max-w-7xl — Velmi velké šířky
- Plná šířka — Bez omezení šířky
Zarovnání
- Horizontální — Vlevo, uprostřed nebo vpravo
- Vertikální — Nahoře, uprostřed nebo dole
Obrázky na pozadí
Můžete nastavit oddělené obrázky pro:
- Desktop — Obrázek pro počítač
- Mobile — Obrázek pro mobil
- Tablet — Obrázek pro tablet
Pro každý obrázek můžete nastavit:
- Object Fit — cover, contain, fill, nebo jiné možnosti
- Zaoblení obrázku — Zaoblené rohy (v pixelech)
- Zoom animace — Animace při přejezdu myší
Plán zveřejnění
- Datum ukončení — Stránka přestane být viditelná po tomto datu
- Responzivní padding — Vnitřní prostor pro různá zařízení
Blok formátovaného obsahu (Rich Content Block / WYSIWYG)
Blok formátovaného obsahu je nejflexibilnější nástroj pro přidávání čehokoliv — od textů a obrázků až po videa a tabulky.
Název
- Název — Název sekce (vícejazyčný)
WYSIWYG editor
Klikněte na textovou oblast a objeví se formátovací panel s následujícími nástroji:
- Textové formáty — Tučné, kurzíva, podtržení, přeškrtnutí, dolní/horní index
- Font — Výběr rodiny písma a velikosti
- Formáty — Nadpisy (H1 až H6), normální text
- Barvy — Barva textu a zvýraznění
- Zarovnání — Vlevo, uprostřed, vpravo, do bloku
- Seznamy — Odrážkové a číslované seznamy
- Odkazy — Vložení hypertextů
- Obrázky — Vložení obrázků
- Videa — Vložení videí
- Tabulky — Vytvoření tabulek
- Fullscreen — Režim na celou obrazovku
- Kódové bloky — Vložení zdrojového kódu
- Zdrojový kód — Níže uvedené informace
Zdrojový kód (Source Code Mode)
Pro pokročilé uživatele je dostupná možnost "Zdrojový kód" (ikona </>). V tomto režimu můžete:
- Upravovat raw HTML — Přímo vložit nebo upravovat HTML kód
- Zachovat formátování — HTML kód se automaticky přeloží na formátovaný obsah
TIP
Zdrojový kód je nejspolehlivější možností pro přidávání strukturovaného obsahu a je ideální, pokud máte komplexní HTML obsah.
Responzivní padding/margin
Můžete nastavit vnitřní a vnější prostor pro jednotlivá zařízení:
- Desktop — Padding pro počítač
- Mobile — Padding pro mobil
- Tablet — Padding pro tablet
Karta výhody (Benefit Card) – DOPORUČENÝ PŘÍSTUP
Karta výhody je ideální pro zobrazení hodnot, výhod produktu nebo vlastností služby. Každá karta obsahuje ikonu/obrázek, titulek a popis.
Doporučení
Použijte jeden blok Karta výhody na jednu hodnotu nebo funkcionalitu. Toto je nejbezpečnější a nejčistší přístup.
Konfigurace
Ikona nebo obrázek
- Pokud je to ikona, zadejte formát:
heroicons:icon-name(napříkladheroicons:star) - Pokud je to obrázek, zadejte URL na obrázek
- Formáty obsahují
:— ikonám stačí zadat název s prefixem
- Pokud je to ikona, zadejte formát:
Velikost ikony/obrázku — Velikost v pixelech (výchozí hodnota: 48px)
Barva ikony — Hex kód (například
#B59A7D)Zarovnání ikony/obrázku — Vlevo, uprostřed nebo vpravo
Titulek (Headline) — Název karty s výběrem štítku (H1 až H6)
Podtitul (Subtitle) — Popis obsahu karty
Příklad použití
Pokud chcete zobrazit tři hlavní hodnoty vaší společnosti:
- Vytvořit tři oddělené bloky Karta výhody
- Pro každou kartu:
- Nastavit ikonu (např.
heroicons:heart) - Zadat barvu ikony
- Napsat titulek a popis
- Nastavit ikonu (např.
- Uložit stránku
Features Section – VAROVÁNÍ
DŮLEŽITÉ UPOZORNĚNÍ
Features Section blok má problém s JSON polem "Funkcionalita":
- Když vložíte platné JSON pole, systém zobrazí desítky prázdných "Zjistěte více" karet namísto očekávaných položek
- I když zadáte prázdné pole
[], stále se zobrazí 2 výchozí náhradní karty - To způsobuje závažnou vizuální chybu na frontendu
- Stránka se může zdát rozbitá nebo neúplná
ŘEŠENÍ: Nikdy nepoužívejte Features Section blok. Namísto toho:
- Použijte Karta výhody bloky (doporučeno výše)
- Nebo použijte Blok formátovaného obsahu s vlastním HTML
6. Vytvoření stránky – Krok za krokem
Následující průvodce vám ukáže, jak vytvořit novou stránku od začátku.
Krok 1: Otevření správy stránek
Navigujte na Admin > Obsah > Stránky.
Na stránce najdete seznam existujících stránek a tlačítko pro vytvoření nové stránky.
Krok 2: Vytvoření nové stránky
Klikněte na tlačítko "Nová stránka" (nebo podobné). Budete přesměrováni na formulář /admin/pages/create.
Krok 3: Vyplnění základních údajů
Vyplňte následující pole:
- Nadpis — Název stránky (viditelný uživatelům)
- Šablona — Vyberte šablonu (například "Prázdná stránka" nebo "Obchod")
- Uložená šablona rozložení — Volitelně: výběrem dříve uložené šablony se načtou všechny bloky (volitelné)
Krok 4: Vyplnění SEO údajů
V sekci SEO vyplňte:
- Meta název — Název stránky ve výsledcích vyhledávání Google
- Meta klíčová slova — Klíčová slova pro SEO (oddělená čárkami)
- Meta popis — Popis stránky ve výsledcích Google
Krok 5: Publikování
Pod Nastavení stránky zaškrtnutím políčka "Publikováno":
- Zkontrolujte, zda je stránka "Publikováno" (označeno checkboxem)
- Volitelně nastavte datum publikování
Krok 6: Otevření editoru
Klikněte na tlačítko "Vytvořit a otevřít editor". Systém vytvoří stránku a automaticky vás přesměruje do Page Builderu.
Krok 7: Vyhledávání bloků
V levém panelu najdete seznam všech dostupných bloků. Můžete:
- Prohlížet — Posúvejte se seznamem
- Hledat — Zadejte název bloku do vyhledávacího pole (například "Hero" pro nalezení Hero sekce)
Krok 8: Tažení bloků na plátno
Uchopte blok z levého panelu a táhněte ho na střední panel (plátno). Blok se objeví na místě, kde ho pustíte.
Krok 9: Úprava bloku
Když kliknete na blok na plátně:
- Objeví se pravý panel s názvem "Upravit blok"
- Vyplňte všechna potřebná pole (názvy, barvy, obrázky, atd.)
- Změny se automaticky aktualizují na plátně
Krok 10: Použití WYSIWYG editoru
Pokud blok obsahuje textový obsah (například "Blok formátovaného obsahu"):
- Klikněte do textové oblasti — Objeví se formátovací panel
- Napište nebo formátujte text — Používejte dostupné nástroje
- Vložte obrázky/videa — Klikněte na příslušnou ikonu v panelu
- Zdrojový kód — Pokud potřebujete HTML, klikněte na ikonu
</>a zadejte kód přímo
Krok 11: Uložení stránky
Kdykoliv můžete kliknout na tlačítko "Uložit" v horním panelu. Všechny změny budou uloženy.
Krok 12: Náhled stránky
Klikněte na tlačítko "Náhled" v horním panelu pro otevření náhledu stránky, jak bude vypadat v obchodě.
Krok 13: Testování responzivity
Použijte tlačítka "Mobil" a "Tablet" v horním panelu pro testování stránky na různých zařízeních.
7. Šablony (Templates)
Page Builder umožňuje ukládání a opakované použití šablon. Šablony vám pomohou šetřit čas při tvorbě podobných stránek.
Uložit šablonu stránky
Když máte hotovou stránku s oblíbeným rozložením:
- Klikněte na tlačítko "Uložit šablonu stránky" v horním panelu
- Zadejte název šablony (například "Produktový katalog")
- Klikněte "Uložit"
Šablona je nyní dostupná pro budoucí stránky.
Použít šablonu stránky
Když vytváříte novou stránku a chcete použít uloženou šablonu:
- V kroku 3 vytváření stránky (pole "Uložená šablona rozložení") vyberte vaši šablonu
- Všechny bloky a nastavení ze šablony budou automaticky načteny
- Můžete je dále upravovat podle potřeby
Vložit šablonu sekce
Pokud máte uloženou šablonu jednotlivého bloku (sekce):
- Klikněte na tlačítko "Vložit šablonu sekce" v horním panelu
- Vyberte šablonu sekce z nabídky
- Šablona se vloží na aktuální pozici na plátně
Uložit šablonu sekce (z jednotlivého bloku)
Když máte na plátně blok, který se vám líbí a chcete ho používat na jiných stránkách:
- Klikněte na tlačítko "Uložit šablonu sekce" u daného bloku (v ovládacích prvcích bloku)
- Zadejte název šablony
- Šablona je nyní dostupná pro vložení na jiných stránkách
8. Správa stránek (Pages)
Správa stránek vám umožňuje řídit všechny aspekty vašich stránek bez potřeby Page Builderu.
Cesta: Admin > Obsah > Stránky
Funkcionalita stránek
Merzio Page Builder podporuje:
- Přeložitelný název a obsah — Stránky mohou být ve více jazycích
- Page Builder bloky — Všechny bloky a nastavení vytvořená v Builderu
- SEO pole — Meta název, klíčová slova a popis
- Stav publikování — Publikováno nebo jako koncept
- Hierarchie stránek — Rodičovská stránka (pro vnořené stránky)
- Domovská stránka — Označení jako domovská stránka
- Navigace a patička — Zobrazení v navigaci a patičce
- Ochrana heslem — Možnosti ochrany stránky heslem
- Vlastní CSS/JS — Vlastní styly a skripty pro konkrétní stránku
- Přesměrování — Přesměrování na jinou URL
- Doporučovací bloky — Konfigurace doporučených produktů
9. Knihovna médií (Media Library)
Knihovna médií je dostupná prostřednictvím tlačítka Mediální knihovna nebo Vybrat obrázek v různých formulářích a editorech (blog, FAQ, produkty atd.).
Jak přistupovat k mediální knihovně
- Klikněte na tlačítko Mediální knihovna nebo Vybrat obrázek v libovolném formuláři
- Otevře se modální okno s vaší mediální knihovnou
- Prohlížejte existující obrázky nebo nahrajte nové
Nahrávání nových médií
- V knihovně klikněte na tlačítko Nahrát nebo táhněte soubory do oblasti nahrávací plochy
- Vyberte obrázek z vašeho počítače
- Obrázek se automaticky nahraje a bude dostupný pro výběr
- Klikněte na obrázek v knihovně pro výběr a potvrzení
Správa médií
- Prohlížejte všechny nahrané obrázky v knihovně
- Obrázky můžete vyhledávat pomocí vyhledávacího pole
- Smazané obrázky jsou odstraněny i z mediální knihovny
10. Blog
Blog umožňuje správu příspěvků a jejich zobrazování na stránkách.
Cesta: Admin > Obsah > Blog (/admin/blogs)
Seznam příspěvků
Tabulka všech příspěvků blogu s následujícími sloupci:
- Nadpis — Název příspěvku
- Kategorie — Přiřazená kategorie
- Autor — Osoba, která příspěvek vytvořila
- Datum — Datum publikování
- Stav — Publikovaný / Nepublikovaný / Doporučený
Akce pro příspěvky
- Zrušit publikování — Skryje příspěvek z veřejnosti
- Doporučit — Označí příspěvek jako doporučený
- Zobrazit — Otevře příspěvek na veřejné stránce
- Upravit — Otevře editor příspěvku
- Smazat — Trvale odstraní příspěvek
Vytváření nového příspěvku
Cesta: /admin/blogs/create
Formulář pro vytváření příspěvků je rozdělen do 3 záložek:
Záložka: Základní
- Výběr jazyka — Přepínač jazyků (příspěvek je dostupný v 10 jazycích)
- Nadpis — Povinné pole, max. 200 znaků
- Obsah — WYSIWYG editor s plnou sadou nástrojů (tučné, kurzíva, nadpisy H1–H6, seznamy, odkazy, obrázky, videa, tabulky, zdrojový kód)
- Výňatek — Krátký popis (max. 500 znaků) zobrazovaný v seznamech
- Slug — URL identifikátor, automaticky generovaný z nadpisu
- Hlavní obrázek — Doporučený formát: JPG, PNG, doporučená velikost: 1200×600 px
- Autor — Vyhledávací pole s automatickým doplňováním
- Kategorie — Přiřazení do více kategorií
- Tagy — Klíčová slova oddělená čárkou nebo Enter
- Publikováno — Zaškrtnutí pro zveřejnění
- Doporučeno — Označení jako doporučeného příspěvku
Záložka: SEO
- Meta název (per jazyk) — 50–60 znaků (doporučeno)
- Meta popis (per jazyk) — 150–160 znaků (doporučeno)
- Meta klíčová slova — Oddělená čárkou
Záložka: Lokalizace
Zaškrtávací políčka pro všech 10 jazyků — vyberte, ve kterých jazycích bude příspěvek viditelný.
Kategorie blogu
Cesta: /admin/blog-categories
Správa kategorií, do kterých organizujete příspěvky. Tabulka zobrazuje kategorie s možnostmi Upravit a Deaktivovat. Tlačítko Vytvořit kategorii otevře formulář pro zadání názvu nové kategorie.
Tagy blogu
Cesta: /admin/blog-tags
Prohlížejte všechny tagy a jejich frekvenci použití. Možnost editace, mazání a vytvoření nových tagů.
Integrace s Page Builderem
V Page Builderu můžete použít bloky:
- Blog mřížka — Zobrazení příspěvků v mřížce nebo karuselu
- Sekce reference — Pokud chcete zobrazit doporučené příspěvky
11. FAQ (Časté otázky)
FAQ modul umožňuje vytvářet a spravovat často kladené otázky.
Cesta: Admin > Obsah > FAQ (/admin/faqs)
Seznam FAQ
Tabulka všech položek FAQ s následujícími sloupci:
- Otázka — Text otázky
- Kategorie — Přiřazené kategorie
- Stav — Publikovaná / Nepublikovaná
- Akce: Upravit, Smazat
Vytváření nové FAQ
Cesta: /admin/faqs/create
- Výběr jazyka — Přepínač jazyků (dostupné v 10 jazycích)
- Otázka (per jazyk) — Povinné pole, max. 300 znaků
- Odpověď (per jazyk) — WYSIWYG editor s plnou sadou nástrojů
- Obrázek FAQ — Volitelný obrázek k odpovědi
- Pořadí řazení — Číselné pole (nižší číslo = vyšší pozice)
- Kategorie — Přiřazení do více kategorií
- Publikováno — Zaškrtnutí pro zveřejnění
- Dostupné jazyky — Zaškrtávací políčka pro 10 jazyků
Kategorie FAQ
Cesta: /admin/faq-categories
Správa kategorií FAQ položek. Tabulka kategorií s možnostmi úpravy a mazání. Tlačítko pro vytváření nové kategorie.
Integrace s Page Builderem
V Page Builderu můžete použít blok:
- Časté otázky (FAQ) — Zobrazení otázek a odpovědí jako rozbalovací sekce
11. Vyskakovací okna (Popupy)
Popupy umožňují zobrazování upozornění, nabídek nebo dalších informací uživatelům.
Cesta: Admin > Obsah > Popupy
Funkcionalita
- Vytvoření popupů — Návrh a konfigurace popupů
- Triggery — Nastavení, kdy se popup zobrazí (čas, posúvání, klik, atd.)
- Obsah — Page Builder bloky mohou být použity v popupu
- Styly — Přizpůsobení vzhledu popupu
12. Oznamovací lišta (Notification Bar)
Oznamovací lišta je stavový řádek na vrchu nebo spodku stránky s důležitými zprávami.
Cesta: Admin > Obsah > Oznamovací lišta
Funkcionalita
- Obsah — Zpráva, která se zobrazuje v liště
- Styly — Barva pozadí, textu a další CSS vlastnosti
- Viditelnost — Nastavení, na kterých stránkách se lišta zobrazuje
- Pozice — Nahoře nebo dole na stránce
13. Bannery
Bannery jsou propagační prvky, které můžete připojit k produktům, kategoriím nebo stránkám.
Cesta: Admin > Obsah > Bannery
Funkcionalita
- Vytvoření bannerů — Design propagačních bannerů
- Umístění — Přiřazení banneru k produktům/kategoriím
- Plánování — Nastavení dat viditelnosti
- Styly — Přizpůsobení vzhledu
Integrace s Page Builderem
V Page Builderu můžete použít blok:
- Mřížka bannerů — Zobrazení více bannerů v horizontálním karuselu
14. Navigace (Menu)
Navigace (menu) je hlavní navigační prvek vašeho obchodu.
Cesta: Admin > Obsah > Navigace (/admin/menu)
Dostupné pozice menu
V rozhraní jsou dostupné 4 menu pozice:
- Záhlaví — Menu v záhlaví obchodu
- Horní menu (Dvojité) — Dodatečné menu v horní části
- Patička — Menu v patičce
- Menu kategorií v bočním panelu — Menu kategorií na straně
Typy menu položek
Při vytváření nebo editaci menu položky lze vybrat z 15 typů:
Vlastní odkaz, Stránka, Seznam produktů, Kategorie, Blog, Kategorie blogu, FAQ, Externí odkaz, Nadřazené menu, Mega Menu, Kategorie menu, Menu nadřazené kategorie, Kategorie produktů (mřížka), Zobrazit více, Služby.
Formulář pro přidání menu položky
- Název — Název položky (dostupný v 10 jazycích)
- Typ — Výběr typu menu položky
- Poloha — Umístění položky v menu
- Nadřazené menu — Přiřazení do submenu
- URL — Vlastní URL (pro vybrané typy)
- Aktivní — Zaškrtnutí pro aktivování položky
- Otevřít v novém okně — Otevření odkazu v nové záložce
Menu položky lze libovolně uspořádat a přizpůsobit.
15. Patička (Footer)
Patička je spodní sekce stránky s informacemi a odkazy.
Cesta: Admin > Obsah > Patička (/admin/footer-builder)
Vizuální editor patičky je drag-and-drop nástroj pro přizpůsobení patičky s podporou různých typů bloků a rozložení.
Tři záložky
Záložka: Bloky
Katalog dostupných bloků organizovaných do kategorií (Navigace, Loga, Sociální sítě, Formuláře, Obsah, Značka, Utility, Rozložení).
Dostupných 15 typů bloků:
Sloupec menu, Jednotlivý odkaz, Loga plateb, Loga dopravců, Vlastní loga, Sociální odkazy, Newsletter, Textový blok, Logo patičky, Přepínač jazyka, Mezera, Oddělovač, Kontaktní informace, Instagram Feed, Sloupce menu.
Záložka: Nastavení
Globální nastavení patičky: barvy a styl, typografie, rozměry a odsazení.
Záložka: Rozložení
Konfigurace rozložení patičky:
- Přidat blok — Vložení nového bloku
- Přidat řádek — Vložení nového řádku
- Bloky lze libovolně uspořádat pomocí drag-and-drop
Návrhy zařízení
V horní části editoru jsou dostupné návrhy pro: Mobil, Tablet, Desktop.
16. Přesměrování URL (Redirects)
Přesměrování umožňují přesměrovat staré URL na nové stránky.
Cesta: Admin > Obsah > Přesměrování
Konfigurace
- Původní URL — Stará adresa (například
/stara-stranka) - Nová URL — Nová adresa (například
/nova-stranka) - Typ přesměrování — 301 (trvalé) nebo 302 (dočasné)
Příklad
Když přenášíte obsah ze staré stránky na novou, vytvořte přesměrování:
- Navigujte na Admin > Obsah > Přesměrování
- Klikněte "Nové přesměrování"
- Zadejte staré a nové URL
- Vyberte typ přesměrování (obvykle 301)
- Klikněte "Uložit"
17. Doporučovací bloky (Recommendation Blocks)
Doporučovací bloky zobrazují personalizované produkty na základě chování uživatele.
Cesta: Admin > Obsah > Doporučené produkty
Funkcionalita
- Pravidla doporučení — Logika pro určení, které produkty se mají doporučit
- Styly — Přizpůsobení vzhledu doporučení
Integrace s Page Builderem
V Page Builderu můžete použít blok:
- Doporučovač produktů — Dynamicky zobrazené personalizované produkty
18. Vizuální nastavení
Cesta: Admin > Nastavení > Vizuální nastavení (/admin/settings/visual)
Vizuální nastavení jsou místem, kde konfigurujete globální vzhled vaší e-commerce platformy. Tato sekce je rozdělena do 9 záložek:
- Značka a barvy — Primární a sekundární barvy, barvy tlačítek
- Typografie — Výběr fontů a velikostí textu
- Záhlaví a navigace — Nastavení záhlaví a navigace
- Vyhledávání — Konfigurace vyhledávacího pole
- Tlačítka a formuláře — Styl tlačítek a formulářů
- Admin — Nastavení admin panelu
- Logo a favicon — Nahrávání loga a favicony
- Mobilní menu — Konfigurace menu na mobilních zařízeních
- Boční panel kategorií (desktop) — Nastavení bočního panelu kategorií
Záložka: Značka a barvy
Tato záložka obsahuje následující prvky pro konfiguraci:
- Primární barvy — Primární barva obchodu s color pickerem a hex inputem, včetně hover stavu
- Sekundární barvy — Sekundární barvy s color pickerem a hex inputem
- Tlačítko Přidat do košíku — Barva tlačítka pro přidání do košíku
- Stav úspěchu — Barvy pro úspěšné stavy
- Barvy stavů — Barvy pro různé stavy (upozornění, chyba atd.)
- Barvy textu — Primární a sekundární barvy textu
- Barvy pozadí — Barvy pozadí pro různé sekce
Každá barva má color picker (vizuální výběr) a hex input (manuální zadání hex kódu).
Akční tlačítka: OBNOVIT VÝCHOZÍ a ULOŽIT ZMĚNY.
19. Správa témat
Cesta: Admin > Nastavení > Správa témat (/admin/settings/themes)
Správa témat umožňuje výběr a konfiguraci předvolených témat vzhledu vašeho obchodu.
Dostupná předvolená témata (5 témat)
- Moderní obchod — Moderní a minimalistický design
- Klasický obchod — Tradiční a klasický vzhled
- Minimální — Minimalistický a čistý design
- Butik — Luxusní a elegantní styl
- Kompaktní — Kompaktní a úsporný design
Aktivace tématu
Pro každé téma je viditelný status:
- Aktuální téma — Badge označující aktuálně aktivní téma
- Možnost změny na jiné téma jedním kliknutím
Další tipy a triky
Jak pracovat s responzivitou
- Klikněte na tlačítka "Mobil" nebo "Tablet" v horním panelu
- Upravte bloky tak, aby vypadaly dobře na těchto zařízeních
- Page Builder automaticky uloží responzivní nastavení
Jak skrýt bloky podle zařízení
Některé bloky mají možnost "Skrýt na..." pro konkrétní zařízení:
- Klikněte na blok
- V pravém panelu najděte položku "Viditelnost" nebo "Skrýt na"
- Vyberte zařízení, na kterých se blok nemá zobrazovat
Jak použít vlastní CSS
- V horním panelu klikněte na "Nastavení" (gear ikona)
- Najděte pole "Vlastní CSS"
- Zadejte CSS kód
- Klikněte "Uložit"
Jak přidat vlastní JavaScript
- V horním panelu klikněte na "Nastavení" (gear ikona)
- Najděte pole "Vlastní JavaScript"
- Zadejte kód
- Klikněte "Uložit"
Jak použít vícejazyčný obsah
Pokud váš obchod podporuje více jazyků:
- V textových polích si všimněte "SK", "EN", atd.
- Klikněte na ikonku jazyka
- Zadejte obsah v tomto jazyce
- Proces zopakujte pro každý jazyk
Řešení problémů
Blok se nezobrazuje správně
- Zkontrolujte nastavení — Přejděte do editoru bloku a zkontrolujte všechna pole
- Smažte cache — Obnovte stránku (Ctrl+F5 nebo Cmd+Shift+R)
- Zkuste jiný blok — Pokud je blok problematický, zkuste alternativu
Features Section ukazuje prázdné karty
- PROBLÉM: Toto je známá chyba Features Section bloku
- ŘEŠENÍ: Používejte Karta výhody bloky namísto toho
Změny se neukládají
- Klikněte "Uložit" — Ujistěte se, že jste klikli na tlačítko Uložit v horním panelu
- Zkontrolujte chyby — Pokud se objeví chybová zpráva, přečtěte si ji a opravte problém
- Zkuste obnovu — Obnovte stránku a zkuste znovu
Stránka se zobrazuje jinak na mobilním zařízení
- Testujte na mobilu — Klikněte na tlačítko "Mobil" a zkontrolujte náhled
- Nastavte responzivní padding — Pro Hero sekci a další bloky
- Skryjte zbytečné bloky — Použijte možnost "Skrýt na mobilu" pro nepoužívané prvky