Cara Membuat Gulir Footer yang Indah Mengungkapkan Di Bawah Pembagi Bagian Divi

Sepanjang semua tren desain, footer tetap penting. Orang-orang sudah begitu terbiasa dengan mereka, yang pada gilirannya membuat mereka sangat ramah pengguna. Mereka membantu pengunjung mengatur masa inap mereka di situs web Anda dan menavigasi ke halaman yang tepat yang mereka cari. Dengan Divi, Anda dapat dengan mudah membuat semua jenis footer dalam satu bagian.

Sekarang, jika Anda ingin memberi footer Anda beberapa dimensi dan interaksi ekstra, Anda akan menyukai posting ini. Kami akan secara kreatif menggabungkan bagian footer dengan pembagi bagian untuk membuat pengungkapan gulir footer.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letaknya GRATIS

Untuk mendapatkan tata letak gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Berlangganan Saluran Youtube Kami

1. Buat Halaman Kosong Baru & Unggah Tata Letak Pilihan

Tambahkan Halaman Kosong Baru

Hal pertama yang perlu Anda lakukan adalah membuat halaman kosong baru.

Unggah Halaman Arahan Paket Tata Letak Perusahaan SaaS

Beralih ke Visual Builder dan unggah halaman arahan SaaS Company Layout Pack. Meskipun kami menggunakan tata letak khusus ini, Anda dapat membuat teknik ini bekerja pada semua jenis halaman yang sedang Anda kerjakan.

2. Tambahkan Indeks Z ke Setiap Bagian & Hapus Animasi Bagian

Tambahkan Indeks Z ke Bagian Pahlawan

Lanjutkan dengan mengubah indeks z dari bagian pahlawan di halaman.

• Indeks Z: 3

Salin Indeks Z & Tempel ke Semua Bagian Lain di Halaman

Salin indeks z dan tempel ke semua bagian lain di halaman. Meningkatkan indeks z untuk setiap bagian adalah langkah penting untuk membuat tutorial bekerja. Ini akan memungkinkan setiap bagian muncul di atas bagian footer yang akan kita tambahkan nanti di postingan.

Hapus Animasi Bagian Pahlawan

Untuk memastikan footer tetap tersembunyi hingga bagian bawah halaman, kami juga akan menghapus semua animasi bagian. Buka bagian pahlawan dan hapus animasinya.

• Gaya Animasi: Tidak Ada

Perluas Animasi ke Semua Bagian di Halaman

Perluas gaya animasi ke semua bagian di seluruh halaman.

3. Ubah Bagian Terakhir di Halaman

Ubah Warna Latar Belakang

Pindah ke bagian terakhir pada halaman dan ubah warna latar belakang.

• Warna Latar Belakang: #f2f2f2

4. Tambahkan Bagian Reguler #1 ke Bawah Halaman

Pengaturan Bagian

Warna latar belakang

Seperti yang Anda lihat di pratinjau posting ini, footer akan muncul di bawah pemisah bagian. Kami akan mendedikasikan bagian baru di bagian bawah halaman kami untuk pembagi bagian ini. Buka pengaturan bagian dan gunakan warna latar belakang yang sepenuhnya transparan. Ini akan memungkinkan footer untuk ditampilkan melalui wadah bagian, meskipun posisinya akan berada di bawahnya.

• Warna Latar Belakang: rgba(0,0,0,0)

Pembagi Atas

Pindah ke tab desain bagian dan tambahkan pembagi atas pilihan Anda.

• Gaya Pembagi: Temukan di Daftar
• Tinggi Pembagi: 250px (Desktop), 150px (Tablet), 100px (Ponsel)
• Pembagi Horizontal Ulangi: 2x

Indeks Z

Bagian baru ini juga membutuhkan peningkatan indeks z.

• Indeks Z: 3

5. Tambahkan Bagian Reguler #2 ke Bawah Halaman

Pengaturan Bagian

Warna latar belakang

Saatnya membuat bagian footer! Tambahkan bagian reguler baru lainnya ke bagian bawah halaman dan pilih warna latar belakang pilihan Anda.

• Warna Latar Belakang: #202332

Perekat

Buka tab desain dan pastikan lebarnya '100%'.

• Lebar: 100%

Jarak

Kita juga perlu meningkatkan padding bagian atas.

• Padding Atas: 500px

Indeks Z

Indeks z yang kami tetapkan ke bagian ini lebih rendah daripada bagian lain di halaman. Ini akan membantu kami menyembunyikan bagian tersebut sampai kami berada di bagian bawah halaman.

