Cara Membuat Divi Footer Anda Lengket

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat footer di situs web Divi Anda lengket. Menggunakan sticky footer mungkin merupakan salah satu permintaan yang Anda dapatkan saat mendesain situs web untuk klien atau kebutuhan yang Anda miliki saat membuat situs web sendiri. Kami akan menunjukkan dua kemungkinan yang akan membuat footer Anda lengket. Cara pertama adalah melalui kode CSS dan yang kedua melalui kode jQuery. Kedua cara berfungsi tetapi semuanya tergantung pada yang mana yang Anda sukai untuk membuat efek lengket itu untuk situs web Anda.

Menambahkan footer lengket ke situs web Anda saat ini bukanlah sesuatu yang dapat Anda lakukan secara otomatis di dalam pembuat Divi. Itu sebabnya kami akan menunjukkan kepada Anda bagaimana mencapai hasil yang tepat yang Anda inginkan tanpa harus berusaha keras. Satu-satunya hal yang harus Anda lakukan adalah mengikuti posting ini selangkah demi selangkah, salin dan tempel beberapa baris kode dan letakkan di tempat yang tepat.

Mengapa Menggunakan Sticky Footer?

Footer lengket biasanya digunakan untuk satu alasan utama; jika Anda memiliki satu halaman atau beberapa halaman di situs web Anda yang tidak memiliki cukup konten yang tersedia untuk mengisi seluruh layar. Anda tentu saja dapat memastikan bahwa Anda memiliki konten yang cukup pada suatu halaman tetapi jika itu tidak memberikan nilai tambah pada halaman tersebut; tidak perlu melakukannya.

Sekarang, jika tidak ada cukup konten untuk mengisi seluruh layar, halaman akan memiliki footer mengambang tepat setelah konten berakhir. Itu biasanya tidak terlihat bagus dan itu bukan hasil yang Anda inginkan. Untungnya, Anda dapat menggunakan sticky footer untuk menghilangkan floating footer. Footer lengket memastikan footer tetap berada di bagian bawah halaman tanpa membuat ruang yang tidak perlu. Panjang halaman dengan demikian akan tetap sama dan setiap kali Anda menyesuaikan ukuran jendela Anda, footer akan mengubah dirinya sendiri ke layar.

Di sini Anda memiliki gambar halaman pendek yang tidak memiliki footer lengket:

Dan inilah gambar yang sama dari halaman itu setelah sticky footer ditambahkan:

Perbedaan Antara Footer Lengket dan Tetap

Tidak semua orang memutuskan untuk menggunakan footer di situs web mereka tetapi ketika mereka melakukannya; ada banyak cara untuk menatanya. Itu semua tergantung pada bagaimana struktur situs web Anda dan jika Anda ingin memasukkan footer 'manual' dan gaya berbeda yang dibuat dengan pembuat Divi sebagai gantinya.

Tetapi jika Anda menggunakan footer standar, Anda dapat memilih bagaimana Anda ingin menatanya dan bagaimana Anda ingin menempatkannya di situs web Anda. Tiga posisi utama yang dapat dimiliki footer di situs web adalah mengambang, tetap, dan lengket.

Saat membandingkan footer lengket dan tetap satu sama lain; mereka mungkin terlihat sama pada pandangan pertama tetapi sebenarnya tidak. Footer tetap selalu terlihat saat menggulir halaman di situs web Anda sedangkan footer lengket secara khusus menangani halaman yang kontennya tidak cukup panjang untuk mencapai bagian bawah layar. Dalam kasus khusus di mana kontennya tidak cukup panjang; itu akan berperilaku seperti footer tetap dan tetap menempel di bagian bawah halaman Anda; menciptakan 'efek footer tetap' itu.

Namun, jika kontennya cukup panjang, footer lengket akan berperilaku seperti biasa dan halaman akan mendorong footer ke bawah halaman untuk memastikannya tidak terus muncul di layar. Dalam kebanyakan kasus, metode ini lebih disukai daripada memiliki footer tetap di seluruh situs web karena memberikan lebih banyak ruang di jendela untuk menampilkan konten.

Buat Footer Lengket di Situs Web Divi Anda Melalui CSS

Tanpa batas waktu lebih lanjut, mari kita mulai membuat footer lengket untuk situs web Anda. Kode yang akan kita gunakan sangat sederhana tetapi menyelesaikan pekerjaan. Anda akan segera berpindah dari footer mengambang di halaman Anda ke halaman di mana footer didorong ke bawah jika kontennya tidak cukup panjang.

