วิธีสร้าง Optin อีเมลติดหนึบใน Divi ที่ดึงดูดความสนใจ

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

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

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

แอบมอง

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

ดาวน์โหลดเทมเพลตโพสต์ Optin อีเมล Sticky ฟรี

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

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

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

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

ดาวน์โหลด

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

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

ในการอัปโหลดเทมเพลต ให้ไปที่ Divi Theme Builder ที่ส่วนหลังของเว็บไซต์ WordPress ของคุณ

จากนั้น ที่มุมบนขวา คุณจะเห็นไอคอนที่มีลูกศรสองอัน คลิกที่ไอคอน

ไปที่แท็บนำเข้า อัปโหลดไฟล์ JSON ซึ่งคุณสามารถดาวน์โหลดได้ในโพสต์นี้ แล้วคลิก 'นำเข้าเทมเพลต Divi Theme Builder'

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

ไปกวดวิชากันเถอะ

ส่วนที่ 1: นำเข้าเทมเพลตโพสต์บล็อกที่สร้างไว้ล่วงหน้า

สำหรับบทช่วยสอนนี้ เราจะใช้เทมเพลตโพสต์บล็อกสำหรับ Divi's Business Consultant Layout Pack ซึ่งคุณสามารถดาวน์โหลดได้จากโพสต์ในบล็อกนี้

เมื่อคุณดาวน์โหลดไฟล์ zip คุณจะต้องเปิดเครื่องรูดและนำเข้าไฟล์ไปยัง Divi Theme Builder

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

1. นำทางไปยัง Divi > ตัวสร้างธีม
2. คลิกไอคอนการพกพาที่ด้านบนขวา
3. เลือกแท็บนำเข้าในป๊อปอัปการพกพา
4. เลือกไฟล์ json จากไฟล์ที่คุณดาวน์โหลด
5. คลิกปุ่มนำเข้า

ส่วนที่ 2: การเพิ่ม Sticky Email Optin ให้กับเทมเพลต

เมื่อนำเข้าไฟล์ JSON แล้ว ให้คลิกไอคอนแก้ไขเพื่อแก้ไขเค้าโครงเทมเพลตเนื้อหาที่กำหนดเอง

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

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

เพิ่มแถวใหม่ในส่วนด้านบน

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

เพิ่มสไตล์แถว

จากนั้นเปิดการตั้งค่าของแถวใหม่และเพิ่มสีพื้นหลังดังนี้:

• สีพื้นหลัง: #282828

ใต้แท็บออกแบบ อัปเดตขนาดและระยะห่างของแถวต่อไปนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• มาร์จิ้น: 15vw ด้านบน
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

ย้ายการเลือกรับอีเมลไปที่แถวใหม่

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

ลบส่วนล่าง (เราไม่ต้องการมันอีกต่อไป)

อัปเดตการเลือกรับอีเมลด้วยตำแหน่งติดหนึบ

จากนั้นเปิดการตั้งค่าสำหรับการเลือกรับอีเมลในแถวใหม่และอัปเดตตัวเลือกตำแหน่งการตรึงดังนี้:

• ตำแหน่งติดหนึบ: ติดที่ด้านล่าง
• ขีด จำกัด ติดหนึบสูงสุด: Section

ซึ่งจะทำให้การเลือกรับอีเมลติดอยู่ที่ด้านล่างของหน้าต่างเบราว์เซอร์เมื่อเลื่อนดูส่วนนี้ก่อนที่จะมาพักในแถวหลัก

อัปเดตรูปแบบการเลือกรับอีเมล

ใต้แท็บออกแบบ ให้อัปเดตเค้าโครงของการเลือกรับอีเมลดังนี้:

• เลย์เอาต์: ร่างกายอยู่ด้านบน แบบฟอร์มอยู่ด้านล่าง

จากนั้นอัปเดตสไตล์ต่อไปนี้:

• ขนาดข้อความชื่อเรื่อง: 32px
• ความกว้างสูงสุด: 600px
• การจัดตำแหน่งโมดูล: ศูนย์

จากนั้นตั้งค่ารูปแบบแอนิเมชั่นเป็นไม่มี

ผลลัพธ์

ณ จุดนี้ เราสามารถตรวจดูผลลัพธ์โดยดูโพสต์ในหน้าต่างเบราว์เซอร์อื่น

การเพิ่มการจัดรูปแบบตำแหน่งติดหนึบ

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

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

• สีพื้นหลัง (เหนียว): #282828

ทำขั้นตอนเดียวกันนี้ต่อไปเพื่อเพิ่มสไตล์ติดหนึบให้กับตัวเลือกต่อไปนี้ภายใต้แท็บการออกแบบ:

• สีข้อความของชื่อเรื่อง (เหนียว): #ffffff
• สีข้อความเนื้อหา (เหนียว): #ffffff
• ความกว้างสูงสุด (เหนียว): 500px
• ช่องว่างภายใน (เหนียว): บน 18px, ด้านล่าง 30px, ซ้าย 30px, 30px ขวา

ผลลัพธ์

มาดูผลลัพธ์กันในโพสต์สดกัน

เพิ่มเอฟเฟกต์ Hover Popup ให้กับ Sticky Email Opt-in

หากต้องการเพิ่มเอฟเฟกต์ป๊อปอัปแบบเลื่อนบนการเลือกรับอีเมลแบบติดหนึบ ให้เปิดการตั้งค่าการเลือกรับอีเมล และอัปเดตการแปลการแปลงแบบแท่งดังนี้:

• แปลงแกน Y แปล (เหนียว): 85%

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

จากนั้นเพิ่มสถานะโฮเวอร์ให้กับตัวเลือกการแปลงเพื่อให้ตำแหน่งการแปลการแปลงกลับมาที่ตำแหน่งเดิมเมื่อวางเมาส์เหนือ:

• แปลงแกนแปล Y (โฮเวอร์): 0%

ผลลัพธ์

นี่คือผลลัพธ์สุดท้าย

ผลลัพธ์สุดท้าย

ต่อไปนี้คือส่วนหัวที่ติดหนึบของเราสามเวอร์ชันที่เราสร้างขึ้น

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

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

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

ไชโย!