วิธีสร้างส่วนแบบฟอร์มการติดต่อแบบเต็มหน้าจอที่ตอบสนองด้วยแอนิเมชั่นการเลื่อนแบบซูมเข้า

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

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

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

แอบมอง

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

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

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

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

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

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

ดาวน์โหลด

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

https://youtu.be/5Qt9J95uME8

สมัครสมาชิกช่อง Youtube ของเรา

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

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

ดูวิธีเพิ่มเลย์เอาต์ของส่วนลงในหน้าที่ด้านล่างของโพสต์

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

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

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

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)

การสร้างเค้าโครงส่วนติดต่อ

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

การเพิ่มเลย์เอาต์ที่สร้างไว้ล่วงหน้า

เมื่อคุณคลิกเพื่อแก้ไขหน้าโดยใช้ตัวสร้าง Divi ให้เลือกตัวเลือก “เลือกเค้าโครงที่สร้างไว้ล่วงหน้า”

จากนั้นค้นหาเค้าโครงหน้าติดต่อของ Business Coach และคลิกปุ่ม "ใช้เค้าโครงนี้"

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

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

พื้นหลัง

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

ส่วนสูงและช่องว่างภายใน

• ความสูงขั้นต่ำ: 600px
• ส่วนสูง: 104vh
• ช่องว่างภายใน: top 0px, ด้านล่าง 0px

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

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

CSS ที่กำหนดเอง

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

display:flex;flex-direction: column;

การเพิ่มแบบฟอร์มการติดต่อ

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

ลบส่วนพิเศษออกจากเค้าโครงที่สร้างไว้ล่วงหน้า

จากนั้นลบส่วนล่างเพื่อให้เหลือเพียงส่วนที่เรากำลังสร้างเท่านั้น

การปรับแต่งองค์ประกอบส่วนสำหรับการออกแบบที่ตอบสนองแบบเต็มหน้าจอ

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

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

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

เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ช่องว่างภายใน: 0px บน, 0px ล่าง, 7vh ซ้าย, 7vh ขวา

การตั้งค่าโมดูลข้อความ

เปิดการตั้งค่าโมดูลข้อความและอัปเดตสิ่งต่อไปนี้:

ขนาดข้อความหัวเรื่อง

• ขนาดข้อความของหัวเรื่อง: 7vh (เดสก์ท็อป), 5vh (แท็บเล็ตและโทรศัพท์)

• หัวเรื่อง 3 ขนาดข้อความ: 2vh (เดสก์ท็อป), 3vh (แท็บเล็ต), 12px (โทรศัพท์)

มาร์จิ้น

• ระยะขอบ: 3vh ด้านล่าง

การตั้งค่าแบบฟอร์มการติดต่อ

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

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

• ระยะขอบของฟิลด์: 3vh
• Fleids Padding: บน 2vh ด้านล่าง 2vh
• ขนาดข้อความของฟิลด์: 2.5vh

ขนาดข้อความของปุ่ม

• ขนาดข้อความของปุ่ม: 2vh

ความกว้าง

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

การเพิ่มเอฟเฟกต์การเลื่อน

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

ภายใต้แท็บการปรับขนาดขึ้นและลง...

• เปิดใช้งานการปรับขนาดขึ้นและลง: ใช่
• สเกลเริ่มต้น: 60% (ที่ 0%)
• ระดับกลาง: 60% (ที่ 70%)
• สเกลสิ้นสุด: 100% (ที่ 100%)

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

การใช้ส่วนแบบฟอร์มการติดต่อแบบเต็มหน้าจอบนเว็บไซต์ของคุณ

บันทึกเค้าโครงส่วนไปยังห้องสมุด Divi

ก่อนที่เราจะสามารถเพิ่มส่วนนี้ไปยังหน้าอื่นบนเว็บไซต์ของเราได้ ก่อนอื่นเราต้องบันทึกเค้าโครงของส่วนไปยัง Divi Library

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

ตอนนี้เค้าโครงส่วนจะพร้อมใช้งานภายใน Divi Library สำหรับการใช้งานในอนาคต

เพิ่มเค้าโครงส่วนไปยังหน้าจาก Divi Library

หากต้องการเพิ่มเค้าโครงส่วนของแบบฟอร์มการติดต่อแบบเต็มหน้าจอลงในหน้า (หรือโพสต์) ใน Divi ให้เปิดเพื่อแก้ไขหน้าโดยใช้ Divi Builder

จากนั้นคลิกเพื่อเพิ่มส่วนใหม่ที่ใดที่หนึ่งในหน้า

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

ผลสุดท้าย

ตอนนี้เรามาดูผลสุดท้ายกัน

นี่มันบนเดสก์ท็อป

นี่มันบนแท็บเล็ต (จริงๆ แล้ว iPad Pro)

นี่มันบนโทรศัพท์ (จริงๆ แล้ว iPhone 5) โปรดสังเกตว่าแม้ว่าหน้าจอจะสั้นมาก แต่เนื้อหาก็ยังพอดีกับมุมมองเต็มหน้าจอ

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

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

สำหรับข้อมูลเพิ่มเติมในหัวข้อนี้ โปรดดูโพสต์ของเราเกี่ยวกับวิธีใช้หน่วยความยาว vw และ vh เพื่อออกแบบแบบฟอร์มการติดต่อที่ตอบสนองใน Divi

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

ไชโย!