Jak sprawić, by Twoja witryna była atrakcyjna dla odwiedzających? To pytanie niepokoi prawie wszystkich właścicieli zasobów internetowych: sprzedawców, blogerów, właścicieli małych i dużych firm, podróżników i po prostu kreatywnych ludzi, którzy mają coś do powiedzenia światu.
Dlaczego strona internetowa powinna być piękna i funkcjonalna?
Liczba odwiedzin zależy od tematyki witryny i jej docelowych odbiorców, zainteresowania ludzi konkretnym produktem, inwestycji, promocji, treści i wielu innych czynników. Ale nie można zaprzeczyć, że strona jest „witana przez ubrania”. Jest to pierwsza i główna strona zasobu, która jest jego twarzą, wizytówką, dzięki której odwiedzający musi zrozumieć, czy chce poświęcić swój czas na dalsze oglądanie treści.
I nie ma miejsca na błędy! Według badań jednej z uczelni technicznych w USA, odwiedzający uzyskuje pierwsze wrażenie na stronie w mniej niż sekundę. Średnio osoba „skanuje” witrynę w 3 sekundy. Błyskawiczna prędkość, prawda?!
Do 70% sukcesu zasobu zależy od wyglądu strony głównej. Pierwszą rzeczą, jaką ludzie zauważają, jestlogo, ale drugi to nawigacja. A jeśli z logo wszystko jest mniej więcej czytelne, to warto przełamać głowę nad nawigacją, menu i wygodą ergonomii strony. Powstaje rozsądne pytanie: „Jak udekorować swoją witrynę, aby była jak najbardziej funkcjonalna i wygodna, ale jednocześnie piękna?” Jest wiele nietypowych pomysłów do zaoferowania, ale jednym z najciekawszych są podpowiedzi.
Co to są podpowiedzi? Oprócz tego, że są świetnym mechanizmem poprawiającym funkcjonalność witryny, podpowiedzi są narzędziem, które pozwala użytkownikowi zobaczyć wyjaśnienie konkretnego obrazu po najechaniu kursorem na ikonę, słowo lub obraz.
Narzędzia do pracy z podpowiedziami
Bootstrap to najlepsze narzędzie do tworzenia podpowiedzi. Jest to łatwy do nauczenia zestaw szablonów do tworzenia aplikacji i stron internetowych napisanych w HTML, CSS, Sass i JavaScript.
Aby być konkretnym, podpowiedzi wykorzystują jeden z elementów graficznych szablonu Bootstrap - podpowiedź.
Struktura Bootstrap została stworzona dla „Twittera” i początkowo nosiła nazwę „Twitter Blueprint”. Po kilku zmianach w 2012 roku otrzymał 12-kolumnową siatkę, stał się adaptacyjny i zyskał znaną nazwę - Tooltip. Podpowiedź to element, który pojawia się, gdy najedziesz kursorem na określony element na ekranie monitora.
Tworzenie podpowiedzi
Możesz utworzyć podpowiedź na temat Bootstrap za pomocą atrybutówdanych, a także poprzez aktywację elementów „Java Script”. Istnieją dwa główne sposoby tworzenia podpowiedzi HTML Bootstrap. Istotą pierwszego jest zastosowanie atrybutu i tytułu atrybutu (tytułu), który będzie zawierał tekst podpowiedzi. Podpowiedź pojawi się u góry (ustawienie domyślne). Warto pamiętać, że podpowiedź należy zainicjować, ponieważ automatyczne inicjowanie zostało wycofane w „Twitter bootstrap” ze względu na wydajność.
W celu zainicjowania podpowiedzi używany jest specjalny JavaScript, w którym metoda podpowiedzi jest odtwarzana dla wszystkich elementów, które mają atrybut. Istotą drugiej metody jest aktywacja podpowiedzi za pomocą kodu „JavaScript” z udziałem biblioteki jQuery poprzez napisanie klasy narzędzia, która zawiera podpowiedź. Metoda jest podobna do pierwszej, z wyjątkiem metody selekcji elementów. Możesz włączyć podpowiedzi w "Java Script" w sposób pokazany poniżej.
Przykład podpowiedzi
Istnieją cztery główne opcje pozycjonowania podpowiedzi: na lewej i prawej krawędzi oraz nad i pod elementem.
Podpowiedź z góry
Właściwa wskazówka
Wskazówka na dole
Pozostała wskazówka
Korzystanie z podpowiedzi
Podpowiedź o Bootstrap może zostać wykorzystana na wiele sposobów. Możesz wstawić podpowiedzi, aby użytkownik mógł zrozumieć tłumaczenie tekstu z języka obcego w tekście. Podpowiedzi mogą być również używane jako narzędzie pomagające użytkownikowi zrozumieć znaczenie przycisków na panelu po najechaniu na nie kursorem. Szablony Bootstrap Tooltip są często używane na stronach internetowych różnych organizacji do tworzenia subskrypcji wiadomości firmowych. Dzięki temu klienci są na bieżąco, a odwiedzający mogą otrzymywać nowe informacje, takie jak stawki rabatowe, oferty, zmiany w firmie.
Rozważmy przykład, w którym użytkownik musi wprowadzić swój adres e-mail, aby zapisać się do newslettera. Zadanie polegające na upewnieniu się, że publiczność klienta subskrybuje wiadomości, najłatwiej osiągnąć za pomocą HTML5 i wymaganego atrybutu. W tym przypadku wskazówka podpowiedzi jest potrzebna, aby użytkownik mógł zrozumieć sekwencję działań. Na przykład po wpisaniu adresu e-mail zaznaczyłem pole: „Wyrażam zgodę na otrzymywanie wiadomości firmowych na mój adres e-mail”. Poniżej znajduje się przykład kodu formularza.
Zainstalowanie tego kodu w podpowiedzi HTML Bootstrap jest łatwe. Ale korzyści są znaczące. Teraz konsumenci znają wszystkie nowości firmy. To rodzaj darmowej reklamy.
Główne błędy podczas tworzenia wyskakujących okienekwskazówki
Co zrobić, jeśli podpowiedź Bootstrap nie działa? Pierwszym i głównym błędem, w którym atrybut podpowiedzi nie będzie działał, jest to, że podpowiedź nie jest włączona. Aby go aktywować, musisz użyć specjalnego kodu.
Ta metoda pozwala zainicjować absolutnie wszystkie podpowiedzi na stronie internetowej.
Drugim częstym błędem jest brak jQuery w nagłówku.
Istnieje warunek konieczny, aby łącze działało poprawnie - musi być określona funkcja przetwarzania danych, taka jak „Java Script”.
Właściwości podpowiedzi
W swej istocie składnik Tooltip jest przeznaczony do wyświetlania podpowiedzi, gdy przesuniesz wskaźnik myszy nad jedną lub drugą część strony. Ale oprócz lokalizacji podpowiedzi po prawej, lewej stronie i u góry z pomocą, podpowiedź ma następujące właściwości:
- Aktywny. Używanie właściwości true w podpowiedziach Bootstrap umożliwia wyświetlanie podpowiedzi, podczas gdy ustawienie tej samej właściwości na false oznacza, że nie można wyświetlać podpowiedzi.
- AutoPopDelay to czas, w którym wyświetlane są podpowiedzi.
- AutoPopOpóźnienie. Reprezentuje czas, przez który kursor myszy musi znajdować się nad elementem, aby pojawiła się podpowiedź.
- Jest Balonem. Jeśli wartość podpowiedzi HTML Bootstrap Tooltip ma wartość true, podpowiedź zmieni się w chmurę.
- Ikona podpowiedzi. Reprezentuje znak wyświetlany w okniepodpowiedzi.
Tipster narzędziowy
Aby stworzyć piękne podpowiedzi, na przykład w witrynie utworzonej na Wordpress, nie jest konieczna dogłębna znajomość języka programistów internetowych. Wystarczy wiedzieć o istnieniu takiej wtyczki (rozszerzenia) jak Tooltipster. Z nazwy jasno wynika, że ta wtyczka jest oparta na Tooltip i jest do niej zaskakująco podobna pod względem właściwości i przeznaczenia. Do czego służy ta wtyczka? Umożliwia tworzenie niezbędnych znaczników HTML w podpowiedzi.
Działanie wtyczki opiera się na wstawianiu skrótów na stronę. Zawiera wszystkie podstawowe atrybuty HTML Bootstrap Tooltip: zawartość (data-tooltip-content), tytuł, pozycja, wyzwalacz itp. Pozwala to zmienić motyw, czcionkę, rozmiar podpowiedzi, kolor, wstawić obraz i nie tylko.
