วิธีทำให้ Divi Header เหนียว/คงที่ (คำแนะนำทีละขั้นตอน)

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

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

เหตุใดจึงทำให้ Divi Header ติดหนึบ?

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

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

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

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

ธีม WordPress บางธีม เช่น Avada และ GeneratePress มาพร้อมกับเครื่องมือที่ทำให้ส่วนหัวมีความเหนียวผ่านแผงธีม อย่างไรก็ตาม การทำเช่นเดียวกันใน Divi จำเป็นต้องมีการปรับแต่งเพิ่มเติมบางอย่าง

วิธีทำให้ Divi Header เหนียว/คงที่

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

1. ด้วยปลั๊กอิน Divi Builder
2. ผ่านการเข้ารหัส

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

1) ทำให้ส่วนหัวเหนียวโดยใช้ Divi Builder

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

จากนั้น คุณสามารถนำเข้าเทมเพลตที่สร้างไว้ล่วงหน้าจำนวนมากที่ Divi นำเสนอหรือสร้างขึ้นใหม่ทั้งหมด เมื่อคุณสร้างหรือเลือกการออกแบบแล้ว ใน แดชบอร์ด WordPress ของคุณ ให้ไปที่ Divi > Theme Builder

ที่นี่ คุณจะสามารถสร้างเทมเพลตที่กำหนดเองสำหรับไซต์ของคุณได้ ในเทมเพลตใด ๆ จะมีสามองค์ประกอบหลัก:

• หัวข้อ
• ร่างกาย
• ส่วนท้าย

แก้ไขส่วนหัวส่วนกลาง

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

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

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

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

2) ทำให้ส่วนหัว Divi แก้ไขโดยการเข้ารหัส

ตอนนี้เรามาดูวิธีทำให้ส่วนหัว Divi ติดหนึบโดยการเข้ารหัส สำหรับสิ่งนี้ เราจะใช้โค้ด CSS บางส่วน ไม่ต้องกังวลหากคุณไม่ใช่นักพัฒนา โค้ดที่เราจะใช้นั้นค่อนข้างเรียบง่าย

ขั้นแรก ใน แดชบอร์ด WordPress ของคุณ ให้ไปที่ Divi > Theme Builder และเปิด หัวข้อ Header จากนั้นคลิกที่ ไอคอนรูปเฟือง เพื่อเปิดป๊อปอัป ในส่วน ขั้นสูง คุณจะเห็นการตั้งค่าเพื่อเพิ่ม CSS ID และคลาส CSS ที่กำหนดเอง ที่นี่ ใช้สิ่งต่อไปนี้:

• CSS ID : ส่วนหัวหลัก
• CSS Class : et-fixed-header

แล้วเก็บเอาไว้ หลังจากนั้นให้บันทึกตัวสร้างและออก จากนั้นกลับไปที่ตัวเลือกตัวสร้าง Divi และบันทึกการเปลี่ยนแปลง

สิ่งต่อไปที่คุณต้องทำคือเพิ่มโค้ด CSS ลงในไซต์ มีสองตัวเลือกในการทำเช่นนี้:

• ผ่านตัวเลือกธีมของ Divi
• การใช้เครื่องมือปรับแต่ง WordPress

ลองดูทั้งสองวิธีทีละขั้นตอน

แก้ไขส่วนหัวผ่าน Theme Options

ขั้นแรก เรามาดูวิธีการเพิ่มโค้ด CSS โดยใช้ ส่วนตัวเลือกธีม ในแดชบอร์ด WordPress ของคุณ ให้ไปที่ Divi > Theme Options > Custom CSS

จากนั้นคัดลอกโค้ด CSS จากด้านล่าง

 หน้าจอ @media เท่านั้นและ (ความกว้างขั้นต่ำ: 981px){
#main-header.et-fixed-header {
ตำแหน่ง: คงที่;
    padding-top:30px;
}
#page-คอนเทนเนอร์ {
ช่องว่างภายในด้านบน:135px;
}
}

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

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

ทำให้ส่วนหัวติดด้วย WordPress Customizer

อีกวิธีหนึ่งที่รวดเร็วในการทำให้ส่วนหัว Divi ติดหนึบคือการใช้ตัวปรับแต่ง WordPress หากต้องการเปิดตัวปรับแต่ง เพียงไปที่ ลักษณะที่ ปรากฏ > ปรับแต่ง แล้วเปิด CSS เพิ่มเติม

ตอนนี้ เพียงคัดลอกและวางรหัสนี้:

 หน้าจอ @media เท่านั้นและ (ความกว้างขั้นต่ำ: 981px){
#main-header.et-fixed-header {
ตำแหน่ง: คงที่;
    padding-top:30px;
}
#page-คอนเทนเนอร์ {
ช่องว่างภายในด้านบน:135px;
}
}

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

สุดท้าย บันทึกการเปลี่ยนแปลง แค่นั้นเอง! คุณเพิ่ง แก้ไขส่วนหัวของ Divi โดยใช้ตัวปรับแต่ง WordPress

โบนัส: เปลี่ยนแปลงเมนู Divi ของคุณ

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

เปิดแล้วคุณจะเห็นตัวเลือกการปรับแต่งเฉพาะ ตัวเลือกหลักที่คุณจะเห็นบนหน้าจอนี้คือ:

• ซ่อนภาพโลโก้
• ความสูงของเมนูคงที่
• ขนาดตัวอักษร
• เมนูพื้นหลัง-สี
• สีลิงค์เมนู
• และคนอื่น ๆ

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

บทสรุป

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

1. ด้วยตัวสร้าง Divi
2. โดยการเข้ารหัส
   1. ผ่านตัวเลือกธีมของ Divi
   2. การใช้ตัวปรับแต่ง WordPress

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

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

คุณรู้วิธีอื่นในการแก้ไขส่วนหัว Divi หรือไม่? เราต้องการรับฟังความคิดเห็นจากคุณ ดังนั้นโปรดแจ้งให้เราทราบในความคิดเห็นด้านล่าง!