Tambahkan Kode CSS Melalui Pengaturan Halaman (Khususnya Untuk Satu Halaman)

Dalam kasus tertentu, Anda ingin membuat footer menempel pada satu halaman tertentu saja . Di bagian posting ini, kami akan menunjukkan kepada Anda bagaimana melakukannya dengan tepat dengan menambahkan kode CSS ke bidang CSS Kustom dari satu halaman. Dengan melakukan itu, Anda memastikan bahwa kode CSS hanya berlaku untuk satu halaman di situs web Anda. Yang juga berarti bahwa kode CSS hanya akan dimuat ketika seseorang membuka halaman tertentu. Metode ini biasanya digunakan dalam kasus di mana hanya ada beberapa halaman yang lebih pendek di situs web yang ingin Anda beri sticky footer.

Mulailah dengan membuka halaman yang Anda inginkan agar sticky footer aktif atau dengan membuat halaman baru di mana Anda ingin menerapkannya. Selanjutnya, buka pengaturan halaman dengan mengklik ikon berikut di pembuat Divi Anda:

Selanjutnya, tambahkan kode berikut ke bidang Custom CSS di jendela yang baru saja Anda buka:

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

Dari saat Anda mempratinjau halaman Anda, kode CSS harus diterapkan dan membuat footer lengket.

Tambahkan Kode CSS Melalui Penyesuai Tema (Tampilan Waktu Nyata)

Cara lain untuk menambahkan kode adalah melalui Theme Customizer. Jika Anda menambahkan kode CSS melalui cara ini, itu akan secara otomatis diterapkan ke seluruh situs web. Setiap halaman akan menerapkan kode CSS ini padanya. Dengan menambahkan kode melalui Theme Customizer, Anda juga bisa langsung melihat perubahan yang terjadi pada website Anda.

Untuk menambahkan kode CSS ke Theme Customizer, klik 'Theme Customizer' di bagian belakang situs WordPress Anda. Selanjutnya, gulir ke bawah halaman dan buka opsi CSS tambahan. Anda akan melihat semua kode CSS khusus yang Anda gunakan sejauh ini muncul. Silakan dan tambahkan kode berikut ke dalamnya:

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

Tambahkan Kode CSS Melalui Opsi Tema Divi

Last but not least, Anda juga dapat menambahkan kode melalui Opsi Tema Divi. Ini adalah cara yang paling sering digunakan untuk menambahkan kode ke situs web di mana Anda ingin seluruh situs web mendapat manfaat dari kode tersebut.

Buka Divi > Opsi Tema > Gulir ke bawah halaman > Tambahkan kode CSS berikut ke kotak CSS Kustom:

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

Buat Footer Lengket di Situs Web Divi Anda Melalui JQuery

Tambahkan Kode jQuery Melalui Modul Kode (Khusus Untuk Satu Halaman)

Anda dapat menambahkan kode jQuery dengan menggunakan Modul Kode di dalam pembuat Divi. Ini, sekali lagi, sebagian besar digunakan ketika tidak banyak halaman dengan konten pendek dan jika Anda tidak ingin memuat kode jQuery untuk seluruh situs web.

Tambahkan bagian dengan baris lebar penuh ke halaman yang sedang Anda kerjakan.

Lanjutkan dengan menambahkan modul kode ke baris lebar penuh itu dan tempel kode berikut ke dalamnya:

<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>

Tambahkan Kode jQuery Melalui Opsi Tema Divi

Kemungkinan lain untuk menambahkan kode jQuery adalah melalui Opsi Tema Divi. Saat menambahkan kode jQuery untuk seluruh situs web, ada satu tempat khusus di Opsi Tema Divi di mana kita bisa melakukannya; di <head&gt; bidang tab Integrasi. Di situlah kita akan menambahkan kode sekarang.

Buka Situs WordPress Anda > Buka Divi > Buka Opsi Tema > Buka tab Integrasi dan tambahkan kode jQuery berikut ke <head> situs web Anda:

<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>

Pikiran Akhir

Menambahkan footer lengket biasanya diperlukan jika Anda memiliki halaman dengan tidak banyak konten di dalamnya. Anda ingin menyingkirkan footer mengambang agar struktur halaman terasa lebih alami. Jika Anda memiliki komentar atau saran untuk posting mendatang di bagian blog kami; pastikan Anda meninggalkan komentar di bagian komentar di bawah agar kami dapat menghubungi!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh Vintagio / shutterstock.com