Divi: วิธีรวมฟิลด์อินไลน์และเต็มความกว้างในโมดูล "แบบฟอร์มติดต่อ"

จำเป็นต้องรวมฟิลด์อินไลน์และฟิลด์เต็มความกว้างของโมดูล รูปแบบการติดต่อ de Divi ?

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

โมดูล รูปแบบการติดต่อ de Divi สามารถปรับแต่งเพื่อสร้างได้อย่างง่ายดาย รูปแบบ บัตรติดต่อที่น่าสนใจและน่าดึงดูดใจสำหรับเว็บไซต์ทุกประเภท โมดูลนี้มาพร้อมกับตัวเลือกการแสดงผลสองแบบที่สามารถใช้ได้กับแต่ละฟิลด์ของแบบฟอร์ม: en ligne ou เต็มความกว้าง. 

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

ขอเริ่มต้น!

การสำรวจ

นี่คือตัวอย่างสิ่งที่เราจะออกแบบ

เลย์เอาต์แรก

รูปแบบที่สอง

แบบที่สาม

เค้าโครงที่สี่

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

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

ตอนนี้คุณพร้อมที่จะเริ่มแล้ว!

เค้าโครงตัวอย่าง 4 แบบสำหรับโมดูลแบบฟอร์มการติดต่อของ Divi โดยใช้ฟิลด์อินไลน์และเต็มความกว้าง

เลือกเค้าโครงที่กำหนดไว้ล่วงหน้า

เทมเพลตทั้ง 4 แต่ละแบบได้รับการดัดแปลงจากโครงร่างหน้าติดต่อซ่อมรองเท้าของ ชุดรูปแบบการซ่อมแซมรองเท้าซึ่งคุณจะพบได้ใน Divi Library

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

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

ค้นหาและเลือกเค้าโครงหน้าติดต่อซ่อมรองเท้า

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

ตอนนี้เราพร้อมที่จะออกแบบตัวอย่างของเราแล้ว

เลย์เอาต์แรก

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

เปิดการตั้งค่าบรรทัดและเพิ่มช่องว่างภายในซ้ายและขวา

• ช่องว่างภายใน (ซ้ายและขวา): 15%

เลือกตัวเลือกการตอบสนองและตั้งค่าช่องว่างภายในสำหรับมือถือ

• ช่องว่างภายใน (ซ้ายและขวา): 5%

เปลี่ยนเค้าโครงแบบฟอร์มการติดต่อด้วยฟิลด์อินไลน์และเต็มความกว้าง

สำหรับเลย์เอาต์นี้ เราจะสร้างฟิลด์แยกกันสองฟิลด์สำหรับชื่อและนามสกุล 

เปิดการตั้งค่าโมดูลแบบฟอร์มการติดต่อ และเปลี่ยนฟิลด์ ID และ Title สำหรับฟิลด์ Last name เป็น First name

เพิ่มฟิลด์ใหม่ใต้ฟิลด์ชื่อ ตั้งค่าฟิลด์ ID และ Title เป็น Name

ในการตั้งค่าฟิลด์ชื่อ ให้เปิดการตั้งค่าเลย์เอาต์และตั้งค่า Make Fullwidth เป็น No

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

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

เปิดการตั้งค่าเค้าโครงฟิลด์หัวเรื่อง และตั้งค่าฟิลด์ให้เต็มความกว้าง

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

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

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

ก่อนอื่น เปลี่ยนสีพื้นหลังของปุ่ม

• พื้นหลังของปุ่ม: #DBC2B3

เพิ่มระยะขอบด้านบนให้กับปุ่ม

• ขอบปุ่ม (ด้านบน): 10px

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

• อินพุตมุมโค้งมน: 30px

ดูสิ่งนี้ด้วย: Divi: วิธีเพิ่มโลโก้ที่ตอบสนองต่อโมดูล "เมนูแบบเต็มความกว้าง"

ผลลัพธ์สุดท้ายของตัวอย่างที่ 1

นี่คือผลลัพธ์สุดท้ายบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่

ตัวอย่างที่สอง

