Divi: วิธีสร้างแบบฟอร์มการติดต่อที่ปรากฏขึ้นหลังจากคลิกที่ปุ่ม

คุณต้องการสร้าง แบบฟอร์มติดต่อ ใน Divi ที่ปรากฏขึ้นหลังจากคลิกที่ปุ่ม?

ในบทช่วยสอน Divi นี้ เราจะแสดงวิธีสร้างไฟล์ แบบฟอร์มติดต่อ ซึ่งปรากฏขึ้นหลังจากคลิกปุ่มโดยไม่ใช้อะไรเลยนอกจาก Divi, โค้ด jQuery และโค้ด CSS

อ่านคู่มือของเราได้ที่: Divi: วิธีสร้างส่วนท้ายที่ติดหนึบด้วยเอฟเฟกต์ "เปิดเผย"

เป็นวิธีที่ยอดเยี่ยมในการเก็บ ผู้เข้าชม ของคุณ เว็บไซต์ มุ่งเน้นไปที่การกระทำที่พวกเขามุ่งมั่นด้วยการคลิกปุ่มเพียงปุ่มเดียว ไม่นำพวกเขาไปยังหน้าอื่น

การสำรวจ

ด้านล่างนี้ คุณสามารถดูสิ่งที่เรากำลังจะสร้างได้อย่างรวดเร็ว จากนั้นเข้าสู่บทช่วยสอน!

แสดงตัวอย่างบน PC

ดูตัวอย่างบนโทรศัพท์และแท็บเล็ต

สร้างหน้าใหม่ด้วยเค้าโครงที่กำหนดไว้ล่วงหน้า

เริ่มต้นด้วยการใช้เค้าโครงที่กำหนดไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ เราจะใช้หน้าติดต่อของ ชุดเค้าโครงผลิตภัณฑ์ความงาม .

เพิ่มหน้าใหม่ของคุณ เว็บไซต์เว็บ และตั้งชื่อแล้วเลือกตัวเลือก 'ใช้ตัวสร้าง Divi'.

เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ ดังนั้นให้เลือก 'เลือกเลย์เอาต์'

ค้นหาและเลือกโฮมเพจของเลย์เอาต์ 'บริษัท ออกแบบตกแต่งภายใน'

เลือก 'เลือกเลย์เอาต์' เพื่อเพิ่มเลย์เอาต์ให้กับเพจของคุณ

ตอนนี้เราพร้อมที่จะดำเนินการสอนต่อแล้ว

สร้างส่วนด้วยโมดูลปุ่ม

สิ่งแรกที่เราจะต้องทำคือเพิ่มส่วนใหม่ที่เราวางปุ่มที่จะอนุญาตให้ แบบฟอร์มติดต่อ ที่จะแสดง 

ดูเพิ่มเติม: Divi: วิธีสร้างส่วนท้ายที่กำหนดเอง

เพียงเพิ่มมาตราฐาน

จากนั้นเลือกแถวที่มีหนึ่งคอลัมน์ 

เมื่อคุณทำเสร็จแล้ว ให้เพิ่มโมดูลปุ่มเข้าไป

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

สิ่งสำคัญต่อไปที่เราจะต้องทำคือกำหนดคลาส CSS ให้กับปุ่ม เราจะใช้คลาส CSS นี้ในภายหลังในบทความนี้ในโค้ด jQuery เพื่อให้แน่ใจว่าแบบฟอร์มการติดต่อจะปรากฏขึ้นหลังจากคลิก คลาสที่เราจะต้องกำหนดให้กับปุ่มนั้นเป็นเพียง “ปุ่ม”

• คลาส CSS: button

สร้างแบบฟอร์มติดต่อเวอร์ชัน PC

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

เพิ่มส่วนมาตรฐานใหม่

เริ่มต้นด้วยการเพิ่มส่วนมาตรฐานใหม่ให้กับเพจที่คุณกำลังทำงานอยู่ ในการตั้งค่าส่วน ไปที่แท็บขั้นสูง เพิ่ม "ป๊อปอัป" ลงในฟิลด์ CSS Class 

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

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

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

display: none;

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

เพิ่มแถวเป็นสองคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวสองคอลัมน์แล้วไปที่แท็บ สไตล์. 

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างสูงสุด: 1291px

