Menambahkan Efek 3D ke GIF dan Video HTML5 untuk Menampilkan Animasi Produk Unik di Divi

GIF animasi dan video HTML5 bisa sangat bagus untuk menganimasikan cara kerja suatu produk di situs web Anda. Animasi pendek ini menyampaikan informasi berharga kepada pengunjung dengan cara yang lebih mudah dicerna daripada video biasa. Menambahkan jenis GIF dan video HTML5 ini dapat dilakukan dengan cukup mudah dengan Divi. Dan dengan sedikit kreativitas, Anda dapat menambahkan efek 3D untuk animasi produk yang unik.

Dalam tutorial ini, saya akan menunjukkan cara menambahkan efek 3D ke GIF dan video HTML5 untuk menampilkan animasi produk unik di Divi. Desain ini bekerja sangat baik bagi mereka yang mencari tata letak kreatif untuk menampilkan produk atau layanan unggulan. Untuk melakukan ini, pertama-tama kita harus memahami cara menambahkan GIF dan embed video HTML5 ke halaman Anda menggunakan Divi. Kemudian kita akan dapat menggunakan opsi transformasi Divi untuk memposisikan dan memutar GIF (atau video) dalam ruang 3d. Untuk menyelesaikannya, kami akan menggunakan beberapa teknik desain Divi untuk membuat tata letak bagian yang indah agar sesuai dengan GIF dan Video 3D tersebut.

Mari kita mulai.

Sneak Peek

Berikut ini adalah sneak peek pada desain yang akan kita buat dalam tutorial ini. Desainnya terlihat mirip saat menggunakan GIF dan video HTML5 untuk membuat animasi produk.

Unduh Efek 3D untuk GIF dan HTML5 video Animasi Produk Tata Letak Divi 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 File

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.

UNDUH

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 Divi Builder.

Langsung saja ke tutorialnya ya?

Berlangganan Saluran Youtube Kami

Menggunakan GIF untuk Animasi Produk Pendek

GIF telah ada sejak lama. Ini mungkin karena GIF mudah dibuat dan didukung secara luas di seluruh browser. Dan mereka dapat bekerja dengan baik untuk animasi produk yang sangat pendek. Karena GIF adalah gambar, Anda dapat menggunakannya dalam modul Gambar Divi seperti halnya jpg atau png lainnya. Ini memungkinkan Anda untuk menata GIF dengan kekuatan penuh dari pengaturan bawaan Divi. Namun berhati-hatilah, GIF dengan durasi yang lebih lama dan frekuensi gambar yang lebih tinggi dapat menghasilkan ukuran file yang sangat besar. Jadi yang terbaik adalah menjaga GIF Anda tetap pendek dan sekecil mungkin.

Menggunakan Video HTML5 sebagai Pengganti GIF

Video HTML5 menjadi pengganti GIF yang populer, terutama untuk animasi produk yang lebih panjang. Anda mungkin telah memperhatikan bahwa mereka digunakan pada desain situs web Tema Elegan yang baru. Mereka secara signifikan lebih kecil dalam ukuran dibandingkan dengan GIF dan karena itu membutuhkan waktu lebih sedikit untuk memuat. Dan menambahkan video HTML5 ke situs Divi Anda sangatlah mudah. Yang perlu Anda lakukan adalah menambahkan elemen video HTML5 untuk menyematkan video ke halaman Anda (mirip dengan cara Anda menambahkan kode pendek video di WordPress). Anda juga dapat menyesuaikan video dengan kontrol tersembunyi, pengulangan, dan pemutaran otomatis yang menghasilkan animasi berkualitas tinggi yang berfungsi seperti GIF. Plus, saat menambahkan sematan ke Modul Divi, Anda juga dapat menggunakan pembuat Divi untuk menata Video dengan cara yang kreatif.

Lihat posting ini untuk info lebih lanjut tentang mengapa Anda harus mempertimbangkan untuk menggunakan Video HTML5 daripada GIF biasa.

