Divi: วิธีปรับแต่งโมดูล "แบบฟอร์มติดต่อ"

คุณต้องการสร้าง แบบฟอร์มติดต่อ ไปยังเว็บไซต์ของคุณด้วยโมดูล รูปแบบการติดต่อ จาก Divi? นี่คือ 3 แนวคิดการปรับแต่ง...

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

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

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

Let 's go!

ภาพรวมของการออกแบบโมดูล Divi Contact Form

รุ่นเดสก์ท็อป

เริ่มต้นด้วยการดูเวอร์ชันเดสก์ท็อปของการออกแบบต่างๆ ของโมดูล รูปแบบการติดต่อ ที่เราจะออกแบบในบทช่วยสอนนี้

รุ่นมือถือ

และนี่คือลักษณะที่ปรากฏบนหน้าจอขนาดเล็ก:

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

วิธีปรับแต่งโมดูลแบบฟอร์มการติดต่อ Divi: 3 ตัวอย่าง

อ่าน: Divi: วิธีสร้างส่วนสมาชิกในทีมเป็นภาพหมุน

การสร้างแบบฟอร์มการติดต่อ #1

เพิ่มหัวข้อใหม่

พื้นหลังไล่ระดับสี

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

• ไล่ระดับหยุด
  • 34%: #4c00ff
  • 34%: #ffd400
• ประเภท: รอบ
• ทิศทางการไล่ระดับสี: ล่างซ้าย

การเว้นวรรค

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

• ช่องว่างภายใน (บนและล่าง): 200px

เพิ่มบรรทัดใหม่

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

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

คอลัมน์ 1: สีพื้นหลัง

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถว จากนั้นจึงตั้งค่าคอลัมน์ 1 และเพิ่มสีพื้นหลังด้านล่าง

• พื้นหลัง: rgba(255,255,255,0.55)

คอลัมน์ 1: ภาพพื้นหลัง

เพิ่มภาพพื้นหลังในคอลัมน์แรกด้วย

• ภาพพื้นหลังซ้ำ: ไม่ซ้ำ
• การผสมภาพพื้นหลัง: หน้าจอ

คอลัมน์ 2: ภาพพื้นหลัง

และลงสีพื้นหลังสีขาวให้กับคอลัมน์ที่สอง

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

ปรับขนาด

จากนั้นแก้ไขพารามิเตอร์การปรับขนาด

• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

การเว้นวรรค

ลบช่องว่างภายในที่กำหนดเองเริ่มต้นทั้งหมดด้วย

• ช่องว่างภายใน (บนและล่าง): 0px

รัศมีเส้นขอบของคอลัมน์

เพิ่มรัศมีเส้นขอบให้กับทั้งสองคอลัมน์ในแท็บขั้นสูง

border-radius: 10px;

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

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

ได้เวลาเริ่มเพิ่มโมดูลต่างๆ แล้ว! เพิ่มโมดูลข้อความในคอลัมน์แรกด้วยเนื้อหาที่คุณเลือก

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

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

• ข้อความ:
  • ตัวอักษร: พอใจ
  • สีข้อความ: #333333
  • ขนาด: 100px
  • ความสูงของสาย: 1 em
  • การจัดตำแหน่ง: กึ่งกลาง

การเว้นวรรค

เพิ่มค่าการเติมที่กำหนดเองด้วย

• ช่องว่างภายใน (ด้านบน): 600px
• ช่องว่างภายใน (ด้านล่าง): 100px

กล่องเงา

หากต้องการเพิ่มความลึกให้กับการออกแบบ ให้ใช้เงากล่องที่ละเอียด

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -16px
• เงาสี: rgba(0,0,0,0.3)

เพิ่มโมดูลรูปภาพในคอลัมน์ 2

อัพโหลดภาพ

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

ปรับขนาด

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

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

การเว้นวรรค

สร้างการซ้อนทับโดยใช้ระยะขอบบนติดลบ

• ระยะขอบ (สูงสุด): -60%

ชายแดน

แก้ไขเส้นขอบของรูปภาพดังนี้:

• มุมโค้งมน: 100px (ทุกมุม)

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

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

ใต้โมดูลรูปภาพ ให้เพิ่มโมดูลข้อความพร้อมเนื้อหา

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

แก้ไขการตั้งค่าข้อความสำหรับโมดูลนี้

• ข้อความ:
  • ตัวอักษร: พอใจ
  • สีข้อความ: #333333
  • ขนาดตัวอักษร: 44px
  • ปฐมนิเทศ: ศูนย์

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

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

จากนั้นเพิ่มโมดูลข้อความอื่น

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

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

