Как да направите сайта си привлекателен за посетителите? Този въпрос тревожи почти всички собственици на интернет ресурси: търговци, блогъри, собственици на малък и голям бизнес, пътешественици и просто креативни хора, които имат какво да кажат на света.
Защо един уебсайт трябва да е красив и функционален?
Броят на посещенията зависи от темата на сайта и неговата целева аудитория, интереса на хората към конкретен продукт, инвестициите, промоцията, съдържанието и много други фактори. Но не може да се отрече, че сайтът е „поздравен от дрехи“. Именно първата и главна страница на ресурса е неговото лице, визитната картичка, чрез която посетителят трябва да разбере дали иска да прекара времето си за по-нататъшно разглеждане на съдържанието.
И няма място за грешка! Според проучване на един от техническите университети в САЩ, посетителят получава първото впечатление за сайта за по-малко от секунда. Средно човек „сканира“сайт за 3 секунди. Светкавична скорост, нали?!
До 70% от успеха на ресурса зависи от това как изглежда главната страница. Първото нещо, което хората забелязват елого, но второто е навигация. И ако всичко е повече или по-малко ясно с логото, тогава си струва да си разбиете главата над навигацията, менюто и удобството на ергономията на сайта. Възниква разумен въпрос: "Как да украсите вашия сайт, да го направите възможно най-функционален и удобен, но в същото време красив?" Има много необичайни идеи, които можете да предложите, но една от най-интересните са подсказките.
Какво представляват подсказките? Освен че са чудесен механизъм за подобряване на функционалността на сайта, подсказките са инструмент, който позволява на потребителя да види обяснение за конкретно изображение, когато задържи курсора на мишката върху икона, дума или картина.
Инструменти за работа с подсказки
Bootstrap е най-добрият инструмент за създаване на подсказки. Това е лесен за научаване набор от шаблони за създаване на приложения и уебсайтове, написани на HTML, CSS, Sass и JavaScript.
За да бъдем конкретни, подсказките използват един от графичните елементи на шаблона Bootstrap - Tooltip.
Bootstrap рамката е създадена за "Twitter" и първоначално се е наричала "Twitter Blueprint". След някои промени през 2012 г. той получи решетка с 12 колони, стана адаптивен и придоби познатото име - Tooltip. Подсказката е елемент, който се появява, когато задържите курсора на мишката върху конкретен елемент на екрана на монитора.
Създаване на намек
Можете да създадете Bootstrap Tooltip с помощта на атрибутиданни, както и чрез активиране на елементите "Java Script". Има два основни начина за създаване на HTML Bootstrap Tooltip. Същността на първия е да се приложи атрибутът и заглавието на атрибута (заглавие), което ще съдържа текста на подсказката. Подсказката ще се появи в горната част (настройка по подразбиране). Струва си да запомните, че подсказката трябва да бъде инициализирана, тъй като автоматичната инициализация е отхвърлена в „Twitter bootstrap“поради съображения за производителност.
За да се инициализират подсказки, се използва специален JavaScript, в който методът на подсказката се възстановява за всички елементи, които имат атрибут. Същността на втория метод е да активирате подсказка с помощта на кода "JavaScript" с участието на библиотеката jQuery, като напишете клас инструмент, който включва подсказка. Методът е подобен на първия, с изключение на метода за избор на елемент. Можете да активирате подсказки в "Java Script" по начина, показан по-долу.
Пример с подсказка за Bootstrap
Има четири основни опции за позициониране на подсказки: в левия и десния ръб и над и под елемента.
Съвет отгоре
Намек вдясно
Намек в долната част
Смек вляво
Използване на подсказки
Има много приложения за Bootstrap Tooltip. Можете да вмъкнете подсказки, така че потребителят да разбере превода на текст от чужд език в текста. Подсказките могат да се използват и като инструмент, който да помогне на потребителя да разбере значението на бутоните на панела, когато се задържи над тях. Шаблоните на Bootstrap Tooltip често се използват на уебсайтовете на различни организации за създаване на абонамент за фирмени новини. Това поддържа клиентите актуални и също така позволява на посетителите да получават нова информация, като например отстъпки, оферти, промени в компанията.
Помислете за пример, при който потребител трябва да въведе своя имейл адрес, за да се абонира за бюлетин. Задачата да се гарантира, че клиентската аудитория се абонира за новини, се постига най-лесно с помощта на HTML5 и необходимия атрибут. Подсказката в този случай е необходима, за да може потребителят да разбере последователността на действията. Например, след като въведох имейл адреса, поставих отметка в квадратчето: „Съгласен съм да получавам фирмени новини на моя имейл адрес“. По-долу е даден пример за кода на формуляра.
Инсталирането на този код в HTML Bootstrap Tooltip е лесно. Но ползите са значителни. Сега потребителите знаят всички новини на компанията. Това е вид безплатна реклама.
Основни грешки при създаване на изскачащи прозорцинамеци
Какво да направите, ако Bootstrap Tooltip не работи? Първата и основна грешка, при която атрибутът tooltip няма да работи, е ако подсказката не е активирана. За да го активирате, трябва да използвате специален код.
Този метод ви позволява да инициализирате абсолютно всички подсказки на уеб страница.
Втората често срещана грешка е липсата на jQuery в заглавката.
Има необходимо условие, за да работи връзката правилно - трябва да се посочи функция за обработка на данни като "Java Script".
Свойства на подсказка
В основата си компонентът Tooltip е предназначен да показва подсказки, когато преместите показалеца на мишката върху една или друга част от страницата. Но в допълнение към местоположението на подсказката отдясно, отляво и отгоре с помощта, подсказката има следните свойства:
- Активно. Използването на свойството true в Bootstrap Tooltip позволява показването на подсказки, докато задаване на същото свойство на false означава, че не могат да се показват подсказки.
- AutoPopDelay е времето, в което се показват съветите.
- AutoPopDelay. Представлява времето, през което курсорът на мишката трябва да се задържи над елемент, за да се появи подсказката.
- IsBaloon. Ако стойността на подсказката за HTML Bootstrap Tooltip е вярна, подсказката ще се промени в облак.
- Икона за съвет. Представлява символа, който се показва в прозорецасъвети.
Tooltipster
За да създадете красиви подсказки, например на сайт, създаден на Wordpress, не е необходимо да знаете добре езика на уеб разработчиците. Достатъчно е да знаете за съществуването на такъв плъгин (разширение) като Tooltipster. От името става ясно, че този плъгин е базиран на Tooltip и е изненадващо подобен на него по своите свойства и предназначение. За какво е този плъгин? Позволява ви да създадете необходимото HTML маркиране в подсказката.
Работата на плъгина се основава на вмъкване на преки пътища в страницата. Съдържа всички основни атрибути на HTML Bootstrap Tooltip: съдържание (data-tooltip-content), заглавие, позиция, тригер и т.н. Това ви позволява да промените темата, шрифта, размера на подсказката, цвета, да вмъкнете изображение и други.
