Cara Membuat Reveal Footer dengan Divi

Dalam tutorial Divi hari ini, kami akan menunjukkan kepada Anda bagaimana mencapai efek tertentu yang mungkin tidak pernah Anda pikirkan untuk diintegrasikan ke dalam situs web Anda sendiri atau klien. Lebih tepatnya; kami akan menunjukkan cara membuat pengungkapan footer. Pengungkapan footer pada dasarnya menunggu sampai Anda berada di akhir halaman dan mengungkapkan footer sesuai dengan cara Anda menggulir. Setelah Anda menggulir seluruh halaman, footer akan ditampilkan dalam bentuk aslinya.

Menambahkan pengungkapan footer ke situs web Anda dapat memberikan sedikit sentuhan ekstra yang ingin Anda berikan ke footer situs web Anda. Ini juga merupakan hal terakhir yang akan dilihat orang ketika mereka menelusuri halaman mana pun di situs web Anda. Untuk menunjukkan kepada Anda apa sebenarnya yang kami maksud dengan pengungkapan footer, mari kita lihat hasil akhirnya:

Anda dapat melihat bahwa, selain membuat footer terbuka, kami juga menambahkan beberapa bayangan halus ke konten utama situs web kami. Dengan melakukan itu, kami telah membuat semacam perspektif antara konten utama dan footer.

Cara Membuat Reveal Footer dengan Divi

Berlangganan Saluran Youtube Kami

Tambahkan Kode CSS yang Dibutuhkan

Untuk mencapai hasil pengungkapan footer, pertama-tama kita membutuhkan beberapa baris kode CSS. Karena ada berbagai cara untuk menambahkan kode CSS ke situs web Divi Anda, kami akan menunjukkan kepada Anda ketiganya. Pertama, kami akan menunjukkan cara menambahkan kode ke Opsi Tema. Kedua, kita akan menambahkan kode melalui Theme Customizer. Dengan menambahkan kode melalui salah satu dari dua metode, pengungkapan footer Anda akan segera diterapkan ke seluruh situs web. Di sisi lain, jika Anda ingin membuat kode tersebut berlaku untuk satu halaman tertentu, Anda juga dapat melakukannya. Dengan menunjukkan cara menambahkan kode ke halaman yang sedang Anda kerjakan, Anda dapat membuat efek itu untuk satu halaman secara eksklusif.

Dua hal utama yang kita perlukan dalam kode kita adalah indeks-z dan margin bawah untuk konten utama. Untuk memastikan footer pas dengan sempurna, kita perlu mengetahui ketinggian footer. Secara standar, footer yang digunakan memiliki nilai 53px. Tapi, bisa jadi Anda sudah mengubah ketinggiannya sesuai dengan kebutuhan Anda. Setelah menunjukkan cara menambahkan pengungkapan footer secara standar, kami juga akan menunjukkan cara menyesuaikannya dengan ketinggian footer apa pun.

Tambahkan Kode CSS yang Dibutuhkan Melalui Opsi Tema

Cara pertama kami akan menunjukkan cara menambahkan kode CSS adalah melalui Opsi Tema Divi. Ini adalah metode yang paling sering digunakan untuk menambahkan kode CSS tambahan ke situs web Anda. Dengan menambahkan kode CSS di area ini, Anda akan segera menerapkannya ke seluruh situs web.

Untuk menambahkan kode, buka Dasbor WordPress > Divi > Opsi Tema > Dan salin tempel baris kode CSS berikut di bidang CSS Khusus di bagian bawah tab:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Setelah Anda menambahkan kode, buka situs web Anda dan lihat footer mengungkapkan melakukan tugasnya.

Tambahkan Kode CSS yang Dibutuhkan Melalui Penyesuai Tema

Cara lain untuk menambahkan kode CSS ke situs web Divi Anda adalah melalui Penyesuai Tema. Menambahkan kode melalui Theme Customizer atau Theme Options adalah sama. Setelah Anda menghapus kode di dalam Opsi Tema, kode itu juga akan dihapus di Penyesuai Tema dan sebaliknya. Salah satu keuntungan menambahkan kode melalui Theme Customizer adalah Anda dapat melihat semuanya terjadi secara real time. Penyesuaian tambahan yang Anda buat pada kode akan segera memberi Anda gambaran yang jelas tentang hasil akhir yang akan Anda peroleh.

