Menggunakan Animasi Divi untuk Mengungkap Konten dengan Gambar Geser
Diterbitkan: 2017-10-12Selamat datang di bagian 2 dari seri 5 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.
Di bagian 1 dari seri kami, kami membuat dua bagian pertama dari halaman demo animasi. Desain dan animasi header di bagian pertama menunjukkan cara unik untuk menganimasikan elemen modul teks di dalam bagian standar layar penuh. Dalam membangun bagian kedua, kami menemukan cara untuk menggabungkan animasi yang halus dan harmonis ke baris konten yang dapat dengan mudah digunakan untuk menampilkan konten di halaman arahan dengan cara yang menarik.
Hari ini kami melanjutkan perjalanan kami untuk merancang tata letak bagian yang menggunakan animasi secara efektif (dan kreatif) saat menggulir halaman. Kami akan membangun bagian ketiga dan keempat dari halaman demo langsung kami yang menampilkan kekuatan fitur animasi Divi. Kedua bagian ini memiliki tata letak yang dapat dengan mudah diadopsi untuk proyek Anda sendiri untuk menampilkan produk atau layanan.
Mari kita mulai.
Berikut adalah Sneak Peek dari Apa yang Akan Kami Bangun di Postingan Hari Ini
Bagian 3
Bagian 4
Mempersiapkan Elemen Desain
Siapkan Gambar Anda
Untuk bagian ketiga, Anda akan membutuhkan dua gambar. Yang pertama harus sekitar 880×600 dan yang kedua sekitar 790×880. Ukuran gambar ini tidak harus tepat. Saya hanya menyertakan dimensi ini untuk memberi Anda gambaran.
Saat membangun bagian keempat, Anda juga akan membuat dua gambar sekitar 600x400.
Gunakan Pembuat Visual
Tidak perlu kode lanjutan di sini. Kami hanya akan menggunakan Visual Builder untuk mendesain dua bagian berikutnya dari halaman kami yang kami buat di bagian 1 dari seri ini. Karena halaman Anda sudah disiapkan, Anda siap untuk pergi.
Menggunakan Animasi Divi untuk Mengungkap Konten dengan Gambar Geser
Berlangganan Saluran Youtube Kami
Membangun Bagian 3 Demo
Bagian 3 adalah contoh yang bagus tentang bagaimana merancang dan menganimasikan Modul Ajakan Bertindak dengan gambar yang menyertainya.
Mari selami.
Menggunakan Visual Builder, tambahkan bagian reguler dengan baris dua kolom. Di kolom kiri tambahkan modul gambar.
Perbarui Pengaturan Gambar sebagai berikut:
Di bawah tab Konten…
URL Gambar: [masukkan gambar 880×600 Anda]
Di bawah tab Desain…
Paksa Lebar Penuh: YA
Gaya Animasi: Slide
Arah Animasi: Kiri
Intensitas Animasi: 20%
Animasi Mulai Opacity: 100%
Simpan Pengaturan
Tambahkan Modul Pembagi
Di kolom kanan, kita akan menampilkan konten kita menggunakan modul pembagi dan Modul Ajakan Bertindak. Modul pembagi akan digunakan untuk menambahkan garis pemisah pendek di atas teks.
Tambahkan modul pembagi ke kolom kanan.
Kemudian perbarui pengaturan sebagai berikut:
Di bawah tab Konten…
Tampilkan Pembagi: YA
Di bawah tab Desain…
Warna: #e4ca77
Berat Pembagi: 4px
Lebar: 80px (Anda harus mengetikkan nilai ini karena defaultnya adalah persentase)
Penyelarasan Modul: default (kiri)
Margin Kustom: 60px Atas, 0px Bawah
Gaya Animasi: Lipat
Arah Animasi: Kanan
Durasi Animasi: 1200ms
Penundaan Animasi: 50ms
Intensitas Animasi: 70%
Opacity Mulai Animasi: 0%
Simpan Pengaturan
Tambahkan Modul Ajakan Bertindak
Di bawah Modul Pembagi, tambahkan Modul Ajakan Bertindak dengan pengaturan berikut:
Di bawah tab Konten…
Judul: “Pemandangan Sempurna”
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, efficitur nisl. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisi.”
Tautan: #
Gunakan Warna Latar Belakang: TIDAK
Di bawah tab Desain…
Warna Teks: Gelap
Orientasi Teks: Kiri
Font Header: Lato, Huruf Besar (TT)
Ukuran Font Tajuk: 38px
Warna Teks Tajuk: #0c0c0c
Spasi Surat Header: 0.2em
Tinggi Garis Tajuk: 1.4em
Font Tubuh: Lato
Ukuran Font Tubuh: 18px
Warna Teks Tubuh: #9e9e9e
Tinggi Garis Tubuh: 1.8em
Gunakan Gaya Kustom untuk Tombol: YA
Ukuran Teks Tombol: 15px
Warna Teks Tombol: #000000
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
Sekarang klik untuk mengedit Pengaturan Baris dan perbarui yang berikut:
Di bawah tab Desain…
Gunakan Lebar Kustom: YA
Lebar Kustom: 1366px
Di bawah tab Lanjutan…
Tambahkan CSS khusus berikut ke kotak Elemen Utama Kolom 1:
z-index: 999;
Simpan Pengaturan
Gandakan Baris Anda dan Perbarui
Itu saja untuk baris pertama. Untuk menghemat waktu membuat baris kedua, duplikat baris yang baru saja Anda buat.
Edit pengaturan baris duplikat sebagai berikut:
Di bawah tab Lanjutan…
Keluarkan CSS Kustom di Elemen Utama Kolom 1 dan tambahkan ke kotak Elemen Utama Kolom 2:
z-index: 999;
Karena gambar kita akan berada di kolom kanan, kita membutuhkan kolom itu untuk tetap berada di atas animasi teks di sebelah kiri.
Simpan Pengaturan
Perbarui Modul Gambar dan Modul Ajakan Bertindak di Baris Kedua
Selanjutnya drag modul gambar ke kolom kanan dan drag modul pembagi dan modul call to action ke kolom kiri.
Bagian ini akan memiliki struktur kolom yang sedikit berbeda. Klik Ikon Ubah Struktur Kolom Baris (di sebelah ikon baris duplikat) dan pilih tata letak kolom dua pertiga sepertiga.
Sekarang yang perlu kita lakukan adalah mengunjungi kembali setiap modul di dalam baris dan membuat beberapa perubahan.
Pertama, perbarui pengaturan Modul Pembagi sebagai berikut:
Di bawah tab Desain…
Penyelarasan Modul: Kanan
Arah Animasi: Kiri
Simpan Pengaturan
Selanjutnya perbarui Pengaturan Modul Ajakan Bertindak sebagai berikut:
Judul: “Berbicara Untuk Dirinya Sendiri”
Orientasi Teks: Kanan
Perataan Teks Tajuk: Kanan
Lebar: 700px (ketik ini)
Arah Animasi: Kiri
Simpan Pengaturan
Selanjutnya perbarui Modul Gambar di kolom kanan dengan gambar 790x880 baru Anda.
Itu saja untuk bagian 3!
Lihat hasil Anda.
Membangun Bagian 4 Demo
Bagian 4 membawa desain Modul Gambar ke tingkat yang lebih tinggi dengan beberapa trik CSS tingkat lanjut. Dan, menumpuk modul teks untuk melipatnya di engsel sangat cocok dengan pengiriman. Mari selami.
Menggunakan Visual Builder, tambahkan bagian reguler dengan baris dua kolom (satu setengah satu setengah). Sebelum kita menambahkan modul pertama kita, mari tambahkan warna latar belakang ke bagian kita. Klik untuk mengedit pengaturan bagian.
Di bawah tab konten, pilih tab warna latar belakang dan masukkan warna #262938.
Simpan Pengaturan
Tambahkan Modul Teks Pertama
Di kolom kiri tambahkan Modul Teks dan perbarui Pengaturan Teks sebagai berikut:
Di bawah tab Konten…
Masukkan html berikut di tab teks kotak konten:
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
Di bawah tab Desain…
Warna Teks: Cahaya
Font Header: Tampilan Playfair, Tebal (B)
Ukuran Font Tajuk: 38px
Tinggi Garis Tajuk: 1.3em
Margin Kustom: 20px Bawah
Animasi: Lipat
Arah Animasi: Atas
Tambahkan Modul Teks Kedua
Selanjutnya tambahkan modul teks lain langsung di bawah modul teks saat ini. Kemudian 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: Lipat
Arah Animasi: Bawah
Penundaan Animasi: 150ms
Simpan Pengaturan
Tambahkan Modul Tombol
Tambahkan modul tombol di bawah modul teks terakhir dan perbarui pengaturan sebagai berikut:
Teks Tombol: Pelajari Lebih Lanjut
URL tombol: #
Gunakan Gaya Kustom untuk Tombol: YA
Ukuran Teks Tombol: 15px
Warna Teks Tombol: #01254c
Warna Latar Tombol: #ffffff
Radius Perbatasan Tombol: 0px
Font Tombol: Tebal (B), Huruf Besar (TT)
Padding Kustom: 10px Atas, 30px Kanan, 10px Bawah, 30px Kiri
Gaya Animasi: Slide
Arah Animasi: Bawah
Durasi Animasi: 1600ms
Penundaan Animasi: 150ms
Intensitas Animasi: 20%
Simpan Pengaturan
Tambahkan Modul Gambar ke Kolom Kanan
Itu saja untuk kolom itu. Sekarang kita perlu menambahkan Modul Gambar ke kolom kanan. Kemudian perbarui pengaturan sebagai berikut:
Di bawah tab Konten…
URL Gambar: [masukkan gambar 600×400 Anda]
Di bawah tab Desain…
Paksa Lebar Penuh: YA
Gaya Animasi: Slide
Arah Animasi: Kanan
Penundaan Animasi: 800ms
Intensitas Animasi: 20%
Simpan Pengaturan
Perbarui Pengaturan Baris
Sekarang klik untuk mengedit Pengaturan Baris dan perbarui yang berikut:
Di bawah tab Desain…
Gunakan Lebar Kustom: YA
Lebar Kustom: 1366px
Padding Kustom: 27px Atas, 0px Kanan, 170px Bawah, 0px Kiri
Kolom 1 Padding Kustom: 6% Atas
Di bawah tab Lanjutan…
Tambahkan CSS khusus berikut ke kotak Elemen Utama Kolom 1:
z-index: 999;
Penambahan css ini memastikan teks tetap berada di atas gambar selama animasi.
Kemudian tambahkan CSS khusus berikut ke kotak Elemen Utama Kolom 2:
transform: scale(1.3); transform-origin: top right;
Css ini menambahkan desain pintar untuk meningkatkan (menambah) ukuran semua yang ada di kolom 2 (gambar). Properti asal transformasi memberi tahu kolom untuk menskala dari kanan atas baris. Ini menciptakan sedikit tumpang tindih antara teks di sebelah kiri dan gambar.
Simpan Pengaturan
Duplikat dan Perbarui Baris Anda
Sekarang seperti yang kita lakukan di bagian 3, kita akan menduplikasi baris. Setelah menggandakan baris, seret 2 modul teks dan modul tombol dari kolom kiri ke kanan. Dan tarik modul gambar dari kolom kanan ke kiri. Sekarang yang perlu kita lakukan adalah membuat beberapa pembaruan kecil pada baris duplikat kita dan isinya.
Pertama, mari perbarui pengaturan baris dengan yang berikut:
Di bawah tab Desain…
Padding Kustom: 40px Atas, 0px Kanan, 40px Bawah, 0px Kiri
Kolom 1 Padding Kustom: [kembalikan ke default; hapus 6% Atas]
Kolom 2 Padding Kustom: 6% Atas
Di bawah tab Lanjutan…
Hapus CSS khusus dari Kotak Elemen Utama Kolom 1 dan Kotak Elemen Utama Kolom 2. Ini dibawa dari duplikasi dan kami tidak membutuhkannya lagi.
Perbarui Modul Gambar
Selanjutnya, perbarui Modul Gambar (sekarang di kolom kiri) dengan yang berikut:
Di bawah tab Konten…
URL Gambar: [masukkan gambar 600x400 baru Anda]
Di bawah tab Desain…
Arah Animasi: Kiri
Di bawah tab Lanjutan…
Jika Anda berpikir bahwa gambar ini sudah kabur. pikirkan lagi! Yang perlu Anda lakukan untuk menambahkan efek blur ini adalah menambahkan baris CSS khusus berikut ke kotak Elemen Utama:
filter: blur(5px) opacity(.6);
Selain efek blur, css ini juga membuat gambar menjadi semi transparan dengan opacity 60%.
Simpan Pengaturan
Perbarui Modul Teks di Kolom Kanan
Pindah ke kolom kanan, perbarui konten Modul Teks teratas dengan header h1 yang lebih pendek:
<h1>Consectetur adipiscing elit</h1>
Simpan Pengaturan
Dan voila! Kita semua sudah selesai dengan bagian 4. 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_2.zip di folder unduhan kami. Buka zip untuk mengungkapkan impor berikut.
Efek Animasi Bagian 2 (bagian 1).json
Efek Animasi Bagian 2 (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
Selain membuat saya agak haus akan karbohidrat, bagian ini menampilkan cara-cara kreatif untuk menampilkan dan menghidupkan gambar. Selain itu, modul teks yang terlipat pada engsel dengan slide tombol yang tertunda semakin menarik pengguna untuk mengklik CTA.
Akan datang
Di bagian 3 seri ini, saya akan menunjukkan kepada Anda cara yang indah untuk mendesain dan menganimasikan modul uraian. Tata letak bagian ini dapat digunakan untuk berbagai tujuan. Saya dapat melihat ini sebagai cara untuk menampilkan proses layanan Anda atau daftar layanan atau produk Anda.
Menantikannya.
Jangan lupa untuk menghubungi di komentar di bawah!