Hogyan teheti vonzóvá webhelyét a látogatók számára? Ez a kérdés az internetes források szinte minden tulajdonosát aggasztja: kereskedőket, bloggereket, kis- és nagyvállalkozások tulajdonosait, utazókat és egyszerűen kreatív embereket, akiknek mondanivalójuk van a világnak.
Miért legyen szép és funkcionális egy webhely?
A látogatások száma függ az oldal témájától és a célközönségétől, az emberek érdeklődésétől egy adott termék iránt, befektetéstől, promóciótól, tartalomtól és sok egyéb tényezőtől. De nem tagadható, hogy az old alt "ruhák köszöntik". Az erőforrás első és főoldala az arca, a névjegykártya, amelyen keresztül a látogatónak meg kell értenie, hogy akarja-e az idejét a tartalom további nézegetésére fordítani.
És nincs helye a hibának! Az egyik amerikai műszaki egyetem kutatása szerint a látogató alig egy másodperc alatt alkotja meg az első benyomást az oldalról. Egy személy átlagosan 3 másodperc alatt „beolvas” egy webhelyet. Villámgyorsan, igaz?!
Az erőforrás sikerének akár 70%-a a főoldal megjelenésétől függ. Az első dolog, amit az emberek észreveszneklogó, de a második a navigáció. Ha pedig minden többé-kevésbé egyértelmű a logóval kapcsolatban, akkor érdemes a navigáción, a menün és az oldal ergonómiájának kényelmén törni a fejét. Felmerül egy ésszerű kérdés: "Hogyan lehet díszíteni webhelyét, a lehető legfunkcionálisabbá és kényelmesebbé tenni, de ugyanakkor gyönyörűvé?" Sok szokatlan ötlet kínálkozik, de az egyik legérdekesebb az eszköztippek.
Mik azok az eszköztippek? Amellett, hogy az eszköztippek nagyszerű eszköz a webhely funkcionalitásának javítására, olyan eszköz, amely lehetővé teszi a felhasználó számára, hogy magyarázatot lásson egy adott képre, amikor az egérmutatót egy ikon, szó vagy kép fölé viszi.
Eszközök az eszköztippekkel való munkához
A Bootstrap a legjobb eszköz tippek létrehozásához. Ez egy könnyen megtanulható sablonkészlet HTML, CSS, Sass és JavaScript nyelven írt alkalmazások és webhelyek létrehozásához.
A pontosság kedvéért az eszköztippek a Bootstrap sablon egyik grafikus elemét használják - Tooltip.
A Bootstrap keretrendszert a "Twitter" számára hozták létre, és eredeti neve "Twitter Blueprint". Néhány 2012-es változtatás után 12 oszlopos rácsot kapott, adaptívvá vált, és felvette az ismerős nevet - Tooltip. Az eszköztipp egy olyan elem, amely akkor jelenik meg, ha az egérmutatót egy adott elem fölé viszi a monitor képernyőjén.
Tipp létrehozása
Létrehozhat Bootstrap Tooltip-et attribútumok használatávaladatokat, valamint a „Java Script” elemek aktiválásával. Két fő módja van a HTML Bootstrap Tooltip létrehozásának. Az első lényege, hogy alkalmazzuk az attribútumot és az attribútum címét (title), amely tartalmazza majd a tippszöveget. Az eszköztipp felül jelenik meg (alapértelmezett beállítás). Érdemes megjegyezni, hogy az eszközleírást inicializálni kell, mivel az automatikus inicializálás teljesítményi okokból elavult a "Twitter bootstrap"-ben.
Az eszköztippek inicializálásához speciális JavaScriptet használnak, amelyben minden attribútummal rendelkező elemre visszaállítja az eszköztipp metódust. A második módszer lényege, hogy a "JavaScript" kód segítségével a jQuery könyvtár részvételével egy tooltippet aktiválunk egy tooltippet tartalmazó eszközosztály írásával. A módszer hasonló az elsőhöz, kivéve az elemkiválasztás módszerét. A "Java Script"-ben az alábbi módon engedélyezheti a tippeket.
Példa Bootstrap eszközleírásra
Négy fő lehetőség van az eszköztippek pozicionálására: a bal és a jobb szélen, valamint az elem felett és alatt.
Tipp fentről
Tipp jobbra
Tipp az alján
Tipp balra
Eszköztippek használata
A Bootstrap Tooltip számos felhasználási területe van. Eszköztippeket illeszthet be, hogy a felhasználó megértse az idegen nyelvű szöveg fordítását a szövegben. Az eszköztippek olyan eszközként is használhatók, amely segít a felhasználónak megérteni a panelen lévő gombok jelentését, amikor rájuk viszi az egérmutatót. A Bootstrap Tooltip sablonokat gyakran használják különféle szervezetek webhelyein a vállalati hírekre való előfizetés létrehozására. Ez folyamatosan naprakészen tartja az ügyfeleket, és lehetővé teszi a látogatók számára, hogy új információkat kapjanak, például kedvezményes árakról, ajánlatokról, vállalaton belüli változásokról.
Vegyünk egy példát, amikor a felhasználónak meg kell adnia az e-mail címét a hírlevélre való feliratkozáshoz. Az a feladat, hogy az ügyfélközönség feliratkozzon a hírekre, a legkönnyebben HTML5 és a szükséges attribútum használatával érhető el. Az eszköztippre ebben az esetben azért van szükség, hogy a felhasználó megértse a műveletek sorrendjét. Például az e-mail cím megadása után bejelöltem a következő négyzetet: "Elfogadom, hogy céges híreket kapok az e-mail címemre." Az alábbiakban egy példa látható az űrlapkódra.
A kód telepítése a HTML Bootstrap Tooltipbe egyszerű. De az előnyök jelentősek. Most a fogyasztók tudják a cég összes hírét. Ez egyfajta ingyenes reklám.
Főbb hibák az előugró ablakok létrehozásakortippek
Mi a teendő, ha a Bootstrap Tooltip nem működik? Az első és fő hiba, amikor az eszköztipp attribútum nem működik, az az, ha az eszköztipp nincs engedélyezve. Az aktiváláshoz speciális kódot kell használnia.
Ez a módszer lehetővé teszi, hogy teljesen az összes eszköztippet inicializálja egy weboldalon.
A második gyakori hiba, hogy nincs jQuery a fejlécben.
A hivatkozás megfelelő működéséhez szükséges feltétel – meg kell adni egy adatfeldolgozó funkciót, például a "Java Script"-et.
Eszköztipp tulajdonságai
Az eszköztipp komponens lényege, hogy eszköztippeket jelenítsen meg, amikor az egérmutatót az oldal egyik vagy másik részére mozgatja. De amellett, hogy az eszköztipp jobb, bal és felül található a segítséggel, az eszköztipp a következő tulajdonságokkal rendelkezik:
- Aktív. A True tulajdonság használata a Bootstrap Tooltipben lehetővé teszi az eszköztippek megjelenítését, míg ha ugyanazt a tulajdonságot false értékre állítja, akkor nem jeleníthető meg az eszköztipp.
- Az AutoPopDelay az az idő, amikor a tippek megjelennek.
- AutoPopDelay. Azt az időt jelenti, ameddig az egérkurzornak egy elem felett kell lennie ahhoz, hogy megjelenjen az eszköztipp.
- IsBaloon. Ha a HTML Bootstrap eszköztipp értéke igaz, az eszköztipp felhővé változik.
- ToolTipIcon. Az ablakban megjelenő karaktert jelölitippek.
Eszköztipp
Ahhoz, hogy gyönyörű eszköztippeket hozzon létre, például egy Wordpressen létrehozott webhelyen, nem szükséges alaposan ismernie a webfejlesztők nyelvét. Elég tudni egy ilyen bővítmény (kiterjesztés) létezéséről, mint a Tooltipster. A névből kitűnik, hogy ez a plugin a Tooltip-re épül, és meglepően hasonló ahhoz, tulajdonságaiban és céljában. Mire való ez a plugin? Lehetővé teszi a szükséges HTML-jelölés létrehozását az eszköztippen belül.
A beépülő modul működése a parancsikonok oldalra történő beillesztésén alapul. Tartalmazza az összes alapvető HTML Bootstrap Tooltip attribútumot: tartalom (data-tooltip-content), cím, pozíció, trigger stb. Ezzel módosíthatja a témát, a betűtípust, az eszköztipp méretét, színét, beszúrhat képet stb.
