วิธีการรวมแบบฟอร์มการติดต่อของคอลัมน์แบบสไลด์อินในส่วน Divi Hero ของคุณอย่างราบรื่น

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดคอลัมน์แบบฟอร์มติดต่อเค้าโครงส่วนฮีโร่ฟรี

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

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

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

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

ดาวน์โหลด

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

มาเริ่มสร้างใหม่กันเถอะ

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

สีพื้นหลัง

เริ่มต้นด้วยการเพิ่มส่วนใหม่ในหน้าที่คุณกำลังทำงานอยู่ เปิดการตั้งค่าส่วนและเปลี่ยนสีพื้นหลัง

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

ภาพพื้นหลัง

เรากำลังอัปโหลดรูปแบบพื้นหลังที่เป็นส่วนหนึ่งของ Financial Advisor Layout Pack ต่อไป คุณสามารถหาภาพพื้นหลังนี้ได้ในโฟลเดอร์ที่คุณสามารถดาวน์โหลดได้ที่ตอนต้นของโพสต์นี้

• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: Center

ระยะห่าง

ไปที่แท็บการออกแบบของส่วนและลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมด

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ล้น

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

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

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

ขนาด

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

• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 80% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• ความกว้างสูงสุด: 1380px
• การจัดแนวแถว: ขวา

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

คอลัมน์ 1 การตั้งค่า

ระยะห่าง

จากนั้นเปิดการตั้งค่าคอลัมน์ 1 และแก้ไขการตั้งค่าระยะห่างในหน้าจอขนาดต่างๆ

• ช่องว่างภายในด้านบน: 22%
• แผ่นรองด้านล่าง: 22%
• ช่องว่างภายในด้านซ้าย: 10% (แท็บเล็ตและโทรศัพท์เท่านั้น)
• ช่องว่างภายในด้านขวา: 10% (แท็บเล็ตและโทรศัพท์เท่านั้น)

การตั้งค่าคอลัมน์ 2

สีพื้นหลัง

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

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

แอนิเมชั่น

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

• ทิศทางของแอนิเมชั่น: ซ้าย (เดสก์ท็อป), ขึ้น (แท็บเล็ต & โทรศัพท์)
• ระยะเวลาแอนิเมชั่น: 1500ms
• ความเข้มของแอนิเมชั่น: 70%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 1

เพิ่มเนื้อหา H1

ถึงเวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความแรกในคอลัมน์ 1 เพิ่มเนื้อหา H1 ที่คุณเลือก

การตั้งค่าข้อความ H1

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความ H1 ดังนี้:

• แบบอักษรของหัวเรื่อง: Oswald
• รูปแบบตัวอักษรของหัวเรื่อง: ตัวพิมพ์ใหญ่
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความหัวเรื่อง: 120px (เดสก์ท็อป), 70px (แท็บเล็ต), 60px (โทรศัพท์)

ขนาด

เรากำลังเปลี่ยนการตั้งค่าขนาดของโมดูลด้วย

• ความกว้าง: 75% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• การจัดตำแหน่งโมดูล: ซ้าย

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์ 1

เพิ่มคำอธิบาย เนื้อหา

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลข้อความอื่น เพิ่มเนื้อหาคำอธิบายที่คุณเลือก

การตั้งค่าข้อความ

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #ffffff
• ความสูงของบรรทัดข้อความ: 1.9em

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

• ความกว้าง: 75% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• การจัดตำแหน่งโมดูล: ซ้าย

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

เพิ่มสำเนา

โมดูลสุดท้ายที่เราต้องการในคอลัมน์ 1 คือโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

การตั้งค่าปุ่ม

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าปุ่มดังต่อไปนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #ffffff
• รัศมีเส้นขอบของปุ่ม: 1px

• แบบอักษรของปุ่ม: Oswald
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

เพิ่มโมดูล Blurb ลงในคอลัมน์ 2

เพิ่มเนื้อหา

