วิธีเพิ่มคำแนะนำเครื่องมือในเว็บไซต์ Elementor

คุณกำลังมองหาวิธีเพิ่มคำแนะนำเครื่องมือในเว็บไซต์ Elementor ของคุณหรือไม่? หากเป็นกรณีนี้ แสดงว่าคุณได้เข้าสู่หน้าที่ถูกต้องแล้ว

คำแนะนำเครื่องมือเรียกอีกอย่างว่าคำแนะนำบนหน้าจอหรือเคล็ดลับข้อมูลที่แสดงตัวอย่างข้อความที่ปรากฏขึ้นเมื่อวางเมาส์เหนือรูปภาพหรือข้อความเฉพาะ คำแนะนำเครื่องมือเหล่านี้มีอยู่ทั่วไปในอินเทอร์เน็ตหรือบนเดสก์ท็อปของคุณในรูปแบบข้อความแสดงแทน ป้ายกำกับ หรือข้อความชื่อ

เมื่อใดก็ตามที่คุณเปิดอินเทอร์เน็ต คุณอาจเห็นรูปภาพ ไอคอน หรือหัวเรื่องใดๆ หากคุณวางตัวชี้เมาส์บนฟิลด์เหล่านี้ คุณจะเห็นป้ายข้อความที่เป็นคำแนะนำเครื่องมือ

ในทำนองเดียวกัน การใช้คุณลักษณะคำแนะนำเครื่องมือ คุณสามารถทำได้เช่นเดียวกันบนเว็บไซต์ของคุณ

ในบทความนี้ เราจะแนะนำคุณเกี่ยวกับการเพิ่มคำแนะนำเครื่องมือและกำหนดลักษณะที่ปรากฏโดยใช้ Elementor และ PowerPack Addons

ดังนั้นอย่ารอช้า ไปกันเลยดีกว่า

Tooltip คืออะไร?

คำแนะนำเครื่องมือโดยพื้นฐานแล้วเป็นองค์ประกอบ UI เล็กๆ ที่ผู้ใช้พบขณะใช้อินเทอร์เน็ตเบราว์เซอร์ แอพ หน้าจอเดสก์ท็อป ฯลฯ

ให้เราพยายามทำความเข้าใจคำแนะนำเครื่องมือโดยใช้ชื่อของมันเอง

ดูตามชื่อของมันเอง มันคือ เครื่องมือที่ ให้คำแนะนำ แก่ผู้ใช้เกี่ยวกับองค์ประกอบหรือฟิลด์เมื่อใดก็ตามที่มีทริกเกอร์ ทริกเกอร์นี้สามารถวางเมาส์เหนือหรือคลิกก็ได้ ตามโครงสร้างขณะเข้ารหัส

คำแนะนำเครื่องมือเหล่านี้เป็นกล่องข้อความขนาดเล็กที่มีคำอธิบายสั้น ๆ หรือชื่อที่ระบุองค์ประกอบ ฟิลด์ หรือเครื่องมือนั้น ๆ ตัวอย่างเช่น อ้างถึงหน้าจอเดสก์ท็อปของคุณและดูที่ไอคอนบนแถบเครื่องมือหรือเมนูเริ่มของหน้าต่าง

อย่างที่คุณเห็น แอปบน ' เมนูเริ่มต้นของ windows ' จะแสดงกล่องข้อความเล็กๆ ที่ระบุข้อมูลเกี่ยวกับแอปพลิเคชันนั้น นี่คือลักษณะของคำแนะนำเครื่องมือที่คุณสามารถหาได้จากทุกที่ในระบบหรือบนเว็บไซต์ของคุณ

ดังนั้น หากคุณต้องการให้คำแนะนำเครื่องมือเหล่านี้แสดงทั่วทั้งเว็บไซต์ของคุณ คุณต้องเพิ่มคำแนะนำเหล่านี้

เคล็ดลับเครื่องมือปรับปรุงประสบการณ์ผู้ใช้บนเว็บไซต์ของคุณอย่างไร

มาดูกันว่าคำแนะนำเครื่องมือเหล่านี้สามารถช่วยปรับปรุงประสบการณ์ผู้ใช้บนเว็บไซต์ของคุณได้อย่างไร

คุณสามารถเพิ่มคำแนะนำเครื่องมือลงในพื้นที่ดังกล่าวบนเว็บไซต์ของคุณได้ เช่น:

• องค์ประกอบที่คลิกได้ เช่น รูปภาพ ไอคอน ฯลฯ
• ข้อความโฮเวอร์ข้อความหรือลิงก์ที่คลิกได้
• ฮอตสปอตรูปภาพ
• ผลิตภัณฑ์อีคอมเมิร์ซ (หากคุณใช้งานเว็บไซต์ WooCommerce)

