Bagaimana Menceritakan Tentang Kisah Anda di Scroll dengan Divi

Halaman tentang Anda adalah salah satu halaman terpenting di situs web Anda. Ini memungkinkan orang untuk mengenal Anda lebih baik dan memutuskan apakah mereka merasa nyaman untuk mengambil langkah berikutnya. Jika Anda mencari cara yang mulus untuk memasukkan cerita di halaman tentang Anda, Anda akan menyukai tutorial ini. Kami akan menggunakan efek gulir Divi untuk membuat transisi mendongeng yang mulus saat menggulir. Segera setelah bagian dari cerita menghilang, bagian lain menghilang. Ini memberi pengunjung perasaan bahwa mereka sedang membaca cerita yang menarik. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Berlangganan Saluran Youtube Kami

Unduh Kisah Halaman Tentang di Tata Letak Gulir GRATIS

Untuk mendapatkan gratis tentang cerita halaman pada tata letak gulir, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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 File

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!

1. Buat Bagian Layar Penuh Pertama Halaman

Tambahkan Bagian Baru

Warna latar belakang

Mulailah dengan menambahkan bagian pertama ke halaman tentang Anda. Buka pengaturan bagian dan ubah warna latar belakang menjadi hitam.

• Warna Latar Belakang: #000000

Perekat

Putar bagian layar penuh berikutnya dengan menambahkan ketinggian minimum di pengaturan ukuran.

• Tinggi Min: 100vh

2. Tambahkan Baris Animasi

Tambahkan Baris Baru

Struktur Kolom

Kemudian, tambahkan baris baru ke bagian Anda menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris dan biarkan baris mengambil lebar seluruh bagian penampung dengan mengubah pengaturan ukuran.

• Lebar: 100%
• Lebar Maks: 100%

Jarak

Kemudian, tambahkan beberapa bantalan kiri dan kanan di berbagai ukuran layar.

• Padding Kiri: 20vw (Desktop), 10vw (Tablet & Ponsel)
• Padding Kanan: 20vw (Desktop) 10vw (Tablet & Ponsel)

Animasi

Untuk meningkatkan efek storytelling, kita juga akan menggunakan animasi fade untuk barisnya.

• Gaya Animasi: Memudar
• Durasi Animasi: 3000ms
• Kurva Kecepatan Animasi: Ease-In-Out
• Pengulangan Animasi: Sekali

Posisi

Dan last but not least, kami akan memastikan baris diposisikan secara terpusat di dalam wadah bagian dengan memodifikasi opsi posisi.

• Posisi: Absolut
• Lokasi: Pusat

3. Sisipkan Judul dengan Efek Gulir

Tambahkan Modul Teks #1 ke Kolom

Tambahkan Konten H1

Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Teks dengan beberapa konten H1.

Judul 1 Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks H1 sebagai berikut:

• Font Judul: Nunito
• Berat Huruf Judul: Semi Tebal
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 7vw (Desktop), 9vw (Tablet), 11vw (Telepon)

Gerak Vertikal

Kami akan menambahkan animasi vertikal halus juga.

• Aktifkan Gerakan Vertikal: Ya
• Offset Awal: 0 (pada 50%)
• Offset Tengah: 10 (pada 100%)
• Offset Akhir: 10

Efek Gulir Memudar dan Keluar

Seiring dengan efek memudar masuk dan keluar.

• Aktifkan Fading In and Out: Ya
• Mulai Opacity: 100%
• Mid Opacity: 100% (pada 55%)
• Opacity Akhir: 0% (pada 62%)

Scaling Up and Down Scroll Effect

Last but not least, kami juga akan menggunakan efek scroll scaling ke atas dan ke bawah.

• Aktifkan Scaling Up and Down: Ya
• Skala Awal: 100% (pada 40%)
• Skala Menengah: 95% (pada 74%)
• Skala Akhir: 90%

4. Klon Seluruh Bagian Sekali & Sertakan Teks Deskripsi dengan Efek Gulir

