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

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

Let 's go

การสำรวจ

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

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

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

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

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

คลิก "เพิ่ม Global Header" และเลือก "Create Global Header" เพื่อเริ่มสร้างหัวข้อสากลที่กำหนดเอง

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

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

สีพื้นหลัง

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

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

การเว้นวรรค

จากนั้นลบการเสริมด้านบนและด้านล่างเริ่มต้นออกจากส่วน

• การเสริมด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

กล่องเงา

ยังใช้ร่มเงากล่องที่บอบบาง

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

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

• เสริมด้านบน: 1vw
• ช่องว่างภายในด้านล่าง: 1vw

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

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

align-items: center;

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

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

• ดัชนี Z: 12

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

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

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

การวางแนว

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

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

ปรับขนาด

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

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

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

เลือกเมนู

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

อารมณ์

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

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

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

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

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

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

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

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

ไอคอน

ด้วยสีไอคอนเมนูแฮมเบอร์เกอร์

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

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

เพิ่มสำเนา

ไปที่โมดูลที่สามกันเถอะ! เพิ่มโมดูลข้อความพร้อมสำเนาที่คุณเลือก

สีพื้นหลัง

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

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

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

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

ชายแดน

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

• ทุกมุม: 100px

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

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

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

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

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

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

ดัชนี Z

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

• ดัชนี Z: 11

เพิ่มโมดูลฟอร์มผู้ติดต่อลงในคอลัมน์ 3

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

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

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

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

สำนักงาน:

height: 3vw;

แท็บเล็ต

height: 5vw;

โทรศัพท์:

height: 6vw;

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

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

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

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

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

• คลาส CSS: ติดต่อเรา-form-โมดูล

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

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

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;}

การสำรวจ

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

สำนัก

สิ่งที่ต้องจำ

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