Halaman yang berbicara tentang Anda (tentang) adalah salah satu halaman terpenting dari Anda situs jaringan. Hal ini memungkinkan orang untuk mengenal Anda lebih baik dan memutuskan apakah mereka merasa nyaman mengambil langkah berikutnya. Jika Anda mencari cara mudah untuk memasukkan narasi di halaman ini, Anda akan menyukai tutorial ini. Kami akan menggunakan efek gulir Divi untuk membuat transisi narasi yang mulus saat menggulir. Begitu satu bagian cerita memudar, bagian lain muncul. Hal ini memberikan pengunjung perasaan membaca cerita yang menarik. 

Kemungkinan Hasil Akhir

Sebelum kita menyelami tutorialnya, mari kita lihat hasilnya pada ukuran layar yang berbeda.

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

Kemudian putar bagian ke layar penuh dengan menambahkan ketinggian minimum di parameter ukuran.

• Tinggi minimum: 100vh

2. Tambahkan garis animasi

Tambahkan baris baru

Struktur kolom

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

perekat

Buka parameter garis dan biarkan garis menempati seluruh lebar bagian penampang dengan memodifikasi parameter dimensi.

• Lebar: 100%
• Lebar maks: 100%

jarak

Kemudian tambahkan isian kiri dan kanan pada ukuran layar yang berbeda.

• Padding kiri: 20vw (meja), 10vw (tablet dan telepon)
• Padding kanan: 20vw (meja) 10vw (tablet dan telepon)

animasi

Untuk meningkatkan efek bercerita, kita juga akan menggunakan animasi fade untuk garis tersebut.

• Gaya Animasi: Fade
• Durasi animasi: 3000ms
• Kurva kecepatan animasi: kemudahan masuk
• Animasi ulangi: sekali

Posisi

Akhirnya, kami akan memastikan bahwa garis diposisikan di tengah wadah bagian dengan memodifikasi opsi posisi.

• Posisi: absolut
• Lokasi: Pusat

3. Masukkan judul dengan efek gulir

Tambahkan modul teks # 1 ke kolom

Tambahkan konten H1

Satu-satunya modul yang kita perlukan di baris ini adalah modul teks dengan isi H1.

Judul 1 Pengaturan teks

Buka tab desain modul dan ubah pengaturan teks H1 sebagai berikut:

• Fon judul: Nunito
• Berat font judul: Setengah tebal
• Warna Teks Tajuk: #ffffff
• Ukuran Teks Header: 7vw (desktop), 9vw (tablet), 11vw (ponsel)

Gerakan vertikal

Kami juga akan menambahkan animasi vertikal yang halus.

• Aktifkan gerakan vertikal: Ya
• Mulai offset: 0 (50%)
• Offset rata-rata: 10 (100%)
• Final offset: 10

Efek gulir masuk dan keluar

Dengan efek fade masuk dan keluar.

• Aktifkan fade in dan out: Ya
• Opacity awal: 100%
• Opacity rata-rata: 100% (pada 55%)
• End opacity: 0% (hingga 62%)

Mengubah skala efek gulir ke atas dan ke bawah

Last but not least, kami juga akan menggunakan efek scrolling skala atas dan bawah.

• Aktifkan penskalaan naik dan turun: Ya
• Skala awal: 100% (hingga 40%)
• Skala rata-rata: 95% (hingga 74%)
• Skala akhir: 90%

4. Klon seluruh bagian sekali dan sertakan teks deskripsi dengan efek gulir

Edit judul dan konten

Setelah Anda menyelesaikan bagian pertama, Anda dapat mengkloning seluruhnya. Buka modul teks di dalam wadah bagian duplikat dan gunakan salinan H2.

Ubah parameter teks dari modul Teks H2

Ubah pengaturan teks H2 sesuai:

• Judul 2 Polisi: Nunito
• Judul font 2: semi-tebal
• Butir 2 Warna teks: #ffffff
• Item 2 Ukuran teks: 5vw (desktop), 7vw (tablet), 8vw (telepon)
• Tinggi baris 2: 1em (kantor), 1.2em (tablet dan telepon)

Tambahkan modul teks # 2 ke kolom

Tambahkan konten

Selanjutnya, tambahkan modul teks lain ke kolom dengan a isi deskripsi pilihan Anda.

Pengaturan teks

Ubah pengaturan teks untuk 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 (meja), 2.5em (tablet dan telepon)

jarak

Juga gunakan margin atas.

• Margin atas: 8vw

Efek gulir masuk dan keluar

Selanjutnya, alihkan ke efek gulir di tab lanjutan dan gunakan pengaturan fade in dan fade out berikut:

• Aktifkan fade in dan out: Ya
• Opacity awal: 100%
• Opacity rata-rata: 0% (pada 31%)
• Opacity akhir: 0% (hingga 35%)

Mengubah skala efek gulir ke atas dan ke bawah

Tambahkan juga efek penskalaan naik dan turun.

• Aktifkan penskalaan naik dan turun: Ya
• Skala awal: 100% (hingga 40%)
• Skala rata-rata: 95% (hingga 74%)
• Skala akhir: 90%

Anda sekarang dapat mengkloning bagian terakhir ini sebanyak mungkin. Namun, Anda perlu menyesuaikannya isi setiap bagian untuk kebutuhan Anda.

penelitian

Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.

final pikiran

Dalam artikel ini, kami menunjukkan kepada Anda cara menceritakan sebuah kisah di halaman tentang Anda menggunakan efek gulir bawaan Divi. Efek yang kami buat memungkinkan salinan berturut-turut memudar masuk dan keluar, sehingga memberikan pengunjung seperti membaca cerita. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah ini.