Ubah Judul & Salin Konten

Setelah Anda menyelesaikan bagian pertama, Anda dapat mengkloningnya sepenuhnya. Buka Modul Teks di dalam wadah bagian duplikat dan gunakan beberapa salinan H2.

Ubah Modul Teks Pengaturan Teks H2

Ubah pengaturan teks H2 yang sesuai:

• Judul 2 Font: Nunito
• Judul 2 Berat Font: Semi Tebal
• Judul 2 Warna Teks: #ffffff
• Judul 2 Ukuran Teks: 5vw (Desktop), 7vw (Tablet), 8vw (Telepon)
• Pos 2 Tinggi Baris: 1em (Desktop), 1.2em (Tablet & Ponsel)

Tambahkan Modul Teks #2 ke Kolom

Tambah isi

Selanjutnya, tambahkan Modul Teks lain ke kolom dengan beberapa konten deskripsi pilihan Anda.

Pengaturan Teks

Ubah pengaturan teks Modul Teks sebagai berikut:

• Font Teks: Buka Sans
• Warna Teks: #ffffff
• Ukuran Teks: 1vw (Desktop), 2.5vw (Tablet), 3vw (Telepon)
• Tinggi Baris Teks: 3.1em (Desktop), 2.5em (Tablet & Ponsel)

Jarak

Gunakan beberapa margin atas juga.

• Margin Atas: 8vw

Efek Gulir Memudar dan Keluar

Kemudian, lanjutkan ke efek gulir di tab lanjutan dan gunakan pengaturan masuk dan keluar berikut:

• Aktifkan Fading In and Out: Ya
• Mulai Opacity: 100%
• Mid Opacity: 0% (pada 31%)
• Akhir Opacity: 0% (pada 35%)

Scaling Up and Down Scroll Effect

Tambahkan juga efek scaling up and down.

• Aktifkan Scaling Up and Down: Ya
• Skala Awal: 100% (pada 40%)
• Skala Menengah: 95% (pada 74%)
• Skala Akhir: 90%

5. Klon Bagian Kedua hingga Sebanyak yang Anda Inginkan

Ubah Konten Saat Anda Pergi

Setelah Anda menyelesaikan bagian kedua pada halaman Anda, Anda dapat mengkloningnya sebanyak yang Anda inginkan, tergantung pada alur cerita halaman tentang Anda. Pastikan Anda mengubah konten di setiap bagian.

6. Halaman Lengkap dengan Bagian CTA

Ubah Spasi Modul Teks Deskripsi

Lengkapi halaman tentang dengan bagian CTA di bagian akhir. Buka Deskripsi Modul Teks dan ubah margin atas dan bawah.

• Margin Atas: 4vw
• Margin Bawah: 4vw

Tambahkan Modul Tombol

Tambahkan Salinan

Kemudian, tambahkan Modul Tombol juga dengan beberapa salinan pilihan Anda.

Pengaturan Tombol

Pindah ke tab desain modul dan ubah pengaturan tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 2.5vw (Tablet), 3.5vw (Telepon)
• Warna Teks Tombol: #000000
• Warna Latar Tombol: #FFFFFF
• Lebar Batas Tombol: 0px

• Radius Batas Tombol: 100px
• Font Tombol: Nunito
• Berat Huruf Tombol: Tebal

Jarak

Selesaikan pengaturan Modul Tombol dengan menambahkan beberapa nilai bantalan khusus di berbagai ukuran layar.

• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Kiri: 3vw (Desktop), 6vw (Tablet), 8vw (Telepon)
• Padding Kanan: 3vw (Desktop), 6vw (Tablet), 8vw (Telepon)

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menceritakan sebuah kisah di halaman tentang Anda menggunakan efek gulir bawaan Divi. Efek yang kami buat memungkinkan salinan berurutan memudar masuk dan keluar, memberi pengunjung kesan bahwa mereka sedang membaca sebuah cerita. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.