Laci bawah adalah tambahan yang berguna untuk semua situs jaringan, karena mereka menyimpan konten tambahan yang mudah diakses oleh pengguna. Laci footer adalah wadah konten web (seperti bagian Divi) yang dapat dibuka dan ditutup dengan mengklik tombol atau mengarahkan kursor ke atasnya. Ini seperti memiliki sedikit simpanan untuk konten premium.
Dalam tutorial ini, kami akan mendesain laci footer mengambang di Divi. Kami akan menambahkan laci footer ke area footer global templat situs web sehingga laci footer dapat diakses di seluruh situs dengan konten footer normal.
Dengan proses yang akan kita gunakan, setiap bagian Divi (dan isinya) dapat diubah menjadi laci footer dalam hitungan menit.
Cara Menambahkan Template Laci Footer ke Situs Divi Anda
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 laci 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
Generator tema Divi memungkinkan Anda untuk mengganti catatan kaki default dengan yang baru dengan memperbarui templat situs web default.
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 "Build Global Footer" dari daftar drop-down.
Tambahkan tata letak yang telah ditentukan ke tata letak footer global
Ini akan menerapkan Model Layout Editor di mana Anda akan segera diminta dengan tiga pilihan tentang bagaimana Anda ingin mulai membangun. Pilih opsi "Pilih tata letak standar".
Di jendela pop-up Muat dari Perpustakaan, temukan tata letak halaman arahan alat tulis. Kemudian klik "Gunakan tata letak ini".
Hapus konten yang tidak diinginkan dari tata letak premade
Setelah tata letak dimuat ke editor, perluas kotak pop-up Lapisan dengan mengklik ikon lapisan di menu pengaturan. Kemudian hapus semua bagian tata letak kecuali dua yang terakhir.
Pindahkan dan beri label pada dua bagian
Setelah bagian tersebut dihapus, Anda akan memiliki dua bagian, satu berjudul "Footer" dan yang lainnya berjudul "How it works". Pindahkan bagian "Footer" ke atas tata letak.
Ubah kata-kata di bagian bawah menjadi "Footer Drawer". Ini akan menjadi bagian yang akan kita gunakan sebagai konten laci footer kita.
Bagian 2: Membuat laci footer tetap
Sekarang setelah kami menetapkan salah satu bagian sebagai footer dan yang lainnya sebagai laci footer, kami siap untuk mulai membuat laci footer tetap kami. Mari kita mulai dengan membuat ikon uraian yang akan kita gunakan untuk mengaktifkan laci footer.
Pembuatan tombol laci footer
Tambahkan baris baru
Di bagian footer bawah, tambahkan baris baru ke kolom.
Beri label baris baru "Tombol Laci" karena ini adalah baris yang akan berisi tombol yang digunakan untuk membuka dan menutup laci. Kemudian pindahkan garis ke atas bagian tersebut.
Padding baris
Sebelum menambahkan modul, buka pengaturan baris dan perbarui padding sebagai berikut:
- Padding: 0px tinggi, 0px rendah
Bagian padding
Kemudian buka pengaturan di bagian "Footer drawer" dan perbarui bantalan sebagai berikut:
Untuk membuat tombol yang dapat diklik yang mengaktifkan laci footer, kita akan menggunakan modul uraian dengan ikon. Dan, kita akan memberikan bentuk tetesan air mata yang unik dengan menggabungkan bentuk persegi dari wadah pod Blurb dengan ikon lingkaran.
Begini caranya.
Tambahkan modul Blurb
Tambahkan modul teks presentasi ke baris "Tombol laci" di bagian atas bagian.
Blurb konten / ikon
Selanjutnya, hapus judul default dan konten tubuh dan pilih ikon panah yang menunjuk ke sudut kiri atas (lihat tangkapan layar). Kami menggunakan ikon yang diputar sebagian karena kami akan memutarnya nanti.
Desain Blurb
Kemudian berikan teks presentasi sebagai berikut:
- Warna Latar Belakang: # 081540
Kemudian perbarui parameter desain sebagai berikut:
- Warna ikon: #eeeeee
- Ikon lingkaran: YA
- Warna lingkaran: # 081540
- Gunakan ukuran font ikon: YA
- Ukuran font ikon: 17 piksel
Ukuran teks presentasi
Sekarang beri modul tinggi dan lebar sebagai berikut:
- Lebar: 30px
- Tinggi: 30px
Ini akan menyebabkan ikon lingkaran meluap ke dalam wadah teks untuk membuat bentuk tetesan air.
Posisi Blurb
Kemudian berikan teks presentasi posisi absolut di tengah atas bagian.
- Posisi: Mutlak
- Lokasi: Pusat Atas
Hapus pengaturan transformasi
Sekarang, kita dapat menggunakan opsi transformasi untuk memutar uraian / ikon ke atas dan memposisikannya tepat di atas wadah bagian. Sekarang ketika kita menyembunyikan bagian di bawah jendela browser, ikon tersebut akan tetap terlihat / dapat diklik.
Perbarui item berikut:
- Transformasi sumbu X Terjemahan: -50%
- Transformasi terjemahan sumbu Y: -250%
- Ubah rotasi sumbu Z: -45 derajat
Kemudian hapus animasi ikon default:
- Animasi Gambar / Ikon: Tidak Ada Animasi
Kita akan menggunakan JQuery untuk mengaktifkan drawer, jadi kita perlu menargetkan teks / ikon sebagai elemen yang dapat diklik dengan kelas CSS yang akan kita gunakan nanti dalam kode. Tambahkan kelas CSS berikut:
- Kelas CSS: target drawer
Pengaturan bagian laci footer
Sekarang kita akan menyembunyikan bagian "Footer Drawer" menggunakan opsi translate transform. Buka pengaturan bagian dan perbarui yang berikut:
- Transformasi sumbu Y Terjemahan: 100%
Keindahan menggunakan transformasi di sini adalah bahwa nilai persentase didasarkan pada ukuran sebenarnya dari elemen tersebut. Jadi, 100% pada sumbu Y akan secara langsung berhubungan dengan tinggi bagian (tidak peduli apa itu pada waktu tertentu). Dengan kata lain, elemen akan dipindahkan ke jarak yang tepat seperti tingginya.
Untuk menampilkan kembali "Footer Drawer", kita perlu membalikkan terjemahan transformasi yang baru saja kita tambahkan ke bagian. Untuk melakukan ini, kita perlu menargetkan elemen dengan kelas CSS dan menonaktifkan transformasi terjemahan dengan mengklik ikon (mengembalikan seluruh bagian ke posisi semula).
Tambahkan kelas CSS ke bagian footer drawer
Di bawah tab lanjutan, tambahkan kelas CSS berikut:
- Kelas CSS: memiliki-transform
Bagian laci footer Posisi tetap
Untuk langkah terakhir, kita perlu memperbaiki laci footer sehingga (dengan ikon) mengapung di bagian bawah jendela browser.
Perbarui posisi bagian "Footer Drawer" sebagai berikut:
- Posisi: tetap
- Lokasi: kiri bawah
- Indeks Z: 13
Matikan konten seluler
Karena Anda akan memiliki jumlah konten laci footer yang sesuai dengan tablet dan ponsel (karena ketinggian layar yang terbatas), Anda perlu mematikan / menyembunyikan item yang tidak penting dari tampilan. Dalam contoh ini, kami akan menyembunyikan baris tengah dari tata letak bagian.
Buka pengaturan dari baris kedua hingga terakhir di bagian "Footer Drawer". Di bawah tab lanjutan, perbarui opsi visibilitas untuk mematikan saluran di ponsel dan tablet.
Menambahkan kode khusus
Untuk menambahkan fungsionalitas click and toggle di footer drawer, kita perlu menambahkan CSS dan JQuery khusus ke halaman. Untuk melakukan ini, buat modul kode baru di bawah modul Blurb yang digunakan untuk tombol tersebut.
Kemudian rekatkan kode berikut di area kode:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
Simpan perubahan
Ingatlah untuk menyimpan tata letak sebelum keluar dari editor.
Juga menyimpan perubahan di generator tema.
Hasil akhir
Sekarang kita bisa pergi ke halaman mana pun milik Anda situs jaringan untuk melihat hasil akhirnya.
final pikiran
Semoga laci footer mengambang dapat membantu Anda memajukan konten dengan cara yang menyenangkan dan mudah diakses. Seperti laci lainnya, Anda dapat mengisinya dengan apa saja yang Anda pikirkan.
Sumber Daya Lainnya
Berikut adalah daftar tutorial yang dapat membantu Anda mencapai lebih banyak dengan fitur internal Divi.
- Cara membuat kotak alat tema di Divi
- Cara Membuat Bagian Promosi Animasi di Divi
- Cara mengkustomisasi kisi di Divi
Diterjemahkan dari: Elegan Tema
