วิธีเพิ่มป๊อปอัปที่เรียกใช้ Scroll ในโพสต์บล็อกของคุณใน Divi

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

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

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของป๊อปอัปที่เรียกใช้การเลื่อนที่เราจะสร้าง

เราจะสร้างป๊อปอัปเพื่อแสดงโพสต์ที่เกี่ยวข้อง (ตามหมวดหมู่) ดังที่แสดงด้านล่าง

และเราจะแสดงวิธีเพิ่มอีเมล optin ให้กับป๊อปอัปด้วยเช่นเดียวกับที่เห็นที่นี่

ดาวน์โหลดเทมเพลต Scroll Triggered Popup Divi Post ฟรี

หากต้องการใช้เทมเพลตโพสต์จากบทช่วยสอนนี้ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip และเพิ่มไฟล์ json ไฟล์ใดไฟล์หนึ่งลงใน Divi Theme Builder โดยใช้ตัวเลือก Theme Builder Portability

ไปที่บทช่วยสอนกันไหม

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องติดตั้งและเปิดใช้งานธีม Divi ตรวจสอบให้แน่ใจว่าคุณมี Divi เวอร์ชันล่าสุด

คุณจะต้องดาวน์โหลด Fourth Theme Builder Pack เนื่องจากเราจะใช้เทมเพลตโพสต์ที่สร้างไว้ล่วงหน้าจากแพ็กนั้นสำหรับบทช่วยสอนนี้

คุณจะต้องสร้างโพสต์บล็อกอย่างน้อยสองสามรายการเพื่อการทดสอบเพื่อให้เทมเพลตโพสต์แสดงผล

หลังจากนั้นคุณก็พร้อมที่จะไป

การสร้าง Scroll Triggered Pop-Up ที่ส่วนท้ายของโพสต์บล็อก Divi ของคุณ

การนำเข้าเทมเพลตบล็อกโพสต์จากชุดตัวสร้างธีมที่สี่

จากแดชบอร์ด WordPress ให้ไปที่ Divi > Theme Builder ภายในตัวสร้างธีม ให้เลือกไอคอนการเคลื่อนย้ายที่ด้านบนขวาของหน้า ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้า เลือกไฟล์ theme-builder-pack-4-post-template.json แล้วคลิกปุ่มนำเข้า (ไฟล์นำเข้านี้จะอยู่ในโฟลเดอร์ Fourth Theme Builder Pack)

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

หลังจากนำเข้าเทมเพลตแล้ว ให้คลิกไอคอนเพื่อแก้ไขพื้นที่เนื้อหาที่กำหนดเอง

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

การออกแบบ Scroll Triggered Popup พร้อมโพสต์ที่เกี่ยวข้องตามหมวดหมู่

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

นี่คือวิธีการทำ

เพิ่มแถวหนึ่งคอลัมน์

ขั้นแรกให้เพิ่มแถวคอลัมน์หนึ่งแถวด้านล่างแถวที่มีโมดูลเนื้อหาโพสต์ในเค้าโครงเทมเพลตโพสต์

การตั้งค่าแถว

ก่อนเพิ่มโมดูล ให้อัปเดตการตั้งค่าแถวดังนี้:

• สีพื้นหลัง: #ffffff
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 300px (เดสก์ท็อป), 200px (โทรศัพท์)
• ช่องว่างภายใน: บน 20px ด้านล่าง 0px
• กล่องเงา: ดูภาพหน้าจอ

เพิ่มโมดูลข้อความ

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

เนื้อหา

อัปเดตเนื้อหาเนื้อหาด้วยข้อความ "โพสต์ที่เกี่ยวข้อง"

ออกแบบ

จากนั้นอัปเดตการตั้งค่าการออกแบบดังนี้:

• แบบอักษรของข้อความ: Heebo
• รูปแบบตัวอักษรของข้อความ: TT
• สีข้อความ: #f94857
• การจัดตำแหน่งข้อความ: center

เพิ่มโมดูลบล็อก

ภายใต้โมดูลข้อความ เพิ่มโมดูลบล็อก

เนื้อหา

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

อัปเดตสิ่งต่อไปนี้:

• จำนวนโพสต์: 1
• หมวดหมู่ที่รวม: หมวดหมู่ปัจจุบัน

องค์ประกอบ

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

ออกแบบ

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• แบบอักษรของชื่อเรื่อง: Heebo
• น้ำหนักแบบอักษรของชื่อเรื่อง: Ultra Bold
• ขนาดข้อความชื่อเรื่อง: 16px
• ความสูงของบรรทัดชื่อเรื่อง: 1.4em
• ช่องว่างภายใน: 5% บน 5% ซ้าย 5% ขวา

การตั้งค่าแถวขั้นสูง

คลาส CSS, CSS ที่กำหนดเอง และดัชนี Z

ภายใต้แท็บขั้นสูง เราจำเป็นต้องกำหนดคลาส CSS ให้กับแถวของเรา CSS แบบกำหนดเองเล็กน้อย และอัปเดตดัชนี z เพื่อให้ป๊อปอัปอยู่เหนือเนื้อหาอื่นๆ บนหน้า

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

เมื่ออยู่ในโหมดดูโครงร่าง ให้เปิดการตั้งค่าแถวสำรองและเพิ่มคลาส CSS ต่อไปนี้:

• CSS Class: post-row

จากนั้นเพิ่ม css ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

position: fixed;
bottom: 0%;
right: -300px;

และอัปเดตดัชนี Z:

• ดัชนี Z: 999

เพิ่มตัวแบ่งเป็น Scroll Trigger Points

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

เพิ่ม Scroll Trigger Point #1

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

จากนั้นเพิ่มคลาส CSS ต่อไปนี้:

• CSS Class: post-waypoint

นั่นเป็นเรื่องง่าย

เพิ่ม Scroll Trigger Point #2

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

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

เพิ่มรหัสที่กำหนดเองด้วยรหัสโมดูล

สิ่งที่เหลืออยู่เพื่อให้การเลื่อนนี้เรียกป๊อปอัปให้ทำงานคือโค้ดเล็กน้อย

ไปข้างหน้าและเพิ่มโมดูลโค้ดลงในเทมเพลตโพสต์

จากนั้นวางรหัสต่อไปนี้ในกล่องรหัส:

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

ผลลัพธ์

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

การเพิ่มอีเมล Optin ให้กับ Scroll Triggered Pop-Up

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

บันทึกส่วนท้ายอีเมล Optin ไปยัง Divi Library

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

ค้นหาโมดูล optin อีเมลและบันทึกลงในห้องสมุด Divi

เพิ่มอีเมล Optin ที่บันทึกไว้ในแถวป๊อปอัป

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

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

การตั้งค่า Optin อีเมล

เมื่อ optin อีเมลอยู่ในตำแหน่งและโมดูลอื่น ๆ ถูกปิดใช้งาน ให้อัปเดตการตั้งค่าอีเมล optin ดังนี้:

• หัวข้อ: “ชอบบทความนี้ไหม”
• เนื้อหา: “เข้าร่วมจดหมายข่าวของเรา!”

จากนั้นเพิ่มช่องว่างภายในต่อไปนี้:

• ช่องว่างภายใน: 5% ด้านล่าง, 20px ขวา

ผลลัพธ์

ตอนนี้ตรวจสอบผลลัพธ์ในโพสต์สด

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็นด้านล่าง

ไชโย!