• ข้อความ:
  • ตัวอักษร: Arial
  • สีข้อความ: #ffd400
  • สีข้อความ: 18px
  • ระยะห่างระหว่างตัวอักษร: 2px
  • ปฐมนิเทศ: ศูนย์

การเว้นวรรค

จากนั้นเพิ่มระยะขอบล่าง

• ระยะขอบ (ด้านล่าง): 100px

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

เปิดใช้งานตัวเลือก "ทำให้เต็มความกว้าง" ในฟิลด์ชื่อและอีเมล

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

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

เพิ่มฟิลด์หัวเรื่อง

ในการสร้างการออกแบบนี้ เราได้เพิ่มฟิลด์อื่นสำหรับหัวเรื่อง

การป้องกันสแปม

จากนั้นปิดใช้งานตัวเลือก captcha

• ใช้ Captcha พื้นฐาน: NO

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

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

• ฟิลด์:
  • สีพื้นหลัง: rgba(255,255,255,0)
  • ตัวอักษร: Arial
  • น้ำหนักแบบอักษร: เบา
  • ขนาดตัวอักษร: 16px
  • ระยะห่างตัวอักษร: 2px

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

เรากำลังเปลี่ยนรูปลักษณ์ของปุ่มด้วย

• ใช้ขนาดที่กำหนดเองสำหรับปุ่ม: ใช่
• ปุ่ม:
  • สีข้อความ: #ffd400
  • ความกว้างของเส้นขอบ: 0 พิกเซล
  • ระยะห่างระหว่างตัวอักษร: 2px
  • ตัวอักษร: Arial
  • รูปแบบตัวอักษร: U
  • ขีดเส้นใต้สี: #4c00ff

การเว้นวรรค

จากนั้นเพิ่มค่าการเติมที่กำหนดเอง

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

ชายแดน

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

• อินพุตความกว้างขอบด้านล่าง: 2px
• อินพุตสีขอบด้านล่าง: #efeff

ระยะห่างของแต่ละฟิลด์

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

• ระยะขอบ (ด้านล่าง): 20px

การสร้างแบบฟอร์มการติดต่อ #2

เพิ่มหัวข้อใหม่

พื้นหลังไล่ระดับสี

มาดูตัวอย่างต่อไปกันเถอะ! เพิ่มส่วนใหม่ด้วยพื้นหลังแบบไล่ระดับสี

• ไล่ระดับหยุด:
  • 50%: #562fef
  • 50%: #ffffff
• ประเภทการไล่ระดับสี: เชิงเส้น

การเว้นวรรค

เพิ่มค่าการเติมแบบกำหนดเองให้กับการตั้งค่าระยะห่างในส่วนนี้

• ช่องว่างภายใน (บนและล่าง): 200px

เพิ่มบรรทัดใหม่

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

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

สีพื้นหลัง

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

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

พื้นหลังไล่ระดับสี 2 คอลัมน์

เพิ่มพื้นหลังไล่ระดับลงในคอลัมน์ที่สองในแถว

• ไล่ระดับหยุด:
  • 0%: #9932ff
  • 100%: #562fef
  • ประเภท: เชิงเส้น
  • พวงมาลัย: 160 องศา

ปรับขนาด

แก้ไขพารามิเตอร์การปรับขนาดเส้นด้วย

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

การเว้นวรรค

ถัดไป เพิ่มค่าระยะห่างที่กำหนดเอง

• เส้น :
  • ช่องว่างภายใน (บนและล่าง): 0px

• คอลัมน์ 1:
  • ช่องว่างภายใน: 100px (ด้านบน), 50px (ด้านล่าง)
  • ช่องว่างภายใน (ซ้ายและขวา): 50px

• คอลัมน์ 2:
  • ช่องว่างภายใน (บนและล่าง): 100px
  • ช่องว่างภายใน (ซ้ายและขวา): 50px

ชายแดน

เพิ่ม '20px' ให้กับเส้นขอบแต่ละเส้น

กล่องเงา

สุดท้ายเพิ่มเงาของกล่องที่ละเอียดอ่อนให้กับเส้น

• ความแรงของกล่องเงาเบลอ: 45px
• ความแรงของการกระจายเงาของกล่อง: -11px
• สีเศร้า: rgba(0,0,0,0.3)

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

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

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เริ่มต้นด้วยโมดูลข้อความในคอลัมน์แรก

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

แก้ไขการตั้งค่าข้อความสำหรับโมดูลนี้

• ข้อความ:
  • น้ำหนักแบบอักษร: Ultra Bold
  • รูปแบบตัวอักษร: TT
  • สี: #562fef
  • ขนาด: 100px (เดสก์ท็อป), 80px (แท็บเล็ต), 60px (โทรศัพท์)
  • ระยะห่างระหว่างตัวอักษร: -10px
  • ความสูงของสาย: 1 em

