จะทำให้ Divi Element เหนียวหนึบได้อย่างไร (คำแนะนำทีละขั้นตอน)

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

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

เหตุใดจึงทำให้องค์ประกอบ Divi เหนียว

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

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

จะทำให้ Divi Element เหนียว/คงที่ได้อย่างไร

มีสองวิธีหลักในการทำให้องค์ประกอบ Divi ติดหนึบ:

1. การใช้ปลั๊กอินตัวสร้าง Divi ในตัว
2. ด้วยการเข้ารหัสเล็กน้อย

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

1) การใช้ตัวสร้าง Divi

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

สร้างเพจ

ขั้นแรก ในแดชบอร์ด WordPress ของคุณ ให้ไปที่ หน้า > เพิ่มใหม่ และสร้างหน้าใหม่

จากนี้ไป เราจะใช้ตัวสร้างภาพ Divi ดังนั้นให้กดปุ่ม ใช้ตัวสร้าง Divi แล้วคุณจะเห็นตัวสร้างภาพแบบลากและวาง

นำเข้าเทมเพลตที่ต้องการ

เมื่อตัวสร้างเปิดขึ้น คุณจะเห็นสามตัวเลือก:

• สร้างจากศูนย์
• เลือกเลย์เอาต์ที่สร้างไว้ล่วงหน้า
• โคลนหน้าที่มีอยู่

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

หลังจากนั้น ในขณะที่เราใช้ Classic Editor คุณจะเห็นสิ่งนี้บนหน้าจอของคุณ:

อย่างไรก็ตาม การทำงานกับตัวสร้างภาพนั้นง่ายกว่า ดังนั้นเราจะเปลี่ยนไปใช้ Visual Builder

เปลี่ยนไปใช้ Visual Builder

ในส่วนหัว คุณจะเห็นตัวเลือกให้ใช้ตัวสร้างภาพที่เรียกว่า Build On the Front End กดแล้วคุณจะเห็นการเปลี่ยนแปลงของหน้าจอและทำให้ง่ายต่อการดูผลลัพธ์ของการปรับเปลี่ยนจากส่วนหน้า

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

ติดตั้งและเปิดใช้งานปลั๊กอิน WordPress เมนูปักหมุด

ในการทำให้องค์ประกอบ Divi ติดหนึบ เราจะใช้ปลั๊กอิน Sticky Menu ดังนั้น เปิด แดชบอร์ด WordPress ของคุณ ไปที่ Plugins > Add new และค้นหา Sticky Menu, Sticky Header on Scroll จากนั้นคลิกที่ติดตั้งและเปิดใช้งาน

ด้วยปลั๊กอินง่ายๆ นี้ เราจะสามารถทำให้เมนู ส่วนหัว หรือองค์ประกอบต่างๆ ของเราติดหนึบในเวลาไม่นาน ในการตั้งค่าปลั๊กอิน ให้ไปที่ การตั้งค่า > เมนูปักหมุด (หรืออะไรก็ได้!)

ตั้งค่า Sticky Menu

มีตัวเลือกการตั้งค่าการปรับแต่งหลักสองแบบ:

• ขั้นพื้นฐาน
• ขั้นสูง

ขั้นแรก มาดูวิธีปรับแต่งการตั้งค่าพื้นฐานกัน คุณจะต้องตั้งชื่อองค์ประกอบที่ติดหนึบ ในกรณีของเรา เราจะเรียกมันว่า #sticky และเราจะตั้งค่าช่องว่างระหว่างหน้าบนสุดกับองค์ประกอบเป็น 50px อย่ากังวลหากคุณไม่แน่ใจเกี่ยวกับการเว้นวรรค คุณสามารถเปลี่ยนค่านี้ได้ในภายหลัง