Untuk menambahkan kode ke Penyesuai Tema, buka Dasbor WordPress > Tampilan > Kustomisasi > Gulir ke bawah ke 'CSS Tambahan' > Dan tambahkan baris kode CSS berikut:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Tambahkan Kode CSS yang Dibutuhkan Ke Satu Halaman Saja

Cara terakhir untuk menambahkan footer mengungkapkan baris kode CSS adalah dengan menambahkannya ke satu halaman tertentu. Ini bisa menarik jika Anda ingin memberi nilai tambah pada halaman yang kontennya kurang berinteraksi, misalnya. Dengan menambahkan pengungkapan footer, Anda entah bagaimana masih akan membuat halaman sedikit lebih interaktif dan Anda akan memusatkan perhatian pada konten yang disediakan di footer, seperti ikon media sosial.

Untuk menambahkan kode CSS ke satu halaman tertentu, buka halaman tertentu itu. Di sudut kanan atas Divi Builder pada halaman itu, Anda akan melihat ikon berikut.

Klik pada ikon dan rekatkan baris kode berikut di bidang CSS Kustom:

#main-content { 
margin-bottom: 53px;
z-index: 2;
} 
#main-footer { 
width: 100%; 
position: fixed; 
left: 0; 
bottom: 0; 
z-index: -1; 
}

Setelah Anda menyimpan pengaturan, Anda akan melihat pengungkapan footer muncul di halaman itu secara khusus.

Ubah Tinggi Footer

Sekarang, metode yang kami jelaskan di atas, hanya menghitung footer standar yang disediakan. Setelah Anda berurusan dengan ketinggian lain, kode tidak akan melakukan tugasnya dengan benar. Kami telah mempertimbangkannya dan kami akan menunjukkan cara membuat footer terbuka untuk ketinggian lain juga.

Kapan saja, Anda dapat memilih ketinggian yang ingin Anda tetapkan untuk footer Anda. Kita harus mengatur tinggi untuk dua ID CSS: footer utama dan footer bawah. Dengan menyesuaikan ketinggian di dua tempat ini, footer akan pas di tempatnya. Tentu saja, setelah Anda selesai melakukannya, Anda juga harus mengubah margin bawah konten utama Anda. Jika Anda menginginkan footer yang memiliki tinggi 60px, misalnya, Anda memerlukan baris kode berikut:

#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

Anda dapat melihat bahwa ada tiga tempat di mana kami membutuhkan nilai '60px'. Jika Anda memiliki nilai tinggi lain yang ingin Anda tetapkan ke footer Anda, pastikan Anda mengubahnya di ketiga tempat; isi utama, footer utama dan footer bawah.

Tambahkan Bayangan Kotak CSS

Hal lain yang dapat Anda lakukan untuk menambahkan sedikit perspektif dan interaksi ke situs web Anda adalah menambahkan beberapa bayangan kotak ke konten utama. Footer sudah menunjukkan bahwa itu terletak 'di bawah' konten utama. Setelah Anda menambahkan bayangan kotak, Anda akan menekankannya. Dengan memiliki bayangan, jarak ilusi ketinggian antara konten utama dan footer akan tampak lebih besar.

Untuk menambahkan bayangan kotak ke tampilan footer Anda, gunakan baris kode berikut:

#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

Itu dia! Pengungkapan footer Anda sekarang seharusnya berfungsi dengan baik.

Pikiran Akhir

Dalam posting hari ini, kami menunjukkan kepada Anda bagaimana Anda dapat membuat efek pengungkapan footer di situs web Anda. Pastikan Anda menggunakan kode CSS khusus yang disediakan untuk membuat efek dan memastikan bahwa itu sesuai dengan ketinggian footer Anda. Jika Anda ingin memberikan perspektif tambahan itu, kami sarankan untuk menambahkan bayangan kotak ke konten utama seperti yang ditunjukkan pada langkah di atas. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah!

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 Demja / shutterstock.com