วิธีออกแบบประตูต้อนรับสำหรับเพจของคุณใน Divi

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

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

ตรวจสอบออก!

แอบมอง

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

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

Letis ได้รับการกวดวิชาเราจะ?

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

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก “เลือกเค้าโครงล่วงหน้า”
   
4. เลือก Bistro Layout Pack และจากป๊อปอัป Load from Library เลือกเค้าโครงหน้า Landing Page ของ Bistro แล้วคลิกปุ่ม "ใช้เค้าโครงนี้" เพื่อนำเข้าเค้าโครงไปยังหน้า
   

หลังจากนั้น คุณมีหน้า Landing Page ที่จะใช้เมื่อสร้างประตูต้อนรับแบบกำหนดเอง

การสร้างประตูต้อนรับ

เพิ่มมาตราใหม่

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

ออกแบบมาตรา

ก่อนที่เราจะเริ่มเพิ่มโมดูล/เนื้อหาใดๆ ในส่วนนี้ เรามาเพิ่มการออกแบบที่กำหนดเองกันก่อน เพื่อให้เรามีผืนผ้าใบที่ดีในการทำงานต่อจากนี้

พื้นหลัง

ในการเริ่มต้น ให้เพิ่มการไล่ระดับสีพื้นหลังและรูปภาพดังนี้:

• พื้นหลังไล่ระดับสีซ้าย: rgba(0,17,38,0.7)
• ไล่สีพื้นหลังด้านขวา: #001126
• ตำแหน่งเริ่มต้น: 68%
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่
• ภาพพื้นหลัง: [แทรกรูปภาพ]

แพ็ดดิ้งและแอนิเมชั่น

ถัดไป ข้ามไปที่แท็บการออกแบบและอัปเดตการตั้งค่าการเติมและแอนิเมชั่นต่อไปนี้:

• Padding (เดสก์ท็อป): 28vh บน, 28vh ด้านล่าง
• Padding (แท็บเล็ต): 18vh บน, 18vh ด้านล่าง
• Padding (โทรศัพท์): 10vh บน, 10vh ด้านล่าง
• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ลง
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%;

วางตำแหน่งส่วนประตูต้อนรับ

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

ก่อนที่เราจะเพิ่มตำแหน่ง css ให้เพิ่มรหัส CSS ที่กำหนดเองดังนี้:

• CSS ID: ยินดีต้อนรับเกต

ซึ่งจะใช้เพื่อกำหนดเป้าหมายส่วนด้วย jQuery เพื่อเลื่อนขึ้นจากมุมมองเมื่อผู้ใช้คลิกปุ่ม "ไม่ ขอบคุณ"

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

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

จากนั้นอัปเดตดัชนี Z ดังนี้:

• ดัชนี Z: 11

หมายเหตุ: หากคุณต้องการให้ประตูต้อนรับซ่อนส่วนหัวด้วย คุณสามารถเพิ่มดัชนี Z ที่สูงกว่า เช่น “99999”

การสร้างเนื้อหาประตูต้อนรับ

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

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

ภายในแถวคอลัมน์เดียว เพิ่มโมดูลข้อความใหม่ที่มีเนื้อหาต่อไปนี้:

<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

การออกแบบข้อความ

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

• แบบอักษรของข้อความ: ห้องโดยสาร
• สีข้อความ: #ffffff
• ขนาดข้อความ: 24px (เดสก์ท็อป), 18px (โทรศัพท์)
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• แบบอักษรของหัวเรื่อง 2: ห้องโดยสาร
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 2 สีข้อความ: #ffffff
• หัวเรื่อง 2 ขนาดข้อความ: 66px (เดสก์ท็อป), 26px (แท็บเล็ต)

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

สำหรับปุ่มของเรา มาสร้างแถวสองคอลัมน์ใต้ข้อความกัน

เพิ่มปุ่มซ้าย

ในคอลัมน์ด้านซ้าย เพิ่มโมดูลปุ่มและอัปเดตการตั้งค่าดังนี้:

• ข้อความปุ่ม: “Yum! มาจองกันเถอะ”

• การจัดตำแหน่งปุ่ม: ศูนย์
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #bd8f52
• ความกว้างของขอบปุ่ม: 0px
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้เพื่อให้ปุ่มขยายเต็มความกว้างของคอลัมน์:

display: block !important;

เพิ่มปุ่ม “ไม่เป็นไร ขอบคุณ” ให้ถูกต้อง

หากต้องการสร้างปุ่ม "ไม่ ขอบคุณ" ก่อนอื่นให้คัดลอกปุ่มซ้ายแล้ววางลงในคอลัมน์ด้านขวา

จากนั้นอัปเดตเนื้อหาดังนี้:

• ข้อความปุ่ม: ไม่ ขอบคุณ
• URL ลิงก์ของปุ่ม: # (นี่เป็นสิ่งสำคัญเพื่อให้ปุ่มไม่รีเฟรชหน้า)

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

• สีข้อความของปุ่ม: #333333
• สีพื้นหลังของปุ่ม: rgba (255,255,255,0.4)

จากนั้นเพิ่มคลาส CSS ต่อไปนี้ลงในปุ่มไม่ขอบคุณ:

• CSS Class: nothanks

นี่จะเป็นตัวเลือกของเราใน jQuery ที่ปิดประตูต้อนรับเมื่อคลิก

เพิ่มรหัสที่กำหนดเอง

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

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

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

• ความกว้างสูงสุด: 600px

ผลสุดท้าย

นี่คือลักษณะของการออกแบบขั้นสุดท้าย

และนี่คือลักษณะของประตูต้อนรับเมื่อรีเฟรชหน้า

และนี่คือหน้าตาของประตูต้อนรับบนมือถือ

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

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

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

ไชโย!