Cara Membuat Bilah Footer Seluler Tetap dengan Divi

Kami tahu betapa pentingnya untuk memastikan semuanya disesuaikan agar sesuai dengan pengalaman seluler. Untuk membantu Anda membawa pengalaman seluler ke tingkat yang lebih tinggi, kami akan menunjukkan kepada Anda cara membuat bilah footer seluler tetap dengan Divi di pos langkah demi langkah ini.

Tutorial ini adalah bagian dari inisiatif desain Divi kami yang sedang berlangsung di mana kami mencoba untuk menempatkan sesuatu yang ekstra di kotak peralatan desain Anda setiap minggu. Kali ini, kita akan menggunakan Paket Tata Letak Klinik Kesehatan dan membuat bilah footer seluler tetap sesuai dengan gaya paket tata letak. Namun, Anda akan dapat menggunakan pendekatan ini untuk semua jenis desain yang sedang Anda kerjakan dan membuat alternatif footer bar seluler tetap Anda sendiri.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas tiga contoh yang akan kita buat ulang langkah demi langkah. Contoh-contoh ini hanya akan muncul di ponsel (dan tablet jika Anda mau).

Buat Ulang Contoh #1

Tambahkan Bagian Baru ke Bawah Halaman

Mari mulai membuat ulang bilah footer seluler tetap pertama! Kami menyarankan untuk membuat halaman untuk tiga tata letak yang disertakan dalam Paket Tata Letak Klinik Kesehatan. Satu untuk setiap contoh. Buka halaman mana pun yang ingin Anda tambahkan bilah footer pertama. Gulir ke bawah ke akhir halaman dan tambahkan bagian baru tepat setelah yang terakhir.

Jarak

Buka pengaturan baris dan hapus semua bantalan atas dan bawah khusus dalam pengaturan spasi.

• Padding Atas: 0px
• Padding Bawah: 0px

Visibilitas

Kami juga menyembunyikan bagian ini di desktop. Jika Anda ingin bilah footer seluler hanya muncul di seluler, lanjutkan dan sembunyikan bagian di tablet juga.

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Hapus semua padding atas dan bawah default dari baris berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

CSS khusus

Terakhir, kami menambahkan beberapa baris CSS khusus ke baris. Garis-garis ini akan membantu mengubah baris menjadi bilah footer tetap.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Modul pertama yang kita butuhkan adalah Modul Teks di kolom 1. Tambahkan beberapa konten pilihan.

Warna latar belakang

Buka pengaturan latar belakang modul dan ubah warna latar belakang.

• Warna Latar Belakang: #5e89fb

Pengaturan Teks

Ubah juga pengaturan teks.

• Font Teks: Work Sans
• Berat Font Teks: Ringan
• Warna Teks: #ffffff
• Ukuran Teks: 16px
• Spasi Huruf Teks: -1px

Jarak

Tambahkan beberapa nilai padding kustom berikutnya.

• Padding Atas: 16px
• Padding Bawah: 16px
• Padding Kiri: 15px
• Padding Kanan: 15px

Berbatasan

Dan beberapa sudut membulat juga.

• Kiri Atas: 10px
• Kanan Atas: 10px

Bayangan Kotak

Selesaikan pengaturan modul dengan menambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 80px

Tambahkan Modul Blurb ke Kolom 2

Tambah isi

Tambahkan Modul Blurb ke kolom kedua dan tambahkan judul pilihan.

Pilih Ikon

Lanjutkan dengan memilih ikon untuk Modul Blurb.

Warna latar belakang

Tambahkan warna latar belakang ke modul juga.

• Warna Latar Belakang: #62de9d

Pengaturan Ikon

Pindah ke tab desain dan ubah pengaturan ikon.

• Warna Ikon: #ffffff
• Penempatan Ikon: Kiri
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 19px

Pengaturan Teks Judul

Lanjutkan dengan mengubah pengaturan teks judul.

• Judul Font: Work Sans
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 16px
• Spasi Huruf Judul: -1px

Jarak

Tambahkan beberapa bantalan khusus ke modul juga.

• Padding Atas: 20px
• Padding Bawah: 10px
• Padding Kiri: 30px
• Padding Kanan: 30px

Berbatasan

Dan tambahkan '10px' ke pojok kiri atas dan kanan atas.

• Kiri Atas: 10px
• Kanan Atas: 10px

Bayangan Kotak

Terakhir, tambahkan bayangan kotak halus ke modul.

• Kekuatan Buram Bayangan Kotak: 80px

Buat Ulang Contoh #2

Tambahkan Bagian Baru ke Bawah Halaman

Ke contoh kedua! Sekali lagi, buka halaman pilihan Anda, gulir ke bawah ke akhir halaman dan tambahkan bagian baru.

Jarak

Buka pengaturan bagian dan hapus padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Visibilitas

Sembunyikan bagian di desktop (dan tablet jika Anda mau).

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Hapus padding atas dan bawah default dari baris juga.

• Padding Atas: 0px
• Padding Bawah: 0px

