Miten tehdä sivustostasi houkutteleva vierailijoille? Tämä kysymys huolestuttaa melkein kaikkia Internet-resurssien omistajia: kauppiaita, bloggaajia, pienten ja suurten yritysten omistajia, matkailijoita ja yksinkertaisesti luovia ihmisiä, joilla on jotain kerrottavaa maailmalle.
Miksi verkkosivuston pitäisi olla kaunis ja toimiva?
Käyntien määrä riippuu sivuston teemasta ja sen kohdeyleisöstä, ihmisten kiinnostuksesta tiettyä tuotetta kohtaan, investoinneista, myynninedistämisestä, sisällöstä ja monista muista tekijöistä. Mutta ei voida kiistää, että sivustoa "tervehtivät vaatteet". Se on resurssin ensimmäinen ja pääsivu, joka on sen kasvot, käyntikortti, jonka avulla vierailijan on ymmärrettävä, haluaako hän käyttää aikaansa sisällön katsomiseen edelleen.
Eikä virheille ole varaa! Erään yhdysv altalaisen teknisen yliopiston tutkimuksen mukaan kävijä saa ensivaikutelman paikasta alle sekunnissa. Keskimäärin henkilö "skannata" sivuston 3 sekunnissa. Salaman nopeus, eikö?!
Jopa 70 % resurssin menestyksestä riippuu siitä, miltä pääsivu näyttää. Ensimmäinen asia, jonka ihmiset huomaavat, onlogo, mutta toinen on navigointi. Ja jos logon kanssa kaikki on enemmän tai vähemmän selvää, kannattaa särkeä päätä navigoinnista, valikoista ja sivuston ergonomian mukavuudesta. Herää järkevä kysymys: "Kuinka sisustaa sivustosi, tehdä siitä mahdollisimman toimiva ja kätevä, mutta samalla kaunis?" Tarjolla on monia epätavallisia ideoita, mutta yksi mielenkiintoisimmista on työkaluvinkit.
Mitä työkaluvihjeet ovat? Sen lisäksi, että työkaluvihjeet ovat erinomainen mekanismi sivuston toimivuuden parantamiseen, ne ovat työkalu, jonka avulla käyttäjä näkee selityksen tietylle kuvalle viedessään hiiren osoittimen kuvakkeen, sanan tai kuvan päälle.
Työkaluvihjeiden kanssa työskentelyyn
Bootstrap on paras työkalu työkaluvihjeiden luomiseen. Se on helposti opittava mallijoukko sovellusten ja verkkosivustojen luomiseen HTML-, CSS-, Sass- ja JavaScript-kielellä.
Tarkemmin sanottuna työkaluvinkit käyttävät yhtä Bootstrap-mallin graafisista elementeistä - Tooltip.
Bootstrap-kehys luotiin "Twitterille" ja sen nimi oli alun perin "Twitter Blueprint". Muutamien muutosten jälkeen vuonna 2012 se sai 12 sarakkeen ruudukon, muuttui mukautuvaksi ja sai tutun nimen - Tooltip. Työkaluvinkki on elementti, joka ponnahtaa esiin, kun viet hiiren osoittimen tietyn elementin päälle näyttöruudulla.
Vihjeen luominen
Voit luoda Bootstrap-työkaluvihjeen määritteiden avullatiedot sekä aktivoimalla "Java Script" -elementit. On kaksi päätapaa luoda HTML Bootstrap Tooltip. Ensimmäisen ydin on käyttää attribuuttia ja määritteen otsikkoa (title), joka sisältää vihjetekstin. Työkaluvihje tulee näkyviin yläreunaan (oletusasetus). On syytä muistaa, että työkaluvihje on alustettava, koska automaattinen alustus on poistettu käytöstä "Twitter-käynnistysohjelmassa" suorituskykysyistä.
Työkaluvihjeiden alustamiseksi käytetään erityistä JavaScriptiä, jossa työkaluvihjemenetelmä palautetaan kaikille elementeille, joilla on attribuutti. Toisen menetelmän ydin on aktivoida työkaluvihje "JavaScript"-koodilla jQuery-kirjaston osallistuessa kirjoittamalla työkaluluokka, joka sisältää työkaluvihjeen. Menetelmä on samanlainen kuin ensimmäinen, paitsi elementin valintamenetelmä. Voit ottaa vihjeet käyttöön "Java-skriptissä" alla kuvatulla tavalla.
Bootstrap-työkaluvihjeesimerkki
Työkaluvihjeiden sijoittamiseen on neljä päävaihtoehtoa: vasemmalla ja oikealla reunalla sekä elementin ylä- ja alapuolella.
Vihje ylhäältä
Vihje oikein
Vihje alareunassa
Vihje vasemmalle
Työkaluvihjeiden käyttäminen
Bootstrap-työkaluvihjeelle on monia käyttötarkoituksia. Voit lisätä työkaluvihjeitä, jotta käyttäjä ymmärtää tekstiin tekstin käännöksen viera alta kieleltä. Työkaluvihjeitä voidaan käyttää myös työkaluna, joka auttaa käyttäjää ymmärtämään paneelin painikkeiden merkityksen viedessään hiiren osoitinta niiden päälle. Bootstrap Tooltip -malleja käytetään usein eri organisaatioiden verkkosivuilla yritysuutisten tilaamiseen. Tämä pitää asiakkaat ajan tasalla ja vierailijat saavat myös uutta tietoa, kuten alennuskorot, tarjoukset, muutokset yrityksen sisällä.
Harkitse esimerkkiä, jossa käyttäjän on syötettävä sähköpostiosoitteensa voidakseen tilata uutiskirjeen. Tehtävä varmistaa asiakasyleisön uutisten tilaaminen onnistuu helpoimmin HTML5:llä ja vaaditulla attribuutilla. Työkaluvihje on tässä tapauksessa tarpeen, jotta käyttäjä ymmärtää toimintojen järjestyksen. Esimerkiksi sähköpostiosoitteen syöttämisen jälkeen valitsin ruudun: "Suostun vastaanottamaan yrityksen uutisia sähköpostiosoitteeseeni." Alla on esimerkki lomakekoodista.
Tämän koodin asentaminen HTML Bootstrap -työkaluvihjeeseen on helppoa. Mutta hyödyt ovat merkittäviä. Nyt kuluttajat tietävät kaikki yrityksen uutiset. Tämä on eräänlaista ilmaista mainontaa.
Tärkeimmät virheet luotaessa ponnahdusikkunoitavihjeitä
Mitä tehdä, jos Bootstrap Tooltip ei toimi? Ensimmäinen ja tärkein virhe, jossa työkaluvihje-attribuutti ei toimi, on, jos työkaluvihjettä ei ole otettu käyttöön. Aktivoidaksesi sen, sinun on käytettävä erityistä koodia.
Tämän menetelmän avulla voit alustaa ehdottomasti kaikki Web-sivun työkaluvihjeet.
Toinen yleinen virhe on, että otsikossa ei ole jQueryä.
Linkin toiminnalle on välttämätön ehto – tietojenkäsittelytoiminto, kuten "Java Script" on määritettävä.
Työkaluvinkin ominaisuudet
Työkaluvihje-komponentti on ytimessä suunniteltu näyttämään työkaluvihjeitä, kun siirrät hiiren osoitinta sivun yhden tai toisen osan päälle. Mutta sen lisäksi, että työkaluvihje sijaitsee oikealla, vasemmalla ja ylhäällä avun avulla, työkaluvihjeellä on seuraavat ominaisuudet:
- Aktiivinen. Tosi ominaisuuden käyttäminen Bootstrap-työkaluvihjeessä mahdollistaa työkaluvihjeiden näyttämisen, kun taas saman ominaisuuden asettaminen arvoon false tarkoittaa, että työkaluvihjeitä ei voida näyttää.
- AutoPopDelay on aika, jolloin vihjeet näytetään.
- AutoPopDelay. Edustaa aikaa, jonka hiiren osoittimen on oltava elementin päällä, jotta työkaluvihje tulee näkyviin.
- On Baloon. Jos HTML Bootstrap Tooltip -työkaluvihjeen arvo on tosi, työkaluvihje muuttuu pilveksi.
- ToolTipIcon. Edustaa ikkunassa näkyvää merkkiävihjeitä.
Työkaluvinkki
Jotta luoda kauniita työkaluvihjeitä esimerkiksi Wordpressillä luodulle sivustolle, ei tarvitse osata web-kehittäjien kieltä perusteellisesti. Riittää, kun tietää sellaisen laajennuksen (laajennuksen) olemassaolosta kuin Tooltipster. Nimestä käy selväksi, että tämä liitännäinen perustuu Tooltipiin ja on sen kanssa yllättävän samanlainen ominaisuuksiltaan ja tarkoitukseltaan. Mihin tämä laajennus on tarkoitettu? Sen avulla voit luoda tarvittavat HTML-merkinnät työkaluvihjeen sisään.
Lisäosan toiminta perustuu pikakuvakkeiden lisäämiseen sivulle. Sisältää kaikki HTML Bootstrap Tooltip -perusattribuutit: sisällön (data-tooltip-content), otsikon, sijainnin, triggerin jne. Tämän avulla voit muuttaa teemaa, kirjasinta, työkaluvihjeen kokoa, väriä, lisätä kuvan ja paljon muuta.
