วิธีทำให้ Divi Footer Sticky ของคุณ

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

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

ทำไมต้องใช้ Sticky Footer?

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

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

คุณมีรูปภาพของหน้าสั้นๆ ที่ไม่มีส่วนท้ายแบบติดหนึบ:

และนี่คือภาพเดียวกันของหน้านั้นหลังจากเพิ่มส่วนท้ายแบบติดหนึบแล้ว:

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

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

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

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

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

สร้าง Sticky Footer บนเว็บไซต์ Divi ของคุณผ่าน CSS

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

เพิ่มโค้ด CSS ผ่านการตั้งค่าเพจ (สำหรับหนึ่งเพจโดยเฉพาะ)

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

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

ดำเนินการต่อ เพิ่มโค้ดต่อไปนี้ลงในฟิลด์ CSS ที่กำหนดเองในหน้าต่างที่คุณเพิ่งเปิด:

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

จากช่วงเวลาที่คุณดูตัวอย่างหน้าของคุณ โค้ด CSS ควรใช้และทำให้ส่วนท้ายมีความเหนียว

เพิ่มโค้ด CSS ผ่านเครื่องมือปรับแต่งธีม (มุมมองแบบเรียลไทม์)

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

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

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

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

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

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

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

สร้าง Sticky Footer บนเว็บไซต์ Divi ของคุณผ่าน JQuery

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

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

เพิ่มส่วนที่มีแถวเต็มความกว้างในหน้าที่คุณกำลังทำงานอยู่

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

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

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

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

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

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

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

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

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

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