Obrázek s body (interaktivní)

Na této stránce

Obrázek s body (interaktivní) – co tato sekce umí

Sekce Obrázek s body promění statický obrázek v interaktivní prvek. Na obrázek umístíte body, které návštěvník rozklikne a zobrazí se u nich popisek. Vzhled bodů i popisků si přizpůsobíte tak, aby ladily s vaší značkou.

Tip

Popisky u bodů podporují tučný text a odkazy – můžete tak odkázat na další stránku nebo produkt.

Možnosti vzhledu

Vlastní barva bodů – barvu klikatelných bodů sladíte s vaší značkou
Vlastní barva tooltipu – nastavíte pozadí i barvu textu popisku
Velikost bodů – čtyři velikosti (S, M, L, XL) podle důrazu
Pulzování bodů – jemná animace upozorní na možnost kliknutí
Velikost písma a zaoblení tooltipu – doladíte styl popisku do detailu

K čemu se hodí

Popis jednotlivých prvků produktu nebo obalu
Interaktivní mapy, plánky a schémata
Vysvětlení částí screenshotu nebo uživatelského rozhraní
Prezentace detailů návrhu značky

Varianta: Textová legenda pod obrázkem

V tomto režimu se popisky bodů neukazují v tooltipu po kliknutí, ale jako přehledná číslovaná legenda pod obrázkem. Hodí se všude, kde chcete mít všechny popisky vidět najednou – třeba u schémat nebo anotovaných vizuálů.

Poznámka

Popisky bodů zvládnou i tučný text a odkazy – klidně z nich odkažte na navazující kapitoly manuálu.

Světlé plochy nechávají vyniknout obsahu. Barevnost celého vizuálu vychází z firemní palety – tu najdete v sekci Barvy.
Klidné místo uprostřed je ideální pro umístění loga. Jeho správné varianty a ochrannou zónu popisuje sekce Loga.
Do sytějších ploch se hodí krátký claim. Doporučená písma a jejich velikosti najdete v sekci Písma.

Varianta: Vlastní barva bodů

Barvu klikatelných bodů si nastavíte libovolně – zde jsou body zelené. Hodí se, když chcete body odlišit od primární barvy značky nebo je zvýraznit vůči pozadí obrázku.

Varianta: Vlastní barva tooltipu

Popisek (tooltip) může mít vlastní barvu pozadí i textu. Zde je tooltip v červené barvě s bílým textem. Rozklikněte body a porovnejte vzhled s výchozím černým tooltipem.

Varianta: Velikost bodů a pulzování

Body mají čtyři velikosti (S, M, L, XL). Zde jsou nastaveny na XL a pulzování je vypnuté, takže body zůstávají v klidu. Větší body se hodí na velké obrázky nebo když chcete body více zdůraznit.

Varianta: Velikost písma a zaoblení tooltipu

Doladit lze i samotný popisek. Zde má větší písmo a plně zaoblené rohy (16 px). Kombinací velikosti písma a zaoblení přizpůsobíte tooltip celkovému stylu webu.