როგორ გავხადოთ თქვენი საიტი მიმზიდველი ვიზიტორებისთვის? ეს კითხვა აწუხებს ინტერნეტ რესურსების თითქმის ყველა მფლობელს: ვაჭრებს, ბლოგერებს, მცირე და მსხვილი ბიზნესის მფლობელებს, მოგზაურებს და უბრალოდ შემოქმედებით ადამიანებს, რომლებსაც აქვთ რაღაც სათქმელი მსოფლიოსათვის.
რატომ უნდა იყოს ვებგვერდი ლამაზი და ფუნქციონალური?
ვიზიტების რაოდენობა დამოკიდებულია საიტის თემასა და მის სამიზნე აუდიტორიაზე, ხალხის ინტერესზე კონკრეტული პროდუქტის მიმართ, ინვესტიციაზე, პოპულარიზაციაზე, კონტენტზე და სხვა მრავალ ფაქტორზე. მაგრამ არ შეიძლება უარვყოთ, რომ საიტს "ტანსაცმელი მიესალმება". ეს არის რესურსის პირველი და მთავარი გვერდი, რომელიც წარმოადგენს მის სახეს, სავიზიტო ბარათს, რომლითაც ვიზიტორმა უნდა გაიგოს, სურს თუ არა დროის დახარჯვა კონტენტის შემდგომი ნახვაზე.
და შეცდომის ადგილი არ არის! აშშ-ის ერთ-ერთი ტექნიკური უნივერსიტეტის კვლევის მიხედვით, ვიზიტორი საიტის პირველ შთაბეჭდილებას წამზე ნაკლებ დროში იღებს. საშუალოდ, ადამიანი 3 წამში „სკანირებს“საიტს. ელვის სიჩქარე, არა?!
რესურსის წარმატების 70%-მდე დამოკიდებულია იმაზე, თუ როგორ გამოიყურება მთავარი გვერდი. პირველი, რასაც ხალხი ამჩნევს, არისლოგო, მაგრამ მეორე არის ნავიგაცია. და თუ ყველაფერი მეტ-ნაკლებად ნათელია ლოგოსთან დაკავშირებით, მაშინ ღირს თქვენი თავი გატეხოთ ნავიგაციის, მენიუსა და საიტის ერგონომიკის მოხერხებულობის გამო. ჩნდება გონივრული კითხვა: "როგორ გავაფორმოთ თქვენი საიტი, გავხადოთ ის რაც შეიძლება ფუნქციონალური და მოსახერხებელი, მაგრამ ამავე დროს ლამაზი?" ბევრი უჩვეულო იდეა არსებობს, მაგრამ ერთ-ერთი ყველაზე საინტერესო არის ინსტრუმენტების რჩევები.
რა არის ინსტრუმენტების რჩევები? გარდა იმისა, რომ არის შესანიშნავი მექანიზმი საიტის ფუნქციონალურობის გასაუმჯობესებლად, Tooltips არის ინსტრუმენტი, რომელიც მომხმარებელს საშუალებას აძლევს დაინახოს კონკრეტული სურათის ახსნა ხატზე, სიტყვაზე ან სურათზე გადასვლისას.
ინსტრუმენტები ინსტრუმენტებთან მუშაობისთვის
Bootstrap არის საუკეთესო ინსტრუმენტი ინსტრუმენტების შესაქმნელად. ეს არის შაბლონების ადვილად შესასწავლი ნაკრები HTML, CSS, Sass და JavaScript-ში დაწერილი აპებისა და ვებსაიტების შესაქმნელად.
კონკრეტებისთვის, ინსტრუმენტების რჩევები იყენებს Bootstrap შაბლონის ერთ-ერთ გრაფიკულ ელემენტს - Tooltip.
Bootstrap Framework შეიქმნა "ტვიტერისთვის" და თავდაპირველად ერქვა "Twitter Blueprint". 2012 წელს გარკვეული ცვლილებების შემდეგ მან მიიღო 12-სვეტიანი ბადე, გახდა ადაპტური და შეიძინა ნაცნობი სახელი - Tooltip. ინსტრუმენტის მინიშნება არის ელემენტი, რომელიც ჩნდება, როდესაც მონიტორის ეკრანზე კონკრეტულ ელემენტზე გადახვალთ.
მინიშნების შექმნა
შეგიძლიათ შექმნათ Bootstrap Tooltip ატრიბუტების გამოყენებითმონაცემები, ასევე „ჯავა სკრიპტის“ელემენტების გააქტიურებით. არსებობს ორი ძირითადი გზა HTML Bootstrap Tooltip-ის შესაქმნელად. პირველის არსი არის ატრიბუტისა და ატრიბუტის სათაურის (სათაურის) გამოყენება, რომელიც შეიცავს მინიშნების ტექსტს. ინსტრუმენტის მინიშნება გამოჩნდება ზედა (ნაგულისხმევი პარამეტრი). უნდა გვახსოვდეს, რომ ინსტრუმენტების ინიციალიზაცია საჭიროა, რადგან ავტომატური ინიციალიზაცია მოძველებულია "Twitter bootstrap"-ში შესრულების მიზეზების გამო.
Tooltips-ის ინიციალიზაციისთვის გამოიყენება სპეციალური JavaScript, რომელშიც ინსტრუმენტული მინიშნების მეთოდი აღდგება ყველა ელემენტისთვის, რომელსაც აქვს ატრიბუტი. მეორე მეთოდის არსი არის Tooltip-ის გააქტიურება "JavaScript" კოდის გამოყენებით jQuery ბიბლიოთეკის მონაწილეობით ინსტრუმენტთა კლასის დაწერით, რომელიც შეიცავს ინსტრუმენტს. მეთოდი პირველის მსგავსია, გარდა ელემენტის შერჩევის მეთოდისა. შეგიძლიათ ჩართოთ მინიშნებები "Java Script" ქვემოთ ნაჩვენები გზით.
Bootstrap ინსტრუმენტის მაგალითი
ხელსაწყოების პოზიციონირების ოთხი ძირითადი ვარიანტია: მარცხენა და მარჯვენა კიდეებზე, ელემენტის ზემოთ და ქვემოთ.
მინიშნება ზემოდან
მინიშნება მარჯვნივ
მინიშნება ბოლოში
მინიშნება მარცხენა
ინსტრუმენტების რჩევების გამოყენება
Bootstrap Tooltip-ის მრავალი გამოყენება არსებობს. თქვენ შეგიძლიათ ჩასვათ ინსტრუმენტების რჩევები, რათა მომხმარებელმა გაიგოს ტექსტში უცხო ენიდან ტექსტის თარგმანი. ინსტრუმენტების რჩევები ასევე შეიძლება გამოყენებულ იქნას, როგორც ინსტრუმენტი, რომელიც ეხმარება მომხმარებელს გაიგოს პანელის ღილაკების მნიშვნელობა მათზე გადასვლისას. Bootstrap Tooltip შაბლონები ხშირად გამოიყენება სხვადასხვა ორგანიზაციის ვებსაიტებზე კომპანიის სიახლეების გამოწერის შესაქმნელად. ეს განაახლებს მომხმარებლებს და ასევე აძლევს ვიზიტორებს საშუალებას მიიღონ ახალი ინფორმაცია, როგორიცაა ფასდაკლების განაკვეთები, შეთავაზებები, ცვლილებები კომპანიის შიგნით.
განვიხილოთ მაგალითი, როდესაც მომხმარებელმა უნდა შეიყვანოს თავისი ელ.ფოსტის მისამართი, რათა გამოიწეროს საინფორმაციო ბიულეტენი. ამოცანა, უზრუნველყოს, რომ კლიენტის აუდიტორია გამოიწერს ახალ ამბებს, ყველაზე მარტივად მიიღწევა HTML5-ისა და საჭირო ატრიბუტის გამოყენებით. ინსტრუმენტული მინიშნება ამ შემთხვევაში საჭიროა იმისათვის, რომ მომხმარებელმა გაიგოს მოქმედებების თანმიმდევრობა. მაგალითად, ელ.ფოსტის მისამართის შეყვანის შემდეგ, მე მონიშნე ველი: „ვეთანხმები, მივიღო კომპანიის სიახლეები ჩემს ელექტრონულ მისამართზე“. ქვემოთ მოცემულია ფორმის კოდის მაგალითი.
ამ კოდის ინსტალაცია HTML Bootstrap Tooltip-ში მარტივია. მაგრამ სარგებელი მნიშვნელოვანია. ახლა მომხმარებლებმა იციან კომპანიის ყველა სიახლე. ეს არის ერთგვარი უფასო რეკლამა.
მთავარი შეცდომები ამომხტარი ფანჯრების შექმნისასმინიშნებები
რა უნდა გავაკეთოთ, თუ Bootstrap Tooltip არ მუშაობს? პირველი და მთავარი შეცდომა, როდესაც ატრიბუტი არ იმუშავებს, არის თუ არ არის ჩართული. მის გასააქტიურებლად საჭიროა სპეციალური კოდის გამოყენება.
ეს მეთოდი საშუალებას გაძლევთ განახორციელოთ აბსოლუტურად ყველა ინსტრუმენტების ინიციალიზაცია ვებ გვერდზე.
მეორე გავრცელებული შეცდომა არის jQuery-ის არქონა სათაურში.
არის აუცილებელი პირობა, რომ ბმული სწორად იმუშაოს - უნდა იყოს მითითებული მონაცემთა დამუშავების ფუნქცია, როგორიცაა "Java Script".
მინიშნების თვისებები
ძირითადად, Tooltip კომპონენტი შექმნილია იმისათვის, რომ აჩვენოს ინსტრუმენტების რჩევები, როდესაც მაუსის მაჩვენებელს გადააადგილებთ გვერდის ამა თუ იმ ნაწილზე. მაგრამ, გარდა იმისა, რომ ხელსაწყოს მინიშნება მდებარეობს მარჯვნივ, მარცხნივ და ზევით, დახმარებით, ხელსაწყოს მინიშნებას აქვს შემდეგი თვისებები:
- აქტიური. Bootstrap Tooltip-ში true თვისების გამოყენება საშუალებას იძლევა ინსტრუმენტების რჩევების ჩვენება, ხოლო იგივე თვისების დაყენება false-ზე ნიშნავს, რომ ინსტრუმენტების რჩევების ჩვენება შეუძლებელია.
- AutoPopDelay არის დრო, როდესაც გამოჩნდება რჩევები.
- AutoPopDelay. წარმოადგენს დროის იმ რაოდენობას, რომელიც მაუსის კურსორმა უნდა ატაროს ელემენტზე, რათა გამოჩნდეს ინსტრუმენტი.
- IsBaloon. თუ HTML Bootstrap Tooltip Tooltip-ის მნიშვნელობა მართალია, ხელსაწყოს მინიშნება შეიცვლება ღრუბელში.
- ToolTipIcon. წარმოადგენს ფანჯარაში გამოსახულ სიმბოლოსმინიშნებები.
Tooltipster
იმისთვის, რომ შექმნათ ლამაზი ინსტრუმენტების რჩევები, მაგალითად, Wordpress-ზე შექმნილ საიტზე, არ არის აუცილებელი ვებ დეველოპერების ენის საფუძვლიანად ცოდნა. საკმარისია ვიცოდეთ ისეთი მოდულის (გაფართოების) არსებობის შესახებ, როგორიცაა Tooltipster. სახელიდან ირკვევა, რომ ეს მოდული დაფუძნებულია Tooltip-ზე და საოცრად ჰგავს მას თავისი თვისებებითა და დანიშნულებით. რისთვის არის ეს მოდული? ის საშუალებას გაძლევთ შექმნათ საჭირო HTML მარკირება ხელსაწყოს მინიშნებაში.
მოდულის მუშაობა ეფუძნება გვერდზე მალსახმობების ჩასმას. შეიცავს ყველა ძირითად HTML Bootstrap Tooltip ატრიბუტს: შიგთავსს (data-tooltip-content), სათაურს, პოზიციას, ტრიგერს და ა.შ. ეს საშუალებას გაძლევთ შეცვალოთ თემა, შრიფტი, ინსტრუმენტის მინიშნების ზომა, ფერი, ჩასვათ სურათი და სხვა.
