วิธีสร้างป๊อปอัปมุมแบบฟอร์มการติดต่อคงที่ด้วยตัวเลือกการปรับขนาดของ Divi

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

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

1. อัปโหลดหน้า Landing Page ของ Chiropractor Layout Pack

เพิ่มหน้าใหม่

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

อัปโหลดหน้า Landing Page ของ Chiropractor Layout Pack

อัปโหลดหน้า Landing Page ของ Chiropractor Layout Pack ถัดไป แม้ว่าเราจะใช้เค้าโครงเฉพาะนี้ แต่คุณสามารถทำให้เทคนิคนี้ใช้ได้กับทุกหน้าที่คุณกำลังทำงานอยู่

2. มาเริ่มสร้างใหม่กันเถอะ!

เพิ่มส่วนใหม่ที่ด้านล่างของหน้า

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

สีพื้นหลัง

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

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

ขนาด

ไปที่แท็บออกแบบและเปลี่ยนความกว้างของส่วนตามขนาดหน้าจอต่างๆ

• ความกว้าง: 37% (เดสก์ท็อป), 95% (แท็บเล็ต), 100% (โทรศัพท์)
• การจัดตำแหน่งส่วน: ขวา

ระยะห่าง

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

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

CSS Class

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

• CSS Class: ส่วนเปิด

ดัชนี Z เริ่มต้น

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

• ดัชนี Z: 99

ดัชนีโฮเวอร์ Z

เพิ่มค่าดัชนี z เดียวกันบนโฮเวอร์เช่นกัน

• ดัชนี Z: 99

เพิ่มแถว #1

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

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

เพิ่มโมดูล Blurb

ปล่อยให้กล่องเนื้อหาว่าง

โมดูลแรกและโมดูลเดียวที่เราต้องการในแถวนี้คือโมดูล Blurb ตรวจสอบว่าคุณเว้นช่องชื่อและเนื้อหาว่างไว้

เลือกไอคอน

เลือกไอคอนถัดไป

สีพื้นหลัง

เปลี่ยนสีพื้นหลังประกาศด้วย

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

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

ไปที่แท็บออกแบบและใช้การตั้งค่าไอคอนต่อไปนี้:

• สีไอคอน: #ff5f24
• ตำแหน่งไอคอน: Top
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 46px (เดสก์ท็อป), 30px (แท็บเล็ต), 25px (โทรศัพท์)

ขนาด

แก้ไขการตั้งค่าการปรับขนาดตามขนาดหน้าจอต่างๆ ต่อไป

• ความกว้าง: 140px (เดสก์ท็อป), 105px (แท็บเล็ต), 80px (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ขวา

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 50px (เดสก์ท็อป), 35px (แท็บเล็ต), 25px (โทรศัพท์)
• ช่องว่างภายในด้านล่าง: 20px (เดสก์ท็อป), 10px (แท็บเล็ต), 0px (โทรศัพท์)

ชายแดน

ในการสร้างรูปทรงกลม เราจะต้องเพิ่มค่าสูงให้กับแต่ละมุมในการตั้งค่าเส้นขอบ เรากำลังใช้ '500px'

กล่องเงา

นอกจากนี้เรายังจะเพิ่มเงาของกล่องที่ละเอียดอ่อนเพื่อให้รูปร่างวงกลมปรากฏขึ้น

• ความแรงของกล่องเงาเบลอ: 80px

แอนิเมชั่น

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

• แอนิเมชั่นไอคอน: ไม่มีแอนิเมชั่น

CSS Class

สุดท้ายแต่ไม่ท้ายสุด เพิ่มคลาส CSS ให้กับโมดูล Blurb ในโพสต์นี้ เราจะใช้คลาส CSS นี้เพื่อทำให้ฟังก์ชันการคลิกทำงาน

• CSS Class: contact-open

เพิ่มแถว #2

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

ต่อแถวสอง! ใช้โครงสร้างคอลัมน์ต่อไปนี้:

สีพื้นหลัง

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

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

ชายแดน

เพิ่มรัศมีเส้นขอบ '39px' ให้กับแต่ละมุมถัดไป

กล่องเงา

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

• ความแรงของกล่องเงาเบลอ: 80px

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

องค์ประกอบ

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

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

ทุ่งนา

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

• ฟิลด์สีพื้นหลัง: rgba(0,126,255,0.13)

ปุ่ม

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 16px
• สีข้อความของปุ่ม: #FFFFFF
• สีพื้นหลังของปุ่ม: #ff5f24
• ความกว้างของขอบปุ่ม: 2px
• ปุ่มสีเส้นขอบ: rgba(0,0,0,0)
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: Karla
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• ปุ่มเสริมด้านบน: 14px
• ช่องว่างภายในปุ่ม: 14px
• ช่องว่างภายในปุ่ม: 20px
• ปุ่มขยายด้านขวา: 20px

ระยะห่าง

และเพิ่มค่าการเติมที่กำหนดเอง

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

เพิ่มโมดูลโค้ด

ใส่รหัส JQuery

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

jQuery(function($){
$(".contact-open").click(function() {
 $('.section-open').toggleClass('section-open-active');
});
});

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

ส่วนสูง

ดำเนินการต่อโดยเปิดการตั้งค่าส่วน เปลี่ยนความสูงตามขนาดหน้าจอต่างๆ

• ความสูง: 190px (เดสก์ท็อป), 140px (แท็บเล็ต), 125px (โทรศัพท์)

องค์ประกอบหลักเริ่มต้น

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

bottom: 0;
right: 0;
position: fixed;

เลื่อนองค์ประกอบหลัก

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

position: fixed;

เพิ่มโค้ด CSS ที่กำหนดเองลงในเพจ

เปิดการตั้งค่าหน้า

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

เพิ่ม CSS ที่กำหนดเอง

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

.section-open-active {
height: auto !important;
}

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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