Bilah footer tetap dapat menjadi cara yang nyaman untuk menyimpan informasi penting di . Anda situs jaringan di latar depan saat pengguna berinteraksi dengan konten halaman Anda di perangkat apa pun.
Seperti Divi, bilah footer biasanya ada sebagai elemen statis di bagian paling bawah halaman setelah konten footer utama. Mereka menyertakan hal-hal seperti teks hak cipta dan ikon media sosial.
Namun, jika Anda tidak menyembunyikan konten bilah footer di bagian bawah halaman, Anda dapat membuat bilah footer khusus yang mengapung di bagian bawah layar saat pengguna menggulir.
Dalam tutorial ini, kita akan merancang bilah footer tetap yang dipersonalisasi sepenuhnya menggunakan generator tema Divi. Ini akan berguna bagi Anda untuk menjaga agar bagian-bagian kecil tapi penting dari konten selalu terlihat.
Kemungkinan Hasil
Berikut ini adalah ikhtisar dari footer tetap yang akan kami desain.
Cara menambahkan template bilah footer tetap untuk diunduh di situs Divi Anda
PERINGATAN!: Menambahkan model ini akan menggantikan templat situs web secara default (jika ada) di situs Divi Anda. Kami menyarankan untuk menambahkannya ke situs uji sehingga Anda tidak mengacaukan apa pun di situs langsung.
Untuk mengimpor sendiri templat bilah footer tetap situs jaringan, unzip file zip unduhan untuk mengakses file JSON.
Lalu pergi ke dashboard WordPress dan pergi ke Divi> Theme Builder.
Kemudian klik ikon portabilitas di kanan atas halaman.
Di jendela portabilitas, pilih file JSON yang baru saja Anda unzip dan pilih opsi "Unduh cadangan sebelum impor", kalau-kalau Anda sebelumnya memiliki sesuatu di templat situs web default yang tidak ingin Anda timpa.
Kemudian klik tombol Impor.
Terakhir, simpan perubahan pada generator tema dan tampilkan halaman langsung untuk melihat bilah footer tetap.
Sekarang ke tutorialnya, oke?
Bagian 1: Menambahkan Footer Global
Pembuat tema Divi memungkinkan Anda mengganti footer default dengan yang baru dengan memperbarui templat situs web standar.
Untuk membuat footer global, buka dasbor WordPress dan buka Divi> Theme Builder. Kemudian klik pada ruang "Tambahkan Footer Global" di dalam Template Situs Default.
Kemudian pilih opsi "Buat footer khusus" dari daftar tarik-turun.
Ini akan menerapkan Model Layout Editor di mana Anda akan segera diminta dengan tiga pilihan tentang bagaimana Anda ingin mulai membangun. Pilih "Build From Scratch".
Bagian 2: Membuat bilah footer tetap
Sekarang setelah kita mengedit dari editor tata letak template, kita dapat mulai mendesain bilah footer tetap. Setelah selesai, Anda akan memiliki bilah footer tetap dengan tiga kolom yang sudah siap konten.
Tambahkan tata letak tiga kolom ke baris
Pertama, tambahkan tata letak tiga kolom ke baris.
Tinggi bagian
Setelah tiga kolom ditambahkan, mari berikan ketinggian yang ditentukan ke bagian tersebut. Ini penting untuk membuat ruang di bagian bawah halaman yang akhirnya akan diakhiri dengan telepon rumah. Kami juga akan menghapus bantalan atas dan bawah default.
Untuk mengatur ketinggian dan bantalan, buka pengaturan bagian dan perbarui yang berikut:
- Tinggi: 85px
- Padding: 0px tinggi, 0px rendah
Pengaturan saluran
Sekarang bagian kami sudah siap, kami siap menyesuaikan baris untuk berfungsi sebagai bilah footer tetap. Buka pengaturan baris, lalu perbarui yang berikut:
konteks
- Warna Latar Belakang: # 1a1e36
Ukuran dan jarak
- Lebar selokan: 1
- Lebar: 100%
- Lebar maks: 100%
- Padding: 0px ke atas, 0px ke bawah, 3% ke kiri, 3% ke kanan
CSS khusus
Meskipun baris sudah tetap, kami ingin tinggi baris sesuai dengan tinggi bagian induk sehingga ruang di bagian bawah halaman berisi baris dengan benar. Dan, kami ingin memastikan bahwa konten baris tetap sejajar secara vertikal. Untuk melakukannya, tambahkan CSS khusus berikut ke elemen utama baris:
Biro
tinggi: inherit! important; display: flex; align-items: center;
Telepon
tinggi: warisan! penting; tampilan: blok;
Memperbaiki posisi
Untuk membuat garis tetap sehingga mengapung di bagian bawah layar, kita perlu memberikan posisi tetap di lokasi tengah bawah sebagai berikut:
- Posisi: tetap
- Lokasi: pusat bawah
Bagian 2: Membuat konten bilah footer tetap
Pada titik ini, kami memiliki bilah footer posisi tetap yang siap untuk konten. Kami dapat menambahkan konten apa pun yang kami inginkan ke masing-masing dari tiga kolom. Tetapi karena ini adalah "bar" footer yang tingginya dibatasi hingga 85 piksel, kami perlu membatasi jumlah konten. Untuk alasan ini kami akan menambahkan menu kecil dengan logo dinamis dan 4 item menu di kolom 1. Di kolom 2 kami akan menambahkan teks hak cipta dengan tahun berjalan dinamis. Di kolom 3, kami akan menambahkan tiga ikon pelacakan media sosial.
Tambahkan menu ke kolom 1
Di kolom 1, tambahkan modul menu.
Pilih menu
Kemudian pilih salah satu menu yang sudah Anda buat di situs jaringan. Pastikan untuk menyimpan item menu hingga 4 atau kurang.
Tambahkan logo situs sebagai konten dinamis
Untuk menu logo, kita akan menambahkan logo situs secara dinamis. Klik ikon "Gunakan konten dinamis" saat mengarahkan kursor ke area pratinjau logo. Kemudian pilih Logo situs dari daftar drop-down.
Hapus latar belakang
Kemudian hapus latar belakang menu default agar transparan.
menu Design
Pada titik ini, kami siap menambahkan beberapa desain ke menu. Untuk desain ini, kami akan membuatnya tetap sederhana dan kecil. Perbarui parameter desain berikut:
- Menu font: Jalan layang
- Warna teks menu: # b59c61
- Gambar sepia: 100%
- Tinggi logo maksimum: 50px
Tambahkan teks hak cipta ke kolom 2
Setelah menu tersedia, buka kolom 2 untuk menambahkan teks hak cipta.
Tambahkan modul teks
Tambahkan modul teks baru ke kolom 2.
Secara dinamis menambahkan tanggal saat ini dengan teks sebelum dan sesudah
Di sini kita akan berkreasi dengan konten dinamis untuk menampilkan tahun ini dalam teks hak cipta. Ini akan memastikan bahwa tahun tersebut akan diperbarui secara otomatis selama masa aktif situs.
Untuk melakukan ini, klik ikon "Gunakan konten dinamis" dan pilih "Tanggal saat ini" dari daftar.
Di jendela sembulan Tanggal Saat Ini, perbarui yang berikut ini:
- sebelum:
- 01
Copyright ©
- Setelah:
- 01
| Tous Droits Reservés
- Format Tanggal : custom
- Format tanggal khusus : 20 tahun
Memformat teks
Perbarui desain dan margin teks sebagai berikut:
- Fon teks: Jalan layang
- Warna teks: # b59c61
- Penyelarasan teks: pusat
- Margin (hanya telepon): 10 piksel di bagian atas, 10 piksel di bagian bawah
Ini mendukung teks hak cipta.
Tambahkan ikon pelacakan media sosial ke kolom 3
Di kolom 3, tambahkan modul pelacakan media sosial.
Tambahkan jejaring sosial
Di bawah tab Konten, tambahkan jejaring sosial yang diperlukan ke situs. Untuk desain ini, kami menggunakan tiga di antaranya.
Pengaturan pelacakan media sosial
Selanjutnya, perbarui pengaturan desain untuk semua ikon pelacakan media sosial sebagai berikut:
- Penyelarasan modul: lurus (desktop dan tablet), tengah (telepon)
- Warna Ikon: # 1a1e36
- Gunakan ukuran ikon khusus: YA
- Ukuran font ikon: 16px (desktop dan tablet), 14px (ponsel)
Perbarui pengaturan media sosial
Untuk memperbarui desain ikon jaringan sosial individu, buka pengaturan untuk jaringan pertama dan perbarui yang berikut ini:
- Warna Latar Belakang: #ffffff
- Padding: 8 piksel di sebelah kanan, 8 piksel di sebelah kiri
- Sudut membulat: 8px
Perpanjang pengaturan media sosial untuk semua orang
Kemudian buka menu pengaturan tambahan untuk jaringan pertama dan pilih " Perluas Gaya Item " dalam daftar. Di jendela pop-up Perpanjang Gaya, pilih untuk Memperluas Gaya di " Kolom ini "Dan klik Perluas .
Ini akan memperluas desain ke seluruh ikon di kolom.
final pikiran
Menambahkan bilah footer tetap masuk akal dalam beberapa kasus. Ketinggian bilah cukup kecil untuk tidak mengganggu atau menghabiskan terlalu banyak ruang di perangkat seluler. Dan ini memberi Anda kemampuan untuk menambahkan CTA penting untuk konversi yang lebih baik dan pengalaman pengguna yang lebih lancar.
Untuk desain ini, ruang di bagian bawah halaman dibuat dengan menyetel ketinggian tetap untuk bagian tersebut dan kemudian membiarkan garis tetap mewarisi tinggi bagian tersebut (meskipun tetap).
Sumber Daya Lainnya
Berikut adalah daftar ressources tambahan yang dapat membantu Anda membuat desain situs web Anda dengan Divi.
- Cara membuat halaman login khusus pada Divi
- Bagaimana cara menambahkan modul navigasi lebar penuh pada Divi
- Cara membuat slider layar penuh pada Divi
- Cara menambahkan penghitung lingkaran di Divi