โอเค ลองคิดดู ถ้าคุณใช้คำแนะนำเครื่องมือเหล่านี้ในพื้นที่เหล่านี้ทั้งหมดของเว็บไซต์ของคุณ วิธีการที่ง่ายและมีประโยชน์สำหรับผู้ใช้ทั้งหมดที่เข้าชมเว็บไซต์ของคุณ

ใช่ ผู้บริโภคจะพบว่าสะดวก และนี่เป็นเพราะคำแนะนำเครื่องมือเหล่านี้ช่วยผู้ใช้โดยเสนอข้อบ่งชี้ของข้อความที่เกี่ยวข้องไม่ว่าจะวางไว้ที่ใดในเว็บไซต์ของคุณ และสิ่งนี้จะช่วยปรับปรุงประสบการณ์การใช้งานของผู้ใช้

จะเพิ่มคำแนะนำเครื่องมือใน Elementor โดยใช้ PowerPack ได้อย่างไร

ด้วยคำแนะนำเครื่องมือ คุณสามารถแสดงข้อความสำคัญผ่านข้อความถึงผู้ใช้ของคุณเพื่อประสบการณ์การใช้งานที่ดียิ่งขึ้น

ในการเพิ่มคำแนะนำเครื่องมือในเว็บไซต์ของคุณ คุณต้องติดตั้งและเปิดใช้งาน Elementor และ PowerPack Addons

PowerPack Addons สำหรับ Elementor มีวิดเจ็ตที่มีประโยชน์และสร้างสรรค์มากกว่า 80 รายการ เทมเพลตที่ออกแบบไว้ล่วงหน้ามากกว่า 300 รายการ และส่วนขยายที่มีประโยชน์เพื่อปรับปรุงรูปลักษณ์โดยรวมของเว็บไซต์ของคุณ หนึ่งในส่วนขยายเหล่านั้นคือ Tooltip ที่คุณสามารถใช้แสดงข้อความคำแนะนำเครื่องมือบนเว็บไซต์ของคุณได้

มาดูกันว่าคุณสามารถเพิ่มคำแนะนำเครื่องมือในเว็บไซต์ของคุณโดยใช้ Elementor และ PowerPack ได้อย่างไร

เปิดใช้งานส่วนขยายคำแนะนำเครื่องมือ

หากต้องการเพิ่มคำแนะนำเครื่องมือในเว็บไซต์ของคุณ ก่อนอื่นให้เปิดใช้งานส่วนขยายคำแนะนำเครื่องมือ

ถัดไป ไปที่แดชบอร์ด WordPress ของคุณ ไปที่ Elementor แล้วคลิก PowerPack

ถัดไป ไปที่ส่วนส่วน ขยาย และเปิดใช้งานคุณลักษณะคำ แนะนำเครื่องมือ

เมื่อเสร็จแล้วให้กดปุ่ม บันทึกการเปลี่ยนแปลง

เปิดใช้งานคุณสมบัติคำแนะนำเครื่องมือใน Elementor

หากต้องการเพิ่ม Tooltip ให้กับวิดเจ็ต/ส่วนใดๆ บนเว็บไซต์ Elementor ของคุณ ให้เปิดหน้าเว็บของคุณในเครื่องมือแก้ไข Elementor เลือกองค์ประกอบที่คุณต้องการแสดงคำแนะนำเครื่องมือ จากนั้นไปที่ แท็บขั้นสูง > PowerPack ; ตอนนี้เปิดใช้งานคุณลักษณะ ' เคล็ดลับเครื่องมือ '

สุดท้าย คุณลักษณะคำแนะนำเครื่องมือสามารถแสดงบนหน้าเว็บไซต์ของคุณได้สำเร็จ

ปรับแต่งคุณสมบัติคำแนะนำเครื่องมือ

เมื่อคุณเปิดใช้งานคุณลักษณะคำแนะนำเครื่องมือแล้ว มาดูคุณลักษณะที่คุณสามารถปรับแต่งเพื่อแสดงข้อความคำแนะนำเครื่องมือที่น่าสนใจได้

เมื่อคุณเปิดใช้งานคุณลักษณะคำแนะนำเครื่องมือ ตัวเลือกการปรับแต่งทั้งหมดจะปรากฏขึ้นซึ่งคุณสามารถใช้เพื่อปรับปรุงรูปลักษณ์โดยรวมได้

มาดูกันว่าคุณจะได้รับการตั้งค่าคำแนะนำเครื่องมืออะไรบ้างจากฟีเจอร์นี้:

• เนื้อหาคำแนะนำเครื่องมือ: เพิ่มเนื้อหาที่คุณต้องการแสดงบนคำแนะนำเครื่องมือ
• เป้าหมาย: เมื่อใช้ตัวเลือกนี้ คุณสามารถเลือกเป้าหมายเป็นองค์ประกอบปัจจุบันหรือตัวเลือกที่กำหนดเองได้
• ทริกเกอร์: เลือกทริกเกอร์ที่คุณต้องการจากตัวเลือกที่มี เช่น โฮเวอร์ หรือ คลิก
• ตำแหน่งคำแนะนำเครื่องมือ: เลือกตำแหน่งคำแนะนำเครื่องมือเป็น บน ล่าง ซ้าย หรือ ขวา
• แสดงลูกศร: เลือกตัวเลือกว่าจะแสดงลูกศรหรือไม่
• แอนิเมชั่น: เมื่อใช้คุณสมบัตินี้ คุณสามารถใช้แอนิเมชั่นกับคำแนะนำเครื่องมือจากตัวเลือกที่มี เช่น จาง ตก เติบโต สไลด์ หรือ สวิง
• ระยะทาง: ตัวเลือกนี้สามารถปรับระยะห่างระหว่างฮอตสปอตและคำแนะนำเครื่องมือได้
• ดัชนี Z: ด้วยตัวเลือกนี้ คุณสามารถปรับค่าดัชนี Z สำหรับคำแนะนำเครื่องมือได้

เมื่อคุณได้ปรับแต่งการตั้งค่าคำแนะนำเครื่องมือทั้งหมดแล้ว ไปที่ขั้นตอนต่อไป

มาดูตัวเลือกการจัดรูปแบบทั้งหมดที่มีให้สำหรับคุณลักษณะคำแนะนำเครื่องมือ:

• สีพื้นหลัง: ปรับแต่งสีพื้นหลังของคำแนะนำเครื่องมือโดยใช้ตัวเลือกนี้
• สีข้อความ: คุณลักษณะนี้สามารถใช้เพื่อปรับแต่งสีข้อความคำแนะนำเครื่องมือ
• วิชาการ พิมพ์: ปรับแต่งข้อความตัวอักษรของคำแนะนำเครื่องมือได้โดยใช้ตัวเลือกนี้
• Box Shadow: คุณสามารถเปิดใช้งานคุณสมบัติกล่องเงาด้วยตัวเลือกนี้เพื่อปรับปรุงรูปลักษณ์ของมัน
• ประเภทเส้นขอบ: หากคุณต้องการเพิ่มเส้นขอบให้กับคำแนะนำเครื่องมือ คุณสามารถใช้ตัวเลือกนี้ได้ เลือกประเภทเส้นขอบจากตัวเลือกที่มี เช่น ทึบ จุด เส้น ประ สองเท่า และ ร่อง
• รัศมีเส้นขอบ: หากคุณใช้เส้นขอบกับคำแนะนำเครื่องมือ คุณสามารถปรับรัศมีได้โดยใช้ตัวเลือกนี้
• Padding: คุณสามารถปรับ padding สำหรับคำแนะนำเครื่องมือ สิ่งนี้จะช่วยให้มีระยะห่างระหว่างข้อความคำแนะนำเครื่องมือและเส้นขอบ
• ความกว้าง: คุณยังสามารถปรับความกว้างของคำแนะนำเครื่องมือได้ด้วยตัวเลือกนี้

หลังจากปรับแต่งคุณลักษณะทั้งหมดเหล่านี้แล้ว คำแนะนำเครื่องมือที่เราเพิ่งสร้างขึ้นจะมีลักษณะดังนี้

ห่อ!

ดังที่เราได้กล่าวไปแล้ว กระบวนการทั้งหมดในการเพิ่มคำแนะนำเครื่องมือในเว็บไซต์ Elementor โดยใช้ PowerPack Addons อย่างไรก็ตาม สามารถทำได้ผ่านการเข้ารหัส หากคุณเป็นนักเขียนโค้ดมืออาชีพ

เราหวังว่าบทช่วยสอนนี้จะช่วยให้คุณเพิ่มคำแนะนำเครื่องมือในเว็บไซต์ Elementor ของคุณได้ คลิกที่นี่เพื่อรับ PowerPack Elementor Addons เพื่อสร้างคำแนะนำเครื่องมือที่น่าทึ่งและส่วนอื่น ๆ อีกมากมายบนเว็บไซต์ Elementor ของคุณ

หากคุณกำลังออกแบบหน้า Elementor และกำลังมองหาวิธีเพิ่มแบบอักษรที่กำหนดเอง บทความวิธีเพิ่มแบบอักษรที่กำหนดเองไปยังเว็บไซต์ Elementor จะแนะนำคุณ

หากคุณประสบปัญหาใด ๆ โปรดทิ้งคำถามของคุณไว้ในส่วนความคิดเห็น

เข้าร่วมกับเราบน Twitter, Facebook และ YouTube