• Indeks Z: 2

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Spasi Kolom

Buka pengaturan kolom 1 berikutnya dan tambahkan beberapa padding kiri.

• Padding Kiri: 20px

Batas Kanan Kolom

Tambahkan batas kanan ke kolom juga.

• Lebar Batas Kanan: 1px
• Warna Tepi Kanan: #515151

Salin Tempel Gaya Kolom

Terapkan perubahan ke semua kolom dengan memperluas gaya atau menggunakan opsi salin-tempel.

Tambahkan Modul Gambar ke Kolom 1

Unggah Gambar

Saatnya mulai menambahkan modul! Tambahkan Modul Gambar baru ke kolom pertama dan unggah logo Anda.

Perekat

Pindah ke tab desain dan ubah lebar di berbagai ukuran layar.

• Lebar: 35% (Desktop), 30% (Tablet), 25% (Ponsel)
• Penyelarasan Modul: Kiri

Jarak

Tambahkan beberapa margin bawah juga.

• Tunjukkan Spasi Di Bawah Gambar: Ya
• Margin Bawah: 50px

Tambahkan Modul Teks #1 ke Kolom 2

Tambah isi

Ke kolom kedua! Tambahkan Modul Teks pertama dengan beberapa konten pilihan Anda.

Pengaturan Teks

Ubah pengaturan teks.

• Font Teks: Nunito Sans
• Berat Font Teks: Semi Tebal
• Warna Teks: #ffffff
• Ukuran Teks: 19px

Jarak

Dan tambahkan beberapa margin atas dan bawah khusus di berbagai ukuran layar.

• Margin Atas: 15px (Desktop & Tablet), 10px (Telepon)
• Margin Bawah: 15px (Desktop & Tablet), 10px (Telepon)

Tambahkan Modul Teks #2 ke Kolom 2

Tambah isi

Tambahkan Modul Teks kedua ke kolom kedua dan masukkan beberapa konten pilihan Anda.

Tambahkan Tautan

Tambahkan tautan yang cocok dengan item footer.

• URL Tautan Modul: #

Pengaturan Teks

Ubah pengaturan teks berikutnya.

• Font Teks: Nunito Sans
• Warna Teks: #dbdbdb
• Ukuran Teks: 17px

Jarak

Dan tambahkan beberapa bantalan atas dan bawah khusus di berbagai ukuran layar.

• Margin Atas: 15px (Desktop & Tablet), 10px (Telepon)
• Margin Bawah: 15px (Desktop & Tablet), 10px (Telepon)

Modul Teks Klon #2 Sesering yang Dibutuhkan

Kloning Modul Teks kedua di kolom 2 sebanyak yang diperlukan.

Ubah Konten

Pastikan Anda mengubah konten.

Ubah Tautan

Bersama dengan tautan.

• URL Tautan Modul: #

Modul Klon di Kolom 2 & Tempatkan di Kolom Tersisa

Setelah Anda menyelesaikan kolom kedua, Anda dapat mengkloning kedua modul sebanyak yang diperlukan dan menempatkan duplikat di dua kolom baris yang tersisa.

Ubah Konten

Ubah konten setiap duplikat.

Ubah Tautan

Bersama tautannya.

• URL Tautan Modul: #

6. Jadikan Bagian #2 Tetap di Bagian Bawah Halaman

Tambahkan CSS Khusus

Sekarang, untuk membuat pengungkapan gulir, kita akan memastikan bagian footer menempel di bagian bawah halaman kita dengan menambahkan dua baris kode CSS ke elemen utama bagian tersebut.

position: fixed;
bottom: 0;

7. Tambahkan Margin Bawah ke Bagian #1 untuk Membuat Efek Pengungkapan

Tambahkan Margin Bawah Di Berbagai Ukuran Layar

Kami juga membutuhkan ruang di bagian bawah halaman kami yang memungkinkan footer muncul. Buka bagian yang berisi pembagi bagian dan tambahkan beberapa margin bawah di berbagai ukuran layar dan selesai!

• Margin Bawah: 400px (Desktop), 700px (Tablet), 800px (Telepon)

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat scroll footer yang indah mengungkapkan pembagi bagian di bawah ini untuk menciptakan efek yang unik. Ini adalah cara yang bagus untuk membuat footer menjadi interaktif dan menarik perhatian ke item yang terdaftar di footer. Kami harap tutorial ini menginspirasi Anda untuk membuat footer pembagi bagian Anda sendiri juga! Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.