Dokumentace
← cabintale.com EN · CZ Napsat na podporu
Přizpůsobení webu · Návod

Vzhled a styl widgetu

Aby váš widget působil jako součást vaší značky — ne cizího nástroje.

Po dokončení tohoto návodu budete mít widget v barvách, v tónu a na pozadí, které ladí s vaším webem — a budete vědět, které ovladače stojí za to zkoušet.

Než začnete

Co budete potřebovat

  • Widget v sekci Widgety (ten vytvořený během průvodce nastavením stačí)
  • ~5 minut
  • Volitelně: hexa kód hlavní barvy vaší značky
Co získáte
  • Světlý nebo tmavý režim zvolený záměrně, ne podle výchozího nastavení
  • Hlavní barvu, která ladí s vaším webem
  • Pozadí, které sedne sekci, do které widget vkládáte
  • Správný počet zobrazených měsíců

Krok 1: Otevřete Typ a styl

V postranní nabídce → vaše nemovitost → Widgety → klikněte na widget → posuňte se k Typ a styl (widgety míst) nebo Nastavení widgetu služby (widgety služeb).

Panel s nastaveními sedí vedle (nebo nad) živým náhledem. Každá změna se v náhledu projeví okamžitě — bez potřeby ukládat, abyste viděli výsledek.

Krok 2: Režim

Světlý nebo Tmavý. Nic víc; možnost „auto / podle systému" dnes neexistuje.

  • Světlý — světlé pozadí, tmavý text. Výchozí. Hodí se k bílému nebo průhlednému pozadí.
  • Tmavý — tmavé pozadí, světlý text. Hodí se k černému nebo průhlednému pozadí.

Když přepnete mezi světlým a tmavým, výběr pozadí se může automaticky upravit (např. bílé pozadí na tmavém režimu se přepne na průhledné), aby widget zůstal čitelný.

Krok 3: Barva pozadí

Tři možnosti:

MožnostKdy ji vybrat
PrůhlednáVkládáte do barevné nebo brandované sekce. Widget sedí na tom, co je za ním
BíláVkládáte na neutrální stránku. Dostupná ve světlém režimu
ČernáVkládáte na tmavou stránku. Dostupná v tmavém režimu

Průhledná je nejbezpečnější výchozí volba pro většinu vložení.

Krok 4: Hlavní barva

Akcentová barva pro vybraná data, hlavní tlačítka a odkazy uvnitř widgetu.

Klikněte na vzorek a otevře se vám vybírátko barev z prohlížeče, nebo napište hex kód jako #ff6b35 přímo. Obojí zůstává v synchronizaci.

Pár poznámek:

  • Výchozí je #10b981 — jemná zelená.
  • Funguje 3místný (#abc) i 6místný (#aabbcc) hex kód.
  • Neplatný vstup spadne na černou. Pokud se vzorek po vašem zápisu zbarvil černě, hodnota se nepodařila parsovat — zkuste znovu.
  • Barva textu se nastavuje automaticky. Cabintale spočítá jas vaší hlavní barvy a vybere černý nebo bílý text na něm, aby popisky zůstaly čitelné. Nemusíte řešit bílý text na žluté.

Jeden detail, který stojí za zmínku. Hlavní barva velmi blízká pozadí — třeba čistě bílá na bílém pozadí — nic nerozbije, ale vybraná data můžou vypadat jako nevybraná. Před uložením to zkontrolujte v náhledu.

Krok 5: Počet měsíců (jen widgety míst)

Vyberte 1, 2, nebo 3 najednou viditelné měsíce.

  • 1 měsíc — kompaktní. Dobré pro úzké postranní bloky nebo mobile-first weby.
  • 2 měsíce — nejběžnější; host si vybere příjezd v tomhle měsíci a odjezd v dalším.
  • 3 měsíce — maximální viditelnost. Pohodlné na široké rezervační stránce.

Mobilní zařízení sloupce skládají vertikálně bez ohledu na nastavení, takže 3 nevypadají špatně ani na telefonu — jen je to delší rolování.

Krok 6: Zobrazení cen

Přepínač, jestli se v kalendáři zobrazují ceny za noc (v tooltipech a v zobrazení cen).

Většina majitelů to nechává zapnuté. Časté důvody, proč to vypnout:

  • Partner vkládá váš widget na svůj web a kotuje vlastní cenu.
  • Nechcete, aby procházející hosté porovnávali jen cenu.
  • Chcete čistý vizuál bez čísel.

Když jsou ceny skryté, kalendář pořád ukazuje dostupnost — host pořád vidí, co je volné. Cenu prostě uvidí až po výběru dat.

Krok 7: Velikost widgetu služby (jen služby)

Widgety služeb mají místo počtu měsíců nastavení velikosti:

  • Vertikální — vysoký a úzký. Dobré do sidebaru.
  • Střední (680 px) — výchozí. Vyvážené pro rezervační stránky.
  • Plná šířka — roztáhne se na 100 % kontejneru.

Krok 8: Uložte

Klikněte na Uložit widget nahoře. Cache widgetu se okamžitě invaliduje; obnovení vložené stránky na vašem webu ukáže nový vzhled během chvíle.

Co tu nenajdete

Pár věcí, které byste mohli čekat, ale dnes nejsou:

  • Vlastní fonty — widget používá svůj typografický set; vlastní předat nelze.
  • Vlastní CSS — žádný únikový poklop pro libovolné styly.
  • Auto / systémový režim barev — jen pevně světlý nebo tmavý.
  • Skrýt navigační šipky — vždy se zobrazují.

Napište nám, jestli by některá z těchto věcí pomohla; vedeme si seznam.

Řešení problémů

PříznakPříčinaŘešení
Hex pole nemění vzorekTo, co jste napsali, není platný hex (extra znaky, ne-hex písmena)Použijte vizuální vybírátko nebo napište striktně #rrggbb
Živý náhled je prázdnýMísto widgetu zatím nemá sezóny ani cenyNejdřív nastavte sezónní ceny — náhled potřebuje ceny, aby měl co vykreslit
V rozbalovacím menu pozadí chybí volbaNěkteré možnosti pozadí jsou vázané na režim (např. černé pozadí jen v tmavém režimu)Nejdřív přepněte režim, pak vyberte pozadí
Změny se po uložení v živém widgetu neprojevíCache prohlížeče na hostově straněTvrdé obnovení (Ctrl+Shift+R / Cmd+Shift+R) na stránce, kam je widget vložený
Zvýraznění vybraného dne vypadá neviditelněHlavní barva je moc blízká pozadíZvolte rozdílnější hlavní barvu nebo změňte pozadí

Související návody

Nejde to?

Odpovídáme na každý e-mail do jednoho pracovního dne.

Napsat na podporu →