Sekarang setelah kami memahami lebih banyak tentang penggunaan GIF dan video HTML5, kami siap untuk mulai menggunakannya di Divi.

Apa yang Anda Butuhkan untuk Tutorial ini

Untuk memulai, Anda memerlukan yang berikut:

1. Gambar GIF
2. File Video MP4 (dan URL ke file video itu) untuk digunakan dalam penyematan Elemen video HTML5. Untuk dukungan browser yang maksimal, Anda juga dapat menyertakan video yang sama dalam format webm (lebih lanjut tentang ini nanti).
3. Tema Divi diinstal dan aktif
4. Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Menambahkan Efek 3D ke GIF Animasi atau video HTML5

Sebelum kita terlalu jauh merancang tata letak bagian lengkap untuk tutorial ini, saya pikir akan lebih baik untuk menunjukkan cara menambahkan efek 3D ke GIF dan video HTML5. Setelah selesai, kami akan memoles sisa tata letak bagian dengan desain modern yang bagus.

Untuk saat ini, mari kita mulai dengan menambahkan efek 3D ke GIF di Divi.

Membuat GIF

Ada banyak cara untuk membuat GIF di web. Karena tutorial ini adalah tentang membuat GIF untuk menganimasikan cara kerja suatu produk, Anda akan ingin merekam bagian layar Anda (menggunakan perekam layar) dan kemudian mengonversi file video menjadi file GIF. Ingatlah untuk membuat GIF sekecil mungkin untuk membatasi ukuran file dan waktu muat. Setelah GIF dibuat, Anda akan dapat menggunakannya seperti gambar lainnya di Divi.

Jika Anda ingin mempelajari cara membuat GIF menggunakan Snagit, lihat posting kami di Cara Mengganti Gambar Latar Belakang dengan Gif Animasi saat Melayang.

Menambahkan Efek 3D ke GIF di Divi

Sekarang saatnya menambahkan GIF ke Divi agar kita bisa menatanya dengan efek 3D yang keren.

Untuk memulai, tambahkan bagian reguler baru dengan baris dua kolom.

Sebelum Anda menambahkan modul, kita perlu menambahkan properti perspektif ke kolom yang akan berisi GIF kita. Untuk melakukan ini, buka pengaturan baris dan tambahkan potongan CSS berikut ke Elemen Utama Kolom 1:

perspective: 1000px;

Properti perspektif ini diperlukan untuk menambahkan perspektif ke elemen di dalam kolom. Sebuah elemen membutuhkan perspektif agar kita bisa mendapatkan efek 3D saat menggunakan opsi transformasi Divi. Untuk pemahaman yang lebih baik, lihat posting kami tentang cara menggunakan perspektif dengan opsi transformasi untuk mendesain dinding foto 3D.

Sekarang tambahkan modul gambar ke kolom 1.

Unggah GIF ke modul gambar. Untuk desain ini, GIF harus sekitar 600px kali 700px.

Kemudian gunakan opsi transformasi untuk menskalakan, memutar, dan memiringkan GIF dalam ruang 3D.

Transform Putar Sumbu Y: 8deg
Transform Putar Sumbu X: 28deg

Transformasi Sumbu Y Kemiringan: 10 derajat
Transformasi Sumbu X Skew: -8deg

Skala Transform (tablet): 80%

Sekarang mari kita lihat hasilnya.

Menambahkan Efek 3D ke Video HTML5 di Divi

Sebelum kita menambahkan efek 3D, pertama-tama kita perlu membuat Video HTML5 kita. Kami akan membahas langkah-langkah tentang cara melakukannya di bawah ini. Tetapi jika Anda ingin penjelasan yang lebih lengkap, lihat posting kami tentang Cara Menggunakan Video HTML5 untuk Membuat Gif Animasi dengan Ukuran File Lebih Kecil.