ป้อนพารามิเตอร์ของแต่ละคอลัมน์

แก้ไขระยะขอบภายใน (บน ซ้าย และขวา) ดังนี้

• ระยะขอบภายใน (บน ซ้าย ขวา): 30px

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

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

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

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

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

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

• แบบอักษรของส่วนหัว: Lobster
• ส่วนหัวแสงอ่อน: ข้อความตัวหนา
• การจัดตำแหน่งข้อความ: ตัวหนา
• สีข้อความส่วนหัว: #002282
• ขนาดข้อความส่วนหัว: 37px
• ความสูงของบรรทัดส่วนหัว: 1,7 em

เพิ่มโมดูลข้อความที่สอง

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

• การจัดตำแหน่งข้อความ: Center
• แบบอักษรของข้อความ: Arial
• ขนาดข้อความ: 13px
• ข้อความสีข้อความ: #002282
• ความสูงของบรรทัดข้อความ: 1,7 em

เพิ่มโมดูล 'ติดตามเราบนโซเชียลเน็ตเวิร์ก'

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

สิ่งสุดท้ายที่เราจะต้องทำคือเพิ่มช่องว่างภายใน (ซ้าย) ให้กับโมดูลนี้ในแท็บขั้นสูง เพิ่มโค้ด CSS บรรทัดต่อไปนี้ในองค์ประกอบหลัก:

padding-left: 40%;

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

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

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

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

• ฟิลด์สีข้อความ: #002282

• ฟิลด์ขนาดข้อความ: #002282
• ความสูงของเส้นสนาม: 1,7 em

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ปุ่มขนาดตัวอักษร: 20
• สีข้อความของปุ่ม: #FFFFFF
• ปุ่มพื้นหลัง: #0086c4

ดูเพิ่มเติมที่: วิธีสร้างเมนูเลื่อนและกดใน DIVI

• ความกว้างของขอบปุ่ม: 2
• ปุ่มรัศมีเส้นขอบ: 3

สลับไปที่แท็บขั้นสูงและเพิ่มระยะขอบ 5%

เพิ่มโมดูลสรุป

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

จากนั้นไปที่แท็บขั้นสูงแล้วพิมพ์ "ปิด" เป็นคลาส CSS 

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

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

ใช้การเติมไล่ระดับกับเส้น

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

• สีไล่ระดับแรก: #FFFFFF
• สีไล่ระดับที่สอง: #0c71c3
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 124 องศา
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

สร้างแบบฟอร์มติดต่อสำหรับแท็บเล็ตและโทรศัพท์

ตอนนี้เราได้สร้างเวอร์ชันสำหรับพีซีแล้ว เวอร์ชันแท็บเล็ตและโทรศัพท์จะทำงานเร็วขึ้นมาก โมดูลส่วนใหญ่ที่เราใช้สำหรับเวอร์ชัน PC จะเหมือนกับเวอร์ชันสำหรับมือถือ

ซ้ำส่วนก่อนหน้า

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

แก้ไขโค้ด CSS ของโมดูลสรุป

แทนที่จะใช้รหัสเดสก์ท็อป ให้ใช้สิ่งต่อไปนี้แทน:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

ใช้การเติมไล่ระดับกับเส้น

สำหรับรุ่นมือถือ เราใช้การตั้งค่าต่างๆ สำหรับพื้นหลังไล่ระดับของเส้น:

• สีไล่ระดับแรก: #FFFFFF
• สีไล่ระดับที่สอง: #0c71c3
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 180 องศา
• ตำแหน่งเริ่มต้น: 40%
• ตำแหน่งสุดท้าย: 40%

เพิ่มรหัส jQuery

สิ่งสุดท้ายที่เราจะต้องทำสำหรับบทช่วยสอนนี้คือการเพิ่มโค้ด jQuery เพิ่มโมดูลรหัสและใส่รหัส JQuery ต่อไปนี้:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

ผล

หากคุณปฏิบัติตามข้อความทีละขั้นตอน คุณควรจะได้รับผลลัพธ์ต่อไปนี้บนคอมพิวเตอร์:

และผลลัพธ์ต่อไปนี้บนแท็บเล็ตและโทรศัพท์:

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

สรุป

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

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

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

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

...