5 วิธีที่ไม่ซ้ำในรูปแบบโมดูลติดต่อของ Divi

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

ไปกันเถอะ!

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

เดสก์ทอป

เริ่มต้นด้วยการดูการออกแบบโมดูลแบบฟอร์มการติดต่อ Divi บนเดสก์ท็อป

มือถือ

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

5 วิธีที่ไม่ซ้ำในรูปแบบโมดูลติดต่อของ Divi

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

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

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

พื้นหลังไล่โทนสี

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

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

ระยะห่าง

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

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

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

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

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

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

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

• คอลัมน์ 1 สีพื้นหลัง: rgba(255,255,255,0.55)

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

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

• คอลัมน์ 1 เล่นภาพพื้นหลังซ้ำ: ไม่เล่นซ้ำ
• คอลัมน์ 1 ภาพพื้นหลังแบบผสมผสาน: หน้าจอ

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

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

• คอลัมน์ 2 สีพื้นหลัง: #ffffff

ขนาด

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

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

ระยะห่าง

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

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

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

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

border-radius: 10px;

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

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

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

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

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

• แบบอักษรของข้อความ: Satisfy
• สีข้อความ: #333333
• ขนาดตัวอักษร: 100px
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

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

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

กล่องเงา

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

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

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

อัปโหลดรูปภาพ PNG

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

ขนาด

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

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

ระยะห่าง

สร้างการทับซ้อนกันโดยใช้ระยะขอบบนที่เป็นค่าลบ

• มาร์จิ้นสูงสุด: -60%

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

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

ด้านล่างโมดูลรูปภาพ ให้เพิ่มโมดูลข้อความที่มีเนื้อหาบางส่วน

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

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

• แบบอักษรของข้อความ: Satisfy
• สีข้อความ: #333333
• ขนาดตัวอักษร: 44px
• การวางแนวข้อความ: ศูนย์

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

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

เพิ่มโมดูลข้อความอื่นต่อไป

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

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

• แบบอักษรของข้อความ: Arial
• สีข้อความ: #ffd400
• ขนาดตัวอักษร: 18px
• ระยะห่างของตัวอักษรข้อความ: 2px
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

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

• ขอบล่าง: 100px

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

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

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

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

เพิ่มช่องหัวเรื่อง

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

องค์ประกอบ

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

• แสดงแคปต์ชา: ไม่

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

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

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

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

เรากำลังแก้ไขลักษณะที่ปรากฏของปุ่มด้วย

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

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองต่อไป

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

ชายแดน

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

• ความกว้างขอบล่าง: 2px
• สีขอบล่าง: #efefef

ระยะห่างฟิลด์บุคคล

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

• ขอบล่าง: 20px

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

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

พื้นหลังไล่โทนสี

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

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

ระยะห่าง

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

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

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

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

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

สีพื้นหลัง

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

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

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

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

• สี 1: #9932ff
• สี 2: #562fef
• คอลัมน์ 2 ประเภทการไล่ระดับสี: เชิงเส้น
• คอลัมน์ 2 ทิศทางการไล่ระดับสี: 160deg

ขนาด

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

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

ระยะห่าง

จากนั้น เพิ่มค่าการเว้นวรรคแบบกำหนดเอง

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• คอลัมน์ 1 ช่องว่างภายในด้านบน: 100px
• ช่องว่างภายในคอลัมน์ 1 ด้านล่าง: 50px
• คอลัมน์ 1 ช่องว่างภายในด้านซ้าย: 50px
• คอลัมน์ 1 ช่องว่างภายในด้านขวา: 50px
• คอลัมน์ที่ 2 ช่องว่างภายในด้านบน: 100px
• คอลัมน์ที่ 2 ช่องว่างภายใน: 100px
• คอลัมน์ 2 ช่องว่างภายในด้านซ้าย: 50px
• คอลัมน์ 2 ช่องว่างภายในด้านขวา: 50px

ชายแดน

เพิ่ม '20px' ในแต่ละเส้นขอบของแถว

กล่องเงา

สุดท้าย เพิ่มเงาของกล่องที่ละเอียดอ่อนลงในแถว

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

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

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

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

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

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

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

ระยะห่าง

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

• ขอบล่าง: 50px

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

องค์ประกอบ

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

• แสดงแคปต์ชา: ไม่

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

เปลี่ยนสีพื้นหลังของฟิลด์แบบฟอร์มถัดไป

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

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

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

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

กล่องเงา

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

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

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

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

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

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

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

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

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

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

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

เลือกไอคอน

จากนั้นเลือกไอคอนที่ตรงกัน

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

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

• สีไอคอน: #ffffff
• ตำแหน่งไอคอน: ซ้าย

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

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

• ขนาดข้อความชื่อเรื่อง: 15px
• ระยะห่างของตัวอักษรชื่อเรื่อง: -0.5px

ระยะห่าง

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

• ขอบบน: 120px

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

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

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

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

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

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

• ขอบบน: 30px

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

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

สีพื้นหลัง

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

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

ระยะห่าง

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

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

เพิ่มแถว #1

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

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

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

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

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

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

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

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

ระยะห่าง

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

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

เพิ่มแถว #2

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

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

พื้นหลังไล่โทนสี

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

• สี 1: #11CE84
• สี 2: #10C77F
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 160deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

ขนาด

เปลี่ยนการตั้งค่าการปรับขนาดด้วย

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

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองต่อไป

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

ชายแดน

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

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

กล่องเงา

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

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

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

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

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

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

องค์ประกอบ

ปิดการใช้งาน captcha ต่อไป

