Menggunakan Animasi Divi untuk Menggulung Konten Anda ke Tampilan
Diterbitkan: 2017-10-18Selamat datang di bagian 5 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, kami membuat bagian 6 dari halaman demo animasi kami. Saya menunjukkan kepada Anda cara mendesain tata letak untuk menampilkan unduhan produk dengan warna-warna cerah, bayangan bercahaya, dan animasi yang presisi.
Hari ini, kita akan membangun Bagian 7 dari halaman demo animasi kita yang merupakan contoh sempurna bagaimana menggunakan efek animasi roll untuk menambahkan gerakan seperti hidup ke konten Anda. Produk akhir akan memberikan kesan teks dan ponsel meluncur dan berputar ke tampilan dari sudut yang berbeda saat Anda menggulir halaman ke bawah.
Ini adalah salah satu animasi favorit saya. Mari kita mulai.
Berikut adalah Sneak Peek dari Desain dan Animasi yang Akan Kami Bangun di Postingan Hari Ini
Mempersiapkan Elemen Desain
Anda akan membutuhkan tiga gambar untuk tutorial ini. Dua gambar pertama gambar vertikal harus sekitar 580x950 diputar pada sudut 10% berlawanan arah jarum jam. Gambar horizontal harus berukuran 1250x608 (juga diputar pada sudut 10% berlawanan arah jarum jam) dengan sekitar 300px ruang latar belakang transparan ekstra di sebelah kanan gambar sehingga pas dengan baik di kolom yang disediakan. Pastikan gambar ponsel dalam format png dengan latar belakang transparan. Berikut adalah gambar yang saya gunakan untuk posting hari ini.
Gambar Telepon Vertikal #1
Gambar Telepon Vertikal #2
Gambar Telepon Vertikal #3
Menggunakan Animasi Divi untuk Menggulung Konten Anda ke Tampilan
Gambar Telepon Vertikal #3
Menggunakan Animasi Divi untuk Menggulung Konten Anda ke Tampilan
Berlangganan Saluran Youtube Kami
Membangun Bagian 7 dari Demo
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 (seperempat seperempat satu setengah) 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: 91%
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 1
Kolom 2 Padding Kustom: 5% Atas
Kolom 3 Padding Kustom: 24% Atas
Menambahkan Gambar #1
Di kolom pertama (paling kiri) tata letak kami, tambahkan Modul Gambar dan perbarui pengaturan gambar sebagai berikut:
Di bawah tab Konten…
URL Gambar: [unggah gambar #1]
Di bawah tab Desain…
Paksa Lebar Penuh: YA
Gaya Animasi: Roll
Arah Animasi: Kanan
Intensitas Animasi: 16%
Animasi Mulai Opacity: 100%
Simpan Pengaturan
Menambahkan Teks Animasi dengan Modul Pembagi dan Ajakan Bertindak
Sekarang pindah ke kolom tengah (seperempat) di mana modul pembagi akan digunakan untuk menambahkan garis pembagi pendek di atas teks.
Tambahkan modul pembagi ke kolom.
Kemudian perbarui pengaturan sebagai berikut:
Di bawah tab Konten…
Tampilkan Pembagi: YA
Di bawah tab Desain…
Warna: #e0c48f
Berat Pembagi: 3px
Lebar: 60px (Anda harus mengetikkan nilai ini karena defaultnya adalah persentase)
Penyelarasan Modul: default (kiri)
Padding Kustom: 80px Atas, 80px Kiri
Gaya Animasi: Lipat
Arah Animasi: Kanan
Durasi Animasi: 1200ms
Penundaan Animasi: 50ms
Intensitas Animasi: 70%
Opacity Mulai Animasi: 0%
Simpan Pengaturan
Di bawah Modul Pembagi, tambahkan Modul Ajakan Bertindak dengan pengaturan berikut:
Di bawah tab Konten…
Judul : “1000 Kata”
Teks Tombol: “Pelajari Lebih Lanjut”
Isi: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id.”
Tautan: #
Gunakan Warna Latar Belakang: TIDAK
Di bawah tab Desain…
Warna Teks: Gelap
Orientasi Teks: Kiri
Font Header: Lato, Tebal (B) Huruf Besar (TT)
Ukuran Font Tajuk: 38px
Warna Teks Tajuk: #33454f
Spasi Surat Header: 0.2em
Tinggi Garis Tajuk: 1.4em
Font Tubuh: Lato
Ukuran Font Tubuh: 18px
Warna Teks Tubuh: #9b9b9b
Tinggi Garis Tubuh: 1.8em
Gunakan Gaya Kustom untuk Tombol: YA
Ukuran Teks Tombol: 15px
Warna Teks Tombol: #f2733c
Warna Latar Belakang Tombol: rgba(225,225,225,0)
Lebar Batas Tombol: 0px
Jarak Huruf Tombol: 2px
Font Tombol: Lato, Tebal (B), Huruf Besar (TT)
Ikon Tombol: panah kanan
Hanya tampilkan Ikon Saat Arahkan ke Tombol: TIDAK
Tombol Arahkan Jarak Huruf: 0px
Gaya Animasi: Lipat
Arah Animasi: Kanan
Durasi Animasi: 1200ms
Penundaan Animasi: 50ms
Intensitas Animasi: 70%
Opacity Mulai Animasi: 0%
Simpan Pengaturan
Menambahkan Gambar #2
Selanjutnya tambahkan modul Gambar di bawah modul Ajakan Bertindak yang baru saja Anda buat. Perbarui pengaturan gambar sebagai berikut:
Di bawah tab Konten…
URL Gambar: [unggah gambar #2]
Di bawah tab Desain…
Paksa Lebar Penuh: YA
Gaya Animasi: Roll
Arah Animasi: Kiri
Intensitas Animasi: 13%
Animasi Mulai Opacity: 100%
Tambahkan Gambar #3
Itu saja untuk kolom kedua (tengah). Sekarang mari tambahkan Gambar #3 di kolom ketiga (paling kanan). Untuk melakukan ini, kita dapat menduplikasi/menyalin modul gambar yang baru saja Anda tambahkan ke bagian bawah kolom kedua dan menempelkannya ke kolom ketiga. Karena gaya Animasinya sama, yang perlu Anda perbarui untuk modul gambar baru adalah URL gambar sebenarnya.
Duplikat dan Sesuaikan Pembagi dan Modul Ajakan Bertindak
Setelah Anda menambahkan URL gambar baru ke gambar duplikat di kolom tiga, lanjutkan duplikat/salin Modul Pembagi dan Modul Ajakan Bertindak yang Anda buat di bagian atas kolom kedua dan seret/tempel dua modul di bawah gambar #3 di kolom ketiga.
Untuk Modul Pembagi, ubah pengaturan Arah Animasi di bawah tab Desain ke “Kiri”.
Untuk Modul Ajakan Bertindak kami yang baru, lanjutkan dan perbarui pengaturan berikut:
Di bawah tab Konten…
Judul: Cara baru membangun
Di bawah tab Desain…
Padding Kustom: 80px Kanan, 80px Bawah, 80px Kiri
Arah Animasi: Kiri
Sekarang mari kita lihat hasil akhir kita…
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 bernama Animation_Effects_Part_5.zip di folder unduhan kami. Buka zip untuk mengungkapkan impor berikut.
Efek Animasi Bagian 5 (bagian 1).json
Efek Animasi Bagian 5 (bagian 2).json
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.
Membungkus
Tata letak ini agak sulit untuk dilakukan. Tapi, begitu Anda mendapatkan gambar yang tepat dan jarak yang tepat, animasi menyatukan seluruh tata letak dengan baik. Pengguliran gambar telepon yang seperti hidup hampir terlihat seperti seseorang sedang menggesernya di atas meja putih ke dalam pandangan kami saat kami menggulir halaman ke bawah. Contoh animasi roll ini jelas merupakan salah satu yang menonjol.
Akan datang
Dalam posting berikutnya, saya akan menyimpulkan seri kami dengan bagian 6. Saya akan menunjukkan kepada Anda bagaimana menggunakan animasi slide dengan beberapa gambar kustom dan css untuk membuat tata letak yang menakjubkan untuk menampilkan resep memasak. Namun tata letak yang sama dapat diubah dan digunakan untuk banyak item unggulan yang berbeda.
Saya berharap untuk mendengar dari Anda di komentar.