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

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลต Global Header ฟรี

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

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

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

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

ดาวน์โหลด

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

1. ไปที่ตัวสร้างธีม Divi และเริ่มสร้างส่วนหัวส่วนกลาง

ไปที่ตัวสร้างธีม Divi

เริ่มต้นด้วยการไปที่ Divi Theme Builder ที่ส่วนหลังของเว็บไซต์ WordPress ของคุณ

สร้างส่วนหัวระดับโลก

คลิกที่ 'เพิ่มส่วนหัวส่วนกลาง' และเลือก 'สร้างส่วนหัวส่วนกลาง' เพื่อเริ่มสร้างส่วนหัวส่วนกลางแบบกำหนดเอง

2. สร้างการออกแบบส่วนหัว

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

สีพื้นหลัง

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

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

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของส่วนถัดไป

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

กล่องเงา

ใช้เงากล่องที่บอบบางเกินไป

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.15)

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

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

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

ขนาด

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

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 1vw
• ช่องว่างภายใน: 1vw

องค์ประกอบหลัก

และจัดแนวเนื้อหาคอลัมน์ทั้งหมดโดยเพิ่มโค้ด CSS หนึ่งบรรทัดลงในองค์ประกอบหลักของแถว

align-items: center;

ดัชนีคอลัมน์ 2 Z

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

• ดัชนี Z: 12

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

อัพโหลดโลโก้

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

การจัดตำแหน่ง

เปลี่ยนการจัดตำแหน่งของโมดูลต่อไป

• การจัดตำแหน่งภาพ: กึ่งกลาง

ขนาด

แก้ไขความกว้างด้วย

• ความกว้าง: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)

เพิ่มโมดูลเมนูไปที่คอลัมน์ 2

เลือกเมนู

ในคอลัมน์ที่สอง เราจะเพิ่มโมดูลเมนู

เค้าโครง

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

• สไตล์: กึ่งกลาง

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

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

• แบบอักษรของเมนู: เปิด Sans
• น้ำหนักแบบอักษรของเมนู: กึ่งหนา
• สีข้อความของเมนู: #000000
• ขนาดข้อความเมนู: 0.8vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ระยะห่างระหว่างตัวอักษรของเมนู: 1px

การตั้งค่าข้อความเมนูแบบเลื่อนลง

จากนั้นเปลี่ยนสีบรรทัดเมนูแบบเลื่อนลง

• เมนูแบบเลื่อนลง Line Color: #007dff

ไอคอน

พร้อมกับสีไอคอนเมนูแฮมเบอร์เกอร์

• ไอคอนเมนูแฮมเบอร์เกอร์ สี: #007dff

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

เพิ่มสำเนา

สู่โมดูลที่สาม! เพิ่มโมดูลข้อความด้วยสำเนาที่คุณเลือก

สีพื้นหลัง

เพิ่มสีพื้นหลังต่อไป

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

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

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

• แบบอักษรข้อความ: เปิด Sans
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ขนาด

แก้ไขการตั้งค่าขนาดของโมดูลถัดไป

• ความกว้าง: 33%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

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

• ด้านบน: 0.8vw (เดสก์ท็อป), 2vw (แท็บเล็ตและโทรศัพท์)
• Padding ด้านล่าง: 0.8vw (เดสก์ท็อป), 2vw (แท็บเล็ตและโทรศัพท์)

ชายแดน

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

• ทุกมุม: 100px

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

เพิ่มสัญลักษณ์ในกล่องเนื้อหา

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลข้อความอื่น เพิ่มสัญลักษณ์ลูกศรต่อไปนี้ลงในกล่องเนื้อหา: '▼'

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

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

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #007fff
• ขนาดตัวอักษร: 3vw
• ความสูงของบรรทัดข้อความ: 0em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ดัชนี Z

เรากำลังเพิ่มดัชนี z ของโมดูลด้วย

• ดัชนี Z: 11

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

เพิ่มฟิลด์ตัวเลือกเต็มความกว้าง

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

