Menggunakan Animasi Lipat Divi untuk Membuat Blurbs Mekar

Diterbitkan: 2017-10-16

Selamat datang di bagian 4 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, saya menunjukkan kepada Anda beberapa cara kreatif untuk merancang dan menganimasikan 4 modul uraian yang disusun untuk proses langkah demi langkah.

Hari ini, kita akan membangun Bagian 6 dari halaman demo animasi kita. Bagian ini menampilkan beberapa desain dan animasi hebat untuk menampilkan produk atau unduhan unggulan. Penggunaan warna dan efek mekar dari animasi pada modul blurb tersebut benar-benar membuat bagian ini menonjol.

Mari selami!

Berikut adalah Sneak Peek dari Apa yang Akan Kami Bangun di Postingan Hari Ini

animasi

Menggunakan Animasi Lipat Divi untuk Membuat Blurbs Mekar

Berlangganan Saluran Youtube Kami

Bagian Bangunan 6

Tambahkan dan Sesuaikan Bagian Anda

Menggunakan Visual Builder, Mari kita mulai dengan menambahkan bagian reguler lainnya ke tata letak kita. Kemudian tambahkan baris tiga kolom (setengah seperempat seperempat) ke bagian Anda.

animasi

Sebelum kami menambahkan modul pertama kami, buka bagian pengaturan dan perbarui yang berikut:

Di bawah tab Konten…

Warna Latar Belakang: #00252d

animasi

Di bawah tab Desain…

Padding Kustom: 80px Atas, 80px Bawah

Simpan Pengaturan

Tambahkan Header Menggunakan Modul Teks

Sekarang mari kembali ke baris tiga kolom dan tambahkan Modul Teks di kolom kiri. Perbarui Pengaturan Teks sebagai berikut:

Di bawah tab Konten…

Tambahkan header h1 berikut di tab teks kotak konten:

<h1>Build Like You Mean It</h1>

animasi

Di bawah tab Desain…

Font Header: Lato, Tebal (B)
Ukuran Font Tajuk: 38px
Warna Teks Tajuk: #ffffff
Tinggi Garis Tajuk: 1.3em

CATATAN: Karena konten kita memiliki header h1, hanya opsi teks header yang akan berfungsi untuk menatanya.

Margin Kustom: 20px Bawah

Gaya Animasi: Slide
Arah Animasi: Kiri
Intensitas Animasi: 16%

animasi

CATATAN: Animasi ini membuat header sedikit bergeser ke kiri. Kuncinya di sini adalah untuk memberikan intensitas yang lebih rendah sehingga slide tidak menutupi banyak tanah atau terlalu lama untuk menyelesaikannya.

Simpan Pengaturan

Tambahkan Teks Menggunakan Modul Teks Lain

Biasanya, Anda mungkin akan melanjutkan dan menambahkan sisa teks Anda di bawah header h1 dalam modul teks yang sama. Tetapi karena kita ingin menambahkan efek animasi yang berbeda ke header h1 dan teks di bawahnya, kita perlu membuat modul teks lain. Silakan dan tambahkan modul teks 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 nisl. Sed nec purus tempus, sagittis mi id, efficitur nisl.”

Di bawah tab Desain…

Warna Teks: Cahaya
Ukuran Font Teks: 18px
Warna Teks Teks: rgba(255,255,255,0.66)
Tinggi Baris Teks: 1.9em
Margin Kustom: 40px Bawah

Gaya Animasi: Slide
Arah Animasi: Kiri
Intensitas Animasi: 8%

CATATAN: Perhatikan bagaimana pengaturan animasi untuk teks ini memiliki intensitas yang sedikit lebih rendah (8%) daripada teks header di atasnya (16%). Itu berarti ia akan tampak bergerak lebih cepat karena menempuh jarak yang lebih sedikit pada durasi yang sama. Meskipun kedua modul teks membutuhkan waktu (durasi) yang sama untuk menyelesaikan animasi, karena mereka mulai pada tingkat intensitas yang berbeda, mereka akan bergerak dengan kecepatan yang berbeda. Ini seperti dua pembalap yang memulai dan mengakhiri balapan pada saat yang sama dengan salah satu dari mereka memiliki start awal yang signifikan.

animasi

Simpan Pengaturan

Tambahkan Tombol

Sekarang mari tambahkan Modul Tombol di bawah dua modul teks di kolom kiri. Kemudian perbarui pengaturan sebagai berikut:

Di bawah tab Konten…

Teks Buttom: Unduh semua
URL tombol [masukkan url]

Di bawah tab Desain…