จากนั้นบันทึกการตั้งค่าพื้นฐานและไปที่ แท็บการตั้งค่าขั้นสูง เราจะปรับแต่งองค์ประกอบที่ติดหนึบอีกเล็กน้อย ตัวอย่างเช่น เราจะตั้งค่าฟิลด์ Z-Index เป็น 99998 และเพิ่ม #stop ในฟิลด์องค์ประกอบ push-up องค์ประกอบ push-up จะช่วยให้คุณหยุดวิดเจ็ตเหนียวแบบลอยได้ (เพิ่มเติมเกี่ยวกับเรื่องนี้ในภายหลัง)

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

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

ในการดำเนินการนี้ ให้เปิด ส่วนการตั้งค่า Divi แล้วเลือก คอลัมน์ 2 ใต้ แท็บขั้นสูง คุณจะเห็นส่วนเพิ่ม CSS ID, คลาส CSS และโค้ดที่กำหนดเอง CSS ในการทำให้องค์ประกอบนี้ติดหนึบ คุณเพียงแค่เพิ่ม Sticky Element ที่คุณตั้งค่าไว้ในการตั้งค่าพื้นฐาน ในกรณีของเรา เราจะเพิ่มการ ติดหนึบ ลงในฟิลด์ CSS ID และบันทึกการตั้งค่า

ตรวจสอบให้แน่ใจว่าคุณบันทึกการตั้งค่าตัวสร้าง Divi ทั้งหมด ไม่เช่นนั้นจะไม่ทำงาน จากนั้น คุณสามารถดูตัวอย่างหน้าได้

ดังที่คุณเห็นด้านบน แบบฟอร์มสมัครรับจดหมายข่าวได้รับการแก้ไขแล้ว อย่างไรก็ตาม มันทับซ้อนกับองค์ประกอบอื่นๆ บนไซต์ ดังนั้นเราจะทำการเปลี่ยนแปลงบางอย่าง นี่คือเวลาที่ ID องค์ประกอบ push-up จากการตั้งค่าขั้นสูงเข้ามาเล่น ในกรณีของเรา เราจะหยุดวิดเจ็ตจดหมายข่าวก่อนแบบฟอร์มติดต่อ

เพิ่มหยุด CSS

ดังที่เราทำไว้ก่อนหน้านี้ เราต้องพูดถึง CSS ID แบบ push-up ในส่วนแบบฟอร์มการติดต่อ ในการดำเนินการนี้ ให้เปิดการ ตั้งค่าส่วน จดหมายข่าวใน Divi ไปที่ แท็บขั้นสูง เพิ่ม หยุด ใน CSS ID และบันทึกการเปลี่ยนแปลง

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

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

ทำไอคอนโซเชียลให้ติดหนึบ

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

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

จากนั้นบันทึกการตั้งค่าและตรวจสอบผลลัพธ์ที่ส่วนหน้า

อย่างที่คุณเห็น เราเพิ่งทำให้ไอคอนโซเชียลมีเดียติดหนึบ!

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

2) ทำให้องค์ประกอบ Divi ใด ๆ เหนียวด้วยการเข้ารหัสเล็กน้อย

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

สร้างส่วนหัวที่กำหนดเอง

จากตัวสร้างธีม Divi คุณสามารถสร้างเทมเพลตเว็บไซต์ที่กำหนดเองได้

สำหรับการสาธิตนี้ ขั้นแรก ให้สร้าง Global Header

คุณจะมีสามตัวเลือก:

• สร้างจากศูนย์
• เลือกเลย์เอาต์ที่สร้างไว้ล่วงหน้า
• โคลนหน้าที่มีอยู่

สำหรับการสาธิตนี้ เราจะสร้างส่วนหัวตั้งแต่เริ่มต้น

ในขั้นตอนต่อไป คุณต้องเลือกจำนวนแถวที่คุณต้องการบนส่วนหัว

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

ในกรณีของเรา เราจะเพิ่มเมนูไปที่ส่วนหัวของเรา

เพิ่ม CSS Class

ก่อนดำเนินการต่อ คุณต้องพูดถึง คลาส CSS สำหรับส่วนหัวของคุณ จากการตั้งค่าส่วนหัว ให้ไปที่ แท็บขั้นสูง และเพิ่ม คลาส CSS ที่กำหนดเอง เราจะเพิ่ม pa-sticky-header เป็นคลาส CSS ที่กำหนดเอง

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

