Cara Menggunakan Efek Animasi Baru Divi

Selamat datang di bagian 1 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.

Animasi dapat menghidupkan halaman. Jika dilakukan secara efektif, pengguna dapat menjadi terlibat dan lebih cenderung untuk menjelajahi konten di halaman Anda. Jika dilakukan dengan buruk, animasi dapat sepenuhnya mengalihkan perhatian pengguna dan mengusir mereka dalam keadaan kecewa yang linglung. Kecepatan, waktu, dan intensitas animasi semuanya memainkan peran penting dalam simfoni gerakan ini saat pengguna menggulir halaman ke bawah.

Fitur animasi canggih Divi memungkinkan Anda menambahkan animasi ke elemen apa pun di situs web Anda. Dan Anda dapat menggabungkan elemen animasi ini untuk membuat kombinasi gerakan yang tak terhitung jumlahnya yang membuat bagian Anda menjadi hidup.

Di bagian 1 dari seri ini, saya akan menunjukkan kepada Anda bagaimana menggunakan pembuat visual untuk membangun dan menganimasikan dua bagian pertama dari halaman demo langsung kami yang menampilkan kekuatan fitur animasi Divi.

Mari kita mulai.

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

Bagian 1 dari Seri

Bagian 1

Seksi 2

Bagian 2 dari Seri

Bagian 3

Bagian 4

Bagian 3 dari Seri

Bagian 5

Bagian 4 dari Seri

Bagian 6

Bagian 5 dari Seri

Bagian 7

Bagian 6 dari Seri

Bagian 8

Bagian 9

Mempersiapkan Elemen Desain

Untuk bagian pertama, Anda akan membutuhkan dua gambar. Yang pertama adalah gambar latar belakang layar penuh Anda dengan dimensi sekitar 1280×800. Inilah yang saya gunakan:

Gambar kedua adalah versi editan dari gambar yang sama yang telah dibalik secara vertikal dan memudar ke bawah. Gambar kedua ini akan berfungsi sebagai latar belakang untuk judul utama Anda dan harus berukuran sekitar 800x400.

Untuk membuat gambar terbalik, buka gambar di Preview dan pilih Tools > Flip Vertical atau buka gambar di Photoshop, pilih Image > Image Rotation > Flip Canvas Vertical. Untuk menambahkan efek fade out ke bagian bawah gambar, saya menggunakan alat penghapus dalam mode kuas dengan ukuran 800px dan kekerasan 0%. Lalu saya menahan shift dan menyeret kuas di sepanjang tepi bawah.

Pastikan untuk mengekspornya sebagai file png.

Jika Anda tidak memiliki Photoshop, Anda dapat mencoba solusi pengeditan foto gratis seperti gimpshop untuk menyelesaikan banyak pengeditan desain yang sama. Jika Anda tidak tahu cara menggunakan perangkat lunak pengedit foto (dan tidak peduli untuk mempelajarinya saat ini), silakan tinggalkan gambar kedua untuk saat ini, atau gunakan yang di bawah ini (klik dan seret ke Desktop).

Untuk bagian kedua, Anda akan membutuhkan dua gambar. Yang pertama harus sekitar 730 × 490 seperti ini.

Dan yang kedua harus sekitar 525×660 seperti di bawah ini.

Memahami Terminologi Animasi

Jika Anda belum melakukannya, lanjutkan dan baca posting pembaruan fitur yang memperkenalkan animasi tingkat lanjut. Di akhir posting, Nick memberikan definisi/deskripsi yang bermanfaat dari setiap fitur animasi yang akan Anda temukan di seluruh pembuatnya. Memahami apa yang sebenarnya dilakukan fitur animasi ini penting untuk proses pembuatan.

Setelah Anda memahami fitur animasi ini, mari selami.

Cara Menggunakan Efek Animasi Baru Divi

Berlangganan Saluran Youtube Kami

Tambahkan Pengaturan Halaman Baru Anda

Dari Dasbor WordPress, buka Pages > Add New. Kemudian tambahkan judul ke halaman Anda. Selanjutnya, temukan Pengaturan Halaman Divi di kotak di kanan atas halaman dan pilih Navigasi Dot "ON". Di kotak Atribut Halaman, pilih Halaman Kosong untuk templat halaman Anda. Terakhir, klik tombol "Gunakan Divi Builder" dan gunakan Visual Builder untuk mulai membangun tata letak Anda.

Membangun Bagian 1: Desain dan Animasi Header Layar Penuh

Bagian header ini akan berperilaku seperti modul header lebar penuh yang disetel ke layar penuh. Dengan kata lain, ketika situs dimuat, bagian tersebut akan mengisi seluruh lebar dan tinggi jendela browser, berapa pun ukuran jendelanya. Tapi alih-alih menggunakan modul header fullwidth, kita akan menggunakan bagian standar dan mengatur ketinggian ke 100vh. Dengan begitu kita bisa menambahkan modul teks di dalamnya.

