ไฮไลท์ปลั๊กอิน Divi – โอเวอร์เลย์ Divi

Divi Overlays เป็นปลั๊กอินสำหรับ Divi โดย DiviLife ซึ่งเป็นบริษัทพัฒนา Divi บุคคลที่สามโดย Tim Strifler สมาชิกชุมชน ช่วยให้คุณสร้างป๊อปอัปได้อย่างง่ายดายโดยใช้ Divi Builder มันไม่ใช่แค่โมดอล คุณสามารถสร้างโอเวอร์เลย์แบบเต็มหน้าจอ และเพิ่มเนื้อหาประเภทใดก็ได้ที่คุณต้องการในโอเวอร์เลย์โดยใช้ Divi Builder จากนั้นทริกเกอร์ด้วยสิ่งใดๆ บนหน้า รวมถึงปุ่ม ลิงก์ รูปภาพ ฯลฯ คุณสามารถปรับสีพื้นหลัง แบบอักษร สี และเลือกภาพเคลื่อนไหวเปิด

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

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

ดาวน์โหลด: Divi Overlays ดาวน์โหลด

ในภาพรวมนี้ ฉันกำลังดูเวอร์ชัน 1.1 ซึ่งมีคุณลักษณะใหม่บางอย่างที่ลูกค้าร้องขอ ในตอนท้าย ฉันจะพูดถึงคุณลักษณะบางอย่างที่คุณคาดหวังจะได้เห็นในเวอร์ชัน 2.0 สำหรับตัวอย่าง ฉันใช้ชุดโครงลวดอเนกประสงค์ vol. 1. เจาะลึก...

การติดตั้ง

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

ป้อนคีย์ API และอีเมล (จากบัญชีของคุณที่ DiviLife) และเลือก บันทึกการเปลี่ยนแปลง ตอนนี้คุณพร้อมที่จะเริ่มสร้างภาพซ้อนทับแล้ว

เพิ่มการซ้อนทับ Divi ใหม่

โอเวอร์เลย์ถูกสร้างขึ้นแยกจากเนื้อหาของคุณ จากนั้นเปิดจากเนื้อหาของคุณโดยใช้โค้ดง่ายๆ

หากต้องการสร้างโอเวอร์เลย์ ให้ไปที่ Divi Overlays แล้วเลือก Add New ในแดชบอร์ด จากที่นี่คุณสามารถเลือกที่จะใช้ Divi Builder การทำงานนี้เหมือนกับหน้าหรือโพสต์ทั่วไปโดยใช้ Divi Builder รวมถึงปลั๊กอินและโมดูล Divi พิเศษ และคุณยังสามารถเรียกใช้การทดสอบ A/B โดยใช้ Divi Leads พวกเขายังทำงานในโมดูลสากล คุณยังสามารถนำเข้าและส่งออกภาพซ้อนทับของคุณได้

เลือกภาพเคลื่อนไหวซ้อนทับและการตั้งค่าจากช่องดรอปดาวน์ที่มุมขวาบน ภายใต้ Divi Builder คือการเลือกสีพื้นหลังและแบบอักษร

มีการเพิ่มการตั้งค่าบางอย่างทางด้านขวา กล่องที่เรียกว่า Divi Overlay Animation มีกล่องดรอปดาวน์ที่คุณสามารถเลือกจาก 11 แอนิเมชั่น สิ่งนี้กำหนดว่าการซ้อนทับจะปรากฏบนหน้าจออย่างไร

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

ฉันได้เพิ่มโมดูลวิดีโอและเลือก Genie สำหรับแอนิเมชั่นโอเวอร์เลย์และเลือกเพื่อป้องกันการเลื่อนหน้าหลัก

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

ลิงค์ถูกสร้างขึ้นโดยใช้ CSS ID คัดลอก CSS ID และเพิ่มแท็กเปิด <a id= และปิด </a> ตามที่แสดงในตัวอย่าง

