Cara Membuat Divi Footer Anda Tetap

Dalam tutorial Divi hari ini, kami akan menunjukkan cara membuat footer tetap untuk situs web Anda, bukan yang biasa. Dalam posting sebelumnya, kami menunjukkan kepada Anda cara membuatnya lengket yang sebenarnya berbeda dari membuatnya tetap, meskipun pada awalnya mungkin tampak sama. Jika Anda tidak ingin membuatnya lengket tetapi memperbaikinya, posting ini akan membantu Anda.

Menambahkan footer yang diperbaiki ke situs web Anda bisa menjadi permintaan yang Anda miliki dari salah satu klien Anda atau kebutuhan yang Anda miliki untuk situs web Anda sendiri. Meskipun tidak sering digunakan sebagai tajuk tetap, itu bisa menjadi salah satu hal yang Anda perjuangkan. Kami akan menunjukkan kepada Anda dua cara bagaimana membuat footer Anda lengket di situs web Divi Anda. Yang pertama adalah dengan menggunakan beberapa baris CSS dan yang kedua dengan menggunakan kode jQuery. Kedua cara tersebut akan membuat modifikasi CSS style sheet footer di website Anda.

Di sini Anda memiliki contoh bagaimana tampilan footer tetap saat menggulir:

Kapan Menggunakan Footer Tetap

Ada berbagai alasan mengapa Anda ingin memiliki footer tetap di situs web Anda. Salah satu alasan itu bisa jadi adalah relevansi informasi yang dipegang footer Anda. Anda dapat, misalnya, meletakkan ikon sosial Anda di footer Anda dan karena Anda ingin mendorong pengunjung yang ada di situs web Anda untuk menjelajahi saluran media sosial Anda. Alasan lain mungkin karena Anda hanya menyukai efek yang diberikannya ke situs web Anda.

Jika Anda menggunakan footer tetap, Anda harus menyadari bahwa bagian dari jendela pengunjung akan diambil sepanjang waktu. Itu berarti mereka harus menggulir lebih banyak untuk melihat konten yang sama yang akan mereka lihat jika tidak ada footer tetap. Itu merupakan tantangan karena pengunjung suka berusaha sesedikit mungkin.

Namun, jika footer Anda tidak terlalu besar, itu bisa meningkatkan jumlah tindakan yang dilakukan di footer Anda. Kami tidak menganjurkan penggunaan header tetap, menu utama, dan footer secara bersamaan. Dengan memperbaiki ketiganya, konten yang muncul akan berkurang drastis yang dapat menyebabkan rasio pentalan lebih tinggi.

Perbedaan Antara Footer Tetap dan Sticky

Sebelum memulai, kami akan menjelaskan perbedaan antara footer tetap dan footer lengket.

Catatan kaki yang lengket biasanya sedikit lebih rumit. Itu dibuat untuk berperilaku seperti footer tetap jika halaman tidak memiliki konten yang cukup untuk mendorong footer ke bagian bawah layar. Dalam kasus di mana halaman cukup panjang, footer akan berperilaku seperti biasa dan akan didorong ke bawah hingga bagian bawah halaman, sehingga bukan layar.

Ayo Mulai

Berlangganan Saluran Youtube Kami

Kami akan segera memulai dengan menunjukkan cara menambahkan footer tetap ke situs web Anda dengan dua cara; melalui kode CSS dan melalui kode jQuery. Kedua metode berfungsi tetapi semuanya tergantung pada mana yang Anda sukai untuk digunakan untuk situs web yang Anda butuhkan.

Tambahkan Footer Tetap Melalui CSS

Cara pertama dan termudah untuk membuat footer tetap adalah dengan menambahkan beberapa baris CSS. Dengan Divi Builder dan WordPress, kita dapat menambahkan baris ini di tempat yang berbeda. Mari kita lihat mereka.

Tambahkan Kode CSS Melalui CSS Kustom Untuk Satu Halaman

Cara pertama untuk menambahkan kode CSS adalah dengan menambahkannya ke satu halaman tertentu. Meskipun lebih baik untuk membuat footer tetap sama untuk setiap halaman di situs web Anda (agar konsistensi itu di situs web Anda), Anda dapat memilih untuk membiarkannya berlaku untuk satu halaman tertentu juga.

Buka halaman yang ingin Anda tambahkan baris kode CSS dan klik tombol Divi Builder berikut.

Gulir ke bawah dan tambahkan kode berikut ke bidang CSS Kustom:

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

Tambahkan Kode CSS Melalui Penyesuai Tema

Cara lain untuk menambahkan kode adalah melalui Theme Customizer. Dengan menggunakan Theme Customizer, Anda akan melihat hasilnya terjadi secara real-time di situs web Anda. Kode yang Anda tambahkan melalui Penyesuai Tema berlaku untuk semua halaman di situs web Anda.

Buka Pengoptimal Tema di situs web Anda > CSS Tambahan > Tempelkan baris kode CSS berikut:

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

Tambahkan Kode CSS Melalui Opsi Tema

Cara terakhir untuk menambahkan kode CSS ke situs web Anda adalah melalui Opsi Tema. Saat Anda menambahkan kode Anda di bidang CSS Kustom pada Opsi Tema, kode tersebut juga akan berlaku untuk seluruh situs web. Ini adalah cara yang paling sering digunakan untuk menambahkan kode CSS khusus ke seluruh situs web Divi Anda.

Buka Divi > Opsi Tema > Umum > Gulir ke bawah dan tambahkan kode berikut ke bidang CSS Kustom:

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

Tambahkan Footer Tetap Melalui jQuery

Kemungkinan lain yang kami miliki adalah membuat perubahan CSS melalui beberapa baris kode jQuery. Saat Anda menggunakan footer tetap, Anda biasanya ingin memastikan itu berlaku untuk semua halaman di situs web Anda. Konsistensi semacam itu memudahkan pengunjung Anda untuk menavigasi situs web Anda tanpa menjadi bingung.

Tambahkan Kode jQuery Melalui Modul Kode Khusus Untuk Satu Halaman

Buka halaman tempat Anda ingin footer tetap diterapkan dan tambahkan bagian standar baru ke bagian atas halaman Anda. Selanjutnya, pilih baris lebar penuh dan tambahkan Modul Kode ke dalamnya. Buka Modul Kode dan lewati kode jQuery berikut di Kotak Konten:

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

Dengan menambahkan kode jQuery melalui Modul Kode pada satu halaman tertentu, kode tersebut hanya akan berlaku untuk halaman tersebut. Sisa situs web Anda akan memiliki footer normal sedangkan yang Anda gunakan Modul Kode akan memiliki footer tetap.

Tambahkan Kode jQuery Melalui Opsi Tema

Opsi terakhir untuk menambahkan kode jQuery yang membuat footer Anda tetap adalah melalui Opsi Tema. Baris kode akan segera diterapkan ke seluruh situs web Anda dan akan menawarkan konsistensi yang dibutuhkan situs web Anda.

Buka Divi > Opsi Tema > Integrasi > Dan rekatkan baris kode berikut di <head> situs web Anda:

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

Pikiran Akhir

Kami menunjukkan cara membuat footer lengket di salah satu posting sebelumnya. Posting ini secara khusus menangani cara membuat footer tetap untuk situs web Anda. Footer tetap akan selalu berada di bagian bawah layar pengunjung saat mengunjungi situs web Anda. Jika Anda memiliki pertanyaan atau saran, 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 Zeeker2526 / shutterstock.com