Page Builder – Úplný sprievodca
Vitajte v dokumentácii Page Buildera pre Merzio. Táto príručka vám pomôže pochopiť a ovládať náš vizuálny editor blokov, pomocou ktorého môžete vytvárať a upravovať stránky vášho e-commerce obchodu bez potreby programovania. Page Builder je intuitívny drag-and-drop editor, ktorý vám umožňuje pracovať s 28 rôznymi typmi blokov a vytvárať profesionálne vyzerajúce stránky rýchlo a jednoducho.
1. Princíp fungovania Page Buildera
Page Builder je block-based drag-and-drop editor, ktorý vám umožňuje vizuálne vytvárať obsah stránok. Funguje na základe princípu ťahania blokov na plátno, kde môžete kedykoľvek zmeniť ich poradie, upraviť ich nastavenia a vidieť zmeny v reálnom čase.
Ako sa dostať do Buildera
Cesta: Admin > Obsah > Stránky
Existujú dva spôsoby, ako sa dostať do Page Buildera:
- Nová stránka: Ak vytvárate novú stránku, kliknite na tlačidlo "Vytvoriť a otvoriť editor". Systém vás automaticky presmeruje do Buildera.
- Existujúca stránka: Ak upravujete existujúcu stránku, kliknite na ikonku editora alebo na tlačidlo "Otvoriť editor". V adresnom riadku uvidíte URL v tvare
/admin/pages/{id}/builder.
2. Rozhranie Page Buildera
Rozhranie Buildera je rozdelené do štyroch hlavných častí:
Horný panel (Top Toolbar)
Horný panel obsahuje všetky hlavné akcie a nástroje:
- Uložiť šablónu stránky – Uloží celé rozloženie stránky ako opakovateľnú šablónu
- Použiť šablónu stránky – Aplikuje predtým uloženú šablónu stránky
- Vložiť šablónu sekcie – Vloží uloženú šablónu sekcie na pozíciu na plátne
- Obchod (Store preview) – Náhľad stránky v obchode
- Skryť šablóny – Skryje panel so šablónami blokov
- Náhľad (Preview) – Otvorí náhľad stránky
- Mobil/Tablet prepínače – Zmení viewport na mobilný alebo tablet (pre responzívne testovanie)
- Nastavenia (gear ikona) – Otvorí nastavenia stránky
- Uložiť – Uloží všetky zmeny na stránke
Ľavý panel – Šablóny blokov
Ľavý panel zobrazuje zoznam všetkých dostupných typov blokov. Môžete:
- Prehľadávať bloky – Použite vyhľadávacie pole na rýchle nájdenie špecifického typu bloku
- Prezerať bloky – Posúvajte sa zoznamom dostupných blokov
- Ťahať bloky – Uchopte ľubovoľný blok a ťahajte ho na plátno
Stredný panel – Plátno (Canvas)
Stredný panel je vaše pracovné plátno, kde sa vytvára obsah stránky. Všetky bloky sú viditeľné s:
- Obrysmi blokov – Jasne viditeľným ohraničením každého bloku
- Kontrolnými prvkami – Tlačidlami pre manažment blokov (pozri časť 3)
- Živým náhľadom – Reálnym náhľadom, ako bude stránka vyzerať
Pravý panel – Nastavenia bloku
Keď kliknete na ľubovoľný blok na plátne, objaví sa pravý panel s názvom "Upraviť blok". Tento panel zobrazuje všetky dostupné nastavenia pre vybraný blok, ako sú:
- Textové polia – Pre názvy, popisy a ďalší obsah
- Farebné výbery – Pre zmenu farieb
- Voľby rozloženia – Pre zmenu štruktúry bloku
- Media nástroje – Pre upload obrázkov a videí
3. Ovládanie blokov
Každý blok na plátne má svoj vlastný set kontrolných prvkov. Tieto prvky vám umožňujú riadiť a upravovať bloky bez potreby otvárať pravý panel.
Prvky kontroly bloku
Pri každom bloku na plátne nájdete:
- Číslo a názov bloku – Napríklad "#1 Hero sekcia" alebo "#5 Karta"
- Šipky hore/dole – Presunú blok o jeden riadok vyššie alebo nižšie
- Duplikovať – Vytvorí kópiu daného bloku s rovnakými nastaveniami
- Uložiť šablónu sekcie – Uloží jednotlivý blok ako opakovateľnú šablónu
- Vymazať (ikona koša) – Odstráni blok zo stránky
- Rozbalenie/Zbalenie – Skryje alebo zobrazí obsah bloku na plátne
4. Dostupné typy blokov
Page Builder ponúka 28 rôznych typov blokov, z ktorých každý je určený na konkrétny účel. Nižšie nájdete kompletnú tabuľku a podrobné popisy.
Prehľad všetkých blokov
| Názov (SK) | Anglický názov | Popis |
|---|---|---|
| Akordeón | Accordion | Expandovateľné sekcie s titulkom, podtitulkom a formátovaným obsahom |
| Karta výhody | Benefit Card | ODPORÚČANÉ – Karta s ikonou/obrázkom, titulkom a podtitulkom |
| Blog mriežka | Blog Grid | Mriežka alebo karusel príspevkov z blogu |
| Tlačidlo | Button | CTA tlačidlo s prispôsobiteľnými štýlmi |
| Karta | Card | Univerzálna karta s obsahom, štýlmi a možnosťami rozloženia |
| Kontaktná karta | Contact Card | Karta s ikonou/obrázkom, titulkom a kontaktnými údajmi |
| Kontaktný formulár | Contact Form | Formulár s prispôsobiteľnými poľami |
| Kontaktná lišta | Contact Bar | Lišta so 4 kontaktnými spôsobmi, ikonami a odkazmi |
| Features Section | Features Section | PROBLEMATICKÝ – JSON pole spôsobuje chyby vykreslenia |
| Nadpis | Heading | Nadpis s možnosťami veľkosti, farby a zarovnania |
| Hero sekcia | Hero Section | Hero banner s možnosťami karuseľa/bento, videom a plánom zverejnenia |
| Mriežka produktov | Product Grid | Mriežka produktov s prispôsobiteľným počtom stĺpcov |
| Mriežka kategórií | Category Grid | Mriežka alebo karusel kategórií |
| Mriežka bannerov | Banner Grid | Horizontálny karusel propagačných kariet |
| Časté otázky | FAQ | Expandovateľná sekcia otázok a odpovedí |
| Sekcia referencie | Testimonials | Recenzie zákazníkov načítané z schválených recenzií |
| Blok formátovaného obsahu | Rich Content Block | WYSIWYG editor s úplným formátovacím panelom |
| Obrázok | Image | Jednoduchý blok s obrázkom |
| Banner s produktom | Product Banner | Banner s textom vľavo a kartou produktu vpravo |
| Newsletter | Newsletter | Formulár na prihlásenie sa na newsletter |
| Sekcia rozloženia | Layout Section | Kontejner pre vnorené bloky s možnosťami rozloženia |
| Vložená mapa | Embedded Map | Vložená mapa Google Maps alebo vlastný iframe |
| Odporúčač produktov | Product Recommender | Blok s odporúčaniami produktov |
| Záložky | Tabs | Obsah v záložkách, každá záložka s formátovaným textom |
| Text | Text | Blok s formátovaným textom |
| UPS štatistiky | USP Statistics | Karty so štatistikami (objednávky, partneri, zákazníci, skúsenosti) |
| Oddelovač | Divider | Horizontálna línia oddeľujúca sekcie |
| Na stiahnutie | Download | Blok pre upload a stiahnutie súborov |
| Fakturačné údaje / Formulár | Billing Info / Form | Dvojstĺpcové rozloženie s fakturačnými údajmi a formulárom |
5. Podrobné nastavenia kľúčových blokov
Hero sekcia
Hero sekcia je ideálna na vytvorenie pútavého úvodu stránky s obrázkom, textom a možnosťami rozloženia.
Rozloženie
Vyberte si z troch možností:
- Single Hero – Jeden veľký banner
- Carousel/Slider – Posúvateľné banery
- Bento Grid – Mriežka bannerov v rôznych veľkostiach
Názov (Title)
- Názov – Hlavný text (viacjazykový)
- Zobraziť názov – Prepínač na skrytie/zobrazenie
- Farba názvu – Farebný výber (hex kód)
- Responzívne veľkosti – Veľkosti textu pre rôzne zariadenia (text-xs až text-4xl)
Popis (Description)
- Popis – Podtitul (viacjazykový)
- Farba popisu – Farebný výber
Farby
- Farba títka – Farba hlavného textu
- Farba popisu – Farba podtitulku
- Fallback farba textu – Biela alebo čierna (pre prípady, keď obrázok nie je viditeľný)
Maximálna šírka obsahu
Vyberte si z nasledujúcich možností:
- max-w-sm – Malá šírka
- max-w-md – Stredná šírka
- max-w-lg – Veľká šírka
- max-w-xl až max-w-7xl – Veľmi veľké šírky
- Plná šírka – Bez limitácie šírky
Zarovnanie
- Horizontálne – Vľavo, uprostred alebo vpravo
- Vertikálne – Hore, v strede alebo dole
Obrázky na pozadí
Môžete nastaviť oddelené obrázky pre:
- Desktop – Obrázok pre počítač
- Mobile – Obrázok pre mobil
- Tablet – Obrázok pre tablet
Pre každý obrázok môžete nastaviť:
- Object Fit – cover, contain, fill, alebo iné možnosti
- Zaoblenie obrázka – Zaoblené rohy (v pixeloch)
- Zoom animácia – Animácia pri prejazde
Plán zverejnenia
- Dátum ukončenia – Stránka prestane byť viditeľná po tomto dátume
- Responzívny padding – Vnútorný priestor pre rôzne zariadenia
Blok formátovaného obsahu (Rich Content Block / WYSIWYG)
Blok formátovaného obsahu je najflexibilnejší nástroj na pridávanie čohokoľvek – od textov a obrázkov až po videá a tabuľky.
Názov
- Názov – Názov sekcie (viacjazykový)
WYSIWYG editor
Kliknite na textovú oblasť a objaví sa formátovací panel s nasledujúcimi nástrojmi:
- Textové formáty – Tučné, kurzíva, podčiarknutie, preškrtnutie, dolný/horný index
- Font – Výber rodiny písma a veľkosti
- Formáty – Nadpisy (H1 až H6), normálny text
- Farby – Farba textu a zvýraznenie
- Zarovnanie – Vľavo, uprostred, vpravo, obojstranne
- Zoznamy – Odrážkové a číslované zoznamy
- Odkazy – Vloženie hypertextov
- Obrázky – Vloženie obrázkov
- Videá – Vloženie videí
- Tabuľky – Vytvorenie tabuliek
- Fullscreen – Režim na celú obrazovku
- Kódové bloky – Vloženie zdrojového kódu
- Zdrojový kód – Nižšie uvedené informácie
Zdrojový kód (Source Code Mode)
Pre pokročilých používateľov je dostupná možnosť "Zdrojový kód" (ikona </>). V tomto režime môžete:
- Upravovať raw HTML – Priamo vložiť alebo upravovať HTML kód
- Zachovať formátovanie – HTML kód sa automaticky preloží na formátovaný obsah
TIP
Zdrojový kód je najspoľahlivejšou možnosťou na pridávanie štruktúrovaného obsahu a je ideálny, ak máte komplexný HTML obsah.
Responzívny padding/margin
Môžete nastaviť vnútorný a vonkajší priestor pre jednotlivé zariadenia:
- Desktop – Padding pre počítač
- Mobile – Padding pre mobil
- Tablet – Padding pre tablet
Karta výhody (Benefit Card) – ODPORÚČANÝ PRÍSTUP
Karta výhody je ideálna na zobrazenie hodnôt, výhod produktu alebo vlastností služby. Každá karta obsahuje ikonu/obrázok, titulok a popis.
Odporúčanie
Použite jeden blok Karta výhody na jednu hodnotu alebo funkcionalitu. Toto je najbezpečnejší a najčistejší prístup.
Konfigurácia
Ikona alebo obrázok
- Ak je to ikona, zadajte formát:
heroicons:icon-name(napríkladheroicons:star) - Ak je to obrázok, zadajte URL na obrázok
- Formáty obsahujú
:– ikonom stačí zadať názov s prefixom
- Ak je to ikona, zadajte formát:
Veľkosť ikony/obrázka – Veľkosť v pixeloch (predvolená hodnota: 48px)
Farba ikony – Hex kód (napríklad
#B59A7D)Zarovnanie ikony/obrázka – Vľavo, uprostred alebo vpravo
Titulok (Headline) – Názov karty s výberom štítku (H1 až H6)
Podtitul (Subtitle) – Popis obsahu karty
Príklad použitia
Ak chcete zobraziť tri hlavné hodnoty vašej spoločnosti:
- Vytvoriť tri oddelené bloky Karta výhody
- Pre každú kartu:
- Nastaviť ikonu (napr.
heroicons:heart) - Zadať farbu ikony
- Napísať titulok a popis
- Nastaviť ikonu (napr.
- Uložiť stránku
Features Section – VAROVANIE
DÔLEŽITÉ UPOZORNENIE
Features Section blok má problém s JSON poľom "Funkcionalita":
- Keď vložíte platnú JSON pole, systém zobrazí desiatky prázdnych "Zistite viac" kariet namiesto očakávaných položiek
- Aj keď zadáte prázdne pole
[], stále sa zobrazia 2 predvolené náhradné karty - To spôsobuje závažnú vizuálnu chybu na frontendu
- Stránka sa môže zdať rozbitá alebo neúplná
RIEŠENIE: Nikdy nepoužívajte Features Section blok. Namiesto toho:
- Použite Karta výhody bloky (odporúčané vyššie)
- Alebo použite Blok formátovaného obsahu s vlastným HTML
6. Vytvorenie stránky – Krok za krokom
Nasledujúci sprievodca vám ukáže, ako vytvoriť novú stránku od začiatku.
Krok 1: Otvorenie správy stránok
Navigujte na Admin > Obsah > Stránky.
Na stránke nájdete zoznam existujúcich stránok a tlačidlo na vytvorenie novej stránky.
Krok 2: Vytvorenie novej stránky
Kliknite na tlačidlo "Nová stránka" (alebo podobné). Budete presmerovaní na formulár /admin/pages/create.
Krok 3: Vyplnenie základných údajov
Vyplňte nasledujúce polia:
- Nadpis – Názov stránky (viditeľný používateľom)
- Šablóna – Vyberte šablónu (napríklad "Prázdna stránka" alebo "Obchod")
- Uložená šablóna rozloženia – Voliteľne: výberom predtým uloženej šablóny sa načítajú všetky bloky (voliteľné)
Krok 4: Vyplnenie SEO údajov
V sekcii SEO vyplňte:
- Meta názov – Názov stránky v Google výsledkoch hľadania
- Meta kľúčové slová – Kľúčové slová pre SEO (oddelené čiarkami)
- Meta popis – Popis stránky v Google výsledkoch
Krok 5: Publikovanie
Pod Nastavenia stránky zaškrtnutím políčka "Publikované":
- Skontrolujte, či je stránka "Publikované" (označené checkboxom)
- Voliteľne nastavte dátum publikovania
Krok 6: Otvorenie editora
Kliknite na tlačidlo "Vytvoriť a otvoriť editor". Systém vytvorí stránku a automaticky vás presmeruje do Page Buildera.
Krok 7: Vyhľadávanie blokov
V ľavom paneli nájdete zoznam všetkých dostupných blokov. Môžete:
- Prezerať – Posúvajte sa zoznamom
- Hľadať – Zadajte názov bloku do vyhľadávacieho poľa (napríklad "Hero" na nájdenie Hero sekcie)
Krok 8: Ťahanie blokov na plátno
Uchopte blok z ľavého panelu a ťahajte ho na stredný panel (plátno). Blok sa objaví na mieste, kde ho pustíte.
Krok 9: Úprava bloku
Keď kliknete na blok na plátne:
- Objaví sa pravý panel s názvom "Upraviť blok"
- Vyplňte všetky potrebné polia (názvy, farby, obrázky, atď.)
- Zmeny sa automaticky aktualizujú na plátne
Krok 10: Použitie WYSIWYG editora
Ak blok obsahuje textový obsah (napríklad "Blok formátovaného obsahu"):
- Kliknite do textovej oblasti – Objaví sa formátovací panel
- Napíšte alebo formátujte text – Používajte dostupné nástroje
- Vložite obrázky/videá – Kliknite na príslušnú ikonu v paneli
- Zdrojový kód – Ak potrebujete HTML, kliknite na ikonu
</>a zadajte kód priamo
Krok 11: Uloženie stránky
Kedykoľvek môžete kliknúť na tlačidlo "Uložiť" v hornom paneli. Všetky zmeny budú uložené.
Krok 12: Náhľad stránky
Kliknite na tlačidlo "Náhľad" v hornom paneli na otvorenie náhľadu stránky, ako bude vyzerať v obchode.
Krok 13: Testovanie responzívnosti
Použite tlačidlá "Mobil" a "Tablet" v hornom paneli na testovanie stránky na rôznych zariadeniach.
7. Šablóny (Templates)
Page Builder umožňuje ukladanie a opakovné použitie šablón. Šablóny vám pomôžu šetriť čas pri tvorbe podobných stránok.
Uložiť šablónu stránky
Keď máte hotovú stránku s ľúbivým rozložením:
- Kliknite na tlačidlo "Uložiť šablónu stránky" v hornom paneli
- Zadajte názov šablóny (napríklad "Produktový katalóg")
- Kliknite "Uložiť"
Šablóna je teraz dostupná pre budúce stránky.
Použiť šablónu stránky
Keď vytvárate novú stránku a chcete použiť uloženú šablónu:
- V kroku 3 vytváraní stránky (pole "Uložená šablóna rozloženia") vyberte vašu šablónu
- Všetky bloky a nastavenia z šablóny budú automaticky načítané
- Môžete ich ďalej upravovať podľa potreby
Vložiť šablónu sekcie
Ak máte uloženú šablónu jednotlivého bloku (sekcie):
- Kliknite na tlačidlo "Vložiť šablónu sekcie" v hornom paneli
- Vyberte šablónu sekcie z ponuky
- Šablóna sa vloží na aktuálnu pozíciu na plátne
Uložiť šablónu sekcie (z jednotlivého bloku)
Keď máte na plátne blok, ktorý sa vám páči a chcete ho používať na iných stránkach:
- Kliknite na tlačidlo "Uložiť šablónu sekcie" pri danom bloku (v ovládacích prvkoch bloku)
- Zadajte názov šablóny
- Šablóna je teraz dostupná pre vloženie na iných stránkach
8. Správa stránok (Pages)
Správa stránok vám umožňuje riadiť všetky aspekty vašich stránok bez potreby Page Buildera.
Cesta: Admin > Obsah > Stránky
Funkcionalita stránok
Merzio Page Builder podporuje:
- Preložiteľný názov a obsah – Stránky môžu byť vo viacerých jazykoch
- Page Builder bloky – Všetky bloky a nastavenia vytvorené v Builderi
- SEO polia – Meta názov, kľúčové slová a popis
- Stav publikovania – Publikované alebo ako koncept
- Hierarchia stránok – Rodičovská stránka (pre vnorené stránky)
- Domovská stránka – Označenie ako domovská stránka
- Navigácia a päta – Zobrazenie v navigácii a päte
- Ochrana heslom – Voľby na ochranu stránky heslom
- Vlastný CSS/JS – Vlastné štýly a skripty pre konkrétnu stránku
- Presmerovania – Presmerovanie na inú URL
- Odporúčacie bloky – Konfigurácia odporúčaných produktov
9. Knižnica médií (Media Library)
Knižnica médií je dostupná prostredníctvom tlačidla Mediálna knižnica alebo Vybrať obrázok v rôznych formulároch a editoroch (blog, FAQ, produkty atď.).
Ako pristupovať k mediálnej knižnici
- Kliknite na tlačidlo Mediálna knižnica alebo Vybrať obrázok v ľubovoľnom formulári
- Otvorí sa modálne okno s vašou mediálnou knižnicou
- Prehliadajte existujúce obrázky alebo nahrajte nové
Nahrávanie nových médií
- V knižnici kliknite na tlačidlo Nahrať alebo ťahajte súbory do oblasti nahrávacej plochy
- Vyberte obrázok z vášho počítača
- Obrázok sa automaticky nahrá a bude dostupný na výber
- Kliknite na obrázok v knižnici na výber a potvrdenie
Správa médií
- Prehliadajte všetky nahrané obrázky v knižnici
- Obrázky môžete vyhľadávať pomocou vyhľadávacieho poľa
- Vymazané obrázky sú odstránené aj z mediálnej knižnice
10. Blog
Blog umožňuje správu príspevkov a ich zobrazovanie na stránkach.
Cesta: Admin > Obsah > Blog (/admin/blogs)
Zoznam príspevkov
Tabuľka všetkých príspevkov blogu s nasledujúcimi stĺpcami:
- Nadpis — Názov príspevku
- Kategória — Priradená kategória
- Autor — Osoba, ktorá príspevok vytvorila
- Dátum — Dátum publikovania
- Stav — Publikovaný / Nepublikovaný / Odporúčaný
Akcie pre príspevky
- Zrušiť publikovanie — Skryje príspevok z verejnosti
- Odporučiť — Označí príspevok ako odporúčaný
- Zobraziť — Otvorí príspevok na verejnej stránke
- Upraviť — Otvorí editor príspevku
- Vymazať — Permanentne odstráni príspevok
Vytváranie nového príspevku
Cesta: /admin/blogs/create
Formulár na vytváranie príspevkov je rozdelený do 3 záložiek:
Záložka: Základné
- Výber jazyka — Prepínač jazykov (príspevok je dostupný v 10 jazykoch)
- Nadpis — Povinné pole, max. 200 znakov
- Obsah — WYSIWYG editor s plnou sadou nástrojov (tučné, kurzíva, nadpisy H1–H6, zoznamy, odkazy, obrázky, videá, tabuľky, zdrojový kód)
- Výňatok — Krátky popis (max. 500 znakov) zobrazovaný v zoznamoch
- Slug — URL identifikátor, automaticky generovaný z nadpisu
- Hlavný obrázok — Odporúčaný formát: JPG, PNG, odporúčaná veľkosť: 1200×600 px
- Autor — Vyhľadávacie pole s automatickým dopĺňaním
- Kategórie — Priradenie do viacerých kategórií
- Tagy — Kľúčové slová oddelené čiarkou alebo Enter
- Publikované — Začiarknutie na zverejnenie
- Odporúčané — Označenie ako odporúčaného príspevku
Záložka: SEO
- Meta názov (per jazyk) — 50–60 znakov (odporúčané)
- Meta popis (per jazyk) — 150–160 znakov (odporúčané)
- Meta kľúčové slová — Oddelené čiarkou
Záložka: Lokalizácia
Zaškrtávacie políčka pre všetkých 10 jazykov — vyberte, v ktorých jazykoch bude príspevok viditeľný.
Kategórie blogu
Cesta: /admin/blog-categories
Správa kategórií, do ktorých organizujete príspevky. Tabuľka zobrazuje kategórie s možnosťami Upraviť a Deaktivovať. Tlačidlo Vytvoriť kategóriu otvorí formulár na zadanie názvu novej kategórie.
Tagy blogu
Cesta: /admin/blog-tags
Prehliadajte všetky tagy a ich frekvenciu použitia. Možnosť editácie, mazania a vytvorenia nových tagov.
Integrácia s Page Builderom
V Page Builderi môžete použiť bloky:
- Blog mriežka – Zobrazenie príspevkov v mriežke alebo karuseli
- Sekcia referencie – Ak chcete zobraziť odporúčané príspevky
11. FAQ (Časté otázky)
FAQ modul umožňuje vytvárať a spravovať často kladené otázky.
Cesta: Admin > Obsah > FAQ (/admin/faqs)
Zoznam FAQ
Tabuľka všetkých položiek FAQ s nasledujúcimi stĺpcami:
- Otázka — Text otázky
- Kategórie — Priradené kategórie
- Stav — Publikovaná / Nepublikovaná
- Akcie: Upraviť, Vymazať
Vytváranie novej FAQ
Cesta: /admin/faqs/create
- Výber jazyka — Prepínač jazykov (dostupné v 10 jazykoch)
- Otázka (per jazyk) — Povinné pole, max. 300 znakov
- Odpoveď (per jazyk) — WYSIWYG editor s plnou sadou nástrojov
- Obrázok FAQ — Voliteľný obrázok k odpovedi
- Poradie radenia — Číselné pole (nižšie číslo = vyššia pozícia)
- Kategórie — Priradenie do viacerých kategórií
- Publikované — Začiarknutie na zverejnenie
- Dostupné jazyky — Zaškrtávacie políčka pre 10 jazykov
Kategórie FAQ
Cesta: /admin/faq-categories
Správa kategórií FAQ položiek. Tabuľka kategórií s možnosťami úpravy a mazania. Tlačidlo na vytváranie novej kategórie.
Integrácia s Page Builderom
V Page Builderi môžete použiť blok:
- Časté otázky (FAQ) – Zobrazenie otázok a odpovedí ako expandovateľné sekcie
11. Vyskakovacie okná (Popupy)
Popupy umožňujú zobrazovanie upozornení, ponúk alebo ďalších informácií používateľom.
Cesta: Admin > Obsah > Popupy
Funkcionalita
- Vytvorenie popupov – Návrh a konfigurácia popupov
- Triggery – Nastavenie, kedy sa popup zobrazí (čas, posúvanie, klik, atď.)
- Obsah – Page Builder bloky môžu byť použité v popupe
- Štýly – Prispôsobenie vzhľadu popupu
12. Oznamovacia lišta (Notification Bar)
Oznamovacia lišta je stavový riadok na vrchu alebo spodku stránky s dôležitými správami.
Cesta: Admin > Obsah > Oznamovacia lišta
Funkcionalita
- Obsah – Správa, ktorá sa zobrazuje v lište
- Štýly – Farba pozadia, textu a ďalšie CSS vlastnosti
- Viditeľnosť – Nastavenie, na ktorých stránkach sa lišta zobrazuje
- Pozícia – Hore alebo dole na stránke
13. Bannery
Bannery sú propagačné prvky, ktoré môžete pripojiť k produktom, kategóriám alebo stránkam.
Cesta: Admin > Obsah > Bannery
Funkcionalita
- Vytvorenie bannerov – Dizajn propagačných bannerov
- Umiestnenie – Priradenie banneru k produktom/kategóriám
- Plánovanie – Nastavenie dátumov viditeľnosti
- Štýly – Prispôsobenie vzhľadu
Integrácia s Page Builderom
V Page Builderi môžete použiť blok:
- Mriežka bannerov – Zobrazenie viacerých bannerov v horizontálnom karuseli
14. Navigácia (Menu)
Navigácia (menu) je hlavný navigačný prvok vášho obchodu.
Cesta: Admin > Obsah > Navigácia (/admin/menu)
Dostupné pozície menu
V rozhraní sú dostupné 4 menu pozície:
- Hlavička — Menu v hlavičke obchodu
- Horné menu (Dvojité) — Dodatočné menu v hornej časti
- Pätička — Menu v pätičke
- Menu kategórií v bočnom paneli — Menu kategórií na strane
Typy menu položiek
Pri vytváraní alebo editácii menu položky možno vybrať z 15 typov:
Vlastný odkaz, Stránka, Zoznam produktov, Kategória, Blog, Kategória blogu, FAQ, Externý odkaz, Nadradené menu, Mega Menu, Kategória menu, Menu nadradenej kategórie, Kategórie produktov (mriežka), Zobraziť viac, Služby.
Formulár na pridanie menu položky
- Meno — Názov položky (dostupný v 10 jazykoch)
- Typ — Výber typu menu položky
- Poloha — Umiestnenie položky v menu
- Nadradené menu — Priradenie do submenu
- URL — Vlastný URL (pre vybrané typy)
- Aktívne — Začiarknutie na aktivovanie položky
- Otvoriť v novom okne — Otvorenie odkazu v novej záložke
Menu položky možno ľubovoľne usporiadať a prispôsobiť.
15. Päta (Footer)
Päta je spodná sekcia stránky s informáciami a odkazmi.
Cesta: Admin > Obsah > Päta (/admin/footer-builder)
Vizuálny editor pätičky je drag-and-drop nástroj na kustomizáciu pätičky s podporou rôznych typov blokov a rozložení.
Tri záložky
Záložka: Bloky
Katalóg dostupných blokov organizovaných do kategórií (Navigácia, Logá, Sociálne Siete, Formuláre, Obsah, Značka, Utility, Rozloženie).
Dostupných 15 typov blokov:
Stĺpec menu, Jednotlivý odkaz, Logá platieb, Logá dopravcov, Vlastné logá, Sociálne odkazy, Newsletter, Textový blok, Logo pätičky, Prepínač jazyka, Medzera, Oddeľovač, Kontaktné informácie, Instagram Feed, Stĺpce menu.
Záložka: Nastavenia
Globálne nastavenia pätičky: farby a štýl, typografia, rozmery a odsadenia.
Záložka: Rozloženie
Konfigurácia rozloženia pätičky:
- Pridať blok — Vloženie nového bloku
- Pridať riadok — Vloženie nového riadka
- Bloky možno ľubovoľne usporiadať pomocou drag-and-drop
Návrhy zariadení
V hornej časti editora sú dostupné návrhy pre: Mobil, Tablet, Desktop.
16. Presmerovania URL (Redirects)
Presmerovania umožňujú presmerovať staré URL na nové stránky.
Cesta: Admin > Obsah > Presmerovania
Konfigurácia
- Pôvodná URL – Stará adresa (napríklad
/stara-stranka) - Nová URL – Nová adresa (napríklad
/nova-stranka) - Typ presmerovania – 301 (trvalé) alebo 302 (dočasné)
Príklad
Keď prenášate obsah zo starej stránky na novú, vytvorte presmerovanie:
- Navigujte na Admin > Obsah > Presmerovania
- Kliknite "Nové presmerovanie"
- Zadajte staré a nové URL
- Vyberte typ presmerovania (zvyčajne 301)
- Kliknite "Uložiť"
17. Odporúčacie bloky (Recommendation Blocks)
Odporúčacie bloky zobrazujú personalizované produkty na základe správania používateľa.
Cesta: Admin > Obsah > Odporúčané produkty
Funkcionalita
- Pravidlá odporúčania – Logika na určenie, ktoré produkty sa majú odporúčiť
- Štýly – Prispôsobenie vzhľadu odporúčaní
Integrácia s Page Builderom
V Page Builderi môžete použiť blok:
- Odporúčač produktov – Dynamicky zobrazené personalizované produkty
18. Vizuálne nastavenia
Cesta: Admin > Nastavenia > Vizuálne nastavenia (/admin/settings/visual)
Vizuálne nastavenia sú miestom, kde konfigurujete globálny vzhľad vašej e-commerce platformy. Táto sekcia je rozdelená do 9 záložiek:
- Značka a farby — Primárne a sekundárne farby, farby tlačidiel
- Typografia — Výber fontov a veľkostí textu
- Hlavičky a navigácia — Nastavenia hlavičky a navigácie
- Vyhľadávanie — Konfigurácia vyhľadávacieho poľa
- Tlačidlá a formuláre — Štýl tlačidiel a formulárov
- Admin — Nastavenia admin panela
- Logo a favicon — Nahrávanie loga a favicony
- Mobilné menu — Konfigurácia menu na mobilných zariadeniach
- Bočný panel kategórií (desktop) — Nastavenia bočného panela kategórií
Záložka: Značka a farby
Táto záložka obsahuje nasledujúce prvky na konfiguráciu:
- Primárne farby — Primárna farba obchodu s color pickerom a hex inputom, vrátane hover stavu
- Sekundárne farby — Sekundárne farby s color pickerom a hex inputom
- Tlačidlo Pridať do košíka — Farba tlačidla na pridanie do košíka
- Stav úspechu — Farby pre úspešné stavy
- Farby stavov — Farby pre rôzne stavy (upozornenie, chyba atď.)
- Farby textu — Primárne a sekundárne farby textu
- Farby pozadia — Farby pozadia pre rôzne sekcie
Každá farba má color picker (vizuálny výber) a hex input (manuálne zadanie hex kódu).
Akčné tlačidlá: OBNOVIŤ PREDVOLENÉ a ULOŽIŤ ZMENY.
19. Správa tém
Cesta: Admin > Nastavenia > Správa tém (/admin/settings/themes)
Správa tém umožňuje výber a konfiguráciu predvolených tém vzhľadu vášho obchodu.
Dostupné predvolené témy (5 tém)
- Moderný obchod — Moderný a minimalistický dizajn
- Klasický obchod — Tradičný a klasický vzhľad
- Minimálny — Minimalistický a čistý dizajn
- Butik — Luxusný a elegantný štýl
- Kompaktný — Kompaktný a úsporný dizajn
Aktivácia témy
Pre každú tému je viditeľný status:
- Aktuálna téma — Badge označujúca aktuálne aktívnu tému
- Možnosť zmeny na inú tému jedným kliknutím
Ďalšie tipy a triky
Ako pracovať s responzívnosťou
- Kliknite na tlačidlá "Mobil" alebo "Tablet" v hornom paneli
- Upravte bloky tak, aby vyzerali dobre na týchto zariadeniach
- Page Builder automaticky uloží responzívne nastavenia
Ako skryť bloky podľa zariadenia
Niektoré bloky majú možnosť "Skryť na..." pre konkrétne zariadenia:
- Kliknite na blok
- V pravom paneli nájdite položku "Viditeľnosť" alebo "Skryť na"
- Vyberte zariadenia, na ktorých sa blok nemá zobrazovať
Ako použiť vlastný CSS
- V hornom paneli kliknite na "Nastavenia" (gear ikona)
- Nájdite pole "Vlastný CSS"
- Zadajte CSS kód
- Kliknite "Uložiť"
Ako pridať vlastný JavaScript
- V hornom paneli kliknite na "Nastavenia" (gear ikona)
- Nájdite pole "Vlastný JavaScript"
- Zadajte kód
- Kliknite "Uložiť"
Ako použiť viacjazykový obsah
Ak váš obchod podporuje viacero jazykov:
- V textových poliach si všimnete "SK", "EN", atď.
- Kliknite na ikonku jazyku
- Zadajte obsah v tomto jazyku
- Proces zopakujte pre každý jazyk
Riešenie problémov
Blok sa nezobrazuje správne
- Skontrolujte nastavenia – Prejdite do editora bloku a skontrolujte všetky polia
- Zmažte cache – Obnovte stránku (Ctrl+F5 alebo Cmd+Shift+R)
- Skúste iný blok – Ak je blok problematický, skúste alternatívu
Features Section ukazuje prázdne karty
- PROBLÉM: Toto je známa chyba Features Section bloku
- RIEŠENIE: Používajte Karta výhody bloky namiesto toho
Zmeny sa neukladajú
- Kliknite "Uložiť" – Uistite sa, že ste kliknuli na tlačidlo Uložiť v hornom paneli
- Skontrolujte chyby – Ak sa objaví chybová správa, prečítajte si ju a opravte problém
- Skúste obnovu – Obnovte stránku a skúste znova
Stránka sa zobrazuje inak na mobilnom zariadení
- Testujte na mobilu – Kliknite na tlačidlo "Mobil" a skontrolujte náhľad
- Nastavte responzívny padding – Pre Hero sekciu a ďalšie bloky
- Skryť zbytočné bloky – Použite možnosť "Skryť na mobile" pre nepoužívané prvky