Cara Membuat Teks & Gambar yang Berubah pada Scroll di Divi

Efek gulir Divi sangat bagus untuk membuat tata letak yang menarik. Kami telah menerbitkan cukup banyak sejak fitur ini diluncurkan. Dalam tutorial ini, kami akan menunjukkan cara membuat layout dengan teks dan gambar yang berubah saat scroll. Desain ini dapat digunakan untuk halaman layanan atau jenis halaman apa pun yang Anda butuhkan. Kami membuatnya tetap bersih dan sederhana agar efek gulir menjadi sorotan.

Anda dapat mengunduh tata letak sebagai file JSON atau membuatnya kembali di situs web Divi Anda sendiri.

Mari kita mulai.

Pratinjau

Sebelum kita mulai, mari kita lihat tata letak pada berbagai ukuran layar.

Desktop

Seluler

Unduh Teks & Gambar yang Berubah Pada Bagian Gulir GRATIS

Untuk meletakkan tangan Anda di bagian gratis dengan teks & gambar yang berubah saat digulir, 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!

Buat Ulang Bagian Dengan Teks & Gambar yang Berubah Saat Gulir

Tambahkan Bagian Baru

Latar belakang

Untuk mulai membuat ulang desain, tambahkan bagian baru di halaman baru atau yang sudah ada. Tambahkan gambar latar belakang yang kami sediakan dalam unduhan di atas.

• Gambar Latar Belakang: desain kotak dan titik
  • Desktop: Gambar 1
  • Tablet: Gambar 2
  • Telepon: Gambar 3
• Ukuran Gambar: Sampul
• Pengulangan Gambar Latar Belakang: Ulangi Y (vertikal)

Jarak

Tambahkan beberapa spasi ke bagian.

• Padding Atas dan Bawah: 30%

Visibilitas

Sembunyikan luapan juga.

• Luapan Horisontal dan Vertikal: Tersembunyi

Tambahkan Baris Baru

Visibilitas

Sekarang tambahkan baris pertama dan sesuaikan pengaturan visibilitas di tab lanjutan.

• Horisontal: Tersembunyi
• Overflow Vertikal: Default

Tambahkan Modul Teks

Teks

Tambahkan modul teks pertama untuk judul. Masukkan beberapa konten H1 pilihan Anda.

• Isi: Konten H1 – Tim Produksi

Teks Judul

Pindah ke tab desain dan gaya teks judul.

• Tingkat Pos: H1
• Font: Fredoke One
• Berat: Tebal
• Warna hitam
• Ukuran
  • Desktop: 100px
  • Tablet: 75px
  • Telepon: 33px
• Spasi Huruf
  • Desktop: 4px
  • Tablet: 3px
  • Telepon: 2px

Perekat

Kemudian, sesuaikan lebarnya.

• Lebar: 100%

Tambahkan Baris Baru

Perekat

Sekarang tambahkan baris kedua dan sesuaikan pengaturan ukurannya:

• Lebar: 80%
• Lebar Maks: 1000px

Visibilitas

Sembunyikan luapan juga.

• Luapan Horizontal dan Vertikal: Tersembunyi

Tambahkan Modul Teks Pertama

Teks

Tambahkan modul teks lain. Kali ini, masukkan beberapa konten H2 pilihan Anda.

• Isi: Konten H2 – Atur Fotografi

Teks Judul

Gaya judul berikutnya.

• Tingkat Pos: H2
• Berat: Tebal
• Gaya: TT
• Warna: Hitam #000000
• Ukuran
  • Desktop: 50px
  • Tablet: 40px
  • Telepon: 28px
• Spasi Huruf: 3px

Jarak

Atur beberapa jarak untuk modul juga.

• Margin Atas dan Bawah: 0px

Efek Gulir

Selesaikan pengaturan modul dengan menambahkan efek gulir berikut:

• Memudar Masuk dan Keluar: Aktifkan
• Viewport Bawah
  • Posisi: 42%
  • Mulai Opacity: 0%
• Opasitas Pertengahan
  • Posisi Bawah: 43%
  • Posisi Teratas: 53%
  • Mid Opacity: 100%
