Cara Menambahkan Desain Latar Belakang Kreatif ke Bilah Footer Bawah Divi

Bilah footer bawah Divi adalah bagian kecil namun signifikan dari situs web Anda. Dan dengan tata letak halaman tertentu, mungkin ada kebutuhan untuk menambahkan sentuhan akhir yang kreatif ke bilah bawah itu.

Dalam tutorial ini, saya akan menunjukkan cara menambahkan desain latar belakang kustom untuk bilah footer bawah Divi. Dengan menghapus warna latar belakang default dari bilah footer bawah dan menambahkan beberapa margin khusus ke bagian, Anda dapat memanfaatkan pengaturan desain bagian untuk membuat desain latar belakang yang keren.

Mari kita mulai.

Sebuah Sneak Peek

Berikut adalah cuplikan beberapa contoh desain yang dapat Anda buat dengan tutorial ini.

Menyesuaikan Bilah Footer Bawah di Penyesuai Tema

Sebelum kita dapat menambahkan latar belakang khusus di belakang bilah footer bawah kita, kita perlu menyingkirkan warna latar belakang default yang digunakan.

Buka penyesuai tema dan navigasikan ke Footer > Bilah Bawah. Kemudian ubah warna latar belakang menjadi benar-benar transparan.

Anda mungkin tidak melihat banyak perubahan dalam pratinjau karena masih ada warna latar belakang footer di belakang bilah bawah. Warna latar belakang footer dapat diubah di bawah Footer > Layout, tetapi sebaiknya biarkan warna latar belakang tersebut aktif sebagai fallback. Latar belakang khusus akan ditambahkan ke bilah bawah menggunakan bagian berdasarkan halaman demi halaman. Jadi memiliki latar belakang ini akan memastikan konten bilah bawah Anda memiliki latar belakang pada halaman yang tidak memiliki latar belakang khusus.

Anda juga dapat mengubah warna teks bilah bawah dan warna ikon sosial menjadi putih jika Anda berencana untuk memiliki desain latar belakang yang lebih gelap. Ini akan memastikan konten lebih mudah dibaca.

Membuat Desain Latar Belakang Bagian untuk Bilah Bawah

Sekarang setelah bilah bawah footer memiliki latar belakang transparan, kami siap untuk mendesain latar belakang bagian kami dan memposisikannya di belakang bilah.

Jika Anda belum melakukannya, buat halaman baru dan pilih "Bangun dari Awal". Kemudian masukkan tata letak satu kolom untuk baris bagian.

Tidak perlu menambahkan modul ke baris karena kita hanya membutuhkan bagian dan baris untuk desain latar belakang.

Selanjutnya, buka pengaturan baris dan tambahkan beberapa spasi sebagai berikut:

Margin Kustom: 0px Atas, 0px Bawah
Padding Kustom (desktop): 80px Atas, 80px Bawah
Padding Kustom (tablet): 100px Atas, 100px Bawah

Jarak ini diperlukan untuk memberikan ketinggian pada bagian kita sambil mempertahankan ruang yang dibutuhkan untuk pembagi bagian yang akan kita tambahkan untuk desain latar belakang kita.

Sekarang, buka pengaturan bagian dan perbarui spasi sebagai berikut:

Margin Kustom (desktop): -55px Bawah
Margin Kustom (tablet): -94px Bawah
Padding Kustom: 0px Atas, 0px Bawah

Margin bawah -55px menarik bilah bawah ke area bagian sehingga desain apa pun yang kami tambahkan ke bagian kami akan berada di belakang bilah bawah kami. Bilah bawah secara default adalah 54px tinggi di desktop dan sekitar 94px tinggi di tablet sehingga Anda memerlukan margin negatif yang lebih besar untuk tablet.

Menyingkirkan padding atas dan bawah memaksimalkan ruang yang dibutuhkan untuk pembagi bagian yang akan kita tambahkan nanti.

Menambahkan pembagi bawah

Selanjutnya, tambahkan pembagi bawah ke bagian untuk membingkai konten footer Anda sebagai berikut:

Gaya Pembagi Bawah: lihat tangkapan layar
Warna pembagi: #121212
Tinggi Pembagi: 120 piksel (desktop), 150 piksel (tablet), 150 piksel (ponsel pintar)
Pembagi Horizontal Ulangi: 0.9x (desktop), 0.5x (tablet), 0.5x (smartphone)
Pembagi Balik: vertikal

Saat ini, konten bilah bawah (teks dan ikon sosial) disembunyikan di balik pembagi meskipun pengaturan pembagi diatur ke konten bagian bawah. Ini karena footer bawah secara teknis bukan bagian dari konten bagian. Untuk memperbaikinya, kita perlu menambahkan indeks-z khusus ke bagian kita sehingga berada di belakang footer bawah.

Di bawah tab lanjutan, tambahkan cuplikan CSS khusus berikut ke Elemen Utama:

z-index: 0;

Sekarang konten bilah footer Anda akan berada di atas bagian Anda dan Anda memiliki desain latar belakang yang bagus yang membingkai bilah footer Anda.