Membuat Kode Sematan Video HTML5

Elemen video HTML5 memiliki struktur dasar berikut.

<video>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

Anda tidak perlu tahu banyak tentang HTML untuk melihat apa yang dilakukan kode ini. Di dalam elemen <video> , Anda memiliki dua elemen <source> yang menyimpan jalur/url ke file video yang ingin Anda tampilkan. Setiap elemen sumber memiliki video dalam format file yang berbeda (webm dan mp4). Keduanya diperlukan untuk dukungan browser yang maksimal. Urutannya juga penting. Video webm ditempatkan di atas video mp4 dalam kode karena merupakan format video berkualitas lebih tinggi tetapi kurang didukung oleh browser. Jadi jika browser mendukung video webm, itu akan menampilkannya. Tetapi jika browser tidak mendukung video webm, maka akan menggunakan format video mp4 di bawahnya. Tidak perlu menyertakan kedua format video, tetapi ini adalah praktik terbaik. Dan jika Anda hanya akan menggunakan satu, gunakan format mp4 karena lebih banyak didukung.

Faktanya, setiap kali Anda menggunakan modul video Divi untuk menampilkan video yang dihosting sendiri, Divi membuat Elemen video HTML5 yang sama untuk menampilkan video. Itulah sebabnya modul Video memungkinkan Anda untuk menambahkan file video mp4 dan webm.

Untuk menggunakan kode untuk video Anda sendiri, Anda hanya perlu menambahkan url video di dalam tanda kurung setelah atribut src .

Jika Anda mengunggah file video ke situs WordPress Anda, Anda dapat mengambil url dari perpustakaan media.

Kemudian rekatkan url video di dalam tanda kurung setelah atribut src .

Seharusnya terlihat seperti ini ketika Anda selesai.

<video>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

Selanjutnya, kita akan menambahkan empat atribut untuk mengontrol tampilan dan fungsionalitas video. Jenis kontrol ini adalah alasan utama untuk memasukkan video HTML5 secara manual daripada menggunakan Modul Video Divi. Atribut ini termasuk autoplay (sehingga video dimulai secara otomatis), loop (sehingga video berulang), muted (sehingga video tidak memutar audio), dan playsinline (sehingga video diputar dalam area pemutaran elemen). Untuk menerapkan atribut ini ke video, tambahkan setiap atribut di dalam tanda kurung di awal <video> .

Sekarang kodenya akan terlihat seperti ini.

<video autoplay loop muted playsinline>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

Catatan: Biasanya, Anda akan menerapkan atribut controls untuk video HTML5, tetapi dalam kasus ini kami akan mengabaikannya sehingga video akan berfungsi seperti GIF.

Sekarang Anda siap untuk menyematkan kode.

Menyematkan Video HTML5

Untuk menyematkan video HTML5 ke halaman Anda, kita dapat menggunakan modul kode.

Sebelum kita mengganti modul gambar GIF dengan modul kode kita, mari kita lanjutkan dan duplikat seluruh bagian sehingga kita dapat menyimpan contoh GIF kita. Di bagian duplikat, hapus modul gambar dan tambahkan modul teks sebagai gantinya.

Kemudian tempelkan kode embed video HTML5 ke dalam kotak input kode.

Kemudian salin gaya transformasi dari modul gambar dan tempel gaya transformasi ke modul kode. Atau Anda dapat memperbarui gaya transformasi sebagai berikut:

Transform Putar Sumbu Y: 8deg
Transform Putar Sumbu X: 28deg
Transformasi Sumbu Y Kemiringan: 10 derajat
Transformasi Sumbu X Skew: -8deg
Skala Transform (tablet): 80%

Karena saya menggunakan video yang sama dengan yang saya gunakan untuk membuat GIF, desainnya akan terlihat sangat mirip. Namun, ukuran video secara signifikan lebih kecil dari ukuran GIF. Inilah hasilnya.