• Viewport Atas
  • Posisi: 54%
  • Akhir Opacity: 0%

Modul Teks Duplikat Dua Kali

Kloning modul teks dua kali.

Sesuaikan Modul Teks ke-2

Teks

Ubah konten dalam modul teks baru.

• Isi: Konten H2 – Arahan Seni

Posisi

Tambahkan pemosisian absolut ke modul juga.

• Posisi: Absolut
• Lokasi: Kiri Atas

Efek Gulir

Selanjutnya, perbarui pengaturan efek gulir.

• Memudar Masuk dan Keluar: Aktifkan
• Viewport Bawah
  • Posisi: 56%
  • Mulai Opacity: 0%
• Opasitas Pertengahan
• Posisi Bawah: 57%
• Posisi Teratas: 67%
• Mid Opacity: 100%
• Viewport Atas
  • • Posisi: 68%
    • Akhir Opacity: 0%

  

Sesuaikan Modul Teks ke-3

Teks

Sekarang sesuaikan duplikat modul teks kedua. Ubah kontennya terlebih dahulu.

• Isi: Konten H2 – Alat Peraga dan Lemari Pakaian

Posisi

Tambahkan posisi absolut berikutnya.

• Posisi: Absolut
• Lokasi: Kiri Atas

Efek Gulir

Kemudian, ubah efek gulir.

• Memudar Masuk dan Keluar: Aktifkan
• Viewport Bawah
  • Posisi: 70%
  • Mulai Opacity: 0%
• Opasitas Pertengahan
  • Posisi Bawah: 71%
  • Posisi Teratas: 80%
  • Mid Opacity: 100%
• Viewport Atas
  • Posisi: 81%
  • Akhir Opacity: 0%

Tambahkan Modul Gambar

Gambar

Sekarang saatnya menambahkan modul gambar. Gunakan gambar persegi dengan ukuran gambar 350 x 350 px.

• Gambar: Gambar persegi 350 x 350 px

Penyelarasan

Atur perataan ke kiri.

• Perataan Gambar: Kiri

Jarak

Sesuaikan juga jaraknya.

• Tampilkan Spasi Di Bawah Gambar: Tidak
• Margin Atas: -60px

Filter

Kemudian, tambahkan filter untuk membuat gambar terdesaturasi.

• Saturasi: 0%

Visibilitas

Sekarang, pindah ke tab lanjutan dan atur overflow menjadi tersembunyi.

• Luapan Horisontal dan Vertikal: Tersembunyi

Efek Gulir

Last but not least, tambahkan efek gulir masuk dan keluar yang memudar.

• Memudar Masuk dan Keluar: Aktifkan
• Viewport Bawah
  • Posisi: 70%
  • Mulai Opacity: 0%
• Opasitas Pertengahan
  • Posisi: 71%
  • Pertengahan: 100%
• Viewport Atas
  • Posisi: 100%
  • Akhir Opacity: 0%

Tambahkan Modul Ajakan Bertindak

Teks

Ke modul berikutnya, yaitu modul ajakan bertindak. Sertakan beberapa konten pilihan Anda.

• Judul: Tim Seni Jason
• Tombol: Pesan Tim Seni Jason
• Isi: Konten deskriptif

Tautan

Tambahkan tautan berikutnya.

• Tautan: Tautan Anda

Latar belakang

Hapus juga warna latar belakang default.

• Gunakan Warna Latar Belakang: Tidak

Teks

Kemudian, atur perataan ke kanan.

• Perataan Teks: Kanan

Teks Judul

Gaya teks judul juga.

• Tingkat Pos: H3
• Font: Fredoke One
• Perataan Teks Judul: Kiri
• Warna: Hitam #oooooo
• Ukuran
  • Desktop: 48px
  • Tablet: 42px
  • Telepon: 33px
• Spasi Huruf
  • Desktop dan Tablet: 1px
  • Telepon: 0px
• Tinggi garis
  • Desktop dan Tablet: 1.6em
  • Telepon: 1.1em

Teks Tubuh

Kemudian, teks isi.

• Font: Verdana
• Warna: Hitam #000000
• Ukuran: 14px
• Spasi Huruf: 0.5px

