Menggunakan Animasi Divi untuk Menggulung Kandungan Anda ke dalam Paparan

October 23, 2017

Selamat datang ke bahagian 5 dalam siri 6 bahagian ini yang akan mengajar anda bagaimana menggunakan pilihan Animasi Animasi Divi untuk merancang bahagian halaman yang hebat. Saya akan berjalan anda melalui cara untuk membina bahagian yang berbeza dari halaman demo langsung kami untuk menunjukkan teknik untuk menambah animasi ke laman web anda. Ciri-ciri animasi benar-benar menyeronokkan dan mudah digunakan. Dan dengan Visual Builder, anda dapat melihat ciptaan anda hidup setiap peringkat perjalanan. Datang dan sertai saya semasa kita meneroka kuasa animasi Divi.


Dalam catatan terakhir kami, kami membina bahagian 6 halaman demo animasi kami. Saya menunjukkan kepada anda bagaimana untuk merancang susun atur untuk memaparkan muat turun produk dengan warna-warna terang, bayang-bayang yang bercahaya, dan animasi yang tepat.

Hari ini, kami akan membina Seksyen 7 halaman demo animasi kami yang merupakan contoh yang sempurna untuk menggunakan kesan animasi roll untuk menambah pergerakan seperti hayat ke kandungan anda. Produk akhir akan memberi kesan teks dan telefon bimbit yang tergelincir dan berputar ke paparan dari sudut yang berbeza semasa anda menatal ke bawah halaman.

Ini adalah salah satu animasi kegemaran saya. Mari bermula.

Berikut adalah Mengintip Reka Reka Bentuk dan Animasi Kami Akan Membina di Post Hari ini

"

Menyediakan Elemen Reka Bentuk

Anda memerlukan tiga imej untuk tutorial ini. Dua gambar menegak pertama harus berada di sekitar 580 × 950 diputar pada sudut 10% dari sudut mengikut arah jam. Imej mendatar harus 1250 × 608 (juga berputar pada lawan 10% pada sudut mengikut arah jam) dengan kira-kira 300px ruang latar belakang yang lebih telus di sebelah kanan imej supaya sesuai dengan lajur yang disediakan. Pastikan imej telefon dalam format png dengan latar belakang telus. Berikut adalah imej yang saya gunakan untuk jawatan hari ini.

Gambar Telefon Menegak # 1
" "

Menggunakan Animasi Divi untuk Menggulung Kandungan Anda ke dalam Paparan

” animasi “width =” 1250 “height =” 608 ”

Melanggan Saluran Youtube Kita

Bangunan Seksyen 7 Demo

Sebelum kita memulakan proses pembinaan, inilah pandangan sekilas pada perancangan kerangka tata letak bahagian yang akan kita buat menggunakan pembina visual.

"

Menggunakan Pembina Visual, Mari mulakan dengan menambah seksyen biasa lagi untuk susun atur kami. Kemudian tambah tiga lajur (satu perempat satu setengah keempat) ke bahagian anda.

"

Kemas Kini Tetapan Baris

Sebelum kami menambah modul pertama kami, pergi ke tetapan baris dan kemas kini yang berikut:

Di bawah tab Rekabentuk …

Gunakan Lebar Tersuai: YA
Lebar Tersuai: 91%
Gunakan Lebar Lapisan Khas: YA
Lebar Galang: 1

"

Lajur 2 Padding Custom: 5% Top
Lajur 3 Padding Custom: 24% Top

"

Menambah Imej # 1

Pada lajur pertama (jauh kiri) susun atur kami, tambahkan Modul Imej dan kemas kini tetapan imej seperti berikut:

Di bawah tab Kandungan …