Menyelesaikan Desain Tata Letak Bagian

Sekarang kita memiliki GIF 3D (atau video HTML5). Kami dapat menyelesaikan desain tata letak bagian kami. Untuk desain ini, saya akan menggunakan bagian dengan video HTML5 di kolom 1.

Menyesuaikan Bagian dan Baris

Buka pengaturan bagian dan perbarui yang berikut ini.

Padding: 15% atas, 15% bawah

Kemudian buka pengaturan baris dan perbarui yang berikut:

Warna Kiri Gradien Latar Belakang: #ba7fe8
Warna Kanan Gradien Latar Belakang: #4b84ff

Tinggi Maks: 300px (desktop), tidak ada (tablet dan ponsel)

Padding: 0px atas, 0px bawah

Selanjutnya kita dapat memberikan baris bayangan kotak dalam semi transparan untuk elemen desain yang unik.

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px
Posisi Vertikal Bayangan Kotak: 0px
Kekuatan Penyebaran Bayangan Kotak: 40px
Warna Bayangan: rgba (255,255,255,0.89)

Memposisikan Modul Kode

Sekarang mari kita naikkan sedikit modul kode dengan video dengan menyesuaikan properti transform translate sebagai berikut:

Transformasi Terjemahkan Sumbu Y: -20% (desktop), -7% (telepon)

Menambahkan Modul Ajakan Bertindak

Untuk melengkapi desain, mari tambahkan modul ajakan bertindak ke kolom 2. Ini akan menjadi tempat yang bagus untuk menambahkan deskripsi produk unggulan dengan tombol.

Tambahkan URL Tautan Tombol untuk membuat tombol muncul.

Lanjutkan untuk memperbarui pengaturan sebagai berikut:

Warna Latar Belakang: #ffffff
Perataan Teks: Kiri
Warna Teks: Gelap

Judul Font: Lato
Judul Font Berat: Tebal
Warna Teks Judul: #20292f
Font Tubuh: Lato
Warna Teks Tubuh: #6d7c90
Ukuran Teks Tubuh: 17px
Tinggi Garis Tubuh: 1.8em

Ukuran Teks Tombol: 12px
Warna Teks Tombol: #ffffff
Warna Latar Tombol: #4b84ff
Lebar Batas Tombol: 0px
Radius Batas Tombol: 100px
Jarak Huruf Tombol: 2px
Font Tombol: Lato
Berat Huruf Tombol: Berat
Gaya Font Tombol: TT
Tombol Padding: 12px atas, 12px bawah, 20px kiri, 20px kanan

Bayangan Kotak: lihat tangkapan layar
Posisi Vertikal Bayangan Kotak: 0px
Kekuatan Penyebaran Bayangan Kotak: 40px
Warna Bayangan: rgba(103.151.255.0.11)

Margin: 10% benar

Transformasi Terjemahkan Sumbu Y: -33% (desktop), -15% (telepon)
Transformasi Terjemahkan Sumbu X: -5%

Hasil Akhir

Desktop

Tablet

Telepon

Pikiran Akhir

Menambahkan efek 3D ke GIF dan video HTML5 benar-benar memberikan tampilan unik untuk animasi produk tersebut. Opsi transformasi Divi (dikombinasikan dengan properti perspektif) memudahkan untuk menambahkan efek 3D ke GIF dan Video Anda.

Dan, semoga, Anda telah mempelajari beberapa hal tentang cara menggunakan GIF dan video HTML5 dengan Divi. GIF mudah digunakan tetapi lebih sulit untuk menjaga ukuran file tetap ramah web. Video HTML5 memerlukan penggunaan kode sematan tetapi dapat bekerja dengan sangat baik sebagai pengganti GIF untuk animasi yang lebih panjang.

Jangan ragu untuk menjelajahi cara baru dan menarik untuk menggunakan desain ini untuk menampilkan animasi untuk produk dan layanan di proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!