• แสดงแคปต์ชา: ไม่

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

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

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

ชายแดน

นอกจากนี้เรายังเพิ่มมุมโค้งมน '5px' ให้กับแต่ละฟิลด์

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

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

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

สีพื้นหลัง

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

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

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

เล่นกับการตั้งค่าข้อความด้วย

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 12px
• ช่องว่างภายใน: 12px
• ช่องว่างภายในด้านซ้าย: 10px
• ช่องว่างภายในด้านขวา: 10px

ชายแดน

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

• ความกว้างของเส้นขอบด้านซ้าย: 34px
• สีขอบซ้าย: #edf000

ทัศนวิสัย

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

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

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

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

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

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

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

• ขอบบน: 20px

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

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

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

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

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

สีพื้นหลัง

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

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

ระยะห่าง

ลบช่องว่างภายในเริ่มต้นของส่วนนี้

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

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

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

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

พื้นหลังไล่โทนสี

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

• สี 1: #ffffff
• สี 2: rgba(41,196,169,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 38%
• ตำแหน่งสุดท้าย: 38%

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

และเพิ่มช่องว่างภายในแบบกำหนดเอง

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

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

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

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

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

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

• แบบอักษรของข้อความ: Abril Fatface
• สีข้อความ: #640076
• ขนาดตัวอักษร: 45px (เดสก์ท็อป), 34px (แท็บเล็ต), 20px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

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

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

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

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

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

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

องค์ประกอบ

จากนั้นปิดใช้งานตัวเลือก captcha ในการตั้งค่าองค์ประกอบ

• แสดงแคปต์ชา: ไม่

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

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

• สีพื้นหลังของฟิลด์แบบฟอร์ม: #fff6f6
• สีข้อความของฟิลด์แบบฟอร์ม: #ff7c7c

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

เปลี่ยนปุ่มเป็นปุ่มไอคอนโดยใช้การตั้งค่าต่อไปนี้:

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

ขนาด

และลองใช้ค่าการปรับขนาดเพื่อให้การออกแบบตรงกับขนาดหน้าจอทั้งหมด

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

ระยะห่าง

ดำเนินการต่อโดยเพิ่มค่าระยะห่างที่กำหนดเองบางค่าลงในโมดูล

• ขอบล่าง: 200px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

ชายแดน

และเพิ่ม '10px' ในแต่ละมุม

ขอบปุ่ม

สุดท้ายแต่ไม่ท้ายสุด ให้กดปุ่มไอคอนทางด้านขวาโดยใช้โค้ด CSS ต่อไปนี้ในแท็บขั้นสูง:

margin-right: -100px;

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

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

พื้นหลังไล่โทนสี

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

• สี 1: #4bf2d0
• สี 2: #ffffff
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ซ้าย
• ตำแหน่งเริ่มต้น: 36%
• ตำแหน่งสุดท้าย: 36%

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 250px
• แผ่นรองด้านล่าง: 250px

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

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

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

สีพื้นหลัง

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

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

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

เพิ่มสีพื้นหลังอื่นให้กับคอลัมน์แรก

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

ขนาด

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

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

ระยะห่าง

และเพิ่มค่าระยะห่างที่กำหนดเองเพื่อให้ตรงกับขนาดหน้าจอทั้งหมด

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• คอลัมน์ 1 ช่องว่างด้านบนสุด: 200px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในคอลัมน์ 1 ด้านล่าง: 150px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 1 ช่องว่างภายในด้านซ้าย: 50px
• คอลัมน์ 1 ช่องว่างภายในด้านขวา: 50px
• คอลัมน์ 2: 200px (เดสก์ท็อป), 100px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในคอลัมน์ที่ 2: 150px, 100px (แท็บเล็ตและโทรศัพท์)

กล่องเงา

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

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

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

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

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

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

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

• แบบอักษรของข้อความ: Cambay
• สีข้อความ: #000000
• ขนาดตัวอักษร: 26px
• ระยะห่างของตัวอักษรข้อความ: -0.5px
• การวางแนวข้อความ: ขวา

ระยะห่าง

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

• ขอบบน: 60px

ทัศนวิสัย

และซ่อนโมดูลทั้งบนโทรศัพท์และแท็บเล็ต

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

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

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

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

แก้ไขระยะขอบบนของทั้งสองรายการที่ซ้ำกันด้วย

• ขอบบน: 80px

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

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

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

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

องค์ประกอบ

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

• แสดงแคปต์ชา: ใช่

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

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

• ฟอร์มฟิลด์สีพื้นหลัง: rgba(255,255,255,0)
• แบบอักษรของฟิลด์แบบฟอร์ม: Cambay

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

และสร้างปุ่มเฉพาะโดยใช้การตั้งค่าปุ่มต่อไปนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 64px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
• สีข้อความของปุ่ม: #000000
• สี 1: #4bf2d0
• สี 2: rgba(41,196,169,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 25%
• ตำแหน่งสุดท้าย: 25%
• ความกว้างของขอบปุ่ม: 0px
• แสดงเฉพาะปุ่มเมื่อวางเมาส์เหนือปุ่ม: ไม่

ระยะห่าง

เพิ่มระยะขอบบนบางส่วนให้กับโมดูลนี้ด้วย

• ขอบบน: 50px

ชายแดน

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

• ความกว้างขอบด้านล่าง: 0.5px
• สีขอบล่าง: #000000

ระยะห่างฟิลด์บุคคล

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

• ขอบล่าง: 50px

ดูตัวอย่าง

เดสก์ทอป

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

มือถือ

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

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

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