Dan itu akan menyesuaikan dengan baik di ponsel juga.

Dengan struktur dasar ini, Anda memiliki desain bagian yang bagus untuk dibangun. Dengan mengingat hal itu, lanjutkan dan simpan bagian ini ke perpustakaan Anda sehingga Anda dapat menggunakan struktur ini sebagai titik awal untuk menjelajahi desain sekarang.

Sekarang Anda siap untuk menjelajahi desain baru. Anda dapat mengubah pembagi bawah ke gaya dan warna yang berbeda untuk membuat desain bingkai latar belakang yang tak terhitung jumlahnya. Anda mungkin perlu menambahkan penyesuaian tinggi pembagi dan nilai pengulangan horizontal tergantung pada gaya pembagi yang Anda pilih.

Berikut adalah beberapa contoh.

Menggunakan Pembagi Atas dengan Gradien Latar Belakang Kustom

Menggunakan pembagi bawah tunggal sebagai desain bingkai latar belakang Anda untuk footer bawah Anda agak membatasi. Tetapi jika Anda menggunakan pembagi atas sebagai desain bingkai Anda, Anda dapat menggunakan gradien latar belakang khusus untuk bagian Anda. Ini akan membuka pintu baru untuk dijelajahi.

Buka pengaturan bagian Anda dan atur gaya pembagi bawah Anda menjadi tidak ada. Kemudian tambahkan gradien latar belakang sebagai latar belakang bagian Anda.

Sekarang Anda dapat menambahkan gaya pembagi teratas ke bagian Anda untuk menciptakan tampilan baru.

Berikut adalah beberapa contoh desain yang mungkin hanya dengan mengubah latar belakang gradien dan gaya pembagi.

Menggabungkan Pembagi dengan Gradien Latar Belakang untuk Desain Bingkai Perbatasan Warna-warni

Sekarang saatnya untuk meningkatkannya. Ingat, ada banyak kemungkinan untuk membuat desain latar belakang yang unik dalam bagian dan baris. Jadi untuk contoh terakhir ini, saya akan menunjukkan cara menggabungkan fitur-fitur ini untuk membuat desain yang benar-benar unik.

Untuk memulai desain ini, lanjutkan dan gunakan bagian yang Anda simpan ke perpustakaan Anda dengan mengklik untuk menambahkan bagian baru di pembuat visual, memilih tambahkan dari tab perpustakaan, dan memilih tata letak bagian.

Setelah bagian telah ditambahkan ke halaman, kami siap untuk menyesuaikan.

Sebagai permulaan, buka pengaturan bagian dan perbarui yang berikut:

Warna Kiri Gradien Latar Belakang: #29c4a9
Warna Kiri Gradien Latar Belakang: #2b87da

Arah Gradien: 90 derajat
Posisi awal: 50%
Posisi akhir: 0%

Sekarang tambahkan pembagi atas sebagai berikut:

Gaya Pembagi Atas: lihat tangkapan layar
Warna pembagi: #ffffff
Tinggi Pembagi: 120 piksel (desktop), 150 piksel (tablet), 150 piksel (ponsel pintar)
Pembagi Horizontal Ulangi: 0.9x (desktop), 0.5x (tablet), 0.5x (smartphone)
Pembagi Balik: vertikal

Pengaturan Pembagi ini sepenuhnya mencerminkan pembagi bawah sehingga menciptakan batas yang mengelilingi pembagi bawah. Karena pembagi itu sendiri berwarna putih, ini meninggalkan kesan bahwa gradien latar belakang adalah perpanjangan dari pembagi bawah.

Sekarang buka pengaturan baris dan tambahkan gradien latar belakang sebagai berikut:

Warna Kiri Gradien Latar Belakang: #df52ff
Warna Kiri Gradien Latar Belakang: #2b87da

Arah Gradien: 90 derajat
Posisi awal: 50%
Posisi akhir: 0%

Untuk menyamakan lebar setiap segmen warna untuk latar belakang Anda, berikan lebar kustom sebesar 50% pada baris.

Berikut adalah desain akhir!

Pikiran Akhir

Memiliki desain latar belakang khusus untuk bilah footer bawah Divi dapat menjadi tambahan yang menyegarkan untuk halaman Anda. Yang diperlukan hanyalah beberapa penyesuaian pada bagian yang ada di bagian bawah halaman. Sayangnya, desainnya terbatas pada satu halaman dan tidak dapat diterapkan di seluruh situs. Itulah mengapa warna background footer digunakan sebagai fallback. Tetapi begitu Anda menyimpan bagian tersebut ke perpustakaan Anda, Anda dapat dengan mudah memasukkannya ke halaman mana pun yang Anda inginkan. Anda bahkan dapat menambahkan ke salah satu tata letak siap pakai kami untuk digunakan dalam proyek Anda berikutnya. Yang perlu Anda lakukan adalah memastikan Anda menambahkan bagian tersebut ke bagian paling bawah halaman Anda. Semoga bermanfaat!

Juga, Anda mungkin tertarik untuk membingkai menu navigasi Anda menggunakan teknik serupa.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!