Cara Mem-flash Langkah-langkah ke Proses secara Progresif dengan Efek Gulir Divi
Diterbitkan: 2020-03-01Perusahaan sering mendidik pengunjung mereka tentang layanan mereka dengan menawarkan ilustrasi bermanfaat tentang langkah-langkah proses mereka. Misalnya, biro desain web dapat menunjukkan proses pengembangan web mereka, atau toko roti dapat menampilkan langkah-langkah mereka untuk membuat kue mangkuk yang sempurna.
Dengan Divi, kita dapat mengambil "langkah-langkah menuju proses" ke tingkat yang sama sekali berbeda menggunakan efek gulir bawaan. Dalam tutorial ini, kami akan menunjukkan kepada Anda cara sederhana untuk secara progresif mem-flash langkah-langkah ke suatu proses saat pengguna menggulir halaman ke bawah. Ini akan memberikan desain dorongan interaktif yang bagus yang secara kreatif menekankan pesan yang dimaksudkan.
Sneak Peek
Unduh Tata Letaknya GRATIS
Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.
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 mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file JSON ke Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika belum, instal dan aktifkan Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Pilih opsi "Bangun Dari Awal".
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Cara Mem-flash Langkah-langkah ke Proses secara Progresif dengan Efek Gulir Divi
Untuk membuat tata letak kita untuk mem-flash langkah-langkah ke proses pada gulir, kita harus mulai dengan menambahkan baris baru.
Membuat Baris Empat Kolom
Untuk memulai, tambahkan baris empat kolom ke bagian.
Sebelum kita mulai menambahkan modul/konten ke kolom, buka pengaturan untuk baris dan perbarui yang berikut:
- Lebar Talang: 2
- Lebar Maks: 80%
Cukup sederhana sejauh ini. Sekarang mari kita mulai menambahkan beberapa konten.
Menambahkan Konten (langkah) ke Setiap Kolom
Karena desain ini menampilkan efek gulir yang menampilkan langkah-langkah ke proses, setiap kolom kami akan berisi salah satu langkah. Kolom 1 akan berisi konten untuk mengilustrasikan langkah 1. Kolom 2 akan berisi konten untuk langkah 2. Dan seterusnya.
Tambahkan Modul Teks ke Kolom 1
Tambahkan modul teks baru ke kolom 1.
Konten dan Desain Modul Teks
Kemudian perbarui konten teks sebagai berikut:
Buka tab desain dan perbarui pengaturan berikut:
- Font Teks: Lato
- Berat Font Teks: Tebal
- Warna Teks Teks: #fc6d71
- Judul 2 font: Oswald
- Judul 2 Berat Font: Ringan
- Judul 2 Ukuran Teks: 32px
- Spasi Judul 2 Huruf: 1px
- Pos 2 Tinggi Baris: 1.3em
- Margin: 0px bawah
- Padding: 10% atas, 10% bawah
- Lebar Perbatasan: 1px
- Warna Perbatasan: rgba (166.166.166.0.16)
Tambahkan Modul Gambar ke Kolom 1
Setelah modul teks terpasang, tambahkan modul gambar di bawah modul teks di kolom 1.
Kemudian perbarui margin gambar sebagai berikut:
Salin dan Tempel Konten Kolom 1
Untuk mempercepat proses desain, kita dapat menggunakan multi-pilih untuk memilih dua modul di kolom 1 dan kemudian menempelkannya ke masing-masing dari empat kolom yang tersisa.
Perbarui Konten untuk Modul Duplikat
Setelah modul duplikat berada di tempatnya, kembali dan perbarui konten teks dan gambar untuk mencerminkan masing-masing dari empat langkah dalam proses.
Setelah selesai, desain Anda akan terlihat seperti ini.
Menambahkan Efek Gulir ke Setiap Kolom
Kami sekarang siap untuk menambahkan efek gulir untuk mem-flash setiap langkah proses saat pengguna menggulir halaman ke bawah. Alih-alih menambahkan efek gulir ke setiap modul, kami akan menambahkan efek gulir ke setiap kolom sehingga efeknya diterapkan ke semua modul di konten.
Untuk membuat efek gulir berkedip, kita akan menggunakan efek gulir Fading In dan Out untuk setiap kolom. Idenya adalah untuk memulai efek dengan memulai dengan 0% opacity, melanjutkan ke 100% opacity, dan kemudian kembali ke 0%.
Kolom 1 Efek Gulir
Di pengaturan baris, buka pengaturan untuk kolom 1 dan tambahkan efek gulir berikut:
Di bawah tab opsi Fading In dan Out:
- Aktifkan Fading In and Out: YA
- Mulai Opacity: 0% (pada 20% viewport)
- Mid Opacity: 100% (pada area pandang 25%-45%)
- Ending Opacity: 0% (pada 50% viewport)
Kolom 2 Efek Gulir
Buka pengaturan untuk kolom 2 dan tambahkan efek gulir berikut:
Di bawah tab opsi Fading In dan Out:
- Aktifkan Fading In and Out: YA
- Mulai Opacity: 0% (pada 35% viewport)
- Mid Opacity: 100% (pada area pandang 40%-60%)
- Opacity Akhir: 0% (pada 65% viewport)
Kolom 3 Efek Gulir
Kolom 4 Efek Gulir
Menambahkan Judul
Sebagai sentuhan terakhir, kita bisa menambahkan heading ke layout kita. Untuk melakukan ini, tambahkan baris satu kolom baru di bawah baris saat ini.
Kemudian tambahkan modul teks ke baris dengan konten berikut:
Di bawah tab desain, perbarui yang berikut ini:
- Perataan Teks: Lato
- Judul 2 Berat Font: Ringan
- Judul 2 Gaya Font: TT
- Judul 2 Warna Teks: #fc6d71
- Judul 2 Ukuran Teks: 70px (desktop), 40px (tablet), 24px (ponsel)
- Spasi Judul 2 Huruf: 0.5em
Hasil Akhir
Untuk melihat hasilnya di halaman langsung, Anda perlu menambahkan beberapa ruang tambahan di atas dan di bawah bagian untuk melihat efek gulir dari awal hingga akhir. Salah satu cara mudah untuk melakukannya adalah dengan menambahkan margin atas dan bawah ke bagian.
Inilah hasilnya.
Pikiran Akhir
Mengilustrasikan langkah-langkah untuk suatu proses tidak harus terbatas pada gambar atau grafik statis. Dengan efek gulir Divi, Anda dapat menghidupkan ilustrasi dengan secara progresif mem-flash setiap langkah ke tampilan saat pengguna menggulir halaman ke bawah. Dan, karena efek gulir ditambahkan ke setiap kolom, Anda dapat dengan mudah mengubah modul/konten dalam setiap kolom tanpa mengganggu fungsinya. Mudah-mudahan, ini akan menjadi teknik yang berguna untuk ditambahkan ke kotak peralatan desain Anda.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!