Kako svoju stranicu učiniti privlačnom posjetiteljima? Ovo pitanje zabrinjava gotovo sve vlasnike internetskih resursa: trgovce, blogere, vlasnike malih i velikih tvrtki, putnike i jednostavno kreativne ljude koji imaju što reći svijetu.
Zašto bi web stranica trebala biti lijepa i funkcionalna?
Broj posjeta ovisi o temi stranice i njezinoj ciljanoj publici, interesu ljudi za određeni proizvod, ulaganju, promociji, sadržaju i mnogim drugim čimbenicima. No, ne može se poreći da stranicu "dočekuje odjeća". To je prva i glavna stranica resursa koja je njegovo lice, posjetnica, po kojoj posjetitelj mora razumjeti želi li svoje vrijeme trošiti na daljnje pregledavanje sadržaja.
I nema mjesta za pogreške! Prema istraživanju jednog od tehničkih sveučilišta u SAD-u, posjetitelj prvi dojam stranice stječ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 primjećuju jelogo, ali drugi je navigacija. A ako je sve više-manje 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 funkcionalnijom i prikladnijom, ali u isto vrijeme lijepom?" Postoji mnogo neobičnih ideja za ponuditi, ali jedna od najzanimljivijih su opisi alata.
Što su opisi alata? Osim što su izvrstan mehanizam za poboljšanje funkcionalnosti web-mjesta, opisi alata su alat koji omogućuje korisniku da vidi objašnjenje za određenu sliku kada pređe preko ikone, riječi ili slike.
Alati za rad s opisima
Bootstrap je najbolji alat za izradu opisa alata. To je skup predložaka za izradu aplikacija i web-mjesta koji se lako uči napisan u HTML-u, CSS-u, Sass-u i JavaScript-u.
Da budemo precizni, opisi koriste jedan od grafičkih elemenata predloška Bootstrap - Tooltip.
Bootstrap okvir je kreiran za "Twitter" i izvorno se zvao "Twitter Blueprint". Nakon nekih promjena 2012. godine dobio je mrežu od 12 stupaca, postao prilagodljiv i dobio poznato ime - Tooltip. Alat je element koji se pojavljuje kada zadržite pokazivač iznad određenog elementa na zaslonu monitora.
Izrada nagovještaja
Možete kreirati Bootstrap Tooltip koristeći atributepodataka, kao i aktiviranjem elemenata "Java Script". Postoje dva glavna načina za stvaranje HTML Bootstrap Tooltip. Bit prvog je primijeniti atribut i atribut title (title), koji će sadržavati tekst nagovještaja. Alat će se pojaviti na vrhu (zadana postavka). Vrijedno je imati na umu da je opis alata potrebno inicijalizirati, budući da je automatska inicijalizacija zastarjela u "Twitter bootstrap" zbog performansi.
Da bi se inicijalizirali opisi alata, koristi se poseban JavaScript, u kojem se metoda opisa alata vraća za sve elemente koji imaju atribut. Bit druge metode je aktiviranje opisa alata pomoću koda "JavaScript" uz sudjelovanje biblioteke jQuery 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.
Bootstrap primjer opisa
Postoje četiri glavne opcije za pozicioniranje opisa alata: na lijevom i desnom rubu, te iznad i ispod elementa.
Savjet odozgo
Nagoveštaj desno
Savjet na dnu
Savjet lijevo
Upotreba opisa
Postoji mnogo upotreba za Bootstrap Tooltip. Možete umetnuti opise kako bi korisnik mogao razumjeti prijevod teksta sa stranog jezika u tekstu. Oznake alata također se mogu koristiti kao alat koji pomaže korisniku da razumije značenje gumba na ploči kada lebdi iznad njih. Predlošci Bootstrap Tooltip često se koriste na web stranicama raznih organizacija za stvaranje pretplate na vijesti tvrtke. To održava klijente ažurnim i također omogućuje posjetiteljima da primaju nove informacije, kao što su popusti, ponude, promjene unutar tvrtke.
Razmotrimo primjer gdje korisnik treba unijeti svoju adresu e-pošte kako bi se pretplatio na newsletter. Zadatak osiguravanja pretplate publike na vijesti najlakše je postići korištenjem HTML5 i potrebnog atributa. Savjet u ovom slučaju potreban je kako bi korisnik razumio slijed radnji. Na primjer, nakon unosa adrese e-pošte, označio sam okvir: "Slažem se primati novosti tvrtke na svoju 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 tvrtki. Ovo je vrsta besplatnog oglašavanja.
Glavne pogreške pri izradi skočnih prozorasavjeti
Što učiniti ako Bootstrap Tooltip ne radi? Prva i glavna pogreška u kojoj atribut tooltip neće raditi je ako opis alata nije omogućen. Da biste ga aktivirali, trebate koristiti poseban kod.
Ova metoda vam omogućuje da inicijalizirate apsolutno sve opise alata na web stranici.
Druga uobičajena pogreška je nedostatak jQueryja u zaglavlju.
Postoji nužan uvjet za ispravan rad veze - mora biti navedena funkcija obrade podataka poput "Java Script".
Svojstva opisa
U svojoj srži, komponenta Tooltip dizajnirana je za prikaz opisa alata kada pomaknete pokazivač miša preko jednog ili drugog dijela stranice. Ali, osim položaja opisa s desne, lijeve i gornje strane uz pomoć, opis alata ima sljedeća svojstva:
- Aktivan. Korištenje svojstva true u Bootstrap Tooltip omogućuje prikaz opisa alata, dok postavljanje istog svojstva na false znači da se opisi ne mogu prikazati.
- AutoPopDelay je vrijeme u kojem se savjeti prikazuju.
- AutoPopDelay. Predstavlja vrijeme koje kursor miša mora lebdjeti iznad elementa da bi se pojavio opis.
- IsBaloon. Ako je vrijednost opisa alata HTML Bootstrap Tooltip istinita, opis će se promijeniti u oblak.
- ToolTipIcon. Predstavlja znak koji je prikazan u prozorusavjeti.
Tooltipster
Da biste stvorili lijepe opise alata, na primjer, na web-stranici izrađenoj na Wordpressu, nije potrebno temeljito poznavati jezik web programera. Dovoljno je znati o postojanju takvog dodatka (proširenja) kao što je Tooltipster. Iz naziva je jasno da se ovaj dodatak temelji na Tooltip-u i iznenađujuće mu je sličan po svojim svojstvima i namjeni. Čemu služi ovaj dodatak? Omogućuje vam stvaranje potrebne HTML oznake unutar opisa alata.
Rad dodatka temelji se na umetanju prečaca na stranicu. Sadrži sve osnovne HTML Bootstrap Tooltip atribute: sadržaj (data-tooltip-content), naslov, poziciju, okidač, itd. To vam omogućuje promjenu teme, fonta, veličine opisa, boje, umetanje slike i još mnogo toga.
