วิธีแก้ไขส่วนท้าย Divi ของคุณ

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

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

ต่อไปนี้คือตัวอย่างลักษณะของส่วนท้ายคงที่เมื่อเลื่อนดู:

เมื่อใดควรใช้ส่วนท้ายคงที่

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

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

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

ความแตกต่างระหว่างส่วนท้ายแบบคงที่และแบบติดหนึบ

ก่อนที่เราจะเริ่มต้น เราจะอธิบายความแตกต่างระหว่างส่วนท้ายแบบตายตัวกับส่วนท้ายแบบติดหนึบ

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

มาเริ่มกันเลย

สมัครสมาชิกช่อง Youtube ของเรา

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

เพิ่มส่วนท้ายคงที่ผ่าน CSS

วิธีแรกและง่ายที่สุดในการสร้างส่วนท้ายคงที่คือการเพิ่มบรรทัด CSS ด้วย Divi Builder และ WordPress เราสามารถเพิ่มบรรทัดเหล่านี้ในที่ต่างๆ ได้ ลองมาดูที่พวกเขา

เพิ่มโค้ด CSS ผ่าน CSS ที่กำหนดเองสำหรับหนึ่งเพจ

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

เปิดหน้าที่คุณต้องการเพิ่มบรรทัดโค้ด CSS และคลิกที่ปุ่มต่อไปนี้ของ Divi Builder

เลื่อนลงและเพิ่มโค้ดต่อไปนี้ลงในฟิลด์ CSS ที่กำหนดเอง:

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

เพิ่มโค้ด CSS ผ่านเครื่องมือปรับแต่งธีม

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

ไปที่ Theme Optimizer บนเว็บไซต์ของคุณ > CSS เพิ่มเติม > วางโค้ด CSS ต่อไปนี้:

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

เพิ่มโค้ด CSS ผ่านตัวเลือกธีม

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

ไปที่ Divi > ตัวเลือกธีม > ทั่วไป > เลื่อนลงและเพิ่มโค้ดต่อไปนี้ลงในฟิลด์ CSS ที่กำหนดเอง:

#main-footer{ 
position: fixed; 
bottom: 0; 
width: 100%; 
}

เพิ่มส่วนท้ายคงที่ผ่าน jQuery

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

เพิ่มรหัส jQuery ผ่านโมดูลรหัสสำหรับหนึ่งหน้าโดยเฉพาะ

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

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

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

เพิ่มรหัส jQuery ผ่านตัวเลือกธีม

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

ไปที่ Divi > ตัวเลือกธีม > การรวม > และวางโค้ดต่อไปนี้ใน <head> ของเว็บไซต์ของคุณ:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

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

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

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

ภาพเด่นโดย Zeeker2526 / shutterstock.com