ในตัวอย่างนี้ ฉันใช้หน้า Landing Page ฉันต้องการเพิ่มทริกเกอร์ให้กับข้อความ โลโก้ร้านแอป รูปภาพในโทรศัพท์ สร้างปุ่ม และวางลิงก์ภายในเมนู

ลิงค์ข้อความ

คัดลอก Content Shortcode แล้ววางลงในโค้ดหรือโมดูลข้อความ (โมดูลใดๆ ที่ยอมรับ รหัสย่อ ) บนหน้าเว็บของคุณ ฉันวางลงในโมดูลโค้ด คุณสามารถวางรหัสย่อ Divi Overlay ภายในโมดูลนี้ตามที่คุณต้องการ ไม่สำคัญว่าคุณจะวางโมดูลไว้ที่ใด ฉันแนะนำให้คุณทดสอบเพื่อให้แน่ใจว่าโมดูลไม่ส่งผลต่อการออกแบบของคุณ

ฉันต้องการใช้ข้อความ WATCH A DEMO เป็นลิงก์เพื่อเปิดวิดีโอ ในการดำเนินการนี้ ให้คัดลอก CSS ID จากรายการโอเวอร์เลย์ในหน้าจอแดชบอร์ด

วางโค้ดลงในโมดูลข้อความและจัดรูปแบบข้อความดังนี้:

<a id="overlay_unique_id_211154">WATCH A DEMO</a>

ในกรณีนี้ ข้อความถูกฝังอยู่ใน HTML บางตัวแล้ว แต่ก็ไม่เป็นไร เพียงให้คุณวางโค้ดในตำแหน่งที่ถูกต้องภายใน HTML

ตอนนี้ข้อความเป็นสีน้ำเงินเพื่อแสดงว่าเป็นลิงก์

เมื่อฉันคลิกข้อความ ฉันจะเห็นวิดีโอที่ฉันวางลิงก์ไว้ภายในโอเวอร์เลย์ โอเวอร์เลย์เปิดด้วยแอนิเมชั่นที่ฉันเลือก

ลิงค์รูปภาพ

มีสองวิธีในการเพิ่ม CSS ID ให้กับรูปภาพ วิธีที่คุณควรใช้จะขึ้นอยู่กับวิธีการวางรูปภาพในเนื้อหาของคุณ นี่คือตัวอย่างสองตัวอย่าง:

โมดูลข้อความ

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

ตอนนี้เมื่อฉันคลิกโลโก้แอป ฉันจะได้รับโอเวอร์เลย์พร้อมลิงก์ไปยังร้านแอปสองแห่งที่แตกต่างกัน เพื่อ UX/UI ที่ดีขึ้น ฉันจะเปลี่ยนกราฟิกสำหรับปุ่ม แต่นี่แสดงให้เห็นถึงศักยภาพในการให้ตัวเลือกที่หลากหลายในขณะที่รักษาเนื้อหาให้สะอาด สำหรับตัวอย่างนี้ ฉันตั้งค่าพื้นหลังโอเวอร์เลย์เป็นสีขาวโดยมีความทึบ 90 และสีแบบอักษรเป็นสีเทาเข้ม

โมดูลรูปภาพ

ในตัวอย่างข้างต้น ฉันเพิ่มโค้ดลงใน HTML เนื่องจากรูปภาพถูกวางไว้ในโมดูลข้อความ อีกทางเลือกหนึ่งคือการวางรูปภาพไว้ในโมดูลรูปภาพและใช้ CSS ID ในแท็บ CSS ที่กำหนดเอง

ในเลย์เอาต์นี้ โทรศัพท์มือถืออยู่ในโมดูลรูปภาพ ฉันจะเพิ่ม CSS ID เพื่อเปิดวิดีโอซ้อนทับ

ใน URL ของลิงก์ ให้ ใช้ #open-overlay (หรือข้อความที่คล้ายกันที่มีสัญลักษณ์ #) ตอนนี้ฉันสามารถคลิกรูปภาพและเปิดโอเวอร์เลย์ได้

ปุ่มลิงค์