เพิ่มหัวข้อ

ใช้ชื่อเรื่องด้วย

สีพื้นหลัง

ต่อไปเราจะเปลี่ยนสีพื้นหลัง

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

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

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

• ฟิลด์สีพื้นหลัง: #ffffff
• สีข้อความของฟิลด์: #dddddd
• ฟิลด์โฟกัสสีข้อความ: #007dff
• ฟิลด์ Top Padding: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ช่องด้านล่าง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ฟอนต์ฟิลด์: เปิด Sans

• ขนาดข้อความของฟิลด์: 0.7vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 3vw (โทรศัพท์)

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

แก้ไขการตั้งค่าข้อความชื่อเรื่องถัดไป

• ระดับหัวเรื่อง: H3
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• สีข้อความชื่อเรื่อง: #007dff
• ขนาดข้อความชื่อเรื่อง: 1vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3.5vw (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 1.6em

การตั้งค่าข้อความแคปต์ชา

พร้อมกับการตั้งค่าข้อความแคปต์ชา

• แบบอักษร Captcha: เปิด Sans
• สีข้อความแคปต์ชา: #007dff

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

ดำเนินการต่อโดยจัดรูปแบบปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.8vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #007dff
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 100px

• แบบอักษรของปุ่ม: เปิด Sans
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา

• ปุ่มขอบบน: 1vw
• ปุ่มเสริมด้านบน: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ตและโทรศัพท์)
• ปุ่ม Padding ด้านล่าง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ตและโทรศัพท์)
• ปุ่ม Padding ด้านซ้าย: 2vw (เดสก์ท็อป), 7vw (แท็บเล็ตและโทรศัพท์)
• ปุ่ม Padding ขวา: 2vw (เดสก์ท็อป), 7vw (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

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

• Padding ด้านบน: 4vw (เดสก์ท็อป), 6vw (แท็บเล็ตและโทรศัพท์)
• Padding ด้านล่าง: 4vw (เดสก์ท็อป), 6vw (แท็บเล็ตและโทรศัพท์)
• Padding ซ้าย: 2vw (เดสก์ท็อป), 6vw (แท็บเล็ตและโทรศัพท์)
• Padding ขวา: 2vw (เดสก์ท็อป), 6vw (แท็บเล็ตและโทรศัพท์)

ชายแดน

แก้ไขการตั้งค่าเส้นขอบถัดไป

• ทุกมุม: 10px

องค์ประกอบหลัก ชื่อผู้ติดต่อ & Captcha CSS

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

องค์ประกอบหลัก:

border-radius: 20px;

ชื่อผู้ติดต่อ:

margin-bottom: 1vw;

แคปต์ชา:

margin-top: 1.5vw;

3. ปรับแต่งองค์ประกอบเพื่อสร้างแบบฟอร์มการติดต่อบน Click

เพิ่มคอลัมน์ 3 ความสูง

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

เดสก์ทอป:

height: 3vw;

ยาเม็ด:

height: 5vw;

โทรศัพท์:

height: 6vw;

เพิ่มคลาส CSS ให้กับปุ่ม & ลูกศร

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

• CSS Class: แสดงการติดต่อ

เพิ่มคลาส CSS ในแบบฟอร์มการติดต่อ

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

• CSS Class: contact-form-module

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

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

display: none;

เพิ่มโมดูลโค้ดในคอลัมน์ 3 ด้วย JQuery & CSS Code

และเพื่อสร้างฟังก์ชันการคลิก เราจำเป็นต้องมีโค้ด JQuery เราจะใช้โค้ด CSS ที่กำหนดเองด้วยเช่นกัน เพิ่ม Code Module ใหม่ในคอลัมน์ 2 ด้วยรหัส ตรวจสอบให้แน่ใจว่าคุณวางโค้ด JQuery ระหว่างแท็กสคริปต์และโค้ด CSS ระหว่างแท็กสไตล์

jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});

.show-contact {
cursor: pointer;
}

.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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