Divi: วิธีเพิ่มแบบฟอร์มการติดต่อในส่วนหัวส่วนกลาง

ต้องเพิ่ม ก แบบฟอร์มติดต่อ ไปยังส่วนหัวส่วนกลาง?

เมื่อคุณสร้างส่วนหัวที่กำหนดเองสำหรับ .ของคุณ เว็บไซต์เว็บ เมื่อใช้ Divi Theme Builder คุณจะพบว่าตัวเองกำลังมองหาวิธีที่สมบูรณ์แบบในการเพิ่ม CTA (คำกระตุ้นการตัดสินใจ) วิธีหนึ่งในการทำเช่นนี้คือการเพิ่ม แบบฟอร์มติดต่อ เลื่อน 

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

ในบทช่วยสอนนี้ เราจะแสดงให้คุณเห็นถึงวิธีการสร้าง แบบฟอร์มติดต่อ เลื่อนได้โดยใช้โค้ด Divi และ JQuery & CSS

เริ่มกันเลย!

การสำรวจ

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

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

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

ไปที่ Theme Builder จากเมนู Divi ที่อยู่ในแดชบอร์ด WordPress ของคุณและคลิกที่ "Add a global header"

เลือก 'สร้างส่วนหัวส่วนกลาง'

สร้างสไตล์ส่วนหัว

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

สีพื้นหลัง

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

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

การเว้นวรรค

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

• ระยะขอบภายใน จุดยอด: 0px
• ระยะขอบภายในด้านล่าง: 0px

กล่องเงา

ใช้เงากล่องที่บอบบางด้วย

• ความแรงของกล่องเงาสีน้ำเงิน: 50px
• สีแบบอักษรของคำบรรยาย: rgba(0,0,0,0.15)

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

• ระยะขอบภายในสูงสุด: 1vw
• ระยะขอบภายในด้านล่าง: 1vw

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

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

align-items: center;

ตัวห้อย Z ของคอลัมน์ 2

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

• ดัชนี Z: 12

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

โลโก้ดาวน์โหลด

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

การวางแนว

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

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

ปรับขนาด

เปลี่ยนความกว้างด้วย

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

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

เลือกเมนู

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

อารมณ์

สลับไปที่แท็บสไตล์โมดูลและเปลี่ยนสไตล์เลย์เอาต์

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

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

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

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

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

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

• สีบรรทัดเมนูแบบเลื่อนลง: #007dff

ไอคอน

เปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์

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

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

เพิ่มข้อความ

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

สีพื้นหลัง

เพิ่มสีพื้นหลัง

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

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

ถัดไป เพิ่มการเติมด้านบนและด้านล่างแบบกำหนดเอง

• ขอบภายในสูงสุด: 0,8 vw (เดสก์ท็อป), 2 vw (แท็บเล็ตและโทรศัพท์)
• มาร์จิ้นภายในต่ำ: 0,8 vw (เดสก์ท็อป), 2 vw (แท็บเล็ตและโทรศัพท์)

ชายแดน

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

• สี่เหลี่ยมผืนผ้าโค้งมน: 100px

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

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

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

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

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

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

ดัชนี Z

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

• ดัชนี Z: 11

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

เพิ่มฟิลด์เต็มความกว้างที่คุณเลือก

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

เพิ่มชื่อ

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

สีพื้นหลัง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• ปุ่มแบบอักษร: เปิดไม่มี
• ปุ่ม Soft Light: ข้อความตัวหนา

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

การเว้นวรรค

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

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

ชายแดน

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

• ป้อนข้อมูลสี่เหลี่ยมผืนผ้าโค้งมน: 10px

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

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

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

01	border-radius: 20px;

ชื่อของ ติดต่อเรา :

01	margin-bottom: 1vw;

แคปต์ชา:

01	margin-top: 1.5vw;

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

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

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

โต๊ะ :

01	height: 3vw;

แท็บเล็ต

01	height: 5vw;

โทร:

01	height: 6vw;

เพิ่มคลาส CSS ลงในปุ่มและลูกศร

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

• คลาส CSS: แสดง-ติดต่อเรา

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

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

• คลาส CSS: contact-form-module

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

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

01	display: none;

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

และในการสร้างฟังก์ชันการคลิก เราต้องใช้โค้ด JQuery เราจะใช้โค้ด CSS ที่กำหนดเองด้วย เพิ่มโมดูลโค้ดใหม่ในคอลัมน์ 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;

}

การสำรวจ

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

สรุป

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

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