CSS khusus

Tambahkan beberapa baris css khusus ke baris berikutnya. Baris kode CSS ini akan membantu membuat bilah footer seluler tetap.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Lanjutkan dengan menambahkan Modul Blurb ke kolom pertama. Tambahkan judul pilihan.

Pilih Ikon

Kemudian, pilih salah satu ikon.

Warna latar belakang

Tambahkan warna latar belakang ke modul berikutnya.

• Warna Latar Belakang: #62de9d

Pengaturan Ikon

Pindah ke tab desain dan ubah pengaturan ikon modul.

• Warna Ikon: #ffffff
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 25px

Pengaturan Teks Judul

Ubah juga pengaturan teks judul.

• Judul Font: Work Sans
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #ffffff
• Spasi Huruf Judul: -1px

Jarak

Dan tambahkan beberapa bantalan atas dan bawah untuk memberi modul ruang untuk bernafas.

• Padding Atas: 30px
• Padding Bawah: 30px

Berbatasan

Kami juga menambahkan '15px' ke batas kiri atas modul.

• Kiri Atas: 15px

Bayangan Kotak

Dan kita akan melengkapi modul dengan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 80px

Clone Blurb Module Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda selesai memodifikasi Modul Blurb pertama, Anda dapat melanjutkan dan mengkloning modul dua kali dan menempatkan duplikat di dua kolom yang tersisa.

Ubah Warna Latar Belakang Duplikat #1

Ubah warna latar belakang duplikat pertama.

• Warna Latar Belakang: #3d3d3d

Ubah Pengaturan Spasi Duplikat #1

Seiring dengan pengaturan spasi.

• Margin Atas: -20px
• Padding Atas: 50px
• Padding Bawah: 30px

Ubah Batas Duplikat #1

Dan sudut membulat juga.

Ubah Warna Latar Belakang Duplikat #2

Ubah warna latar belakang duplikat kedua di kolom ketiga juga.

• Warna Latar Belakang: #000000

Ubah Batas Duplikat #2

Seiring dengan sudut membulat.

• Kanan Atas: 15px

Buat Ulang Contoh #3

Tambahkan Bagian Baru ke Bawah Halaman

Ke contoh berikutnya dan terakhir! Buka salah satu halaman, gulir ke bawah halaman dan tambahkan bagian baru.

Pembagi Atas

Buka pengaturan bagian dan tambahkan pembagi atas.

• Warna Pembagi: #62de9d
• Tinggi Pembagi: 110px

Jarak

Hapus semua padding atas dan bawah default bagian juga.

• Padding Atas: 0px
• Padding Bawah: 0px

Bayangan Kotak

Tambahkan bayangan kotak halus ke bagian berikutnya.

• Kekuatan Buram Bayangan Kotak: 80px

CSS khusus

Dan sertakan beberapa baris CSS khusus di tab lanjutan. Ini akan membantu mengubah bagian tersebut menjadi bilah footer seluler tetap.

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

Visibilitas

Terakhir, nonaktifkan bagian di desktop (dan tablet jika Anda mau).

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus berikutnya.

• Padding Atas: 30px
• Padding Bawah: 20px

CSS khusus

Untuk memastikan ketiga kolom tetap pada ketinggian yang sama, kita juga akan menambahkan baris kode CSS ke tab baris lanjutan.

display: flex;

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Sekarang kita bisa mulai menambahkan modul! Tambahkan Modul Blurb ke kolom pertama dan beri judul.

Pilih Ikon

Pilih ikon berikutnya.

Pengaturan Ikon

Pindah ke tab desain dan ubah pengaturan ikon.

• Warna Ikon: #ffffff
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 25px

Pengaturan Teks Judul

Ubah juga pengaturan teks judul.

• Judul Font: Work Sans
• Orientasi Teks Judul: Tengah
• Spasi Huruf Judul: -1px

Modul Blurb Klon Dua Kali & Tempat

Setelah Anda selesai memodifikasi Modul Blurb di kolom 1, Anda dapat melanjutkan dan mengkloning modul dua kali. Tempatkan duplikat di dua kolom yang tersisa.

Ubah Warna Ikon Duplikat #1

Jangan lupa untuk mengubah warna ikon duplikat yang terletak di kolom kedua.

• Warna Ikon: #000000

Pratinjau

Sekarang setelah kita melalui semua langkah yang berbeda, mari kita lihat hasil akhir dari ketiga contoh yang telah kita tangani di atas.

Pikiran Akhir

Dalam posting ini, kami telah menangani tiga desain bilah footer seluler tetap yang berbeda yang dapat Anda buat ulang selangkah demi selangkah dengan mengikuti tutorial. Bilah footer seluler akan mengikuti pengunjung sepanjang pengalaman menggulir mereka di halaman. Tutorial ini adalah bagian dari inisiatif desain Divi yang sedang berlangsung, di mana kami mencoba memasukkan sesuatu yang ekstra ke dalam kotak peralatan desain Anda setiap minggu. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!