Menggunakan Animasi Divi untuk Mengambang dan Memantulkan Gambar
Diterbitkan: 2017-10-20Selamat datang di bagian 6 dari seri 6 bagian ini yang akan mengajari Anda cara menggunakan opsi Animasi baru Divi untuk mendesain bagian halaman yang mengagumkan. Saya akan memandu Anda melalui cara membangun bagian berbeda dari halaman demo langsung kami untuk menunjukkan kepada Anda teknik menambahkan animasi ke situs web Anda. Fitur Animasi benar-benar menyenangkan dan mudah digunakan. Dan dengan Visual Builder, Anda dapat melihat kreasi Anda menjadi hidup di setiap tahapnya. Datang dan bergabunglah dengan saya saat kami menjelajahi kekuatan animasi Divi.
Dalam posting terakhir kami membuat bagian 7 dari halaman demo animasi kami di mana saya menunjukkan kepada Anda cara menganimasikan gambar menggunakan gaya animasi roll untuk menambahkan gerakan seperti hidup ke konten Anda.
Hari ini, kita akan menangani Bagian 8 dan 9 dari halaman demo animasi kita. Bagian 8 adalah contoh yang bagus tentang cara membuat item unggulan menonjol menggunakan kombinasi animasi slide dan efek blur. Bagian 9 adalah cara sederhana dan elegan untuk menambahkan animasi ke bagian tim yang menampilkan foto tim Anda.
Mari kita mulai.
Berikut adalah Sneak Peek dari Apa yang Akan Kami Bangun di Postingan Hari Ini
Mempersiapkan Elemen Desain
Anda akan membutuhkan empat gambar untuk tutorial ini. Anda akan membutuhkan gambar latar belakang khusus dan tiga gambar kartu resep. Gambar latar belakang adalah 1280x936 dan memiliki latar belakang kuning dengan 6 persegi panjang putih semi transparan dengan bayangan tambahan untuk kedalaman. Setelah latar belakang digunakan di bagian dengan paralaks, itu akan memberi kesan kartu resep mengambang di latar belakang. Gambar kartu resep masing-masing berukuran 375x667. Berikut adalah gambar yang digunakan dalam tutorial ini.
Gambar latar belakang
Gambar Kartu Resep #1
Gambar Kartu Resep #2
Gambar Kartu Resep #3
Menggunakan Animasi Divi untuk Mengambang dan Memantulkan Gambar
Berlangganan Saluran Youtube Kami
Bagian Bangunan 8
Sebelum kita memulai proses pembangunan, berikut adalah sekilas tampilan wireframe dari layout bagian yang akan kita buat menggunakan visual builder.
Menggunakan Visual Builder, Mari kita mulai dengan menambahkan bagian reguler lainnya ke tata letak kita. Kemudian tambahkan baris tiga kolom (sepertiga sepertiga sepertiga) ke bagian Anda.
Perbarui Pengaturan Baris
Sebelum kami menambahkan modul pertama kami, buka pengaturan baris dan perbarui yang berikut:
Di bawah tab Desain…
Gunakan Lebar Kustom: YA
Lebar Kustom: 1366px
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 1
Kolom 1 Padding Kustom: 6% Kanan
Kolom 3 Padding Kustom: 8% Kiri
Tambahkan Latar Belakang ke Bagian Anda
Selanjutnya mari kita letakkan gambar latar belakang utama di bagian kita. Buka pengaturan bagian dan perbarui yang berikut:
Di bawah tab Konten…
Gambar Latar Belakang: [masukkan gambar 1280×936]
Gunakan Metode Paralaks: YA
Metode Paralaks: Paralaks Sejati
Tambahkan Gambar #1
Sekarang kita membaca untuk menambahkan modul kita ke baris kita. Di kolom pertama (kiri), tambahkan modul gambar.
Kemudian perbarui pengaturan sebagai berikut:
Di bawah tab Konten…
URL Gambar: [masukkan gambar kartu resep #1]
Di bawah tab Desain…
Paksa Lebar Penuh: YA
Gaya Animasi: Slide
Arah Animasi: Atas
Intensitas Animasi: 20%
Di bawah tab Lanjutan…
Di sini kita akan menambahkan beberapa CSS khusus untuk memberikan gambar kartu tepi yang membulat, bayangan kotak, dan filter blur. Masukkan CSS berikut di kotak Elemen Utama:
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7); filter: blur(2px) opacity(.75);
Simpan Pengaturan
Tambahkan dua Modul Teks di Kolom Tengah
Selanjutnya, tambahkan modul teks di kolom kedua (atau tengah) dan perbarui pengaturan sebagai berikut:
Di bawah tab Konten…
Masukkan header h1 berikut di tab teks kotak konten:
<h1>The Best Recipes for Success</h1>
Di bawah tab Desain…
Font Header: Tampilan Playfair, Tebal (B)
Ukuran Font Tajuk: 60px
Tinggi Garis Tajuk: 1.3em
Margin Kustom: 20px Bawah
Gaya Animasi: Lipat
Arah Animasi: Atas
Simpan Pengaturan
Tambahkan Modul Teks lain di bawah yang baru saja Anda buat dan perbarui pengaturan sebagai berikut:
Di bawah tab Konten…
Isi : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur.
Di bawah tab Desain…
Ukuran Font Teks: 18px
Warna Teks Teks: rgba(0,0,0,0.56)
Tinggi Baris Teks: 1.9em
Margin Kustom: 40px
Gaya Animasi: Lipat
Arah Animasi: Bawah
Penundaan Animasi: 150ms
Simpan Pengaturan
Tambahkan Gambar #2
Tambahkan modul gambar di bawah dua modul teks yang baru saja Anda buat.
Kemudian perbarui pengaturan sebagai berikut:
Di bawah tab Konten…
URL Gambar: [masukkan gambar kartu #2]
Di bawah tab Desain…
Paksa Lebar Penuh: YA
Gaya Animasi: Slide
Arah Animasi: Atas
Intensitas Animasi: 10%
Di bawah tab Lanjutan…
Di sini kita akan menambahkan CSS khusus (mirip dengan gambar kartu pertama kecuali tanpa efek blur) untuk memberikan gambar kartu tepi yang membulat dan bayangan kotak. Masukkan CSS berikut di kotak Elemen Utama:
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
Simpan Pengaturan
Tambahkan Gambar #3
Mari tambahkan gambar kartu ketiga dan terakhir ke kolom ketiga (atau kanan) dengan memasukkan modul gambar:
Kemudian perbarui pengaturan sebagai berikut:
Di bawah tab Konten…
URL Gambar: [masukkan gambar kartu #3]
Di bawah tab Desain…
Paksa Lebar Penuh: YA
Margin Kustom: 20% Atas
Gaya Animasi: Slide
Arah Animasi: Atas
Intensitas Animasi: 30%
Simpan Pengaturan
Di bawah tab Lanjutan…
Tambahkan CSS khusus ini di kotak Elemen Utama:
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7); filter: blur(8px) opacity(.4);
Simpan Pengaturan
Besar! Itu menyimpulkan bagian 8 dari halaman demo kami. Lihat hasil akhirnya.
Animasinya sangat hidup dan memanfaatkan fitur paralaks yang menggerakkan latar belakang ke bawah dengan kecepatan yang berbeda dari modul yang duduk di atas saat menggulir. Fakta bahwa kartu dianimasikan ke atas dengan latar belakang turun memberikan kesan kartu mengambang. Saya harus mengatakan, konten benar-benar muncul di bagian ini.
Membangun Bagian 9 dari Demo
Di bagian terakhir kami, kami akan membangun bagian "Tim Kami" sederhana dengan sedikit animasi yang secara harfiah "muncul". Inilah yang akan kita bangun:
Berikut adalah sekilas tata letak dari tampilan wireframe.
Tambahkan Header Bagian
Pertama, tambahkan bagian reguler dengan baris satu kolom. kemudian tambahkan modul teks ke kolom.
Perbarui pengaturan teks sebagai berikut:
Di bawah tab Konten…
Konten: Tim Kami
Di bawah tab Desain…
Font Teks: Raleway, Tebal (B), Huruf Besar (TT)
Ukuran Font Teks: 15px
Warna Teks Teks: rgba(0,0,0,0.32)
Spasi Huruf Teks: 5px
Tinggi Baris Teks: 1.9em
Margin Kustom: 20px
Gaya Animasi: Slide
Arah Animasi: Atas
Durasi Animasi: 500ms
Penundaan Animasi: 1000ms
Di bawah tab Lanjutan…
Simpan Pengaturan
Tambahkan modul teks lain di bawah yang baru saja Anda buat dan perbarui pengaturan sebagai berikut:
Di bawah tab Konten…
Masukkan tag h1 berikut di tab teks kotak konten:
<h1>Highly Skilled Ninjas</h1>
Di bawah tab Desain…
Font Header: Raleway Light
Perataan Teks Tajuk: Tengah
Ukuran Font Tajuk: 48px
Warna Teks Tajuk: #3a3830
Tinggi Garis Tajuk: 1.3em
Margin Kustom: 20px Bawah
Gaya Animasi: Slide
Arah Animasi: Kanan
Intensitas Animasi: 12%
Simpan Pengaturan
Sekarang untuk menambahkan garis pembagi hijau kecil, tambahkan Modul Pembagi di bawah modul teks.
Kemudian perbarui pengaturan pembagi sebagai berikut:
Di bawah tab Konten…
Tampilkan Pembagi: YA
Di bawah tab Desain…
Warna: #7cda24
Berat Pembagi: 3px
Tinggi: 3px
Lebar: 60px (ketik ini)
Penyelarasan Modul: Pusat
Gaya Animasi: Slide
Arah Animasi: Bawah
Durasi Animasi: 500ms
Penundaan Animasi: 1000ms
Intensitas Animasi: 200%
Simpan Pengaturan
Menambahkan empat gambar tim
Untuk menambahkan gambar anggota tim kami, tambahkan empat baris kolom di bawah baris yang berisi header yang baru saja kami buat.
Tambahkan Modul Orang di kolom pertama dan perbarui pengaturan sebagai berikut:
Di bawah tab Konten…
Nama: Nick
URL Gambar: [masukkan foto 150×150 Anda]
Di bawah tab Desain…
Font Header: Raleway Light, Tebal (B), Huruf Besar (TT)
Ukuran Font Tajuk: 13px
Warna Teks Tajuk: rgba(0,0,0,0.71)
Spasi Huruf Header: 3px
Di bawah tab Lanjutan…
Tambahkan CSS berikut di kotak Gambar Anggota:
border-radius: 100%; overflow: hidden; width: 180px; margin: auto auto 20px auto;
Ini akan memberikan gambar kita batas lingkaran yang bagus.
Tambahkan CSS khusus berikut ke Deskripsi Anggota:
text-align: center; display: block;
Ini memusatkan Nama.
Simpan Pengaturan
Sekarang Anda dapat menduplikasi Modul Person yang baru saja Anda buat untuk menambahkan tiga berikutnya untuk mengisi tiga kolom berikutnya. Yang perlu Anda lakukan adalah memperbarui gambar dan nama untuk setiap modul yang Anda duplikat.
Setelah Anda menambahkan keempat modul person Anda, Anda siap untuk langkah terakhir di bagian ini yaitu menata dan menganimasikan baris. Untuk melakukannya, perbarui pengaturan baris sebagai berikut:
Di bawah tab Desain…
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 2
Padding Kustom: 60px Atas
Gaya Animasi: Bounce
Durasi Animasi: 700ms
Penundaan Animasi: 1000ms
Nah itu menyimpulkan bagian 9 dari halaman demo animasi kami. Dan itu juga menyimpulkan seri 6 bagian tentang penggunaan animasi dengan Divi.
Menutup Seri
Saya harap Anda menikmati membangun halaman Demo Animasi kami. Desainnya saja sudah menjadi inspirasi yang luar biasa. Dan penggunaan animasi secara keseluruhan tidak diragukan lagi akan berfungsi sebagai panduan referensi untuk pembuatan halaman di masa mendatang. Terima kasih khusus kepada Kenny Sing, Direktur kami, untuk membuat tata letak ini. Kami sangat bangga akan hal itu, kami ingin menawarkan tata letak ini kepada Anda secara gratis untuk membantu Anda memulai proyek berikutnya.
Bonus: Unduh Bagian Ini untuk Impor Mudah
Sebagai bonus, kami telah mengemas bagian yang ada di tutorial hari ini menjadi unduhan gratis yang bisa Anda dapatkan menggunakan formulir keikutsertaan email di bawah ini. Cukup masukkan email Anda dan tombol unduh akan muncul. Jangan khawatir tentang "berlangganan ulang" jika Anda sudah menjadi bagian dari Buletin Divi kami. Masukkan kembali email Anda tidak akan menghasilkan lebih banyak email atau duplikat. Ini hanya akan mengungkapkan unduhan.
Menikmati!
Unduh Paket Tata Letak
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 menggunakan unduhan ini, mulailah dengan mencari file zip yang disebut All_Animation_Effects_1.zip di folder unduhan kami. Buka ritsletingnya untuk mengungkapkan semua impor dari seri ini-termasuk dua yang terakhir untuk posting ini.
Arahkan di Admin WordPress Anda ke Divi > Divi Library > Impor & Ekspor. Ketika modal portabilitas muncul, klik tab impor dan tombol berlabel pilih file.
Pilih file json yang Anda inginkan dan klik “Import Divi Builder Layouts”. Setelah impor selesai, navigasikan ke pos atau halaman yang ingin Anda tambahkan salah satu bagian di atas.
Aktifkan pembuat visual. Navigasikan ke bagian halaman yang ingin Anda tambahi salah satu bagian di atas. Ketika Anda mengklik ikon tambahkan bagian baru, Anda akan disajikan dengan opsi untuk "Tambah Dari Perpustakaan". Pilih opsi ini dan pilih tata letak yang Anda inginkan.
Saya berharap untuk mendengar dari Anda di komentar di bawah.
Bersulang!