Cum să vă faceți site-ul atractiv pentru vizitatori? Această întrebare îi îngrijorează pe aproape toți proprietarii de resurse de internet: comercianți, bloggeri, proprietari de afaceri mici și mari, călători și oameni pur și simplu creativi care au ceva de spus lumii.
De ce ar trebui un site web frumos și funcțional?
Numărul de vizite depinde de tema site-ului și de publicul țintă al acestuia, interesul oamenilor pentru un anumit produs, investiție, promovare, conținut și mulți alți factori. Dar nu se poate nega că site-ul este „întâmpinat de haine”. Este prima și pagina principală a resursei care este fața acesteia, cartea de vizită, prin care vizitatorul trebuie să înțeleagă dacă dorește să-și petreacă timpul pentru vizionarea ulterioară a conținutului.
Și nu există loc de eroare! Potrivit cercetării uneia dintre universitățile tehnice din SUA, vizitatorul are prima impresie a site-ului în mai puțin de o secundă. În medie, o persoană „scanează” un site în 3 secunde. Viteza fulgerului, nu?!
Până la 70% din succesul resursei depinde de modul în care arată pagina principală. Primul lucru pe care oamenii îl observă estelogo, dar al doilea este navigarea. Și dacă totul este mai mult sau mai puțin clar cu logo-ul, atunci merită să vă spargeți capul peste navigarea, meniul și comoditatea ergonomiei site-ului. Apare o întrebare rezonabilă: „Cum să-ți decorezi site-ul, să-l faci cât mai funcțional și convenabil, dar în același timp frumos?” Există multe idei neobișnuite de oferit, dar una dintre cele mai interesante este sfaturile instrumente.
Ce sunt sfaturile instrumente? Pe lângă faptul că sunt un mecanism excelent pentru îmbunătățirea funcționalității site-ului, sfaturile cu instrumente sunt un instrument care permite utilizatorului să vadă o explicație pentru o anumită imagine atunci când trece cu mouse-ul peste o pictogramă, cuvânt sau imagine.
Instrumente pentru lucrul cu sfaturi despre instrumente
Bootstrap este cel mai bun instrument pentru crearea de sfaturi pentru instrumente. Este un set de șabloane ușor de învățat pentru crearea de aplicații și site-uri web scrise în HTML, CSS, Sass și JavaScript.
Pentru a fi mai precis, sfaturile explicative folosesc unul dintre elementele grafice ale șablonului Bootstrap - Sfat instrument.
Cadrul Bootstrap a fost creat pentru „Twitter” și a fost inițial numit „Twitter Blueprint”. După unele modificări în 2012, a primit o grilă cu 12 coloane, a devenit adaptabil și a dobândit numele familiar - Tooltip. Un balon explicativ este un element care apare atunci când treceți cu mouse-ul peste un anumit element de pe ecranul monitorului.
Crearea unui indiciu
Puteți crea un balon instrument Bootstrap folosind atributedate, precum și prin activarea elementelor „Java Script”. Există două modalități principale de a crea un ghid HTML Bootstrap. Esența primului este de a aplica atributul și titlul atributului (titlu), care va conține textul indiciu. Indicatorul va apărea în partea de sus (setare implicită). Merită să ne amintim că balonul explicativ trebuie inițializat, deoarece inițializarea automată a fost depreciată în „Twitter bootstrap” din motive de performanță.
Pentru a inițializa tooltips, se folosește JavaScript special, în care metoda tooltip este restaurată pentru toate elementele care au un atribut. Esența celei de-a doua metode este de a activa un tooltip folosind codul „JavaScript” cu participarea bibliotecii jQuery prin scrierea unei clase de instrumente care include un tooltip. Metoda este similară cu prima, cu excepția metodei de selecție a elementelor. Puteți activa sugestiile în „Scriptul Java” în modul prezentat mai jos.
Exemplu de indicație pentru bootstrap
Există patru opțiuni principale pentru poziționarea indicatoarelor: pe marginile din stânga și din dreapta și deasupra și dedesubtul elementului.
Sugestie de mai sus
Sugestie corectă
Sugestie în partea de jos
indiciu rămas
Utilizarea sfaturii instrumente
Există multe utilizări pentru Bootstrap Tooltip. Puteți insera sfaturi pentru ca utilizatorul să poată înțelege traducerea textului dintr-o limbă străină în text. Sfaturile cu instrumente pot fi folosite și ca instrument pentru a ajuta utilizatorul să înțeleagă semnificația butoanelor de pe panou atunci când trece cu mouse-ul peste ele. Șabloanele Bootstrap Tooltip sunt adesea folosite pe site-urile web ale diferitelor organizații pentru a crea un abonament la știrile companiei. Acest lucru îi menține pe clienți la curent și, de asemenea, le permite vizitatorilor să primească informații noi, cum ar fi tarife de reducere, oferte, modificări în cadrul companiei.
Luați în considerare un exemplu în care un utilizator trebuie să-și introducă adresa de e-mail pentru a se abona la un buletin informativ. Sarcina de a se asigura că publicul client se abonează la știri se realizează cel mai ușor folosind HTML5 și atributul necesar. În acest caz, este necesar un indiciu cu tooltip pentru ca utilizatorul să înțeleagă secvența acțiunilor. De exemplu, după ce am introdus adresa de e-mail, am bifat caseta: „Sunt de acord să primesc noutăți ale companiei pe adresa mea de e-mail”. Mai jos este un exemplu de cod de formular.
Instalarea acestui cod în HTML Bootstrap Tooltip este ușoară. Dar beneficiile sunt semnificative. Acum consumatorii cunosc toate noutățile companiei. Acesta este un fel de publicitate gratuită.
Greșeli principale la crearea ferestrelor pop-upindicii
Ce să faci dacă Bootstrap Tooltip nu funcționează? Prima și principala greșeală în care atributul tooltip nu va funcționa este dacă tooltipul nu este activat. Pentru a-l activa, trebuie să utilizați un cod special.
Această metodă vă permite să inițializați absolut toate sfaturile instrumente de pe o pagină web.
A doua greșeală comună este că nu aveți jQuery în antet.
Există o condiție necesară pentru ca linkul să funcționeze corect - trebuie specificată o funcție de procesare a datelor precum „Scriptul Java”.
Proprietăți cu instrucțiuni
În esență, componenta Tooltip este concepută pentru a afișa sfaturi cu instrumente atunci când mutați cursorul mouse-ului peste una sau alta parte a paginii. Însă, pe lângă locația indicației din dreapta, stânga și de sus cu ajutorul ajutorului, balonul are următoarele proprietăți:
- Activ. Utilizarea proprietății adevărate din Bootstrap Tooltip permite afișarea indicațiilor cu instrumente, în timp ce setarea aceleiași proprietăți la fals înseamnă că nu pot fi afișate indicații.
- AutoPopDelay este ora la care sunt afișate sfaturile.
- AutoPopDelay. Reprezintă perioada de timp în care cursorul mouse-ului trebuie să treacă peste un element pentru ca indicația să apară.
- IsBaloon. Dacă valoarea indicației explicative HTML Bootstrap Tooltip este adevărată, explicația se va schimba într-un nor.
- ToolTipIcon. Reprezintă caracterul care este afișat în fereastrăindicii.
Tooltipster
Pentru a crea sfaturi frumoase, de exemplu, pe un site creat pe Wordpress, nu este necesar să cunoașteți temeinic limbajul dezvoltatorilor web. Este suficient să știți despre existența unui astfel de plugin (extensie) precum Tooltipster. Din nume este clar că acest plugin se bazează pe Tooltip și este surprinzător de asemănător cu acesta în proprietățile și scopul său. Pentru ce este acest plugin? Vă permite să creați marcajul HTML necesar în cadrul balonului explicativ.
Lucrarea pluginului se bazează pe inserarea de comenzi rapide în pagină. Conține toate atributele de bază HTML Bootstrap Tooltip: conținut (data-tooltip-content), titlul, poziția, declanșatorul etc. Acest lucru vă permite să schimbați tema, fontul, dimensiunea balonului, culoarea, inserarea unei imagini și multe altele.
