จะทำให้ไซต์ของคุณดึงดูดผู้เข้าชมได้อย่างไร คำถามนี้สร้างความกังวลให้กับเจ้าของแหล่งข้อมูลทางอินเทอร์เน็ตเกือบทั้งหมด: พ่อค้า บล็อกเกอร์ เจ้าของธุรกิจขนาดเล็กและขนาดใหญ่ นักเดินทางและคนที่มีความคิดสร้างสรรค์ที่มีสิ่งที่จะบอกให้โลกรู้
ทำไมเว็บไซต์ต้องสวยและใช้งานได้จริง
จำนวนการเข้าชมขึ้นอยู่กับธีมของไซต์และผู้ชมเป้าหมาย ความสนใจของผู้คนในผลิตภัณฑ์เฉพาะ การลงทุน การส่งเสริมการขาย เนื้อหา และปัจจัยอื่นๆ อีกมากมาย แต่ปฏิเสธไม่ได้ว่าไซต์นั้น "ต้อนรับด้วยเสื้อผ้า" เป็นหน้าแรกและหน้าแรกของแหล่งข้อมูลที่เป็นหน้าบัตรโทรศัพท์ โดยที่ผู้เข้าชมต้องเข้าใจว่าเขาต้องการใช้เวลาดูเนื้อหาต่อไปหรือไม่
และไม่มีที่ว่างให้ผิดพลาด! จากการวิจัยของมหาวิทยาลัยเทคนิคแห่งหนึ่งในสหรัฐอเมริกา ผู้เข้าชมจะได้รับความประทับใจครั้งแรกกับเว็บไซต์ในเวลาไม่ถึงวินาที โดยเฉลี่ยแล้ว บุคคล "สแกน" ไซต์ใน 3 วินาที เร็วดุจสายฟ้าใช่ไหม?!
ความสำเร็จของทรัพยากรมากถึง 70% ขึ้นอยู่กับลักษณะของหน้าหลัก สิ่งแรกที่คนสังเกตเห็นคือโลโก้ แต่อย่างที่สองคือการนำทาง และหากทุกอย่างชัดเจนมากหรือน้อยกับโลโก้ คุณก็ควรมองข้ามการนำทาง เมนู และความสะดวกของการยศาสตร์ของไซต์ มีคำถามที่สมเหตุสมผล: "จะตกแต่งไซต์ของคุณอย่างไรให้ใช้งานได้จริงและสะดวกที่สุด แต่ในขณะเดียวกันก็สวยงาม" มีแนวคิดแปลกๆ มากมายที่จะนำเสนอ แต่สิ่งที่น่าสนใจที่สุดคือคำแนะนำเครื่องมือ
คำแนะนำเครื่องมือคืออะไร? นอกจากจะเป็นกลไกที่ยอดเยี่ยมในการปรับปรุงฟังก์ชันการทำงานของเว็บไซต์แล้ว คำแนะนำเครื่องมือยังเป็นเครื่องมือที่ช่วยให้ผู้ใช้สามารถดูคำอธิบายสำหรับรูปภาพใดภาพหนึ่งเมื่อวางเมาส์เหนือไอคอน คำ หรือรูปภาพ
เครื่องมือสำหรับการทำงานกับคำแนะนำเครื่องมือ
Bootstrap เป็นเครื่องมือที่ดีที่สุดสำหรับการสร้างคำแนะนำเครื่องมือ เป็นชุดเทมเพลตที่เรียนรู้ได้ง่ายสำหรับสร้างแอปและเว็บไซต์ที่เขียนด้วย HTML, CSS, Sass และ JavaScript
เพื่อให้เฉพาะเจาะจง คำแนะนำเครื่องมือใช้หนึ่งในองค์ประกอบกราฟิกของเทมเพลต Bootstrap - เคล็ดลับเครื่องมือ
เฟรมเวิร์ก Bootstrap ถูกสร้างขึ้นสำหรับ "Twitter" และเดิมเรียกว่า "Twitter Blueprint" หลังจากการเปลี่ยนแปลงบางอย่างในปี 2555 มันได้รับตาราง 12 คอลัมน์ ปรับเปลี่ยนได้ และได้รับชื่อที่คุ้นเคย - เคล็ดลับเครื่องมือ คำแนะนำเครื่องมือคือองค์ประกอบที่ปรากฏขึ้นเมื่อคุณวางเมาส์เหนือองค์ประกอบเฉพาะบนหน้าจอมอนิเตอร์
สร้างคำใบ้
คุณสามารถสร้าง Bootstrap Tooltip โดยใช้แอตทริบิวต์ข้อมูล เช่นเดียวกับการเปิดใช้งานองค์ประกอบ "Java Script" มีสองวิธีหลักในการสร้าง HTML Bootstrap Tooltip สาระสำคัญของข้อแรกคือการใช้แอตทริบิวต์และชื่อแอตทริบิวต์ (ชื่อ) ซึ่งจะมีข้อความคำใบ้ คำแนะนำเครื่องมือจะปรากฏขึ้นที่ด้านบน (การตั้งค่าเริ่มต้น) โปรดจำไว้ว่าคำแนะนำเครื่องมือจำเป็นต้องได้รับการเตรียมใช้งาน เนื่องจากการเริ่มการทำงานอัตโนมัติได้เลิกใช้งานใน "Twitter bootstrap" ด้วยเหตุผลด้านประสิทธิภาพ
ในการเริ่มต้นคำแนะนำเครื่องมือ จะใช้ JavaScript พิเศษ ซึ่งวิธีการแนะนำเครื่องมือจะถูกกู้คืนสำหรับองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ สาระสำคัญของวิธีที่สองคือการเปิดใช้งานคำแนะนำเครื่องมือโดยใช้โค้ด "JavaScript" โดยมีส่วนร่วมของไลบรารี jQuery โดยการเขียนคลาสเครื่องมือที่มีคำแนะนำเครื่องมือ วิธีการนี้คล้ายกับวิธีแรก ยกเว้นวิธีการเลือกองค์ประกอบ คุณสามารถเปิดใช้งานคำใบ้ใน "Java Script" ได้ตามที่แสดงด้านล่าง
ตัวอย่างคำแนะนำเครื่องมือบูตสแตรป
คำแนะนำเครื่องมือการวางตำแหน่งมีสี่ตัวเลือกหลัก: ที่ขอบด้านซ้ายและด้านขวา และด้านบนและด้านล่างขององค์ประกอบ
คำแนะนำจากข้างบน
คำใบ้
คำแนะนำที่ด้านล่าง
เหลือคำใบ้
การใช้คำแนะนำเครื่องมือ
Bootstrap Tooltip มีประโยชน์หลายอย่าง คุณสามารถแทรกคำแนะนำเครื่องมือเพื่อให้ผู้ใช้เข้าใจการแปลข้อความจากภาษาต่างประเทศในข้อความได้ คุณสามารถใช้คำแนะนำเครื่องมือเป็นเครื่องมือเพื่อช่วยให้ผู้ใช้เข้าใจความหมายของปุ่มบนแผงเมื่อวางเมาส์เหนือปุ่มเหล่านั้น เทมเพลต Bootstrap Tooltip มักใช้บนเว็บไซต์ขององค์กรต่างๆ เพื่อสร้างการสมัครรับข่าวสารของบริษัท สิ่งนี้ทำให้ลูกค้าได้รับข้อมูลล่าสุดและยังช่วยให้ผู้เยี่ยมชมได้รับข้อมูลใหม่ เช่น อัตราส่วนลด ข้อเสนอ การเปลี่ยนแปลงภายในบริษัท
ลองพิจารณาตัวอย่างที่ผู้ใช้ต้องป้อนที่อยู่อีเมลเพื่อสมัครรับจดหมายข่าว งานเพื่อให้แน่ใจว่าผู้ชมของลูกค้าสมัครรับข่าวสารนั้นทำได้ง่ายที่สุดโดยใช้ HTML5 และแอตทริบิวต์ที่จำเป็น ในกรณีนี้จำเป็นต้องมีคำแนะนำคำแนะนำเครื่องมือเพื่อให้ผู้ใช้เข้าใจลำดับของการดำเนินการ ตัวอย่างเช่น หลังจากป้อนที่อยู่อีเมล ฉันทำเครื่องหมายในช่อง: "ฉันตกลงที่จะรับข่าวสารของบริษัทไปยังที่อยู่อีเมลของฉัน" ด้านล่างนี้เป็นตัวอย่างของรหัสแบบฟอร์ม
การติดตั้งโค้ดนี้ลงใน HTML Bootstrap Tooltip นั้นง่ายมาก แต่ผลประโยชน์มีนัยสำคัญ ตอนนี้ผู้บริโภคทราบข่าวทั้งหมดของบริษัทแล้ว นี่คือการโฆษณาฟรีประเภทหนึ่ง
ข้อผิดพลาดหลักเมื่อสร้างป๊อปอัปคำใบ้
จะทำอย่างไรถ้า Bootstrap Tooltip ไม่ทำงาน? ข้อผิดพลาดแรกและหลักที่แอตทริบิวต์คำแนะนำเครื่องมือใช้ไม่ได้คือถ้าไม่ได้เปิดใช้คำแนะนำเครื่องมือ เพื่อเปิดใช้งาน คุณต้องใช้รหัสพิเศษ
วิธีนี้ทำให้คุณสามารถเริ่มต้นคำแนะนำเครื่องมือทั้งหมดบนหน้าเว็บได้
ข้อผิดพลาดทั่วไปที่สองไม่มี jQuery ในส่วนหัว
มีเงื่อนไขที่จำเป็นเพื่อให้ลิงก์ทำงานได้อย่างถูกต้อง - ต้องระบุฟังก์ชันการประมวลผลข้อมูล เช่น "Java Script"
คุณสมบัติคำแนะนำเครื่องมือ
ที่แกนหลัก คอมโพเนนต์คำแนะนำเครื่องมือได้รับการออกแบบให้แสดงคำแนะนำเครื่องมือเมื่อคุณเลื่อนตัวชี้เมาส์ไปที่ส่วนใดส่วนหนึ่งของหน้า แต่นอกเหนือจากตำแหน่งของคำแนะนำเครื่องมือทางด้านขวา ซ้าย และด้านบนด้วยความช่วยเหลือแล้ว คำแนะนำเครื่องมือมีคุณสมบัติดังต่อไปนี้:
- ใช้งานอยู่ การใช้คุณสมบัติ true ใน Bootstrap Tooltip ช่วยให้สามารถแสดงคำแนะนำเครื่องมือได้ ในขณะที่การตั้งค่าคุณสมบัติเดียวกันเป็น false หมายความว่าไม่สามารถแสดงคำแนะนำเครื่องมือได้
- AutoPopDelay คือเวลาที่จะแสดงคำแนะนำ
- AutoPopDelay. หมายถึงระยะเวลาที่เคอร์เซอร์ของเมาส์ต้องวางเมาส์เหนือองค์ประกอบเพื่อให้คำแนะนำเครื่องมือปรากฏขึ้น
- อิสบาลูน. หากค่าของคำแนะนำเครื่องมือคำแนะนำ HTML Bootstrap เป็นจริง คำแนะนำเครื่องมือจะเปลี่ยนเป็นระบบคลาวด์
- ToolTipIcon. หมายถึงอักขระที่แสดงในหน้าต่างคำแนะนำ
คำแนะนำเครื่องมือ
ในการสร้างคำแนะนำเครื่องมือที่สวยงาม เช่น บนไซต์ที่สร้างบน Wordpress ไม่จำเป็นต้องรู้ภาษาของนักพัฒนาเว็บอย่างถี่ถ้วน เพียงพอที่จะรู้เกี่ยวกับการมีอยู่ของปลั๊กอิน (ส่วนขยาย) เช่น Tooltipster จากชื่อ เป็นที่ชัดเจนว่าปลั๊กอินนี้ใช้ Tooltip และมีความคล้ายคลึงกันในคุณสมบัติและวัตถุประสงค์ของปลั๊กอินนี้อย่างน่าประหลาดใจ ปลั๊กอินนี้มีไว้เพื่ออะไร? ช่วยให้คุณสร้างมาร์กอัป HTML ที่จำเป็นภายในคำแนะนำเครื่องมือ
การทำงานของปลั๊กอินขึ้นอยู่กับการแทรกทางลัดบนหน้า ประกอบด้วยแอตทริบิวต์ HTML Bootstrap Tooltip พื้นฐานทั้งหมด: เนื้อหา (data-tooltip-content) ชื่อ ตำแหน่ง ทริกเกอร์ ฯลฯ ซึ่งจะทำให้คุณสามารถเปลี่ยนธีม แบบอักษร ขนาดคำแนะนำเครื่องมือ สี แทรกรูปภาพ และอื่นๆ