Menggunakan Visual Builder, klik untuk mengedit pengaturan bagian dari bagian standar yang sudah ditampilkan secara default saat meluncurkan builder. Perbarui berikut ini:

Di bawah tab Konten…

Gambar Latar Belakang: [masukkan gambar latar belakang 1280×800 Anda]
Gunakan Efek Paralaks: YA
Metode Paralaks: Paralaks Sejati

Di bawah tab Desain…

Padding Kustom: 5% Atas, 0px Kanan, 5% Bawah, 0px Kiri

Di bawah tab Lanjutan…

Tambahkan CSS Kustom berikut di kotak Elemen Utama:

min-height: 100vh

Baris css yang satu ini memberi tahu bagian untuk menampilkan 100% ketinggian viewport.

Simpan Pengaturan

Selanjutnya masukkan struktur satu kolom ke baris Anda dan tambahkan modul teks ke kolom. Perbarui pengaturan modul teks sebagai berikut:

Di bawah tab Konten.. .

Cukup tambahkan kata "Divi" di dalam kotak konten.

Di bawah tab Desain…

Font Teks: Oswald, Huruf Besar (TT)
Ukuran Font Teks: 14px
Warna Teks Teks: #08408e
Spasi Surat Teks: 1.5em (Anda harus mengetik ini)
Orientasi Teks: Tengah
Margin Kustom: 2%
Gaya Animasi: Balik
Pengulangan Animasi: Sekali
Arah Animasi: Kanan
Durasi Animasi: 2000ms
Penundaan Animasi: 1100ms
Intensitas Animasi: 100%
Opacity Mulai Animasi: 0%
Kurva Kecepatan Animasi: Ease-In-Out

Time Out… Mari kita berhenti sejenak sehingga saya dapat menunjukkan kepada Anda apa yang diperlukan untuk menambahkan animasi serupa ini secara manual.

Berikut adalah html dengan gaya sebaris yang diperlukan untuk animasi:

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

Dan inilah CSS yang dibutuhkan untuk animasi tersebut:

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

Dan ini tidak termasuk kode yang diperlukan untuk mengaktifkan animasi ketika menjadi terlihat di jendela browser. Bagaimanapun, semua itu untuk mengatakan bahwa memiliki fitur animasi bawaan ini adalah penghemat waktu yang sangat besar. Dan dapat melihat animasi secara langsung saat Anda mengedit opsi animasi adalah bonus yang cukup besar.

Sekarang mari kita lanjutkan dengan memperbarui Pengaturan Modul Teks kita:

Di bawah tab Lanjutan…

Tambahkan baris CSS Kustom berikut ke kotak Elemen Utama:

text-indent: 1.5em

Simpan Pengaturan

Selanjutnya tambahkan Modul Teks lain langsung di bawah yang baru saja Anda buat dan perbarui pengaturan sebagai berikut:

Di bawah tab Konten…

Tambahkan html berikut di tab teks kotak konten:

<p><span>Believing</span><br />is  Seeing</p>

Di bawah tab Desain…

Warna Teks: Cahaya
Font Teks: Oswald, Huruf Besar (TT)
Ukuran Font Teks: 8vw (Anda harus mengetik ini; ini membuat ukuran font 8% dari lebar viewport)
Warna Teks Teks: rgba(255.255.255.0.79)
Tinggi Baris Teks: 1.4em
Orientasi Teks: tengah
Gaya Animasi: Lipat
Arah Animasi: Atas
Durasi Animasi: 1800ms
Penundaan Animasi: 0ms
Intensitas Animasi: 60%

Simpan Pengaturan

Efek animasi ini akan menampilkan judul utama dengan melipat (atau berdiri) dari posisi yang tampak datar. Sekarang setelah kita selesai dengan teks judul utama, mari tambahkan gambar latar belakang terbalik ke baris.

Sekarang buka Pengaturan Baris dari baris yang berisi dua modul teks yang baru saja Anda buat dan perbarui Pengaturan sebagai berikut:

Di bawah tab Konten…

Gambar Latar Belakang: [masukkan gambar 800x440 Anda]
Ukuran Gambar Latar Belakang: Sesuai
Posisi Gambar Latar Belakang: Tengah Atas
Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan

Di bawah tab Desain…

Gunakan Lebar Kustom: YA
Satuan: %
Lebar Kustom: 50%
Padding Kustom: 12% Atas, 0% Kanan, 5% Bawah, 0% Kiri
Gaya Animasi: Slide
Arah Animasi: Atas
Penundaan Animasi: 300ms
Intensitas Animasi: 20%

