Cara Mengganti Gambar Latar Belakang dengan Gif Animasi saat Melayang
Diterbitkan: 2019-06-14Mengganti gambar latar belakang dengan GIF animasi saat melayang bisa menjadi cara yang bagus untuk menghidupkan konten Anda sambil juga memberikan ilustrasi keren untuk produk atau layanan. Misalnya, jika Anda mempromosikan fitur produk perangkat lunak tertentu, GIF animasi dapat membantu menggambarkan aspek fungsionalitas produk (kami melakukan ini untuk produk di sini di Tema Elegan). Namun, alih-alih menampilkan GIF itu pada awalnya, Anda mungkin ingin menampilkan tangkapan layar diam dari fungsi tersebut yang diganti dengan versi animasi (atau GIF) saat mengarahkan kursor.
Dalam tutorial ini, saya akan menunjukkan cara membuat uraian singkat yang mengubah gambar latar (diam) dengan GIF animasi saat melayang. Kami akan mulai dengan membahas cara membuat tangkapan layar dan GIF menggunakan Snagit (perangkat lunak tangkapan layar). Kemudian kita akan membahas cara mengimplementasikan gambar latar belakang tersebut ke dalam uraian sehingga mereka dapat mengaktifkan hover. Pergantian gambar yang sebenarnya sangat mudah dengan opsi hover latar belakang Divi.
Desain ini akan membantu menjaga desain tetap statis dan kemudian melibatkan pengguna setiap kali mereka berinteraksi dengan konten.
Mari kita mulai.
Sneak Peek
Unduh Latar Belakang GIF di Tata Letak Arahkan secara GRATIS
Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.
Unduh Gratis
Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke halaman baru dengan Divi Builder aktif.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Berlangganan Saluran Youtube Kami
Untuk memulai, Anda memerlukan yang berikut:
- Tema Divi diinstal dan aktif
- Perangkat Lunak Tangkapan Layar (atau kombinasi alat) yang memungkinkan Anda mengambil tangkapan layar, merekam video layar, dan membuat GIF. Dalam tutorial ini saya akan menggunakan Snagit terutama karena ini adalah solusi lengkap yang saya gunakan setiap hari untuk posting dan tutorial blog saya.
- Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai membuat beberapa tab hover di Divi.
Bagian 1: Membuat Tangkapan Layar dan GIF
Untuk desain ini, kami ingin membuat tangkapan layar untuk ditampilkan sebagai gambar latar diam untuk modul uraian. Kemudian kami ingin membuat GIF (gambar animasi) yang menghidupkan gambar latar diam tersebut dengan ilustrasi singkat tentang cara kerja produk. Triknya adalah membuat gambar dan GIF yang cukup mirip sehingga memiliki transisi yang mulus saat berpindah satu gambar dengan gambar lainnya saat melayang.
Setelah kedua gambar dibuat, kita dapat menggunakan gambar diam sebagai gambar latar awal. Kemudian kita dapat mengganti gambar latar belakang ke gambar gif saat mengarahkan kursor ke modul uraian.
Untuk membuat screenshot dan GIF, saya akan menggunakan Snagit. Meskipun ini bukan perangkat lunak gratis, ini sangat mudah digunakan dan memungkinkan Anda untuk membuat tangkapan layar, merekam layar Anda, dan merekam layar rahasia menjadi GIF di satu tempat.
Membuat Tangkapan Layar Gambar Diam
Untuk membuat tangkapan layar, buka Snagit dan buka kotak tangkapan. Kemudian pastikan untuk memilih untuk mengambil gambar dengan memilih wilayah layar Anda. Ini akan memungkinkan Anda untuk menyeret area di layar Anda untuk diambil sebagai gambar. Untuk memulai tangkapan layar, klik tombol ambil.
Kemudian klik dan seret area pengambilan di sekitar area layar yang ingin Anda ambil sebagai gambar.
Simpan gambar ke komputer Anda. Kemudian buka lagi kotak Snagit Capture dan pilih untuk merekam video dengan memilih wilayah layar Anda. Untuk memulai tangkapan layar, klik tombol ambil.
Kemudian klik dan seret area pengambilan di sekitar area layar yang ingin Anda tangkap dan rekam sebagai klip video. Untuk membuat transisi yang lebih mulus antara gambar diam dan gif, Anda perlu menangkap area yang sama untuk video seperti yang Anda lakukan untuk gambar (atau sedekat mungkin).
Saat Anda siap, klik tombol rekam dan lakukan demonstrasi yang ingin Anda rekam.
Setelah selesai, klik stop untuk berhenti merekam. Kemudian Anda dapat mengedit klip video di editor Snagit. Setelah selesai membuat edisi, klik tombol Gif di sebelah video untuk membuat Gif dari video Anda.
Di popup Create Gif, ubah pengaturan output sesuai kebutuhan. Pastikan untuk mengaktifkan perulangan sehingga gif Anda akan berulang. Kemudian klik tombol Buat.
Setelah gif dibuat, simpan ke komputer Anda.
Sekarang Anda memiliki gambar diam dan gambar gif yang siap ditambahkan ke desain Anda di Divi.
Bagian 2: Membuat Blurb yang Mengganti Gambar Latar Belakang dengan Gambar Animasi Gif saat Melayang
Jika Anda belum melakukannya, buat halaman baru dan gunakan Divi Builder untuk membangun di bagian depan. Kemudian buat bagian reguler baru dengan dua baris kolom.
Di kolom 1, tambahkan modul uraian.
Kemudian perbarui pengaturan konten sebagai berikut:
Isi: “Teks isi ada di sini”
Gunakan Ikon: YA
Ikon: cloud (lihat tangkapan layar)
Tambahkan Gambar Latar Default
Selanjutnya, tambahkan gambar latar belakang default ke uraian sebagai berikut:
Gambar Latar Belakang: Unggah gambar latar belakang (tangkapan layar diam) yang Anda buat.
Ukuran Gambar Latar Belakang: Pas (ini akan memastikan seluruh gambar tetap terlihat)
Posisi Gambar Latar Belakang: Tengah Atas (ini akan membuat gambar tetap berada di bagian atas uraian)
Tambahkan Gambar Gif Hover Background
Setelah Anda memiliki gambar latar belakang awal, terapkan opsi hover latar belakang dan pilih tab hover. Kemudian tambahkan gambar Gif untuk dijadikan sebagai gambar latar baru pada status hover.
Menata Modul Blurb
Lanjutkan untuk menata modul uraian dengan memperbarui pengaturan desain berikut:
Warna Ikon: #6bb962
Ikon Lingkaran: YA
Warna Lingkaran: #ffffff
Perataan Teks: tengah
Judul Font: Lora
Ukuran Teks Judul: 34px
Padding: 50% atas, 5% bawah, 3% kiri, 3% kanan
Kunci sebenarnya dari desain ini adalah padding. Untuk menempatkan latar belakang di atas konten uraian, Anda perlu menambahkan sekitar 50% padding atas. Dan karena ukuran gambar latar belakang diatur ke "pas" dan posisinya diatur ke "tengah atas", itu akan duduk dengan baik di atas konten merespons lebar browser.
Terakhir, beri blurb bayangan kotak di hover sebagai berikut:
Bayangan Kotak: lihat tangkapan layar
Posisi Vertikal Bayangan Kotak: 0px
Kekuatan Buram Bayangan Kotak: 0px (default), 24px (arahkan kursor)
Hasil Akhir
Berikut adalah hasil akhirnya.
Dan inilah desain pada tablet dan ponsel.
Dan inilah tampilannya dengan uraian tambahan dengan tangkapan layar dan warna yang berbeda.
Pikiran Akhir
Jika Anda tidak terbiasa menggunakan GIF di situs web Anda, Anda pasti harus mempertimbangkannya. Mereka benar-benar dapat menghidupkan konten Anda dan memberikan ilustrasi yang sangat berguna bagi pengunjung Anda. Dan, dengan opsi hover latar belakang Divi, Anda dapat dengan mudah mengganti gambar diam dengan GIF saat melayang. Solusi ini dapat memberikan desain awal yang tidak terlalu mengganggu yang benar-benar melibatkan pengguna saat berinteraksi dengan konten Anda. Semoga bermanfaat untuk project selanjutnya.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!