สำหรับตัวอย่างที่สอง เราจะย้ายโมดูลประกาศแจ้งไปที่ด้านซ้ายของหน้าและวางแบบฟอร์มการติดต่อไว้ที่ด้านขวาของหน้า ย้ายโมดูล Blurb ไปยังคอลัมน์

เปลี่ยนเค้าโครงแถว

เปิดการตั้งค่าการออกแบบเส้นและปิด ใช้ความกว้างของรางน้ำแบบกำหนดเอง.

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: NO

เพิ่มโค้ดลงใน CSS ที่กำหนดเองขององค์ประกอบหลักเพื่อจัดโมดูล Blurb และ Contact Form ในแนวตั้ง

align-items:center;

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

• ความกว้างของเส้นขอบขวา: 0px

ถัดไป เปิดการตั้งค่าคอลัมน์ 2 และทำซ้ำขั้นตอนเพื่อลบเส้นขอบ

• ความกว้างของเส้นขอบขวา: 0px

ตั้งค่าข้อความ "ติดต่อเรา" ให้อยู่กึ่งกลาง

ย้ายแบบฟอร์มการติดต่อไปที่คอลัมน์ด้านขวา ลบส่วนที่ยังว่างอยู่

เปลี่ยนเค้าโครงแบบฟอร์มการติดต่อด้วยฟิลด์อินไลน์และเต็มความกว้าง

เลย์เอาต์นี้จะมีช่องแยกสองช่องสำหรับชื่อและนามสกุล เปิดการตั้งค่าโมดูลแบบฟอร์มการติดต่อ และเปลี่ยนฟิลด์ ID และ Title สำหรับฟิลด์ Last name เป็น First name

เพิ่มฟิลด์ใหม่ใต้ฟิลด์ชื่อ ตั้งค่าฟิลด์ ID และ Title เป็น Name

ในการตั้งค่าฟิลด์ชื่อ ให้เปิดการตั้งค่าเลย์เอาต์และตั้งค่า Make Fullwidth เป็น No

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

เปลี่ยนลำดับของโทรศัพท์และฟิลด์เรื่องเพื่อให้โทรศัพท์มาก่อนเรื่อง

เปิดการตั้งค่าช่องสำหรับอีเมล โทรศัพท์ และเรื่อง แล้วตั้งค่าเค้าโครงเป็นแบบเต็มความกว้าง

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

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

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

• พื้นหลัง: #DBC2B3

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

