Si ta bëni faqen tuaj tërheqëse për vizitorët? Kjo pyetje shqetëson pothuajse të gjithë pronarët e burimeve të internetit: tregtarët, blogerët, pronarët e bizneseve të vogla dhe të mëdha, udhëtarët dhe thjesht njerëzit krijues që kanë diçka për t'i treguar botës.
Pse një faqe interneti duhet të jetë e bukur dhe funksionale?
Numri i vizitave varet nga tema e faqes dhe audienca e saj e synuar, interesi i njerëzve për një produkt të caktuar, investimi, promovimi, përmbajtja dhe shumë faktorë të tjerë. Por nuk mund të mohohet që faqja “përshëndetet me rroba”. Është faqja e parë dhe kryesore e burimit që është fytyra e tij, karta e thirrjes, me anë të së cilës vizitori duhet të kuptojë nëse dëshiron të kalojë kohën e tij për shikimin e mëtejshëm të përmbajtjes.
Dhe nuk ka vend për gabim! Sipas hulumtimit të një prej universiteteve teknike në SHBA, vizitori e merr përshtypjen e parë të faqes në më pak se një sekondë. Mesatarisht, një person "skanon" një faqe në 3 sekonda. Shpejtësia e rrufesë, apo jo?!
Deri në 70% të suksesit të burimit varet nga mënyra se si duket faqja kryesore. Gjëja e parë që njerëzit vënë re ështëlogoja, por e dyta është navigimi. Dhe nëse gjithçka është pak a shumë e qartë me logon, atëherë ia vlen të thyeni kokën mbi navigimin, menunë dhe komoditetin e ergonomisë së faqes. Shtrohet një pyetje e arsyeshme: "Si ta dekoroni faqen tuaj, ta bëni atë sa më funksionale dhe të përshtatshme, por në të njëjtën kohë të bukur?" Ka shumë ide të pazakonta për të ofruar, por një nga më interesantet janë këshillat e veglave.
Çfarë janë këshillat e veglave? Përveç të qenit një mekanizëm i shkëlqyeshëm për përmirësimin e funksionalitetit të faqes, këshillat e veglave janë një mjet që i lejon përdoruesit të shohë një shpjegim për një imazh të caktuar kur qëndron pezull mbi një ikonë, fjalë ose figurë.
Mjete për të punuar me këshilla veglash
Bootstrap është mjeti më i mirë për krijimin e këshillave të veglave. Është një grup shabllonesh të lehtë për t'u mësuar për ndërtimin e aplikacioneve dhe faqeve të internetit të shkruara në HTML, CSS, Sass dhe JavaScript.
Për të qenë specifik, këshillat e veglave përdorin një nga elementët grafikë të shabllonit Bootstrap - Këshillë e veglave.
Kuadri Bootstrap u krijua për "Twitter" dhe fillimisht u quajt "Twitter Blueprint". Pas disa ndryshimeve në vitin 2012, ai mori një rrjet me 12 kolona, u bë adaptues dhe fitoi emrin e njohur - Tooltip. Një këshillë veglash është një element që shfaqet kur rri pezull mbi një element specifik në ekranin e monitorit.
Krijimi i një sugjerimi
Ju mund të krijoni një udhëzues të veglave Bootstrap duke përdorur atributettë dhënat, si dhe duke aktivizuar elementet "Java Script". Ka dy mënyra kryesore për të krijuar një HTML Bootstrap Tooltip. Thelbi i së parës është aplikimi i atributit dhe titullit të atributit (titulli), i cili do të përmbajë tekstin e aludimit. Këshilla e veglave do të shfaqet në krye (cilësimi i parazgjedhur). Vlen të kujtohet se këshilla e veglave duhet të inicializohet, pasi inicializimi automatik është zhvlerësuar në "bootstrap-in e Twitter" për arsye të performancës.
Për të inicializuar këshillat e veglave, përdoret JavaScript special, në të cilin metoda e këshillës së veglave rikthehet për të gjithë elementët që kanë një atribut. Thelbi i metodës së dytë është të aktivizoni një këshillë veglash duke përdorur kodin "JavaScript" me pjesëmarrjen e bibliotekës jQuery duke shkruar një klasë mjeti që përfshin një këshillë veglash. Metoda është e ngjashme me të parën, me përjashtim të metodës së përzgjedhjes së elementeve. Ju mund të aktivizoni sugjerimet në "Java Script" në mënyrën e treguar më poshtë.
Shembull i këshillës së mjetit Bootstrap
Ka katër opsione kryesore për pozicionimin e këshillave të veglave: në skajet e majta dhe të djathta, si dhe sipër dhe poshtë elementit.
Hint nga lart
Udhëzim djathtas
Udhëzim në fund
Udhëzim majtas
Përdorimi i këshillave të veglave
Ka shumë përdorime për këshillën e veglave Bootstrap. Ju mund të futni këshilla veglash në mënyrë që përdoruesi të kuptojë përkthimin e tekstit nga një gjuhë e huaj në tekst. Këshillat e veglave mund të përdoren gjithashtu si një mjet për të ndihmuar përdoruesin të kuptojë kuptimin e butonave në panel kur rri pezull mbi to. Modelet e bootstrap Tooltip përdoren shpesh në faqet e internetit të organizatave të ndryshme për të krijuar një abonim në lajmet e kompanisë. Kjo i mban klientët të përditësuar dhe gjithashtu i lejon vizitorët të marrin informacione të reja, të tilla si normat e zbritjes, ofertat, ndryshimet brenda kompanisë.
Konsideroni një shembull ku një përdorues duhet të fusë adresën e tij të emailit në mënyrë që të abonohet në një buletin. Detyra për të siguruar që audienca e klientit të pajtohet në lajme arrihet më lehtë duke përdorur HTML5 dhe atributin e kërkuar. Këshilla e udhëzimeve në këtë rast nevojitet në mënyrë që përdoruesi të kuptojë sekuencën e veprimeve. Për shembull, pasi futa adresën e emailit, shënova kutinë: "Pranoj të marr lajmet e kompanisë në adresën time të emailit". Më poshtë është një shembull i kodit të formularit.
Instalimi i këtij kodi në HTML Bootstrap Tooltip është i lehtë. Por përfitimet janë domethënëse. Tani konsumatorët i dinë të gjitha lajmet e kompanisë. Ky është një lloj reklame falas.
Gabimet kryesore gjatë krijimit të dritareve kërcyesesugjerime
Çfarë duhet të bëni nëse Bootstrap Tooltip nuk funksionon? Gabimi i parë dhe kryesor ku atributi tooltip nuk do të funksionojë është nëse këshilla e veglave nuk është e aktivizuar. Për ta aktivizuar, duhet të përdorni një kod të veçantë.
Kjo metodë ju lejon të inicializoni absolutisht të gjitha këshillat e veglave në një faqe interneti.
Gabimi i dytë i zakonshëm është mospasja e jQuery në kokë.
Ekziston një kusht i domosdoshëm që lidhja të funksionojë siç duhet - duhet të specifikohet një funksion i përpunimit të të dhënave si "Java Script".
Vetitë e këshillës së veglave
Në thelbin e tij, komponenti Tooltip është krijuar për të shfaqur këshillat e veglave kur lëvizni treguesin e miut mbi një ose një pjesë tjetër të faqes. Por, përveç vendndodhjes së këshillës së veglave në të djathtë, majtas dhe lart me ndihmën, këshilla e veglave ka këto karakteristika:
- Aktiv. Përdorimi i vetive të vërteta në "Bootstrap Tooltip" lejon që të shfaqen këshillat e veglave, ndërsa vendosja e së njëjtës veti në "false" do të thotë që nuk mund të shfaqen këshilla të veglave.
- AutoPopDelay është koha në të cilën shfaqen këshillat.
- Vonesë AutoPop. Përfaqëson sasinë e kohës që kursori i miut duhet të qëndrojë pezull mbi një element që të shfaqet këshilla e mjetit.
- IsBaloon. Nëse vlera e këshillës së veglave HTML Bootstrap është e vërtetë, këshilla e veglave do të ndryshojë në një re.
- ToolTipIcon. Përfaqëson karakterin që shfaqet në dritaresugjerime.
Udhëzues veglash
Për të krijuar këshilla të bukura veglash, për shembull, në një sajt të krijuar në Wordpress, nuk është e nevojshme të njihni plotësisht gjuhën e zhvilluesve të uebit. Mjafton të dimë për ekzistencën e një shtojce (zgjerimi) të tillë si Tooltipster. Nga emri është e qartë se kjo shtojcë bazohet në Tooltip dhe është çuditërisht e ngjashme me të në vetitë dhe qëllimin e saj. Për çfarë është kjo shtojcë? Kjo ju lejon të krijoni shënimin e nevojshëm HTML brenda këshillës së veglave.
Puna e shtojcës bazohet në futjen e shkurtoreve në faqe. Përmban të gjitha atributet bazë të HTML Bootstrap Tooltip: përmbajtjen (data-tooltip-content), titullin, pozicionin, aktivizimin, etj. Kjo ju lejon të ndryshoni temën, fontin, madhësinë e këshillës së veglave, ngjyrën, të futni një imazh dhe më shumë.