เพิ่มโค้ด JavaScript

ตอนนี้ส่วนที่สนุกเริ่มต้นขึ้น คัดลอกโค้ด JavaScript ต่อไปนี้:

 <script>
jQuery (ฟังก์ชัน ($) {
var headerHeight = $('header.et-l.et-l--header').outerHeight();
$(window).bind('scroll', function () {
var windowHeight = $(หน้าต่าง).height();
ถ้า ($(window).scrollTop() < windowHeight - headerHeight) {
$('pa-header').removeClass('pa-sticky-header'); $('pa-header').removeClass('pa-sticky-header');
}
อื่น {
$('pa-header').addClass('pa-sticky-header'); $('pa-header').addClass('pa-sticky-header');
}
});
});
</script>

วางลงในตัวแก้ไขและบันทึกการเปลี่ยนแปลง

เพิ่ม CSS เพิ่มเติม

หลังจากนั้นเราจะตั้งค่าองค์ประกอบที่เราต้องการให้ติดหนึบบนไซต์ ในกรณีของเรา หากต้องการแก้ไขส่วนหัวที่ด้านบน ให้คัดลอกโค้ด CSS ต่อไปนี้แล้ววางลงในตัวแก้ไข CSS แล้วบันทึกการเปลี่ยนแปลง

 /*เพื่อให้องค์ประกอบเฉพาะเหนียว*/

.pa-sticky-header {
	ตำแหน่ง: คงที่!สำคัญ;
	ด้านบน: 0; /*กำหนดระยะห่างของส่วนหัวจากด้านบนของหน้า*/
	ความกว้าง: 100%;
} 

ตอนนี้ ตรวจสอบส่วนหน้าของเว็บไซต์ของคุณ แล้วคุณจะเห็นว่าส่วนหัวจะได้รับการแก้ไข

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

คำแนะนำ

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

ไม่มีแอนิเมชั่น

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

ดูตัวอย่างการเปลี่ยนแปลงก่อนเผยแพร่

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

องค์ประกอบเหนียว จำกัด ในเวอร์ชันฟรี

เวอร์ชันฟรีของ WP Sticky Menu ให้คุณเพิ่มองค์ประกอบที่ติดหนึบได้เพียงรายการเดียวเท่านั้น ดังนั้น หากคุณต้องการเพิ่มองค์ประกอบอื่นๆ ให้กับเว็บไซต์ของคุณ คุณอาจต้องพิจารณาอัปเกรดเป็นเวอร์ชันโปรที่เริ่มต้นที่ 39 USD

บทสรุป

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

• การใช้ปลั๊กอิน Divi Builder
• โดยทางโปรแกรม

หากคุณไม่มีทักษะในการเขียนโค้ด คุณสามารถใช้ปลั๊กอิน Divi Builder เป็นวิธีที่ง่ายและเป็นมิตรกับผู้เริ่มต้นมากที่สุด ด้วยโหมดแสดงตัวอย่างแบบสด คุณสามารถดูทุกการเปลี่ยนแปลงได้ทันที

ในทางกลับกัน หากคุณไม่ต้องการติดตั้งปลั๊กอินใดๆ หรือเพียงแค่ต้องการเขียนโค้ด คุณก็ทำให้องค์ประกอบใดๆ ได้รับการแก้ไขโดยทางโปรแกรมได้ เพียงใช้โค้ด JavaScript เป็นฐานและปรับแต่งเพื่อให้องค์ประกอบใดๆ ที่คุณต้องการติดหนึบ คุณสามารถเพิ่มโค้ด CSS ลงใน style.css ของธีมหรือใช้ ส่วน CSS เพิ่มเติม ใน Divi ก่อนที่คุณจะทำเช่นนั้น อย่าลืมพูดถึงคลาส CSS ในองค์ประกอบของคุณ

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

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