• Padding (บน ล่าง ซ้าย และขวา: 50px

เลือกไอคอนมือถือเพื่อเปลี่ยนการตั้งค่าการตอบสนอง ตั้งค่าช่องว่างภายในสำหรับมือถือ

• ช่องว่างภายใน (บน ล่าง ซ้ายและขวา): 30px

จากนั้นเพิ่มเงาของกล่องลงในคอลัมน์

สุดท้าย เปิดการตั้งค่าโมดูลแบบฟอร์มการติดต่อ และเปลี่ยนสีข้อความของฟิลด์

• สีข้อความของฟิลด์: #000000

ผลลัพธ์สุดท้ายของตัวอย่างที่ 2

นี่คือผลลัพธ์สุดท้ายของเค้าโครงที่สอง

ตัวอย่างที่สาม

สำหรับโครงร่างที่สาม เราจะมีแบบฟอร์มการติดต่อทางด้านซ้ายและโมดูลประกาศแจ้งทางด้านขวา เริ่มจากการเปลี่ยนโครงสร้างคอลัมน์ของแถวที่มีโมดูล Blurb

ย้ายโมดูลที่อยู่ไปที่คอลัมน์ด้านขวา

ถัดไป ย้ายโมดูลข้อความ “ติดต่อเรา” ไปที่คอลัมน์ด้านซ้าย จากนั้นลบบรรทัดว่างที่เหลือ

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

เปิดการตั้งค่าเส้น ใต้แท็บออกแบบ แล้วปิด ใช้ความกว้างของรางน้ำแบบกำหนดเอง

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: NO

เพิ่มโค้ดลงใน CSS ที่กำหนดเองขององค์ประกอบหลักเพื่อจัดโมดูล Blurb และ Contact Form ในแนวตั้ง

align-items:center;

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

• ความกว้างของเส้นขอบขวา: 0px

การเปลี่ยนเค้าโครงของแบบฟอร์มการติดต่อ

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

ผลลัพธ์สุดท้ายของตัวอย่างที่ 3

นี่คือผลลัพธ์สุดท้ายของเค้าโครงที่สาม

อ่าน: Divi: วิธีแสดงโมดูลส่วนหัวแบบเต็มหน้าจอแบบเต็มหน้าจอ

ตัวอย่างที่สี่

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

ย้ายโมดูลที่อยู่ไปที่คอลัมน์ด้านขวา

ถัดไป ย้ายโมดูลแบบฟอร์มการติดต่อไปที่คอลัมน์ด้านซ้าย ลบส่วนที่ยังว่างอยู่

เปิดการตั้งค่าเส้น ในแท็บออกแบบ และปิดใช้งาน ใช้ความกว้างของรางน้ำแบบกำหนดเอง.

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: NO

เพิ่มโค้ดลงใน CSS ที่กำหนดเองขององค์ประกอบหลักเพื่อจัดโมดูล Blurb และ Contact Form ในแนวตั้ง

align-items:center;

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

• ความกว้างของเส้นขอบขวา: 0px

ถัดไป เปิดการตั้งค่าคอลัมน์ 2 และทำซ้ำขั้นตอนเพื่อลบเส้นขอบ

• ความกว้างของเส้นขอบขวา: 0px

เปิดการตั้งค่าโมดูลข้อความสำหรับข้อความ "ติดต่อเรา" และจัดกึ่งกลางข้อความ

• การจัดตำแหน่งข้อความ: กึ่งกลาง

เปลี่ยนเค้าโครงแบบฟอร์มการติดต่อด้วยฟิลด์อินไลน์และเต็มความกว้าง

สำหรับการออกแบบนี้ ฟิลด์ทั้งหมดของเราจะเต็มความกว้าง เปิดการตั้งค่าโมดูลแบบฟอร์มการติดต่อ จากนั้นเปิดการตั้งค่าสำหรับแต่ละฟิลด์ บนแท็บ ออกแบบ ให้เลือก แบบ และกำหนด ทำให้เต็มความกว้าง sur YES.

เมื่อคุณสร้างฟิลด์เต็มความกว้างแต่ละฟิลด์แล้ว แบบฟอร์มควรมีลักษณะดังนี้

ตอนนี้เปลี่ยนฟิลด์ ID และ Title สำหรับฟิลด์ Last Name เป็น First Name

เพิ่มฟิลด์ใหม่ใต้ฟิลด์ชื่อ ตั้งค่าฟิลด์ ID และ Title เป็น Name

เปลี่ยนลำดับของโทรศัพท์และฟิลด์เรื่องเพื่อให้โทรศัพท์มาก่อนเรื่อง

ปรับแต่งการออกแบบของโมดูลแบบฟอร์มการติดต่อ

ในการตั้งค่าโมดูล ในแท็บออกแบบ ให้ตั้งค่าสีข้อความของฟิลด์เป็นสีดำ

• สีข้อความของฟิลด์: #000000

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

• พื้นหลัง: #DBC2B3

สุดท้าย เพิ่มหน้ากากพื้นหลัง

• มาสก์พื้นหลัง: Arch
• การแปลงหน้ากาก: แนวนอน

เพื่อให้มาสก์พื้นหลังทำงานได้ดีขึ้นบนมือถือ ให้ใช้การตั้งค่าการตอบสนอง

• Mask Transform (โทรศัพท์): แนวนอนและการหมุน

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายของเค้าโครงที่สี่

ผลสุดท้าย

ลองดูตัวอย่างทั้งหมดของเราอีกครั้ง

ตัวอย่างแรก

ตัวอย่างที่สอง

ตัวอย่างที่สาม

ตัวอย่างที่สี่

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

สรุป

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

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

หวังว่าเทคนิคนี้จะช่วยเพิ่มทักษะการออกแบบที่มีประโยชน์สำหรับโครงการในอนาคต

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

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

อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

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

...