URL Imej: [upload image #1]

Di bawah tab Rekabentuk …

Force Fullwidth: YA

Animasi Animasi: Roll
Arah animasi: Kanan
Intensiti Animasi: 16%
Animation Start Opacity: 100%

"

NOTA: Selain dari kesan animasi Rolling, apa yang unik mengenai persediaan animasi ini ialah anda memulakan animasi dengan kelegapan penuh supaya imej telefon sentiasa kelihatan. Selain itu, keamatan 16% menyimpan “roll” ke tahap minimum. Ini mewujudkan animasi yang lebih seperti hayat. Ia juga membuat sejak mengarahkan animasi ke kanan kerana imej berada di sebelah kiri halaman.

Simpan Tetapan

Menambah Teks Animasi dengan Pembahagi dan Panggilan untuk Modul Tindakan

Sekarang bergerak ke lajur pertengahan (seperempat) di mana modul divider akan digunakan untuk menambah garis pembatas pendek di atas teks.

Tambah modul divider ke lajur.

Kemudian kemas kini tetapan seperti berikut:

Di bawah tab Kandungan …

Tunjuk Pembahagi: YA

Di bawah tab Rekabentuk …

Warna: # e0c48f
Berat divider: 3px
Lebar: 60px (anda perlu mengetik nilai ini sejak piawai adalah peratusan) 80px Atas, 80px Kiri

Animasi Animasi: Lipat
Arah Animasi: Kanan
Tempoh Animasi: 1200ms
Keterlambatan Animasi: 50ms

"

Simpan Tetapan

Di bawah Modul Pembahagi menambah Panggilan ke Modul Tindakan dengan tetapan berikut:

Di bawah tab Kandungan …

Tajuk: “1000 Kata”
Teks Butang: “Ketahui Lebih Lanjut”
Kandungan: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum adalah vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id. ”
Pautan: #
Gunakan Warna Latar: TIDAK

"

Di bawah tab Rekabentuk …

Warna Teks: Gelap
Orientasi Teks: Kiri
Huruf Font: Lato, Bold (B) Huruf Besar: Header Letter Spacing: 0.2em
Header Line Height: 1.4em

"

Body Font: Lato
Body Font Size: 18px
Body Text Color: # 9b9b9b
Body Line Height: 1.8em

"

Gunakan Gaya Custom untuk Butang: YES
Button Text Size: 15px
Button Text Color: # f2733c
Button Background Color: rgba (225,225,225,0) Tombol Button Button: 2px
Button Font: Lato, Bold (B), Uppercase (TT)
Icon Button: arrow right
Only show Icon On Hover for Button: : 0px

"

Animasi Animasi: Lipat
Arah Animasi: Kanan
Tempoh Animasi: 1200ms
Keterlambatan Animasi: 50ms

"

NOTA: Animasi ini memberikan penampilan teks lipat keluar dari sebelah kiri. Perhatikan bahawa tetapan animasi ini sepadan dengan animasi modul divider di atasnya.

Simpan Tetapan

Menambah Imej # 2

Seterusnya menambah modul Imej di bawah modul Panggilan ke Tindakan yang anda buat sahaja. Kemas kini tetapan imej seperti berikut:

Di bawah tab Kandungan …

URL Imej: [upload image #2]

Di bawah tab Rekabentuk …

Force Fullwidth: YA

Animasi Animasi: Roll
Arah Animasi: Kiri
Keamatan Animasi: 13%
Animation Start Opacity: 100%

"

Tambah Imej # 3

Itu untuk lajur kedua (tengah) kami. Sekarang mari kita tambah Imej # 3 di lajur ketiga (jauh). Untuk melakukan ini, kita boleh menduplikasi / menyalin modul imej yang baru anda masukkan ke bahagian bawah lajur kedua dan tampalkannya ke lajur ketiga. Oleh kerana gaya Animasi adalah sama, semua yang anda perlu kemas kini untuk modul imej baharu adalah URL imej sebenar.

Duplicate and Customize the Divider dan Call To Action MOdule

Selepas anda menambah URL imej baru pada imej yang diduplikasi dalam lajur tiga, teruskan pendua / menyalin kedua-dua Modul Pembahagi dan Modul Panggilan ke Tindakan yang anda buat di bahagian atas lajur kedua dan seret / tampal kedua modul di bawah imej # 3 dalam lajur ketiga.

Untuk Modul Pembahagi, ubah tetapan Arah Animasi di bawah tab Reka Bentuk ke “Kiri”.

"

Untuk Modul Tindakan Call baru kami, teruskan dan kemas kini tetapan berikut:

Di bawah tab Kandungan …

Tajuk: Cara pembinaan baru

Di bawah tab Rekabentuk …

Padding Custom: 80px Kanan, 80px Bawah, 80px Kiri

Arah Animasi: Kiri

"

Sekarang mari kita lihat hasil akhir kita …

"

Bonus: Muat turun Seksyen ini untuk Import Mudah

Sebagai bonus bonus kami telah membungkus bahagian-bahagian yang dibina dalam tutorial hari ini ke dalam muat turun percuma yang anda boleh menggunakan borang opt-in e-mel di bawah. Hanya masukkan e-mel anda dan butang muat turun akan muncul. Jangan risau tentang “melanggan semula” jika anda sudah menjadi sebahagian daripada Newsletter Divi kami. Masukkan semula e-mel anda tidak akan menghasilkan lebih banyak e-mel atau pendua. Ia hanya akan mendedahkan muat turun.

Nikmati!

Untuk menggunakan muat turun ini, mulakan dengan mencari fail zip dipanggil Animation_Effects_Part_5.zip dalam folder muat turun kami. Unzip ia untuk mendedahkan import berikut.

Kesan Animasi Bahagian 5 (bahagian 1) .json

Kesan Animasi Bahagian 5 (bahagian 2) .json

Navigasi di Admin WordPress anda ke Divi> Perpustakaan Divi> Import & Eksport. Apabila modal portabiliti muncul, klik tab import dan butang berlabel memilih fail.

Pilih fail json yang anda suka dan klik “Import Layout Builder Divi”. Sebaik sahaja import selesai melayari pos atau halaman, anda ingin menambah salah satu bahagian di atas ke.

Aktifkan pembina visual. Navigasi ke bahagian halaman yang anda ingin tambah salah satu bahagian di atas untuk. Apabila anda mengklik ikon seksyen baru, anda akan dibentangkan dengan pilihan untuk “Tambah Dari Perpustakaan”. Pilih pilihan ini dan pilih susun atur yang anda mahu.

"

Bungkus Up

Susun atur ini agak sukar untuk ditarik. Tetapi, sebaik sahaja anda mendapat imej yang betul dan jarak yang tepat, animasi membawa susun atur keseluruhan dengan baik. Giling seperti gambar telefon hampir kelihatan seperti seseorang sedang menggesernya di atas meja putih ke dalam paparan kita semasa kita tatal ke bawah halaman. Contoh animasi roll ini pastinya satu yang menonjol.

Akan Datang

"

Dalam jawatan berikutnya, saya akan membuat siri kami dengan bahagian 6. Saya akan menunjukkan kepada anda cara menggunakan animasi slaid dengan beberapa imej dan cetakan tersuai untuk membuat susun atur yang menakjubkan untuk memaparkan resipi memasak. Walau bagaimanapun, susun atur yang sama boleh ditapis dan digunakan untuk pelbagai item yang berbeza.

Saya berharap dapat mendengar daripada anda dalam komen.


Credit to Elegant Themes

Bacaan WordPress Yang Lebih Menarik!

Game Addict – Clan War Gaming Theme
Themeforest,
Themeforest,

Game Addict – Clan War Gaming Theme

Pembuat Rojak - May 28, 2018

Penagih Permainan - Melepaskan semangat anda. Permainan Addict adalah tema untuk puak-puak dan permainan. Ia membolehkan anda dapat membuat dan…

Dapatkan Pakej Layout Pejabat Doktor Percuma & Bersih untuk Divi
Elegant Themes,
3 views
Elegant Themes,
3 views

Dapatkan Pakej Layout Pejabat Doktor Percuma & Bersih untuk Divi

Pembuat Rojak - May 27, 2018

Hey Divi Nation! Terima kasih kerana menyertai kami untuk ansuran seterusnya Inisiatif Rekaan Divi mingguan kami; di mana setiap minggu,…

Leave a Comment

Your email address will not be published.