Design lišty
Přizpůsobte vzhled cookie lišty vašemu webu
Kde nastavit design
Design cookie lišty nastavíte v Consentio dashboardu v sekci Designer vašeho webu. Změny se projeví okamžitě na vašem webu.
Dostupné layouty
Vyberte si z několika předdefinovaných layoutů:
Box (modal)
Klasické modální okno uprostřed obrazovky. Vhodné pro weby, které chtějí zajistit, že uživatel lištu uvidí.
Bar (lišta)
Horizontální lišta na spodní nebo horní straně obrazovky. Méně rušivá varianta, která nebrání v prohlížení obsahu.
Cloud (plovoucí)
Kompaktní plovoucí okno v rohu obrazovky. Minimalistická varianta pro weby, které preferují nenápadný design.
Pozice
Podle zvoleného layoutu můžete nastavit pozici:
| Layout | Dostupné pozice |
|---|---|
| Box | Střed obrazovky |
| Bar | Nahoře, Dole |
| Cloud | Vlevo dole, Vpravo dole, Vlevo nahoře, Vpravo nahoře |
Barevné schéma
Přizpůsobte barvy lišty vašemu brandu:
Předdefinovaná témata
- Light - Světlé pozadí, tmavý text
- Dark - Tmavé pozadí, světlý text
- Auto - Automaticky podle systémového nastavení uživatele
Vlastní barvy
Nastavte vlastní barvy pro jednotlivé prvky:
- Pozadí - Barva pozadí lišty
- Text - Barva hlavního textu
- Primární tlačítko - Barva tlačítka "Přijmout vše"
- Sekundární tlačítko - Barva tlačítka "Odmítnout"
- Odkazy - Barva odkazů
Typografie
Nastavte fonty pro text lišty:
- Font rodina - Vyberte z Google Fonts nebo použijte systémový font
- Velikost textu - Velikost hlavního textu
- Velikost nadpisu - Velikost nadpisu lišty
Animace
Nastavte animaci při zobrazení a skrytí lišty:
- Fade - Postupné zprůhlednění
- Slide - Vysunutí z okraje obrazovky
- None - Bez animace
Zaoblení rohů
Nastavte míru zaoblení rohů lišty a tlačítek:
- None - Ostré rohy (0px)
- Small - Mírné zaoblení (4px)
- Medium - Střední zaoblení (8px)
- Large - Výrazné zaoblení (16px)
- Full - Maximální zaoblení (999px)
Omezení dle plánu
Některé možnosti přizpůsobení jsou dostupné pouze v placených plánech:
| Funkce | Free | Pro |
|---|---|---|
| Layouty | Bar pouze | Všechny |
| Barevná témata | Light/Dark | Vlastní barvy |
| Fonty | Systémové | Google Fonts + vlastní |
| "Powered by" badge | Povinný | Volitelný |
Texty lišty
Upravte texty zobrazované na liště:
- Nadpis - Hlavní nadpis lišty
- Popis - Vysvětlující text o cookies
- Tlačítko Přijmout - Text tlačítka pro přijetí všech cookies
- Tlačítko Odmítnout - Text tlačítka pro odmítnutí
- Odkaz na nastavení - Text pro otevření preferencí
Náhled změn
V designeru vidíte živý náhled lišty. Můžete:
- Přepínat mezi desktop a mobilním zobrazením
- Testovat různé stavy (první zobrazení, preference center)
- Zkontrolovat vzhled v light/dark mode
CSS přizpůsobení
Pro pokročilé přizpůsobení můžete použít vlastní CSS. Widget používá CSS proměnné:
/* Příklad přepsání stylů */
.consentio-banner {
--consentio-bg: #ffffff;
--consentio-text: #1a1a1a;
--consentio-primary: #10b981;
--consentio-primary-hover: #059669;
--consentio-border-radius: 12px;
}