การเพิ่มลิงก์โอเวอร์เลย์ให้กับปุ่มจะเหมือนกับการเพิ่มลงในรูปภาพ อย่าลืมเพิ่มรหัสย่อลงในโมดูลรหัส

เพิ่มข้อความ # ใน URL ของปุ่ม ฉันใช้ #open-overlay เหมือนเมื่อก่อนเพราะมันเป็นคำอธิบาย (และฉันก็ขโมยมาจาก Tim Strifler แต่อย่าบอกเขานะ)

เพิ่มโค้ด CSS ID ลงในแท็บ CSS ที่กำหนดเอง

และนั่นแหล่ะ! ตอนนี้ปุ่มใหม่จะเปิดแบบฟอร์มการติดต่อ

ลิงค์เมนู

ในการสร้างลิงก์เมนู ให้คัดลอก ID เมนู แล้วไปที่ ลักษณะที่ปรากฏ เมนู และเลือกเมนูที่คุณต้องการเพิ่มลิงก์และโหลด (ดูบทความนี้ วิธีสร้างโครงสร้างเมนูแบบกำหนดเองใน WordPress สำหรับข้อมูลเพิ่มเติม)

เลือก ตัวเลือกหน้าจอ ที่มุมบนขวาและทำเครื่องหมายในช่องที่มีข้อความ ว่าความสัมพันธ์เชื่อมโยง (XFN)

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

รายการเมนูปรากฏขึ้นภายในโครงสร้างเมนู การคลิกจะเป็นการเปิดโอเวอร์เลย์ สิ่งนี้มีประโยชน์ในการจัดทำ CTA (คำกระตุ้นการตัดสินใจ) ภายในโครงสร้างการนำทางและทั่วทั้งไซต์

วิดเจ็ต

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

นี่คือหน้าที่ฉันใช้จาก multi-purpose wireframe kit vol 1. ฉันต้องการทำให้ปุ่มสามารถคลิกได้เพื่อให้เปิดวิดีโอในโอเวอร์เลย์ ฉันเพิ่มรหัสย่อลงในพื้นที่วิดเจ็ต (โดยวางไว้ในวิดเจ็ตข้อความ) และเพิ่มรหัส CSS ให้กับรูปภาพบนหน้า

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

ปิดโอเวอร์เลย์

โอเวอร์เลย์สามารถปิดได้ด้วยเครื่องหมาย X ที่มุม โดยคลิกที่พื้นหลังของโอเวอร์เลย์ หรือโดยการกดปุ่ม Escape

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

คลาสปิดมีลักษณะดังนี้:

class = “close-divi-overlay”>ไม่เป็นไร ขอบคุณ

มาใน2.0

ต่อไปนี้คือคุณสมบัติบางอย่างที่รอคุณอยู่:

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

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

ตัวเลือกอื่นจะเปิดโอเวอร์เลย์เมื่อผู้อ่านเลือกปุ่มย้อนกลับหรือวางเคอร์เซอร์ไว้เหนือแถบที่อยู่

เอกสาร

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

ราคา

Divi Overlays เป็นปลั๊กอินระดับพรีเมียม มีค่าใช้จ่าย 15 ดอลลาร์สำหรับใช้งานในไซต์เดียว 29 ดอลลาร์สำหรับสามไซต์ 59 ดอลลาร์สำหรับไซต์ไม่จำกัด และ 129 ดอลลาร์สำหรับใบอนุญาตไม่จำกัดตลอดชีพ ใบอนุญาตแต่ละรายการมีคุณสมบัติหลักและเอกสารประกอบทั้งหมด สามรายการแรกประกอบด้วยการอัปเดตและการสนับสนุนหนึ่งปี ในขณะที่รายการสุดท้ายมีการอัปเดตและการสนับสนุนตลอดชีพ

ความคิดสุดท้าย

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

เราต้องการได้ยินจากคุณ! คุณลอง Divi Overlays แล้วหรือยัง? แจ้งให้เราทราบเกี่ยวกับประสบการณ์ของคุณในความคิดเห็น

ภาพเด่นผ่าน brickclay / shutterstock.com