Jak zatraktivnit váš web pro návštěvníky? Tato otázka znepokojuje téměř všechny vlastníky internetových zdrojů: obchodníky, blogery, majitele malých i velkých podniků, cestovatele a prostě kreativní lidi, kteří mají světu co říct.
Proč by měl být web krásný a funkční?
Počet návštěv závisí na tématu webu a jeho cílové skupině, zájmu lidí o konkrétní produkt, investici, propagaci, obsahu a mnoha dalších faktorech. Nelze ale popřít, že stránku „zdraví oblečení“. Je to první a hlavní stránka zdroje, která je jeho tváří, vizitkou, podle níž musí návštěvník pochopit, zda chce trávit čas dalším prohlížením obsahu.
A není zde žádný prostor pro chyby! Podle výzkumu jedné z technických univerzit v USA získá návštěvník první dojem z webu za méně než vteřinu. V průměru člověk „naskenuje“web za 3 sekundy. Blesková rychlost, že?!
Až 70 % úspěchu zdroje závisí na tom, jak vypadá hlavní stránka. První, čeho si lidé všimnou, jelogo, ale druhým je navigace. A pokud je s logem vše víceméně jasné, pak stojí za to si lámat hlavu nad navigací, nabídkou a pohodlím ergonomie webu. Vyvstává rozumná otázka: "Jak vyzdobit své stránky, udělat to co nejfunkčnější a nejpohodlnější, ale zároveň krásné?" Nabízí se mnoho neobvyklých nápadů, ale jedním z nejzajímavějších jsou popisky.
Co jsou popisky? Kromě toho, že se jedná o skvělý mechanismus pro zlepšení funkčnosti webu, jsou popisy nástrojem, který uživateli umožňuje zobrazit vysvětlení konkrétního obrázku, když najede na ikonu, slovo nebo obrázek.
Nástroje pro práci s popisky
Bootstrap je nejlepší nástroj pro vytváření popisků. Je to snadno naučitelná sada šablon pro vytváření aplikací a webových stránek napsaných v HTML, CSS, Sass a JavaScript.
Abych byl konkrétní, popisky používají jeden z grafických prvků šablony Bootstrap – popis.
Rámec Bootstrap byl vytvořen pro „Twitter“a původně se jmenoval „Twitter Blueprint“. Po určitých změnách v roce 2012 obdržel 12sloupcovou mřížku, stal se adaptivním a získal známý název – Tooltip. Popisek je prvek, který se zobrazí, když najedete na konkrétní prvek na obrazovce monitoru.
Vytvoření nápovědy
Popis nástroje Bootstrap můžete vytvořit pomocí atributůdat a také aktivací prvků „Java Script“. Existují dva hlavní způsoby, jak vytvořit HTML Bootstrap Tooltip. Podstatou prvního je použití atributu a atributu title (title), který bude obsahovat text nápovědy. Nahoře se zobrazí nápověda (výchozí nastavení). Stojí za to připomenout, že je třeba inicializovat nápovědu, protože automatická inicializace byla v "zaváděcím systému Twitteru" z důvodu výkonu zastaralá.
K inicializaci tooltipů se používá speciální JavaScript, ve kterém je metoda tooltip obnovena pro všechny prvky, které mají atribut. Podstatou druhé metody je aktivace tooltipu pomocí kódu "JavaScript" za účasti knihovny jQuery napsáním třídy nástroje, která obsahuje tooltip. Metoda je podobná první, s výjimkou metody výběru prvků. Můžete povolit rady v "Java Script" způsobem uvedeným níže.
Příklad popisku bootstrapu
K dispozici jsou čtyři hlavní možnosti umístění popisků: na levý a pravý okraj a nad a pod prvek.
Nápověda shora
Nápověda vpravo
Nápověda dole
Nápověda vlevo
Pomocí popisků
Bootstrap Tooltip má mnoho využití. Můžete vložit popisky, aby uživatel pochopil překlad textu z cizího jazyka v textu. Popisky lze také použít jako nástroj, který uživateli pomůže porozumět významu tlačítek na panelu, když na ně umístí ukazatel myši. Šablony Bootstrap Tooltip se často používají na webových stránkách různých organizací k vytvoření předplatného firemních novinek. Díky tomu jsou zákazníci aktuální a návštěvníci také mohou dostávat nové informace, jako jsou diskontní sazby, nabídky, změny v rámci společnosti.
Zvažte příklad, kdy uživatel potřebuje zadat svou e-mailovou adresu, aby se mohl přihlásit k odběru newsletteru. Úkol zajistit, aby se klientské publikum přihlásilo k odběru novinek, lze nejsnáze splnit pomocí HTML5 a požadovaného atributu. Nápověda v tomto případě je potřebná k tomu, aby uživatel porozuměl posloupnosti akcí. Například po zadání emailové adresy jsem zaškrtl políčko: "Souhlasím se zasíláním firemních novinek na moji emailovou adresu." Níže je uveden příklad kódu formuláře.
Instalace tohoto kódu do nápovědy HTML Bootstrap je snadná. Ale výhody jsou značné. Nyní spotřebitelé znají všechny novinky společnosti. Toto je druh bezplatné reklamy.
Hlavní chyby při vytváření vyskakovacích okentipy
Co dělat, když Bootstrap Tooltip nefunguje? První a hlavní chybou, kdy atribut tooltip nebude fungovat, je, že tooltip není povolen. Chcete-li jej aktivovat, musíte použít speciální kód.
Tato metoda umožňuje inicializovat absolutně všechny popisky na webové stránce.
Druhou častou chybou je, že v záhlaví není jQuery.
Pro správné fungování odkazu je nutná podmínka – musí být zadána funkce zpracování dat, jako je „Java Script“.
Vlastnosti popisku
Komponenta Tooltip je ve svém jádru navržena tak, aby zobrazovala nápovědu, když najedete ukazatelem myši na jednu nebo druhou část stránky. Ale kromě umístění popisku napravo, nalevo a nahoře s nápovědou má popisek následující vlastnosti:
- Aktivní. Použití vlastnosti true v Bootstrap Tooltip umožňuje zobrazení popisků, zatímco nastavení stejné vlastnosti na false znamená, že nelze zobrazit žádné popisky.
- AutoPopDelay je čas, kdy se zobrazují tipy.
- AutoPopDelay. Představuje dobu, po kterou se musí kurzor myši pohybovat nad prvkem, aby se zobrazil popis.
- IsBaloon. Pokud je hodnota popisku HTML Bootstrap Tooltip pravdivá, změní se popis na cloud.
- ToolTipIcon. Představuje znak, který je zobrazen v okněrady.
Tooltipster
Abyste mohli vytvářet krásné popisky například na webu vytvořeném na Wordpressu, není nutné důkladně znát jazyk webových vývojářů. Stačí vědět o existenci takového pluginu (rozšíření) jako Tooltipster. Již z názvu je zřejmé, že tento plugin vychází z Tooltipu a je mu svými vlastnostmi a určením překvapivě podobný. K čemu je tento plugin? To vám umožní vytvořit potřebné HTML značky uvnitř popisku.
Práce pluginu je založena na vkládání zástupců na stránku. Obsahuje všechny základní atributy HTML Bootstrap Tooltip: content (data-tooltip-content), title, position, trigger atd. To vám umožní změnit téma, font, velikost tooltipu, barvu, vložit obrázek a další.