ไปที่คอลัมน์ที่สอง โมดูลแรกที่เราต้องการคือ Blurb Module เพิ่มชื่อที่คุณเลือก

เลือกไอคอน

ถัดไป เลือกไอคอน

การตั้งค่าไอคอน

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

• สีไอคอน: #ffd8c6
• ตำแหน่งไอคอน: Top
• การจัดตำแหน่งไอคอน: ศูนย์
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 250px (เดสก์ท็อป), 150px (แท็บเล็ตและโทรศัพท์)

การตั้งค่าข้อความชื่อเรื่อง

แก้ไขการตั้งค่าข้อความชื่อเรื่องถัดไป

• ระดับหัวเรื่อง: H2
• แบบอักษรของชื่อเรื่อง: Oswald
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• สีข้อความชื่อเรื่อง: #ff8949
• ขนาดข้อความชื่อเรื่อง: 38px

ระยะห่าง

เพิ่มช่องว่างด้านซ้ายและขวาด้วย

• ช่องว่างภายในด้านซ้าย: 11%
• ช่องว่างภายในด้านขวา: 11%

แอนิเมชั่น

และทำโมดูลให้สมบูรณ์โดยเพิ่มการตั้งค่าแอนิเมชั่นต่อไปนี้:

• ทิศทางของแอนิเมชั่น: ลง
• ระยะเวลาแอนิเมชั่น: 1100ms
• ภาพเคลื่อนไหวล่าช้า: 400ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

เพิ่มโมดูลแบบฟอร์มการติดต่อในคอลัมน์ 2

เปิดช่องเต็มความกว้าง

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

• ทำให้เต็มความกว้าง: ใช่

สีพื้นหลัง

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

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

การตั้งค่าฟิลด์

ไปที่แท็บออกแบบและทำการเปลี่ยนแปลงบางอย่างในการตั้งค่าฟิลด์ถัดไป

• ฟิลด์สีพื้นหลัง: #ffffff
• สีข้อความของฟิลด์: #ff8949
• ขอบบนสุดของฟิลด์: 15px
• ระยะขอบด้านล่างของฟิลด์: 15px
• ช่องเติมด้านบน: 20px
• ฟิลด์ ช่องว่างภายใน: 20px

• ฟอนต์ฟิลด์: Oswald
• รูปแบบตัวอักษรของฟิลด์: ตัวพิมพ์ใหญ่
• การจัดตำแหน่งข้อความของฟิลด์: Center
• ขนาดข้อความของฟิลด์: 21px

การตั้งค่าปุ่ม

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #ff8949
• รัศมีเส้นขอบของปุ่ม: 1px

• แบบอักษรของปุ่ม: Oswald
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ขนาด

เรายังตรวจสอบให้แน่ใจว่าความกว้างเป็น '100%' ในการตั้งค่าการปรับขนาด

• ความกว้าง: 100%

ระยะห่าง

ไปที่การตั้งค่าการเว้นวรรคถัดไป และใช้ค่าช่องว่างภายในที่กำหนดเอง

• ช่องว่างภายในด้านบน: 14%
• แผ่นรองด้านล่าง: 14%
• ช่องว่างภายในด้านซ้าย: 12%
• ช่องว่างภายในด้านขวา: 12%

แอนิเมชั่น

จากนั้น ใช้การตั้งค่าภาพเคลื่อนไหวต่อไปนี้:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขึ้น
• ระยะเวลาแอนิเมชั่น: 1100ms
• ภาพเคลื่อนไหวล่าช้า: 400ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

ตำแหน่ง

และตั้งค่าโมดูลให้สมบูรณ์ (และบทช่วยสอน) โดยเปลี่ยนตำแหน่งโมดูลบนเดสก์ท็อปเท่านั้น:

• ตำแหน่ง: แอบโซลูท (เดสก์ท็อป), ค่าเริ่มต้น (แท็บเล็ตและโทรศัพท์)
• ที่ตั้ง: Bottom Center

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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