คุณต้องการเรียนรู้วิธีสร้างภาพแบบโต้ตอบด้วย Hotspots ใน WordPress หรือไม่ ขอบคุณ Elementor และส่วนเสริมที่จำเป็น?
รูปภาพเป็นเครื่องมือที่ยอดเยี่ยมสำหรับการส่งข้อมูล ทุกคนทราบดีว่าข้อมูลที่ถ่ายทอดผ่านภาพและรูปแบบภาพโดยรวมนั้นเข้าใจและจดจำได้ง่ายกว่า
ในบริบทของเว็บ คุณสามารถใช้รูปแบบรูปภาพได้มากมาย จากอินโฟกราฟิก ภาพถ่าย การ์ตูนประกอบ ภาพประกอบ ฯลฯ….
หากคุณต้องการสร้างเนื้อหาเว็บ เช่น กายวิภาคของบางสิ่ง จุดสังเกตของเมือง แผนที่ หรือเส้นทาง การสร้างรูปภาพด้วย Hotspots อาจเป็นแนวคิดที่ดี
แนวคิดของเนื้อหาประเภทนี้คือการให้ภาพเชิงโต้ตอบที่ทำให้ผู้อ่านของคุณเข้าใจข้อมูลที่คุณสื่อได้ง่าย คุณสามารถเพิ่ม Hotspot บนภาพที่มีคำแนะนำเครื่องมือในแต่ละ Hotspot นี่คือตัวอย่าง
หากคุณมี เว็บไซต์ ด้วย WordPress การสร้างภาพด้วยฮอตสปอตไม่ใช่เรื่องยากเกินไป คุณสามารถสร้างได้โดยใช้โมดูล ส่วนเสริมที่จำเป็น .
โมดูล Essential Addons คืออะไร?
Essential Addons เป็นส่วนเสริมของElementor. นี่เป็นหนึ่งในม็อดยอดนิยมที่มียอดดาวน์โหลดมากกว่า 2 ล้านครั้ง ส่วนเสริมนี้เพิ่มวิดเจ็ตเพิ่มเติมประมาณ 60 รายการให้กับคุณ Elementor.
หนึ่งในวิดเจ็ตที่นำเสนอโดย Essential Addons คือ ฮอตสปอตรูปภาพ EA ซึ่งคุณสามารถใช้เพื่อสร้างภาพแบบโต้ตอบได้ Essential Addons นั้นเป็น addon แบบ freemium แต่คุณต้องใช้เวอร์ชันโปรเพื่อสร้างอิมเมจด้วย Hotspots เนื่องจากวิดเจ็ต EA Image Hotspots มีเฉพาะในเวอร์ชันนี้เท่านั้น
วิธีใช้โมดูล Essential Addons เพื่อสร้างรูปภาพด้วย Hotspots
ก่อนอื่น คุณต้องติดตั้งโมดูล Elementor และ Essential Addons บน WordPress ของคุณ คุณสามารถรับ Essential Addons เวอร์ชันโปรได้ เว็บไซต์ เป็นทางการ. สำหรับ Elementor คุณสามารถใช้เวอร์ชันฟรีได้
ดูเพิ่มเติมที่: วิธีใช้ Global Widget ใน Elementor
Elementor เวอร์ชันฟรีมีอยู่ในไดเร็กทอรีของ WordPress ปลั๊กอิน คุณจึงสามารถติดตั้งได้โดยพิมพ์ “elementor” ในช่องค้นหาตัวติดตั้งปลั๊กอิน (ปลั๊กอิน -> เพิ่ม).
เมื่อติดตั้ง Elementor และ Essential Addons แล้ว ให้สร้างหน้าใหม่ (หน้า – > เพิ่ม) หรือบทความใหม่ (รายการ -> เพิ่ม) และแก้ไขด้วย Elementor คุณจะถูกนำไปยังโปรแกรมแก้ไข Elementor หลังจากคลิกปุ่ม แก้ไขด้วย Elementor.
ก่อนสร้างภาพด้วยฮอตสปอต คุณสามารถตั้งค่าเค้าโครงก่อน ในการดำเนินการนี้ ให้เปิดแผงการตั้งค่าหน้าโดยคลิกไอคอนรูปเฟืองที่มุมซ้ายล่างของแผงด้านซ้าย
อ่าน: วิธีใช้วิดเจ็ตโพสต์ของ Elementor
ตั้งค่าเค้าโครงในเมนูแบบเลื่อนลง แบบ
เพิ่มส่วนใหม่โดยคลิกไอคอนเครื่องหมายบวกในช่องแก้ไข และเพิ่มวิดเจ็ต EA Image Hotspots จากแผงด้านซ้าย
เพิ่มรูปภาพของคุณโดยคลิกที่ตัวเลือกรูปภาพในแผงด้านซ้าย
ตัวเลือกเปิด ฮอตสปอต ที่แผงด้านซ้ายเพื่อเพิ่มจุดเชื่อมต่อ ตามค่าเริ่มต้น วิดเจ็ต EA Image Hotspots จะมีฮอตสปอต คุณสามารถคลิกที่จุดเชื่อมต่อเริ่มต้นเพื่อแก้ไขเนื้อหา
ตามค่าเริ่มต้น ประเภทจุดเชื่อมต่อจะถูกตั้งค่าเป็น ไอคอน. คุณสามารถเปลี่ยนเป็น ตำรา หรือออกจาก ว่างเปล่า ถ้าคุณต้องการมัน
คลิกที่แท็บ ตำแหน่ง เพื่อกำหนดตำแหน่งของจุดเชื่อมต่อ กำหนดตำแหน่ง X และ Y โดยการลากแถบเลื่อน
คลิกที่แท็บ เคล็ดลับเครื่องมือ เพื่อเพิ่มเนื้อหาคำแนะนำเครื่องมือ เปิดใช้งานคำแนะนำเครื่องมือและเพิ่มเนื้อหาของคุณในตัวแก้ไข คุณยังสามารถกำหนดตำแหน่งของคำแนะนำเครื่องมือได้ทั้งบน ล่าง ซ้ายหรือขวา
หากต้องการเพิ่มฮอตสปอต เพียงคลิกปุ่ม เพิ่มองค์ประกอบ ในส่วน ฮอตสปอต และทำซ้ำขั้นตอนข้างต้นเพื่อตั้งค่าตำแหน่งฮอตสปอต เนื้อหาคำแนะนำเครื่องมือ และตำแหน่งคำแนะนำเครื่องมือ
เปิดส่วน การตั้งค่าคำแนะนำเครื่องมือ เพื่อกำหนดขนาดของคำแนะนำเครื่องมือและเอฟเฟ็กต์ภาพเคลื่อนไหว
ตอนนี้ไปที่แท็บ สไตล์ เพื่อจัดรูปแบบฮอตสปอตของคุณรวมถึงคำแนะนำเครื่องมือ ก่อนอื่นให้เปิดตัวเลือก ภาพ เพื่อกำหนดขนาดภาพ
เปิดมาตรา ฮอตสปอต เพื่อปรับแต่งฮอทพอท คุณสามารถกำหนดขนาด สีไอคอน (หรือข้อความขึ้นอยู่กับประเภทฮอตสปอตที่คุณเลือก) สีพื้นหลัง รัศมีของเส้นขอบ ฯลฯ...
ค้นพบยัง: วิธีเพิ่มรายการที่เกี่ยวข้องใน Elementor
เปิดส่วน Tooltip เพื่อปรับแต่งคำแนะนำเครื่องมือ คุณสามารถตั้งค่าสีพื้นหลัง สีข้อความ ลักษณะตัวอักษร (ขนาดฟอนต์ ตระกูลฟอนต์ สไตล์ฟอนต์) และความกว้าง
ถึงตอนนี้คุณสร้างภาพด้วยฮอตสปอตได้สำเร็จแล้ว คุณสามารถเล่นกับแผงด้านซ้ายเพื่อปรับแต่งรูปภาพของคุณด้วยฮอตสปอตได้จนกว่าคุณจะพอใจกับผลลัพธ์ที่ได้ เมื่อเสร็จแล้ว คุณสามารถคลิกปุ่ม Publier เพื่อเผยแพร่เพจของคุณ
เพิ่มรูปภาพพร้อมฮอตสปอตไปยัง Gutenberg
หากคุณต้องการเพิ่มรูปภาพที่มีฮอตสปอตเป็นสื่อสนับสนุนสำหรับบทความที่คุณกำลังทำงานอยู่ คุณสามารถรวมเข้ากับ Gutenberg (โปรแกรมแก้ไข WordPress เริ่มต้น) โดยใช้ปลั๊กอิน Elementor Blocks สำหรับ Gutenberg. ปลั๊กอินนี้อนุญาตให้คุณใช้เทมเพลต Elementor เป็นบล็อก Gutenberg
หากต้องการบันทึกภาพด้วยฮอตสปอตด้านบนเป็นเทมเพลตส่วน Elementor ให้คลิกขวาที่ส่วนจับและเลือก บันทึกเป็นแม่แบบ.
ตั้งชื่อโมเดลของคุณและคลิกที่ปุ่ม ผู้ลงทะเบียน.
เปิดบทความที่คุณต้องการเพิ่มรูปภาพด้วยฮอตสปอต เพิ่มบล็อกใหม่ เลือก ไลบรารี Elementor แล้วเลือกเทมเพลตรูปภาพที่มีฮอตสปอตที่คุณเพิ่งสร้างขึ้น
รับ Elementor Pro ทันที!!!
สรุป
ที่นี่ ! เพียงเท่านี้บทความนี้ก็จะแสดงให้คุณเห็นว่า สร้างภาพแบบโต้ตอบด้วย Hotspots ใน WordPress ด้วย Elementor และ Essential Addons. หากคุณมีข้อสงสัยเกี่ยวกับวิธีการเดินทาง โปรดแจ้งให้พวกเขาทราบใน ความเห็น.
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
