Kako svoju stranicu učiniti privlačnom posjetiteljima? Ovo pitanje zabrinjava gotovo sve vlasnike internetskih resursa: trgovce, blogere, vlasnike malih i velikih preduzeća, putnike i jednostavno kreativne ljude koji imaju šta reći svijetu.
Zašto bi web stranica trebala biti lijepa i funkcionalna?
Broj poseta zavisi od teme sajta i njegove ciljne publike, interesovanja ljudi za određeni proizvod, ulaganja, promocije, sadržaja i mnogih drugih faktora. Ali ne može se poreći da sajt "dočekuje odeća". To je prva i glavna stranica resursa koja je njegovo lice, vizit karta, po kojoj posjetitelj mora razumjeti da li želi da troši svoje vrijeme na dalje pregledavanje sadržaja.
I nema mjesta grešci! Prema istraživanju jednog od tehničkih univerziteta u SAD-u, prvi utisak o sajtu posetilac stiče za manje od sekunde. U prosjeku, osoba "skenira" stranicu za 3 sekunde. Brzina munje, zar ne?!
Do 70% uspjeha resursa ovisi o tome kako izgleda glavna stranica. Prva stvar koju ljudi primete jelogo, ali drugi je navigacija. A ako je sve manje-više jasno s logotipom, onda je vrijedno razbiti glavu o navigaciji, izborniku i praktičnosti ergonomije stranice. Postavlja se razumno pitanje: "Kako ukrasiti svoju web stranicu, učiniti je što je moguće funkcionalnijom i praktičnijom, ali istovremeno i lijepu?" Postoji mnogo neobičnih ideja koje možete ponuditi, ali jedna od najzanimljivijih su opisi alata.
Šta su opisi alata? Osim što su odličan mehanizam za poboljšanje funkcionalnosti stranice, opisi alata su alat koji omogućava korisniku da vidi objašnjenje za određenu sliku kada pređe preko ikone, riječi ili slike.
Alati za rad sa opisima alata
Bootstrap je najbolji alat za kreiranje opisa alata. To je skup predložaka za pravljenje aplikacija i web stranica koji se lako naučiti u HTML-u, CSS-u, Sass-u i JavaScript-u.
Da budemo precizni, opisi koriste jedan od grafičkih elemenata Bootstrap šablona - Tooltip.
Bootstrap framework je kreiran za "Twitter" i prvobitno se zvao "Twitter Blueprint". Nakon nekih izmjena 2012. godine, dobio je mrežu od 12 kolona, postao prilagodljiv i dobio poznato ime - Tooltip. Objašnjenje je element koji se pojavljuje kada pređete mišem preko određenog elementa na ekranu monitora.
Kreiranje nagovještaja
Možete kreirati Bootstrap Tooltip koristeći atributepodataka, kao i aktiviranjem elemenata "Java Script". Postoje dva glavna načina da kreirate HTML Bootstrap Tooltip. Suština prvog je da se primeni atribut i atribut title (title), koji će sadržati tekst nagoveštaja. Alat će se pojaviti na vrhu (podrazumevana postavka). Vrijedno je imati na umu da se opis alata mora inicijalizirati, budući da je automatska inicijalizacija zastarjela u "Twitter bootstrap" iz razloga performansi.
Da bi se inicijalizirali opisi alata, koristi se specijalni JavaScript, u kojem se metoda tooltip-a vraća za sve elemente koji imaju atribut. Suština druge metode je aktiviranje opisa alata pomoću "JavaScript" koda uz učešće jQuery biblioteke pisanjem klase alata koja uključuje opis alata. Metoda je slična prvoj, osim metode odabira elemenata. Možete omogućiti savjete u "Java Script" na način prikazan ispod.
Primjer opisa alata za Bootstrap
Postoje četiri glavne opcije za pozicioniranje opisa alata: na lijevoj i desnoj ivici, te iznad i ispod elementa.
Savjet odozgo
Nagoveštaj desno
Nagoveštaj na dnu
Savjet lijevo
Korišćenje savjeta
Postoji mnogo upotreba za Bootstrap Tooltip. Možete umetnuti opise alata tako da korisnik može razumjeti prijevod teksta sa stranog jezika u tekstu. Alati se također mogu koristiti kao alat koji pomaže korisniku da razumije značenje dugmadi na panelu kada pređe preko njih. Predlošci Bootstrap Tooltip-a se često koriste na web stranicama raznih organizacija za kreiranje pretplate na vijesti kompanije. Ovo održava klijente u toku, a posjetiteljima također omogućava da dobiju nove informacije, kao što su popusti, ponude, promjene unutar kompanije.
Razmotrimo primjer gdje korisnik treba da unese svoju email adresu da bi se pretplatio na bilten. Zadatak osiguravanja da se klijentska publika pretplati na vijesti najlakše se postiže korištenjem HTML5 i potrebnog atributa. Savjet za alat u ovom slučaju je potreban kako bi korisnik razumio slijed radnji. Na primjer, nakon unosa adrese e-pošte, označio sam polje: "Slažem se da primam vijesti o kompaniji na moju adresu e-pošte." Ispod je primjer koda obrasca.
Instaliranje ovog koda u HTML Bootstrap Tooltip je jednostavno. Ali prednosti su značajne. Sada potrošači znaju sve novosti o kompaniji. Ovo je vrsta besplatnog reklamiranja.
Glavne greške pri kreiranju iskačućih prozorasavjeti
Šta učiniti ako Bootstrap Tooltip ne radi? Prva i glavna greška u kojoj atribut tooltip neće raditi je ako tooltip nije omogućen. Da biste ga aktivirali, morate koristiti poseban kod.
Ova metoda vam omogućava da inicijalizirate apsolutno sve opise alata na web stranici.
Druga uobičajena greška je nedostatak jQueryja u zaglavlju.
Postoji neophodan uslov da link radi ispravno - mora biti specificirana funkcija obrade podataka kao što je "Java Script".
Svojstva opisa
U svojoj srži, komponenta Tooltip je dizajnirana da prikaže opise alata kada pomerite pokazivač miša preko jednog ili drugog dela stranice. Ali, pored lokacije opisa sa desne, lijeve i gornje strane uz pomoć, opis alata ima sljedeća svojstva:
- Aktivan. Korištenje svojstva true u Bootstrap Tooltip-u omogućava da se prikažu opisi alata, dok postavljanje istog svojstva na false znači da se opisi alata ne mogu prikazati.
- AutoPopDelay je vrijeme u kojem se savjeti prikazuju.
- AutoPopDelay. Predstavlja koliko vremena kursor miša mora da lebdi iznad elementa da bi se pojavio opis.
- IsBaloon. Ako je vrijednost opisa alata HTML Bootstrap Tooltip tačna, opis alata će se promijeniti u oblak.
- ToolTipIcon. Predstavlja znak koji je prikazan u prozorusavjeti.
Tooltipster
Da biste kreirali prelepe opise alata, na primer, na sajtu kreiranom na Wordpress-u, nije potrebno temeljito poznavati jezik web programera. Dovoljno je znati za postojanje takvog dodatka (ekstenzije) kao što je Tooltipster. Iz naziva je jasno da je ovaj dodatak baziran na Tooltip-u i da mu je iznenađujuće sličan po svojim svojstvima i svrsi. Čemu služi ovaj dodatak? Omogućava vam da kreirate potrebne HTML oznake unutar opisa alata.
Rad dodatka zasniva se na umetanju prečica na stranicu. Sadrži sve osnovne HTML Bootstrap Tooltip atribute: sadržaj (data-tooltip-content), naslov, poziciju, okidač, itd. Ovo vam omogućava da promijenite temu, font, veličinu opisa alata, boju, umetnete sliku i još mnogo toga.