การเว้นวรรค

เพิ่มระยะขอบด้านล่างด้วย

• ระยะขอบ (ด้านล่าง): 50px

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

องค์ประกอบ

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

• ใช้ Captcha พื้นฐาน: NO

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

จากนั้นเปลี่ยนสีพื้นหลังของช่องแบบฟอร์ม

• สีพื้นหลังของฟิลด์: #ffffff

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

ลองเล่นกับการตั้งค่าปุ่มเพื่อสร้างปุ่มไอคอนแทนปุ่มข้อความ

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ปุ่ม:
  • ขนาดตัวอักษร: 73px
  • สีข้อความ: rgba(0,0,0,0) (ค่าเริ่มต้น),
  • สีพื้นหลัง: rgba(255,255,255,0) (โฮเวอร์)
  • ความกว้างของเส้นขอบ: 0px
  • สีไอคอน: #9932ff
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: NO

กล่องเงา

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

• ความชัดเจนของเงากล่อง: 36px
• ความแรงของการกระจายเงาของกล่อง: -14px
• เงาสี: rgba(0,0,0,0.3)

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

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

โมดูลแรกที่เราต้องการในคอลัมน์ที่สองคือโมดูลข้อความอื่น

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

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

• ข้อความ:
  • น้ำหนักแบบอักษร: Ultra Bold
  • รูปแบบตัวอักษร: TT
  • สี: #ffffff
  • ขนาด: 23px
  • ระยะห่างระหว่างตัวอักษร: -1px

เพิ่ม Blurb Module #1 ในคอลัมน์ 2

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

โมดูลที่สองที่เราต้องการคือโมดูลประกาศแจ้ง ไปข้างหน้าและป้อนข้อมูลการติดต่อบางอย่าง

เลือกไอคอน

จากนั้นเลือกไอคอนที่เกี่ยวข้อง

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

เปลี่ยนการตั้งค่าสำหรับไอคอนนี้

• สีไอคอน: #ffffff
• ตำแหน่งรูปภาพ/ไอคอน: ขวา

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

ดำเนินการต่อโดยทำการเปลี่ยนแปลงการตั้งค่าข้อความชื่อเรื่องถัดไป

• ขนาดข้อความชื่อเรื่อง: 15px
• ระยะห่างของตัวอักษรชื่อเรื่อง: -0,5 พิกเซล

การเว้นวรรค

และเพิ่มระยะขอบบน.

• ระยะขอบ (บนสุด): 120px

โมดูล Clone Blurb สองครั้ง

เมื่อคุณแก้ไขโมดูล Blurb แรกเสร็จแล้ว คุณสามารถดำเนินการต่อและโคลนโมดูลได้สองครั้ง

แก้ไขเนื้อหาและไอคอนของรายการที่ซ้ำกันทั้งสองรายการ

แก้ไขเนื้อหาและไอคอนของสำเนาทั้งสองเพื่อแบ่งปันข้อมูลติดต่อประเภทต่างๆ กับผู้เข้าชม

เปลี่ยนระยะห่างของรายการที่ซ้ำกันสองรายการ

ควรเปลี่ยนระยะขอบบนของรายการที่ซ้ำกันทั้งสองรายการด้วย

• ระยะขอบ (บนสุด): 30px

การสร้างแบบฟอร์มการติดต่อ #3

เพิ่มหัวข้อใหม่

สีพื้นหลัง

ไปที่ตัวอย่างที่สามกันเถอะ! เพิ่มส่วนใหม่ด้วยสีพื้นหลังต่อไปนี้:

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

การเว้นวรรค

ดำเนินการต่อโดยเพิ่มค่าช่องว่างภายในที่กำหนดเองในการตั้งค่าการเว้นวรรค

• ช่องว่างภายใน (บนและล่าง): 200px

แอดไลน์ #1

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

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

เพิ่มโมดูลข้อความ

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

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

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

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

• ข้อความ:
  • น้ำหนักแบบอักษร: Ultra Bold
  • สีข้อความ: rgba(255,255,255,0.24)
  • ขนาดข้อความ: 100px (เดสก์ท็อป), 70px (แท็บเล็ต), 36px (โทรศัพท์)
  • ความสูงของสาย: 1 em
  • ปฐมนิเทศ: ศูนย์

การเว้นวรรค

เพิ่มระยะขอบล่างที่เป็นลบด้วย

• ระยะขอบ (ด้านล่าง): -100px

เพิ่มบรรทัด 2

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

