Ինչպե՞ս ձեր կայքը գրավիչ դարձնել այցելուների համար: Այս հարցը անհանգստացնում է համացանցային ռեսուրսների գրեթե բոլոր տերերին՝ վաճառականներին, բլոգերներին, փոքր ու խոշոր բիզնեսի սեփականատերերին, ճանապարհորդներին և պարզապես ստեղծագործ մարդկանց, ովքեր աշխարհին պատմելու բան ունեն։
Ինչու՞ պետք է կայքը լինի գեղեցիկ և ֆունկցիոնալ:
Այցելությունների քանակը կախված է կայքի թեմայից և դրա թիրախային լսարանից, մարդկանց հետաքրքրությունից որոշակի ապրանքի նկատմամբ, ներդրումներից, առաջխաղացումից, բովանդակությունից և շատ այլ գործոններից: Բայց չի կարելի հերքել, որ կայքը «դիմավորվում է հագուստով»։ Դա ռեսուրսի առաջին և գլխավոր էջն է, որը նրա դեմքն է՝ այցեքարտը, որով այցելուն պետք է հասկանա՝ արդյոք ցանկանում է իր ժամանակը ծախսել բովանդակության հետագա դիտման վրա։
Եվ սխալվելու տեղ չկա: ԱՄՆ տեխնիկական համալսարաններից մեկի հետազոտության համաձայն՝ այցելուն կայքի մասին առաջին տպավորությունը ստանում է վայրկյանից էլ քիչ ժամանակում։ Միջին հաշվով, մարդը «սկանավորում» է կայքը 3 վայրկյանում։ Կայծակնային արագություն, այնպես չէ՞:
Ռեսուրսի հաջողության մինչև 70%-ը կախված է հիմնական էջի տեսքից: Առաջին բանը, որ մարդիկ նկատում ենլոգոն, բայց երկրորդը նավարկությունն է: Եվ եթե լոգոյի հետ ամեն ինչ քիչ թե շատ պարզ է, ապա արժե ձեր գլուխը կոտրել կայքի էրգոնոմիկայի նավիգացիայի, մենյուի և հարմարավետության վրա: Խելամիտ հարց է առաջանում՝ «Ինչպե՞ս զարդարել ձեր կայքը, այն դարձնել հնարավորինս ֆունկցիոնալ և հարմար, բայց միևնույն ժամանակ գեղեցիկ»։ Շատ անսովոր գաղափարներ կան առաջարկելու, բայց ամենահետաքրքիրներից մեկը գործիքի հուշումն է:
Ի՞նչ են գործիքների հուշումները: Ի լրումն կայքի ֆունկցիոնալությունը բարելավելու հիանալի մեխանիզմ լինելուց, Tooltips-ը գործիք է, որը թույլ է տալիս օգտվողին տեսնել որոշակի պատկերի բացատրությունը պատկերակի, բառի կամ նկարի վրա սավառնելիս:
Գործիքներ խորհուրդների հետ աշխատելու համար
Bootstrap-ը գործիքների հուշումներ ստեղծելու լավագույն գործիքն է: Դա հեշտ ուսուցվող ձևանմուշների հավաքածու է HTML, CSS, Sass և JavaScript-ով գրված հավելվածներ և կայքեր ստեղծելու համար:
Կոնկրետ լինելու համար գործիքի հուշումներն օգտագործում են Bootstrap կաղապարի գրաֆիկական տարրերից մեկը՝ Tooltip:
Bootstrap շրջանակը ստեղծվել է «Twitter»-ի համար և սկզբնապես կոչվում էր «Twitter Blueprint»: 2012 թվականին որոշ փոփոխություններից հետո այն ստացավ 12 սյունանոց ցանց, դարձավ հարմարվողական և ստացավ ծանոթ անունը՝ Tooltip: Գործիքների հուշումը տարր է, որը հայտնվում է, երբ սավառնում եք մոնիտորի էկրանին որոշակի տարրի վրա:
Հուշի ստեղծում
Դուք կարող եք ստեղծել Bootstrap Tooltip՝ օգտագործելով ատրիբուտներըտվյալները, ինչպես նաև ակտիվացնելով «Java Script» տարրերը։ HTML Bootstrap Tooltip ստեղծելու երկու հիմնական եղանակ կա: Առաջինի էությունը հատկանիշի և հատկանիշի վերնագրի (տիտղոս) կիրառումն է, որը կպարունակի հուշման տեքստը։ Գործիքների հուշումը կհայտնվի վերևում (կանխադրված կարգավորում): Հարկ է հիշել, որ գործիքի հուշումը պետք է սկզբնավորվի, քանի որ ավտոմատ սկզբնավորումը հնացել է «Twitter bootstrap»-ում՝ կատարողականի պատճառով:
Գործիքների հուշումները սկզբնավորելու համար օգտագործվում է հատուկ JavaScript, որի դեպքում գործիքի հուշման մեթոդը վերականգնվում է բոլոր տարրերի համար, որոնք ունեն հատկանիշ: Երկրորդ մեթոդի էությունը jQuery գրադարանի մասնակցությամբ «JavaScript» կոդի միջոցով գործիքի հուշում ակտիվացնելն է՝ գործիքի դաս գրելով, որը ներառում է գործիքի հուշում։ Մեթոդը նման է առաջինին, բացառությամբ տարրի ընտրության մեթոդի։ Դուք կարող եք միացնել հուշումները «Java Script»-ում ստորև ներկայացված ձևով:
Bootstrap գործիքի հուշման օրինակ
Գոյություն ունի գործիքի հուշումների տեղադրման չորս հիմնական տարբերակ՝ ձախ և աջ եզրերում, և տարրի վերևում և ներքևում:
Հուշում վերևից
Ճիշտ ակնարկ
Հուշում ներքևում
Մնաց ակնարկ
Գործիքների խորհուրդների օգտագործում
Կան բազմաթիվ օգտագործում Bootstrap Tooltip-ը: Դուք կարող եք տեղադրել հուշումներ, որպեսզի օգտագործողը կարողանա հասկանալ տեքստի օտար լեզվից տեքստի թարգմանությունը: Գործիքների հուշումները կարող են օգտագործվել նաև որպես գործիք, որն օգնում է օգտատերին հասկանալ վահանակի կոճակների նշանակությունը դրանց վրա սավառնելիս: Bootstrap Tooltip կաղապարները հաճախ օգտագործվում են տարբեր կազմակերպությունների կայքերում՝ ընկերության նորությունների բաժանորդագրություն ստեղծելու համար: Սա հաճախորդներին արդի է պահում, ինչպես նաև թույլ է տալիս այցելուներին ստանալ նոր տեղեկություններ, ինչպիսիք են զեղչերի դրույքաչափերը, առաջարկները, փոփոխությունները ընկերության ներսում:
Դիտարկենք մի օրինակ, երբ օգտատերը պետք է մուտքագրի իր էլ. հասցեն՝ տեղեկագրի բաժանորդագրվելու համար: Հաճախորդների լսարանի նորություններին բաժանորդագրվելու խնդիրն ամենահեշտն իրականացվում է HTML5-ի և պահանջվող հատկանիշի միջոցով: Tooltip ակնարկն այս դեպքում անհրաժեշտ է, որպեսզի օգտագործողը հասկանա գործողությունների հաջորդականությունը: Օրինակ, էլփոստի հասցեն մուտքագրելուց հետո ես նշել եմ վանդակը՝ «Ես համաձայն եմ ստանալ ընկերության նորություններ իմ էլ. հասցեով»: Ստորև բերված է ձևի կոդի օրինակ:
Այս կոդը HTML Bootstrap Tooltip-ում տեղադրելը հեշտ է: Բայց օգուտները զգալի են: Այժմ սպառողները գիտեն ընկերության բոլոր նորությունները։ Սա անվճար գովազդի տեսակ է։
Հիմնական սխալները թռուցիկ պատուհաններ ստեղծելիսհուշումներ
Ի՞նչ անել, եթե Bootstrap Tooltip-ը չի աշխատում: Առաջին և հիմնական սխալը, երբ գործիքի հուշում հատկանիշը չի աշխատի, եթե գործիքի հուշումը միացված չէ: Այն ակտիվացնելու համար անհրաժեշտ է օգտագործել հատուկ կոդը։
Այս մեթոդը թույլ է տալիս սկզբնավորել վեբ էջի բացարձակապես բոլոր գործիքների հուշումները:
Երկրորդ տարածված սխալը վերնագրում jQuery-ի բացակայությունն է:
Հղման ճիշտ աշխատանքի համար անհրաժեշտ պայման կա. պետք է նշվի տվյալների մշակման գործառույթ, ինչպիսին է «Java Script»-ը:
Tooltip հատկություններ
Իր հիմքում Tooltip բաղադրիչը նախատեսված է գործիքի հուշումները ցուցադրելու համար, երբ մկնիկի ցուցիչը տեղափոխում եք էջի այս կամ այն մասի վրա: Բայց, բացի աջ, ձախ և վերևի աջ կողմում և վերևի գործիքի տեղադրությունից, գործիքի հուշումն ունի հետևյալ հատկությունները՝
- Ակտիվ. «Bootstrap Tooltip»-ում «true» հատկության օգտագործումը թույլ է տալիս ցուցադրել գործիքի հուշումները, մինչդեռ նույն հատկությունը «false» դնելը նշանակում է, որ գործիքի հուշումներ չեն կարող ցուցադրվել:
- AutoPopDelay-ն այն ժամանակն է, երբ ցուցադրվում են հուշումները:
- AutoPopDelay. Ներկայացնում է այն ժամանակը, երբ մկնիկի կուրսորը պետք է սավառնի տարրի վրա, որպեսզի գործիքի հուշումը հայտնվի:
- IsBaloon. Եթե HTML Bootstrap Tooltip Tooltip-ի արժեքը ճիշտ է, գործիքի հուշումը կվերածվի ամպի:
- ToolTipIcon: Ներկայացնում է նիշը, որը ցուցադրվում է պատուհանումհուշումներ.
Tooltipster
Գեղեցիկ գործիքների հուշումներ ստեղծելու համար, օրինակ, Wordpress-ում ստեղծված կայքում, անհրաժեշտ չէ հիմնովին իմանալ վեբ մշակողների լեզուն։ Բավական է իմանալ այնպիսի plugin-ի (ընդլայնման) գոյության մասին, ինչպիսին Tooltipster-ն է։ Անվանից պարզ է դառնում, որ այս plugin-ը հիմնված է Tooltip-ի վրա և զարմանալիորեն նման է դրան իր հատկություններով և նպատակներով։ Ինչի համար է այս plugin-ը: Այն թույլ է տալիս ստեղծել անհրաժեշտ HTML նշումներ գործիքի հուշման ներսում:
Փլագինի աշխատանքը հիմնված է էջում դյուրանցումների տեղադրման վրա։ Պարունակում է HTML Bootstrap Tooltip-ի բոլոր հիմնական ատրիբուտները՝ բովանդակություն (տվյալների գործիքի հուշում-բովանդակություն), վերնագիր, դիրք, գործարկիչ և այլն: Սա թույլ է տալիս փոխել թեման, տառատեսակը, գործիքի հուշման չափը, գույնը, տեղադրել պատկեր և այլն:
