วิธีเพิ่ม Lightbox ใน WordPress ด้วย Elementor

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

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

ในบทความนี้เราจะให้คำแนะนำที่ครอบคลุมทีละขั้นตอนเกี่ยวกับวิธีเพิ่ม Lightbox ใน WordPress ด้วย Elementor ให้แน่ใจว่าได้อ่านผ่านจนจบเพื่อใช้ประโยชน์จากเครื่องมือที่ทรงพลังที่สุด!

Lightbox ใน WordPress คืออะไร?

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

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

ประโยชน์ของการเพิ่ม Lightbox ลงในเว็บไซต์

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

• ประสบการณ์ผู้ใช้ที่ได้รับการปรับปรุง

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

• ปรับปรุงการดึงดูดสายตา

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

• การนำทางที่ง่ายขึ้นสำหรับรูปภาพและวิดีโอ

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

• เพิ่มการมีส่วนร่วมและการมีปฏิสัมพันธ์

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

• ช่วยให้การนำเสนอเนื้อหาที่ดีขึ้น

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

วิธีเพิ่ม Lightbox ใน WordPress ด้วย Elementor

ตอนนี้เราอยู่ในส่วนการสอน ในส่วนนี้เราจะแสดงวิธีเพิ่ม Lightbox ใน WordPress ด้วย Elementor ในการเริ่มต้นด้วยการสอนคุณต้องตรวจสอบให้แน่ใจว่าปลั๊กอินต่อไปนี้ได้รับการติดตั้งและเปิดใช้งานบนเว็บไซต์ของคุณ

• ผู้ประกอบการ
• Happyaddons

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

ขั้นตอนที่ 01: ลากและวางวิดเจ็ตไลท์บ็อกซ์ไปยังผืนผ้าใบ

เปิดโพสต์หรือหน้าด้วย Canvas Elementor ค้นหา วิดเจ็ต Lightbox บนแผง Elementor ลากและวางลงบนผืนผ้าใบ

โดยค่าเริ่มต้นวิดเจ็ต Lightbox จะถูกเพิ่มลงในผืนผ้าใบเป็นปุ่ม

ขั้นตอนที่ 02: เลือกประเภท Lightbox

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

ขั้นตอนที่ 03: เลือกประเภทของเนื้อหาที่คุณต้องการแสดง

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

หากเลือกตัวเลือกวิดีโอคุณสามารถเพิ่มเนื้อหาวิดีโอจากสามแหล่ง ได้แก่ YouTube, Vimeo และ ตัวเอง

หากเลือกแหล่งที่มาของ YouTube หรือ Vimeo คุณสามารถเพิ่มลิงค์วิดีโอที่คุณต้องการในกล่องที่เกี่ยวข้องที่แสดงในภาพหน้าจอที่แนบมาด้านล่าง

คุณยังสามารถเปิดใช้งานประเภทภาพสำหรับ Lightbox และอัปโหลดภาพได้

ขั้นตอนที่ 04: เพิ่มสำเนาลงในปุ่ม Lightbox

เขียนสำเนาที่เหมาะสมซึ่งทำให้ปุ่มมีความหมายและผู้ใช้ที่สนใจในการคลิก

ขั้นตอนที่ 05: กำหนดค่าการตั้งค่าสำหรับวิดเจ็ต Lightbox

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

ขั้นตอนที่ 06: จัดแต่งวิดเจ็ต Lightbox

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

ขั้นตอนที่ 07: ดูตัวอย่าง Lightbox

เพียงคลิกที่ปุ่ม หาก Lightbox ปรากฏเหมือนคลิปวิดีโอที่แนบมาด้านล่างก็ไม่เป็นไร คุณจะเห็นว่า Lightbox ของเราทำงานได้ดีอย่างแน่นอน

ขั้นตอนที่ 08: ทำให้วิดเจ็ต Lightbox ตอบสนองได้

คลิกที่ไอคอน โหมดตอบสนอง บนส่วนท้ายของแผง Elementor สิ่งนี้จะแสดงแถบด้านบนบนผืนผ้าใบพร้อมตัวเลือกเพื่อสลับระหว่างขนาดหน้าจอที่แตกต่างกัน

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

ดังนั้นคุณสามารถสร้าง Lightbox ใน WordPress โดยใช้ปลั๊กอิน Elementor

สิ่งที่ควรพิจารณาในการสร้าง Lightbox ใน WordPress

หวังว่าคุณจะสนุกกับการสอนนี้ ตอนนี้ในส่วนนี้เราจะครอบคลุมคะแนนที่คุณต้องพิจารณาเมื่อสร้าง Lightbox ใน WordPress เพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

• จุดประสงค์ของ Lightbox

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

• บีบอัดภาพ

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

• เพิ่มการเปลี่ยนแปลงข้อความ S

การเพิ่มข้อความทางเลือกในภาพสามารถเพิ่มคะแนน SEO ของภาพ Lightbox ของคุณ นอกจากนี้เพิ่มสำเนาที่น่าสนใจไปยังปุ่ม Lightbox หรือลิงก์

• ออกจากฟังก์ชันการทำงาน

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

• การทดสอบและการแก้ไขปัญหา

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

บทสรุป

Lightbox ช่วยเพิ่มการมีส่วนร่วมของผู้ใช้โดยการแสดงสื่อในการซ้อนทับด้านบนของหน้าหลัก สิ่งนี้ช่วยให้ผู้เข้าชมสามารถมุ่งเน้นเนื้อหาโดยไม่ต้องสำรวจ ในขณะที่มีปลั๊กอินจำนวนมากที่มีอยู่ใน WordPress.org สำหรับการสร้าง Lightboxes แต่ Elementor โดดเด่นเป็นหนึ่งในตัวเลือกที่ง่ายที่สุดและใช้งานง่ายที่สุด หากคุณเป็นแฟนตัวยงของผู้สร้างหน้า Elementor ก็ควรพิจารณาอย่างแน่นอน

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

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