Gunakan Gaya Kustom untuk Tombol: YA

Ukuran Teks Tombol: 15px
Warna Teks Tombol: #01254c
Tombol Warna latar belakang: #ffcd1c
Lebar Batas Tombol: 0px
Radius Perbatasan Tombol: 65px
Jarak Huruf Tombol: 1px
Font Tombol: Tebal (B), Huruf Besar (TT)

animasi

Padding Kustom: 10px Atas, 30px Kanan, 10px Bawah, 30px Kiri

Gaya Animasi: Slide
Arah Animasi: Kiri
Intensitas Animasi: 16%

CATATAN: Efek animasi ini cocok dengan animasi modul teks pertama.

animasi

Jangan lupa untuk menambahkan efek cahaya yang indah menggunakan properti box shadow css. Temukan kotak Elemen Utama di bawah Custom CSS dan tambahkan yang berikut:

box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);

Simpan Pengaturan

Tambahkan Anda Modul Blurb Pertama

Itu saja untuk kolom kiri kami. Sekarang mari tambahkan Modul Blurb ke kolom tengah (yang merupakan kolom seperempat pertama).

animasi

Perbarui pengaturan sebagai berikut:

Di bawah tab Konten…

Judul: Divi
Gunakan Ikon: YA
Ikon: [pilih ikon]

Warna Gradien Latar Belakang: #8b56ff, #5d3dff
Tipe Gradien: Linier
Arah Gradien: 140deg

Di bawah tab Desain…

Warna Ikon: #ffffff
Warna Teks: Cahaya
Orientasi Teks: Tengah
Font Header: Tebal (B), Huruf Besar (TT)
Spasi Huruf Header: 10px

Margin Kustom: 12% Bawah
Padding Kustom: 40px Atas, 30px Kanan, 30px Bawah, 30px kiri

Gaya Animasi: Lipat
Arah Animasi: Kiri
Penundaan Animasi: 200ms

CATATAN: Arah animasi masing-masing modul uraian akan berbeda. Yang pertama ini terbentang ke kiri.

Di bawah tab Lanjutan…

Di sinilah kita dapat menambahkan efek cahaya itu ke modul kita dan membuat sedikit indentasi header.

Tambahkan CSS berikut ke kotak Elemen Utama:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);

Tambahkan CSS berikut ke kotak Judul Blurb:

text-indent: 10px;

animasi

Simpan Pengaturan

Duplikat Modul Blurb untuk Membangun Tiga Blurb Berikutnya

Sekarang setelah kita memiliki Modul Blurb pertama yang dirancang dan dianimasikan, kita dapat menduplikasi modul untuk membuat uraian yang tersisa.

Arahkan kursor ke Modul Blurb dan klik ikon modul duplikat. Dalam modul duplikat baru yang muncul di bawah, perbarui pengaturan sebagai berikut:

Di bawah tab Konten…

Judul : Bloom
Ikon: [pilih ikon baru]
Warna Gradien Latar Belakang: #ff56f9, #c43dff

animasi

Di bawah tab Desain…

Arah Animasi: Bawah

CATATAN: Animasi lipat memiliki arah ke bawah pada uraian ini.

animasi

Di bawah tab Lanjutan…

Ganti CSS di kotak Elemen Utama dengan yang berikut ini:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);

Simpan Pengaturan

Buat duplikat lain dari modul uraian dan seret duplikat itu ke kolom paling kanan. Kemudian perbarui Modul Blurb itu dengan pengaturan berikut:

Di bawah tab Konten…

Judul: Ekstra
Ikon: [pilih ikon baru]
Warna Gradien Latar Belakang: #56ffda, #38d5ea

Di bawah tab Desain…

Arah Animasi: Atas

CATATAN: Animasi lipat memiliki arah ke atas pada uraian ini.

animasi

Di bawah tab Lanjutan…

Ganti CSS di kotak Elemen Utama dengan yang berikut ini:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);

Buat duplikat lain dari modul uraian yang baru saja Anda perbarui di kolom kanan sehingga muncul tepat di bawahnya. Kemudian perbarui Modul Blurb itu dengan pengaturan berikut:

Di bawah tab Konten…

Judul: Monarch
Ikon: [pilih ikon baru]
Warna Gradien Latar Belakang: #f2743a, #ff5656

Di bawah tab Desain…

Arah Animasi: Kanan

CATATAN: Pada uraian singkat ini, animasi terbentang ke kanan.

Di bawah tab Lanjutan…

Ganti CSS di kotak Elemen Utama dengan yang berikut ini:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);