Efek animasi ini menggeser gambar ke atas, hampir seolah-olah naik dari balik pegunungan.

Itu saja untuk bagian pertama. Mari kita lihat desain dan animasi akhir kita.

Tiga elemen animasi di sini termasuk Baris (yang digeser ke atas), modul teks dengan teks “Believing is seen” (yang terlipat dari tengahnya), dan modul teks dengan teks “Divi” (yang tertunda untuk membuka ke kanan setelah elemen lainnya berhenti). Kombinasi tersebut benar-benar melibatkan pengunjung dengan mengungkapkan bagian konten yang berbeda secara terarah dan tepat waktu.

Bagian Bangunan 2

Bagian kedua dari halaman demo animasi kami ini menampilkan cara yang halus, namun sangat keren, untuk mengungkapkan konten di halaman Anda. Bahkan hampir tidak mungkin untuk mengenali semua gerakan pada pandangan pertama.

Untuk membangun bagian kedua, tambahkan bagian reguler di bawah bagian sebelumnya. Di bagian tersebut tambahkan baris dua kolom (satu setengah satu setengah).

Di kolom kiri, tambahkan modul teks dengan pengaturan berikut:

Di bawah tab Konten…

Masukkan html berikut di tab teks kotak konten:

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

Di bawah tab Desain…

Warna Teks: Cahaya
Font Teks: Montserrat
Ukuran Font Teks: 18px
Tinggi Baris Teks: 1.8em
Font Header: Montserrat, Tebal (B), Huruf Besar (TT)
Ukuran Font Header: 39px (desktop)
Tinggi Garis Tajuk: 2.2em
Margin-bawah: 50px
Gaya Animasi: Slide
Arah Animasi: Atas
Intensitas Animasi: 10%

Efek animasi ini akan menampilkan blok teks dengan menggesernya ke atas.

Simpan Pengaturan

Selanjutnya tambahkan modul tombol di bawah modul Teks yang baru saja Anda buat. Perbarui pengaturan modul tombol sebagai berikut:

Di bawah tab Konten…

Teks Tombol: Pelajari Lebih Lanjut
URL Tombol: # (atau apa pun yang Anda inginkan)

Di bawah tab Desain…

Penjajaran Tombol: Kiri
Warna Teks: Cahaya
Gunakan Gaya Kustom untuk Tombol: YA
Ukuran Teks Tombol: 15px
Radius Perbatasan Tombol: 0
Jarak Huruf Tombol: 3px
Font Tombol: Montserrat, Tebal (B), Huruf Besar (TT)
Tampilkan Ikon Tombol: YA
Padding Kustom: 10px Atas, 30px Kanan, 10px Bawah, 30px Kiri
Gaya Animasi: Slide
Arah Animasi: Bawah
Penundaan Animasi: 100ms
Intensitas Animasi: 10%

Untuk mengimbangi efek teks sebelumnya di atas, efek animasi ini akan menampilkan tombol dengan menggesernya ke bawah ke tampilan dengan sedikit penundaan.

Anda belum dapat melihat teks dan tombol karena saat ini teks berwarna putih dengan latar belakang putih. Tidak apa-apa. Kami akan segera menambahkan latar belakang kami.

Selanjutnya tambahkan Modul Pembagi ke kolom kanan.

Kemudian perbarui Pengaturan sebagai berikut:

Di bawah tab Desain…

Tinggi: 260 piksel

Di bawah tab Lanjutan…

Nonaktifkan visibilitas di Desktop

Menambahkan pembagi di sini akan membantu gambar latar belakang tetap terlihat di perangkat seluler.

Simpan Pengaturan

Sekarang Mari tambahkan latar belakang kita ke masing-masing kolom kita. Buka Pengaturan Baris dan perbarui yang berikut:

Di bawah tab Konten…

Kolom 1 Warna Gradien Latar Belakang: #fe8840, rgba(238,78,78,0.9)
Kolom 1 Arah Gradien: 135deg
Kolom 2 Gambar Latar Belakang: [masukkan gambar 730×490 Anda]
Kolom 2 Posisi Gambar Latar: Kiri Atas
Pengulangan Gambar Latar Kolom 2: Tidak Ada Pengulangan

Di bawah tab Desain…

Gunakan Lebar Kustom: YA
Lebar Kustom: 1366px
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 1
Samakan Tinggi Kolom: YA
Padding Kustom: 0px Atas, 0px Kanan, 0px Bawah, 0px Kiri
Kolom 1 Padding Kustom: 5% Atas, 7% Kanan, 5% Bawah, 7% Kiri
Gaya Animasi: Lipat
Arah Animasi: Atas
Durasi Animasi: 800ms

