Divi: วิธีสร้างแบบฟอร์มการติดต่อที่ติดหนึบ

คุณต้องการสร้าง แบบฟอร์มติดต่อ เหนียว ใน DIVI?

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

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

อ่านคู่มือของเราได้ที่ วิธีสร้างส่วนหัวส่วนกลางที่ติดหนึบใน DIVI

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

การสำรวจ

นี่คือตัวอย่างสิ่งที่เราจะออกแบบ บนมือถือ เราไม่ใส่เอฟเฟกต์ติดหนึบ

วิธีเพิ่มแบบฟอร์มการติดต่อในหน้า Divi ของคุณ

สร้างหน้าใหม่ด้วยเค้าโครงที่กำหนดไว้ล่วงหน้า

เริ่มต้นด้วยการใช้เค้าโครงที่กำหนดไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ เราจะใช้หน้าติดต่อของ ชุดเค้าโครงผลิตภัณฑ์ความงาม .

เพิ่มหน้าใหม่ของคุณ เว็บไซต์เว็บ และตั้งชื่อแล้วเลือกตัวเลือก 'ใช้ Divi Builder'

เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ ดังนั้นให้เลือก 'เลือกเลย์เอาต์'

ค้นหาและเลือก หน้าติดต่อ ของเค้าโครง'ผลิตภัณฑ์เสริมความงาม'

เลือก 'เลือกเลย์เอาต์' เพื่อเพิ่มเลย์เอาต์ให้กับเพจของคุณ

ตอนนี้เราพร้อมที่จะดำเนินการสอนต่อแล้ว

เปลี่ยนเลย์เอาต์ของแบบฟอร์มติดต่อที่ติดหนึบ

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

ดูเพิ่มเติมที่: วิธีสร้างเมนูเลื่อนและกดใน DIVI

สร้างส่วนใหม่

เพิ่มส่วนใหม่ในหน้าของคุณ 

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

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

• ความเป็นมา: #EEE8E2

การเพิ่มโมดูลติดหนึบของคุณลงในคอลัมน์ 1

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

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

1. ความกว้างของเส้นขอบ: 20px
2. สีเส้นขอบ: #FFFFFF

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

เพิ่มโมดูลการเลื่อนของคุณในคอลัมน์ 2

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

เคล็ดลับ: หากคุณต้องการย้ายหลายโมดูลพร้อมกัน ให้กด ' keyพฤษภาคม' บนแป้นพิมพ์และเลือกโมดูลที่คุณต้องการย้าย ใช้ฟังก์ชันย้ายโมดูลเพื่อย้ายโมดูลทั้งหมดของคุณพร้อมกัน

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

อ่าน: วิธีสร้างส่วนหัวส่วนกลางด้วยแบบฟอร์มเข้าสู่ระบบใน DIVI

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

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

หน้าของคุณควรมีลักษณะดังนี้ โดยมีเนื้อหาแบบติดหนึบในคอลัมน์ 1 และเนื้อหาแบบเลื่อนในคอลัมน์ 2

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

ทำให้แบบฟอร์มการติดต่อมีความเหนียว

ด้วยการจัดวางของเรา เราสามารถเปิดใช้งานการตั้งค่าแบบติดหนึบสำหรับแบบฟอร์มการติดต่อของเรา เลือก 'การตั้งค่าแถว' จากนั้นเลือกการตั้งค่าคอลัมน์ 1

ใต้แท็บขั้นสูง ให้ไปที่ 'Scroll Effects' นี่คือที่ที่เราจะตั้งค่าพารามิเตอร์ติดหนึบ

• ตำแหน่งติดหนึบ: Stick to Top
• ออฟเซ็ตบนสุด: 15px
• ขีด จำกัด ปักหมุดด้านล่าง: Line

และนั่นคือทั้งหมด! คุณได้เพิ่มการตั้งค่าแบบติดหนึบในคอลัมน์ 1 แล้ว ทำให้แบบฟอร์มการติดต่อและชื่อของคุณติดหนึบเมื่อคุณเลื่อนหน้าลง คุณควรเห็นเนื้อหาของคอลัมน์ 2 เลื่อนถัดจากแบบฟอร์มการติดต่อ

ผลสุดท้าย

ตอนนี้ มาดูการทำงานของแบบฟอร์มการติดต่อแบบติดหนึบของเรากันดีกว่า

ดาวน์โหลด DIVI ทันที!!!

สรุป

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

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

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...