Apakah Anda ingin membuat footer lengket dengan DIVI yang sepenuhnya terbuka saat menggulir ke bawah?
Menambahkan footer lengket ke . Anda situs jaringan dapat membawa sedikit sentuhan ekstra yang Anda cari untuk Anda situs jaringan. Efek "Reveal", yang memungkinkan footer terungkap saat menggulir ke bawah, akan memberikan desain yang sangat menawan ke halaman web Anda.
Biasanya efek ini membutuhkan CSS khusus yang terbatas dan sulit digunakan. Namun berkat DIVI, Anda dapat dengan mudah mencapainya.
Dalam tutorial ini, kami akan menunjukkan cara membuat efek Reveal pada sticky footer Anda. Yang diperlukan hanyalah beberapa langkah mudah.
Mari kita mulai!
penelitian
Berikut adalah ikhtisar singkat dari sticky footer dengan efek Reveal yang akan kita buat dalam tutorial ini.
Buat template footer baru
Kunjungan Divi >> Pembuat Tema dari dasbor WordPress.
Di sana, klik "Tambahkan catatan kaki global"
Lalu pilih "Membangun Footer Global"
Dalam tutorial ini, kami akan menggunakan tata letak yang telah dibuat sebelumnya untuk mempercepat proses pembuatan, tetapi Anda juga dapat melakukannya dari awal. Untuk melakukannya, klik "Muat dari Perpustakaan".
Di bawah jendela pop-up Muat dari Perpustakaan, temukan dan gunakan tata letak " Marina Tentang Halaman » dari paket tata letak Marina.
Setelah tata letak dimuat, hapus semua bagian kecuali bagian footer. Kami akan menggunakan bagian footer ini untuk menambahkan efek Reveal.
Tambahkan efek Reveal dan buat footer lengket
Buat footer lengket
Lihat juga: Bagaimana cara membuat menu geser dan dorong di DIVI?
Pertama, kita perlu membuat footer lengket. Untuk melakukan ini, buka pengaturan bagian dan klik tab maju. Dibawah "Efek Gulir", ubah pengaturan sebagai berikut:
- Posisi Lengket: Menempel ke Bawah
Perbarui indeks Z untuk status lengket
Selanjutnya, kita perlu memberi bagian footer kita indeks-z 0 ketika bagian tersebut dalam keadaan lengket. Ini akan memungkinkan bagian untuk tetap berada di belakang bagian atau elemen lain di badan halaman saat menggulir.
Untuk melakukannya, perbarui posisi Z Index dengan mengklik ikon tempel di sebelah opsi Z Index. Kemudian perbarui indeks Z ke 0.
- Indeks Z (lengket): 0
Perbarui indeks Z placeholder footer lengket
Ketika sebuah elemen diberi posisi lengket di Divi, elemen placeholder duplikat juga dibuat secara otomatis. Ini menyediakan fungsionalitas yang diperlukan untuk memposisikan dan mendesain elemen lengket menggunakan Divi Builder.
Lihat juga: Cara Membuat Header Global dengan Pembuat Tema Divi
Dalam kasus ini, placeholder bagian footer dibuat dengan indeks-z default 1. Kami tidak ingin bagian sticky footer kami yang sebenarnya (sekarang dengan indeks-Z 0) di belakang bagian placeholder, jadi kami perlu memperbarui Z indeks placeholder ke -1.
Untuk melakukan ini, pertama-tama tambahkan kelas CSS khusus ke bagian footer sebagai berikut:
- Kelas CSS: sticky-footer-reveal
Kemudian buka pengaturan halaman menggunakan menu pengaturan dari Pembuat Tema.
Pergi ke " Canggih " dan masukkan CSS berikut di dalam kotak Sesuaikan CSS :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
Ini akan memaksa bagian placeholder untuk tetap berada di belakang sticky footer.
Simpan Perubahan
Setelah selesai, simpan perubahan yang dibuat pada template footer.
Simpan juga perubahan Divi Theme Builder.
Hasil akhir
Untuk melihat hasil akhir, lihat halaman dan gulir.
Unduh DIVI sekarang!!!
Kesimpulan
Di Divi, menambahkan footer lengket ke file Anda situs jaringan tidak memerlukan plugin atau custom CSS yang rumit. Menggunakan konstruktor tema, Anda dapat dengan mudah membuat template footer dengan Mengungkapkan efek dalam beberapa menit.
Mudah-mudahan ini akan memberi dorongan halus pada desain footer Anda dengan interaksi yang menarik pengunjung akan menghargai. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Lihat juga sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