Efek animasi ini akan menampilkan seluruh baris dengan melipat (atau berdiri) hingga terlihat.

Di bawah tab Lanjutan…

Tambahkan CSS Kustom berikut ke kotak Elemen Utama:

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

Simpan Pengaturan

Selanjutnya tambahkan baris dua kolom (sepertiga dua pertiga) di bawah baris yang baru saja Anda buat.

Di kolom kiri tambahkan Modul Pembagi dan perbarui pengaturan sebagai berikut:

Di bawah tab Desain…

Tinggi: 400px

Di bawah tab Lanjutan…

Nonaktifkan visibilitas di Desktop

Menambahkan pembagi di sini akan membantu gambar latar belakang tetap terlihat di perangkat seluler.

Simpan Pengaturan

Untuk menghemat waktu, silakan klik kanan dan salin modul teks di kolom kiri Baris di atas yang berisi teks "Waktu adalah Uang". Kemudian rekatkan ke kolom kanan (dua pertiga) Baris di bawah ini.

Perbarui pengaturan Modul Teks baru sebagai berikut:

Di bawah tab Konten…

Ubah teks header h1 menjadi "Commute Like a Pro" di kotak konten.

Di bawah tab Desain…

Warna Teks Teks: #a8a8a8
Warna Teks Tajuk: #414159
Gaya Animasi: Slide
Arah Animasi: Bawah
Intensitas Animasi: 10%

Efek animasi ini mengungkapkan blok teks dengan menggesernya ke bawah ke tampilan.

Sekarang klik kanan dan salin modul tombol di kolom kiri baris di atas dan tempel di bawah modul teks yang baru saja Anda edit.

Perbarui Pengaturan Modul Tombol sebagai berikut:

Warna Teks Tombol: #ff4823
Warna Batas Tombol: #ff4823
Tombol Arahkan Warna Teks: #ff2323

Simpan Pengaturan

Untuk langkah terakhir, edit Pengaturan Baris Anda dengan memperbarui yang berikut:

Di bawah tab Konten…

Warna Latar Belakang: #ffffff
Kolom 1 Gambar Latar Belakang: [masukkan gambar 525×660 Anda]
Kolom 1 Posisi Gambar Latar: Kiri Atas
Pengulangan Gambar Latar Kolom 1: Tidak Ada Pengulangan
Kolom 2 Warna Gradien Latar Belakang: rgba(255,255,255,0.91), #ffffff
Kolom 2 Arah Gradien: 135deg

Di bawah tab Desain…

Gunakan Lebar Kustom: YA
Lebar Kustom: 1040px
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 1
Samakan Tinggi Kolom: YA
Padding Kustom: 0px Atas, 0px Kanan, 0px Bawah, 0px Kiri
Kolom 2 Padding Kustom: 5% Atas, 7% Kanan, 5% Bawah, 7% Kiri
Gaya Animasi: Lipat
Arah Animasi: Bawah
Durasi Animasi: 800ms

Efek animasi ini akan menampilkan seluruh baris dengan melipatnya ke dalam tampilan.

Di bawah tab Lanjutan…

Tambahkan CSS khusus berikut di bawah kotak Elemen Utama:

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

Itu saja untuk bagian ini. Lihat hasil Anda.

Karena animasi dan elemen desain bagian ini halus, saya pikir ini adalah contoh bagus dari jenis desain dan animasi yang dapat digunakan di sebagian besar halaman. Baris atas dan bawah terbuka seperti Anda akan melihat pembukaan buku dari belakang. Teks dan tombol bergerak sedikit ke atas di baris atas dan ke bawah di baris bawah. Sebuah kombinasi yang hebat.

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.

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 menggunakan unduhan ini, mulailah dengan mencari file zip bernama Animation_Effects_Part_1.zip di folder unduhan kami. Buka zip untuk mengungkapkan impor berikut.

Efek Animasi Bagian 1 (bagian 1).json

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

Saya berharap kedua bagian ini akan menjadi inspirasi untuk build mendatang menggunakan fitur animasi Divi. Konsep desainnya saja sudah bagus dan tata letaknya dapat dengan mudah disesuaikan ke situs web mana pun hanya dengan beberapa penyesuaian kecil. Tetap disini karena kami akan membahas lebih banyak lagi dalam seri ini.

Akan datang

Di bagian selanjutnya dari seri ini saya akan melanjutkan penjelajahan fitur animasi canggih Divi dengan membangun bagian 3 dan 4 dari halaman demo animasi kami.

Inilah yang dapat Anda harapkan untuk dibangun.

Bagian 3:

Bagian 4:

Silakan tinggalkan komentar yang Anda miliki di bawah ini.

Bersulang!