CATATAN: Karena 4 uraian ini semuanya akan memiliki gaya dan penundaan yang sama, ini menciptakan efek mekar bunga terbalik karena keempat modul akan terlipat ke arah yang berbeda.

animasi

Simpan Pengaturan

Sekarang mari kita perbaiki jarak dengan memperbarui pengaturan baris Anda sebagai berikut:

Di bawah tab Desain…

Gunakan Lebar Kustom: YA
Lebar Kustom: 1366px
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 2

Padding Kustom: 80px Atas, 0px Kanan, 160px Bawah, 0px Kiri
Kolom 1 Padding Kustom: 140px Atas

Bangun Baris Kedua

Sekarang kita siap untuk membuat baris berikutnya untuk bagian kita. Untuk mempercepat, kita akan menduplikasi dan menyalin elemen desain dari baris dan modul yang dirancang sebelumnya.

Pertama mari tambahkan baris satu kolom baru ke bagian kita. Kemudian perbarui pengaturan baris dengan yang berikut:

Gunakan Lebar Kustom: YA
Lebar Kustom: 1366px
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 2

Simpan Pengaturan

Selanjutnya salin modul teks pertama di baris pertama yang Anda buat yang berisi judul h1. Kemudian perbarui pengaturan sebagai berikut:

Di bawah tab Konten…

Ganti tag h1 saat ini dengan yang berikut:

<h1>Don't Settle for Less</h1>

Di bawah tab Desain…

Orientasi Teks: Tengah
Gaya Animasi: Balik
Intensitas Animasi: 70%

Simpan Pengaturan

Selanjutnya salin modul tombol dari baris sebelumnya dan tempel di bawah modul teks yang baru saja Anda perbarui di baris kedua. Kemudian perbarui modul tombol sebagai berikut:

Di bawah tab Konten…

Teks Tombol: Gabung Hari Ini

Di bawah tab Desain…

Penjajaran Tombol: Tengah

Gaya Animasi: Balik
Intensitas Animasi: 70%

CATATAN: Tombol dan header di atasnya memiliki animasi yang sama.

animasi

Simpan Pengaturan

Sekarang untuk baris terakhir kami. Buat baris baru dengan struktur satu-setengah-setengah kolom. Sebelum menambahkan modul Anda, perbarui pengaturan baris sebagai berikut:

Di bawah tab Desain…

Gunakan Lebar Talang Kustom: YA
Lebar Talang: 2

Simpan Pengaturan

Selanjutnya, salin modul Blurb "Divi" ungu dari baris Anda sebelumnya dan tempelkan ke kolom kiri baris baru Anda. Kemudian perbarui pengaturan berikut:

Di bawah tab Konten…

Judul: Pembangun
Ikon: [pilih ikon baru]
Warna Gradien Latar Belakang: #ff568e, #ff3d5d

CATATAN: Arah animasi seharusnya sudah "kiri" jika Anda menyalin modul uraian yang benar. Jika tidak pastikan ya.

Di bawah tab Lanjutan…

Ganti CSS di kotak Elemen Utama dengan yang berikut ini:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);

Simpan Pengaturan

Selanjutnya salin modul blurb “Ekstra” berwarna biru di bagian atas kolom paling kanan di baris pertama yang Anda buat. Kemudian tempel di kolom kanan baris ketiga baru Anda.

Kemudian perbarui pengaturan blurb sebagai berikut:

Di bawah tab Konten…

Judul : Tenang
Ikon: [pilih ikon baru]
Warna Gradien Latar Belakang: #3da4ff, #385eea

CATATAN: Arah animasi seharusnya sudah "naik" jika Anda menyalin modul uraian yang benar. Jika tidak pastikan ya.

Di bawah tab Lanjutan…

Ganti CSS di kotak Elemen Utama dengan yang berikut ini:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);

Simpan Pengaturan

Itu dia.

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_4.zip di folder unduhan kami. Buka zip untuk mengungkapkan impor berikut.

Efek Animasi Bagian 4 (bagian 1).json

Efek Animasi Bagian 4 (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.

tambahkan-bagian-dari-perpustakaan

Membungkus

Saya harap Anda menikmati membangun bagian yang menakjubkan ini bersama-sama. Kombinasi warna, bayangan bercahaya, dan animasi kreatif menjadikan ini tata letak yang luar biasa untuk menampilkan unduhan atau produk Anda sendiri.

Akan datang

Di bagian 5 saya akan menunjukkan kepada Anda cara berhasil menggabungkan gaya animasi Roll ke ponsel dalam bagian Anda.

animasi

Saya berharap untuk mendengar dari Anda di komentar di bawah.

Bersulang!