Tombol

Sesuaikan gaya tombol juga.

• Gaya Kustom
• Ukuran Teks: 17px
• Warna Teks: Putih #ffffff
• Latar Belakang: Hitam #000000
• Spasi Huruf: 1px
• Font: Verdana
• Margin Atas: 20px
• Padding Atas dan Bawah: 10px
• Padding Kiri dan Kanan: 25px

Posisi

Pindah ke tab lanjutan dan ubah pengaturan posisi sebagai berikut:

• Posisi: Relatif
• Asal Offset: Kiri Atas
• Offset Horisontal: 25px

Visibilitas

Kemudian, sembunyikan luapan.

• Luapan Horisontal dan Vertikal: Tersembunyi

Efek Gulir

Last but not least, aktifkan efek gulir masuk dan keluar yang memudar.

• Memudar Masuk dan Keluar: Aktifkan
• Viewport Bawah
  • Posisi: 54%
  • Mulai Opacity: 0%
• Opasitas Pertengahan
  • Posisi Bawah: 55%
  • Posisi Teratas: 80%
  • Pertengahan: 100%
• Viewport Atas
  • Posisi: 100%
  • Akhir Opacity: 0%

Duplikat Baris ke-2

Kloning baris dengan semua modulnya.

Sesuaikan Modul Teks Pertama

Teks

Sekarang ubah konten modul teks kloning. Mulai dari atas.

• Isi: Konten H2 / Pra-Produksi

Teks

Ubah perataan ke kanan.

• Perataan Teks: Kanan

Perluas Perataan Teks

Terapkan perataan ke semua modul teks kloning di baris yang sama.

• Perluas perataan teks: Ke semua modul teks di baris ini

Sesuaikan Modul Teks ke-2

Teks

Sekarang perbarui konten dalam modul teks kloning ke-2.

• Isi: Konten H2 / Produksi Di-Set

Posisi

Ubah lokasi di pengaturan posisi juga.

• Lokasi: Kanan Atas

Sesuaikan Modul Teks ke-3

Teks

Sekarang ubah konten modul teks kloning ke-3.

• Isi: Konten H2 / Koordinasi Antar Tim

Posisi

Ubah lokasi di pengaturan posisi juga.

• Lokasi: Kanan Atas

Sesuaikan Modul Gambar Baru

Gambar

Selanjutnya, ubah foto di modul gambar.

• Gambar: Gambar Baru 350 x 350px

Penyelarasan

Ubah perataan gambar juga.

• Penjajaran Gambar: Kanan

Sesuaikan Modul Ajakan Bertindak Baru

Teks

Buka modul ajakan bertindak berikutnya dan ubah semua konten.

• Judul: Tim Produksi Alice
• Tombol: Pesan Tim Produksi Alice
• Isi: Konten deskriptif baru.

Tautan

Ganti linknya juga.

• Tautan: Tautan baru

Teks

Ubah perataan juga.

• Perataan Teks: Kiri

Teks Judul

Ubah perataan teks judul juga.

• Perataan Teks Judul: Kiri

Teks Tubuh

Begitu juga dengan isi teks.

• Perataan Teks Tubuh: Kiri

Perekat

Jangan lupa untuk mengubah perataan seluruh modul dalam pengaturan ukuran juga.

• Penyelarasan Modul: Kiri

Posisi

Terakhir, atur ulang pengaturan posisi ke default dan selesai!

• Posisi: Atur Ulang ke Default

Pratinjau

Mari kita lihat untuk terakhir kalinya pada tata letak halaman pada ukuran layar yang berbeda.

Desktop

Seluler

Itu Bungkus Untuk Tata Letak Dengan Teks & Gambar Yang Berubah di Gulir!

Kami sudah selesai membuat ulang teks dan gambar yang berubah saat digulir. Kami dapat mencapai efek ini berkat efek gulir bawaan Divi. Gunakan tata letak ini untuk halaman layanan, halaman tentang, halaman pertemuan tim, atau apa pun yang Anda suka! Gunakan latar belakang yang disediakan atau biarkan latar belakang putih.

Beri tahu kami pendapat Anda di komentar!