Loncat ke Konten Utama

Cara membuat laci animasi di Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Laci footer adalah tambahan yang berguna untuk situs web mana pun 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, kita akan mendesain laci footer mengambang di Divi. Kami akan menambahkan laci footer ke area footer template situs web secara keseluruhan 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 templat ini akan menggantikan templat situs web default (jika Anda memilikinya) di situs Divi Anda. Kami menyarankan Anda menambahkannya ke situs pengujian sehingga Anda tidak mengacaukan apa pun di situs langsung.

Untuk mengimpor model laci footer tetap ke situs web Anda sendiri, 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 buka ritsletingnya dan pilih opsi "Unduh cadangan sebelum impor", kalau-kalau sebelumnya Anda memiliki sesuatu di templat situs web default yang tidak Anda miliki. tidak mau diganti.

Kemudian klik tombol Impor.

Impor model divi

Terakhir, simpan perubahan pada generator tema dan tampilkan halaman langsung untuk melihat bilah footer tetap.

Simpan perubahan tata letak divi

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.

Pilihan editor Divi

Kemudian pilih opsi "Build Global Footer" dari daftar drop-down.

Tambahkan footer model divi

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".

Pilih model divi prakonstruksi

Di jendela pop-up Muat dari Perpustakaan, temukan tata letak halaman arahan alat tulis. Kemudian klik "Gunakan tata letak ini".

Gunakan model divi

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.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Hapus bagian yang tidak perlu

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.

Catatan kaki Divi

Ubah kata-kata di bagian bawah menjadi "Footer Drawer". Ini akan menjadi bagian yang akan kita gunakan sebagai konten laci footer kita.

Ubah label footer divi

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.

laci kaki tetap

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.

Tata letak pemilihan divi

Padding baris

Sebelum menambahkan modul, buka pengaturan baris dan perbarui padding sebagai berikut:

  • Padding: 0px tinggi, 0px rendah
Confiuration divi spacing

Bagian padding

Kemudian buka pengaturan di bagian "Footer drawer" dan perbarui bantalan sebagai berikut:

Konfigurasi jarak bagian Divi

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.

Divi laci footer
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.

Pilih ikon footer drawer divi
Desain Blurb

Kemudian berikan teks presentasi sebagai berikut:

  • Warna Latar Belakang: # 081540
Ubah latar belakang divi

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
Sesuaikan tombol blurb divi
Ukuran teks presentasi

Sekarang beri modul tinggi dan lebar sebagai berikut:

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

  • Lebar: 30px
  • Tinggi: 30px

Ini akan menyebabkan ikon lingkaran meluap ke dalam wadah teks untuk membuat bentuk tetesan air.

Edit desain tombol divi
Posisi Blurb

Kemudian berikan teks presentasi posisi absolut di tengah atas bagian.

  • Posisi: Mutlak
  • Lokasi: Pusat Atas
Ubah posisi tombol divi
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
Kembalikan tombol divi

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
Tentukan pemilih divi

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.

Transformasi bagian divi

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
Tambahkan kelas memiliki transformasi divi

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
Ubah posisi di sudut divi

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.

Sembunyikan bagian di ponsel

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.

Kontrol bagian divi visibilitas

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.

Tambahkan kode modul

Kemudian rekatkan kode berikut di area kode:

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

.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 );   
Tambahkan modul kode divi

Simpan perubahan

Ingatlah untuk menyimpan tata letak sebelum keluar dari editor.

Simpan modifikasi divi

Juga menyimpan perubahan di generator tema.

Simpan perubahan

Hasil akhir

Sekarang kita bisa pergi ke halaman manapun di situs Anda untuk melihat hasil akhirnya.

final pikiran

Semoga laci footer mengambang membantu Anda mempromosikan konten dengan cara yang menyenangkan dan mudah diakses. Seperti laci lainnya, Anda dapat mengisinya dengan apa saja yang dapat Anda pikirkan.

Sumber Daya Lainnya

Berikut adalah daftar tutorial yang dapat membantu Anda mencapai lebih banyak dengan fitur internal Divi.

Diterjemahkan dari: Elegan Tema

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
0 saham
saham
menciak
Register