Saytınızı ziyarətçilər üçün necə cəlbedici etmək olar? Bu sual demək olar ki, bütün internet resurslarının sahiblərini narahat edir: tacirləri, bloggerləri, kiçik və böyük biznes sahiblərini, səyahətçiləri və dünyaya deyəcəkləri sadəcə yaradıcı insanları.
Veb-sayt niyə gözəl və funksional olmalıdır?
Ziyarətlərin sayı saytın mövzusundan və onun hədəf auditoriyasından, insanların müəyyən məhsula marağından, investisiyadan, tanıtımdan, məzmundan və bir çox digər amillərdən asılıdır. Amma saytın “p altarla qarşılandığını” inkar etmək olmaz. Bu, resursun ilk və əsas səhifəsidir ki, onun siması, vizit kartıdır və ziyarətçi onun vasitəsilə vaxtını məzmuna daha çox baxmaq üçün sərf edib-etməmək istəmədiyini başa düşməlidir.
Və səhvə yer yoxdur! ABŞ-ın texniki universitetlərindən birinin araşdırmasına görə, ziyarətçi bir saniyədən az müddətdə sayt haqqında ilk təəssürat yaradır. Orta hesabla bir insan saytı 3 saniyəyə “skan edir”. İldırım sürəti, elə deyilmi?!
Resursun uğurunun 70%-ə qədəri əsas səhifənin necə görünməsindən asılıdır. İnsanların diqqətini çəkən ilk şey budurloqo, lakin ikincisi naviqasiyadır. Loqo ilə hər şey az və ya çox aydındırsa, naviqasiya, menyu və saytın erqonomikasının rahatlığı barədə başınızı sındırmağa dəyər. Ağlabatan bir sual yaranır: "Saytınızı necə bəzəmək, onu mümkün qədər funksional və rahat etmək, eyni zamanda gözəl etmək?" Təklif ediləcək çoxlu qeyri-adi ideyalar var, lakin ən maraqlılarından biri göstərişlərdir.
Alət göstərişləri nədir? Saytın funksionallığını təkmilləşdirmək üçün əla mexanizm olmaqla yanaşı, alət ipuçları istifadəçiyə ikona, söz və ya şəklin üzərinə keçərkən xüsusi təsvirin izahını görməyə imkan verən alətdir.
Alət göstərişləri ilə işləmək üçün alətlər
Bootstrap göstərişlər yaratmaq üçün ən yaxşı vasitədir. Bu, HTML, CSS, Sass və JavaScript-də yazılmış proqramlar və vebsaytlar yaratmaq üçün öyrənilməsi asan olan şablonlar toplusudur.
Konkret olmaq üçün alət göstərişləri Bootstrap şablonunun qrafik elementlərindən birini istifadə edir - Alət İpucu.
Bootstrap çərçivəsi "Twitter" üçün yaradılıb və əvvəlcə "Twitter Blueprint" adlanırdı. 2012-ci ildə bəzi dəyişikliklərdən sonra o, 12 sütunlu bir şəbəkə aldı, uyğunlaşdı və tanış adı aldı - Tooltip. Alət ipucu siçanı monitor ekranında xüsusi elementin üzərinə gətirdiyiniz zaman açılan elementdir.
İpucu yaradılması
Siz atributlardan istifadə edərək Bootstrap Tooltip yarada bilərsinizməlumatları, həmçinin "Java Script" elementlərini aktivləşdirməklə. HTML Bootstrap Tooltip yaratmağın iki əsas yolu var. Birincinin mahiyyəti işarə mətnini ehtiva edəcək atribut və atribut başlığını (başlığı) tətbiq etməkdir. Alət ipucu yuxarıda görünəcək (standart parametr). Yadda saxlamağa dəyər ki, alət ipucunu işə salmaq lazımdır, çünki performans səbəbi ilə avtomatik başlatma "Twitter bootstrap"-da ləğv edilib.
Alət göstərişlərini işə salmaq üçün xüsusi JavaScript-dən istifadə olunur, burada alət ipucu metodu atributlu bütün elementlər üçün bərpa olunur. İkinci metodun mahiyyəti alət ipucunu özündə birləşdirən alət sinfi yazmaqla jQuery kitabxanasının iştirakı ilə “JavaScript” kodundan istifadə edərək alət tiplisini aktivləşdirməkdir. Element seçimi üsulu istisna olmaqla, üsul birinciyə bənzəyir. Aşağıda göstərilən şəkildə "Java Skriptində" göstərişləri aktiv edə bilərsiniz.
Bootstrap üçün göstəriş nümunəsi
Alət göstərişlərinin yerləşdirilməsi üçün dörd əsas seçim var: sol və sağ kənarlarda, elementin yuxarısında və altında.
Yuxarıdan göstəriş
Sağa işarə edin
Aşağıdakı göstəriş
Sola işarə
Alət məsləhətlərindən istifadə
Bootstrap Alət İpucu üçün çoxlu istifadələr var. İstifadəçinin mətndə xarici dildən mətnin tərcüməsini başa düşə bilməsi üçün siz alət ipuçlarını daxil edə bilərsiniz. Alət məsləhətləri istifadəçiyə paneldəki düymələrin üzərinə getdikdə onların mənasını anlamağa kömək edən alət kimi də istifadə edilə bilər. Bootstrap Tooltip şablonları şirkət xəbərlərinə abunə yaratmaq üçün tez-tez müxtəlif təşkilatların veb-saytlarında istifadə olunur. Bu, müştəriləri xəbərdar edir və həmçinin ziyarətçilərə endirim dərəcələri, təkliflər, şirkət daxilində dəyişikliklər kimi yeni məlumatlar almağa imkan verir.
Bir istifadəçinin xəbər bülleteninə abunə olmaq üçün öz e-poçt ünvanını daxil etməli olduğu nümunəni nəzərdən keçirək. Müştəri auditoriyasının xəbərlərə abunə olmasını təmin etmək vəzifəsi HTML5 və tələb olunan atributdan istifadə etməklə ən asan şəkildə həyata keçirilir. İstifadəçinin hərəkətlərin ardıcıllığını başa düşməsi üçün bu vəziyyətdə alət ipucu lazımdır. Məsələn, e-poçt ünvanını daxil etdikdən sonra qutunu işarələdim: “Mən şirkət xəbərlərini e-poçt ünvanıma almağa razıyam”. Aşağıda forma koduna bir nümunə verilmişdir.
Bu kodu HTML Bootstrap Alət İpucuna quraşdırmaq asandır. Ancaq faydaları əhəmiyyətlidir. Artıq istehlakçılar şirkətin bütün xəbərlərini bilirlər. Bu bir növ pulsuz reklamdır.
Pop-uplar yaratarkən əsas səhvlərgöstərişlər
Bootstrap Tooltip işləmirsə nə etməli? Alət ipucu atributunun işləməyəcəyi ilk və əsas səhv, alət ipucunun aktiv edilməməsidir. Onu aktivləşdirmək üçün xüsusi koddan istifadə etməlisiniz.
Bu üsul sizə veb-səhifədəki bütün alət ipuçlarını işə salmağa imkan verir.
İkinci ümumi səhv başlıqda jQuery-nin olmamasıdır.
Linkin düzgün işləməsi üçün zəruri şərt var - "Java Skripti" kimi məlumatların işlənməsi funksiyası göstərilməlidir.
İpucu xüsusiyyətləri
Əslində Alət İpucu komponenti siçan göstəricisini səhifənin bu və ya digər hissəsi üzərində apardığınız zaman göstərişləri göstərmək üçün nəzərdə tutulub. Lakin, alət ipucunun köməyi ilə sağda, solda və yuxarıda yerləşməsinə əlavə olaraq, göstəriş aşağıdakı xüsusiyyətlərə malikdir:
- Aktiv. Bootstrap Tooltip-də həqiqi xüsusiyyətdən istifadə alət ipuçlarını göstərməyə imkan verir, eyni xassəni false olaraq təyin etmək isə heç bir alət ipucunun göstərilə bilməyəcəyi deməkdir.
- AutoPopDelay məsləhətlərin göstərildiyi vaxtdır.
- AutoPopDelay. Alət ipucunun görünməsi üçün siçan kursorunun elementin üzərinə keçməli olduğu vaxtı əks etdirir.
- IsBaloon. HTML Bootstrap Alət İpucunun dəyəri doğrudursa, alət ipucu buludla dəyişəcək.
- ToolTipIcon. Pəncərədə göstərilən simvolu təmsil edirgöstərişlər.
Tooltipster
Məsələn, Wordpress-də yaradılmış saytda gözəl məsləhətlər yaratmaq üçün veb tərtibatçılarının dilini hərtərəfli bilmək lazım deyil. Tooltipster kimi plaqinin (uzantının) mövcudluğu haqqında bilmək kifayətdir. Adından aydın olur ki, bu plagin Tooltip-ə əsaslanır və xassələri və məqsədi ilə təəccüblü şəkildə ona bənzəyir. Bu plagin nə üçündür? O, sizə alət ipucunda lazımi HTML işarələməsini yaratmağa imkan verir.
Pluginin işi səhifəyə qısa yolların daxil edilməsinə əsaslanır. Bütün əsas HTML Bootstrap Alət İpucu atributlarını ehtiva edir: məzmun (data-tooltip-content), başlıq, mövqe, trigger və s. Bu, mövzunu, şrifti, alət ipucu ölçüsünü, rəngini dəyişməyə, şəkil daxil etməyə və s. imkan verir.
