ไฮไลท์ปลั๊กอิน Divi: โซลูชันโอเวอร์เลย์อย่างง่าย

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

โซลูชันการซ้อนทับอย่างง่าย

อัปโหลดและเปิดใช้งานปลั๊กอินตามปกติ จากนั้น คุณจะต้องเปิดใช้งานใบอนุญาต ในเมนูแดชบอร์ด ไปที่การ ตั้งค่า > การเปิดใช้งาน Divi SOS แล้วป้อนคีย์ API และอีเมลของคุณ

นำเข้าตัวอย่าง SOS

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

ในเมนูแดชบอร์ด ไปที่ Divi > SOS เลือกนำเข้าและส่งออก

นำเข้าไฟล์ JSON เช่นเดียวกับเลย์เอาต์ใดๆ

ตอนนี้คุณมีเดโม 5 รายการในไลบรารี SOS คุณสามารถดูการสาธิตได้ที่เว็บไซต์ของผู้พัฒนา

การสร้างเค้าโครง SOS

เค้าโครง SOS ยังถูกสร้างขึ้นในไลบรารี SOS ไปที่ห้องสมุดแล้วคลิก เพิ่มใหม่

ตั้งชื่อเลย์เอาต์บางอย่างที่เหมาะกับคุณ เลือก เค้าโครง สำหรับประเภทเค้าโครง

เลือก เค้าโครง SOS สำหรับหมวดหมู่

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

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

ตัวโหลดอาจเป็นสีอ่อนหรือสีเข้ม นี่คือตัวโหลดสีเข้มบนพื้นหลังสีอ่อน

ตัวอย่าง SOS Overlays

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

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

ฉันได้เพิ่มช่องว่างภายในเล็กน้อยที่ด้านบนของส่วน ฉันยังปิดการใช้งานพื้นหลังเพื่อให้สามารถควบคุมได้ด้วย Divi Builder

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

ฉันเพิ่มลิงก์ไปยังปุ่มในหน้าเดียวกับโอเวอร์เลย์แรก (คุณสามารถเพิ่มได้มากเท่าที่คุณต้องการ) อันนี้เปิดแบบฟอร์มการติดต่อเมื่อพวกเขาคลิกที่ปุ่ม ส่งข้อความถึงเรา

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

อันนี้ใช้ส่วนจากเลย์เอาต์ของ Investment Company ฉันต้องการสร้างป๊อปอัปพร้อมคำกระตุ้นการตัดสินใจ ฉันได้ตั้งค่าให้แสดงโดยอัตโนมัติด้วยการหน่วงเวลา 1,000 มิลลิวินาที เมื่อแสดงโดยอัตโนมัติ คุณไม่จำเป็นต้องเพิ่มลิงก์ที่ใดก็ได้ จะแสดงโดยอัตโนมัติในทุกหน้า ฉันยังตั้งค่าคุกกี้ให้แสดงป๊อปอัปทุกๆ 30 วันเท่านั้น

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

ฉันกำลังย้ายตัวเลือกปิดจากปุ่มที่มุมบนขวาไปยังปุ่มที่สร้างด้วย Divi Builder ฉันโคลนปุ่มจากเค้าโครง เปลี่ยนข้อความ และเพิ่มลิงก์ปิดไปยัง URL

ผลลัพธ์ที่ได้คือการออกแบบที่สะอาดตาซึ่งทำงานได้ดีเหมือน CTA

ฉันกลับไปที่การออกแบบและเพิ่มพื้นหลังใหม่และปุ่มที่เปิดหน้าอื่น

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

ป๊อปอัปสมัครรับข้อมูลดูดีและเข้ากันได้ดีกับการออกแบบของไซต์ เพราะจริงๆ แล้วมาจากการออกแบบของไซต์ ฉันชอบที่มันสามารถใช้เลย์เอาต์ Divi ปกติเพื่อสร้างป๊อปอัป

เมนูเมก้า

คุณยังสามารถสร้างเมนูเมก้าด้วย SOS สร้างลิงก์ที่กำหนดเองเป็นรายการเมนู แล้วเพิ่มลิงก์ของโอเวอร์เลย์ไปยัง URL ของรายการเมนู

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

ราคาโซลูชันการซ้อนทับอย่างง่าย

มีสองใบอนุญาตสำหรับ SOS ทั้งสองมีค่าธรรมเนียมแบบครั้งเดียวและรวมการอัปเดตตลอดอายุการใช้งาน

• 1 เว็บไซต์และ 1 ไซต์ผู้พัฒนา – $25
• เว็บไซต์ไม่จำกัด – $45

คุณสามารถซื้อ SOS ได้จากเว็บไซต์ของผู้พัฒนา

จบความคิด

Simple Overlay Solution ใช้งานง่าย การควบคุมที่ง่ายและใช้งานง่าย การสร้างภาพซ้อนทับนั้นเกือบจะเหมือนกับการสร้างหน้าด้วย Divi หากคุณสามารถใช้ Divi Builder ได้ คุณสามารถใช้ SOS หน้า Divi โหลดเร็วเพราะไม่ได้โหลดภาพซ้อนทับไว้ล่วงหน้า โอเวอร์เลย์และป๊อปอัปยังโหลดได้อย่างรวดเร็ว

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

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

SOS เป็นปลั๊กอินที่ง่ายต่อการแนะนำ หากคุณสนใจวิธีง่ายๆ ในการสร้างโอเวอร์เลย์ ป๊อปอัป และเมนูขนาดใหญ่ด้วย Divi Builder Simple Overlay Solution (SOS) อาจเป็นปลั๊กอินที่คุณต้องการ

เราต้องการได้ยินจากคุณ คุณได้ลองใช้ปลั๊กอิน Simple Overlay Solution เพื่อสร้างโอเวอร์เลย์และป๊อปอัปหรือไม่? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็น

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