แถวที่สองที่เราต้องทำตัวอย่างนี้มีโครงสร้างคอลัมน์ต่อไปนี้:

พื้นหลังไล่ระดับสี

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

• ไล่ระดับหยุด:
  • 50%: #11CE84
  • 50%: #10C77F
• ประเภทการไล่ระดับสี: เชิงเส้น
• การบังคับเลี้ยว: 160 องศา

ปรับขนาด

เปลี่ยนพารามิเตอร์การปรับขนาดด้วย

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

การเว้นวรรค

จากนั้นเพิ่มค่าช่องว่างภายใน

• ช่องว่างภายใน: 150px (ด้านบน), 100px (ด้านล่าง)
• ช่องว่างภายใน: 50px (ซ้ายและขวา)

ชายแดน

จากนั้นไปที่การตั้งค่าเส้นขอบและเพิ่ม '20px' ในแต่ละมุม ใช้เส้นขอบด้านล่างด้วย

• มุมโค้งมน: 20px
• ความกว้างขอบล่าง: 10px
• สีขอบด้านล่าง: #1ba35a

กล่องเงา

เสร็จสิ้นการตั้งค่าเส้นโดยการเพิ่มเงาของกล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -24px
• เงาสี: rgba(0,0,0,0.3)

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

เปิดใช้งานตัวเลือก "ทำให้เต็มความกว้าง" ในฟิลด์ชื่อและอีเมล

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

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

องค์ประกอบ

จากนั้นปิดใช้งาน captcha

• ใช้ Captcha พื้นฐาน: NO

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

และเปลี่ยนการตั้งค่าปุ่ม.

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #ffffff
• ไล่ระดับหยุด:
  • 50%: #3AA0E3
  • 50%: #3491CE
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 155 องศา -
• ความกว้างของเส้นขอบของปุ่ม: 0 พิกเซล
• รัศมีเส้นขอบของปุ่ม: 10px
• ความแรงของการกระจายเงาของกล่อง: -2px
• เฉดสี: #0a60af

ดูสิ่งนี้ด้วย: Divi: วิธีปรับแต่งตะกร้าและไอคอนค้นหาของโมดูล "เมนูเต็มความกว้าง"

ชายแดน

เรายังเพิ่มมุมมน '5px' ลงในแต่ละช่องด้วย

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

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

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

สีพื้นหลัง

จากนั้นเปลี่ยนสีพื้นหลัง

• พื้นหลัง: rgba(255,255,255,0.13)

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

แก้ไขด้วยการตั้งค่าข้อความ

• ข้อความ:
  • น้ำหนักตัวอักษร: เบา
  • สีข้อความ: #ffffff
  • ขนาดตัวอักษร: 15px
  • ระยะห่างระหว่างตัวอักษร: -0,5px

การเว้นวรรค

และเพิ่มช่องว่างภายในแบบกำหนดเองเพื่อให้ห้องโมดูลได้หายใจ

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

ชายแดน

เรายังเพิ่ม '20px' ที่มุมซ้ายบนและมุมซ้ายล่าง ยิ่งไปกว่านั้น เราจะเพิ่มเส้นขอบด้านซ้าย

• มุมโค้งมน: 20px (บนซ้ายและล่างซ้าย)
• ความกว้างขอบด้านซ้าย: 34px
• สีขอบด้านซ้าย: #edf000

ความชัดเจน

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

โมดูลข้อความโคลนสองครั้ง

เมื่อคุณแก้ไขโมดูลข้อความแรกเสร็จแล้ว ให้ดำเนินการต่อและโคลนโมดูลสองครั้ง

แก้ไขเนื้อหาของสำเนาทั้งสองรายการ

เปลี่ยนเนื้อหาของสำเนาทั้งสองเป็นอย่างอื่น

เปลี่ยนระยะห่างของรายการที่ซ้ำกันสองรายการ

และเพิ่มระยะขอบด้านบนเพื่อสร้างช่องว่างระหว่างแต่ละโมดูล

• ระยะขอบ (บนสุด): 20px

แก้ไขเส้นขอบของสำเนาสองรายการ

สุดท้าย เปลี่ยนสีของเส้นขอบด้านซ้ายของรายการที่ซ้ำกันทีละรายการ

• สี 1: #00faff
• สี 2: #00f76f

ดูบทความของเราเกี่ยวกับ วิธีสร้างแถบเลื่อนหีบเพลงที่ตอบสนอง

การสำรวจ

รุ่นเดสก์ท็อป

ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูการออกแบบโมดูล Divi Contact Form บนเดสก์ท็อปขั้นสุดท้ายกัน

ตอบสนอง

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

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

สรุป

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

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

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

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

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

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

...