Cara Menyinkronkan Salinan Perluasan pada Gulir dengan Divi

Ketika penekanan bagian tertentu pada salinan, penting untuk memastikan salinan tidak luput dari perhatian. Ada banyak teknik yang dapat Anda gunakan untuk menempatkan salinan Anda dalam sorotan, tetapi dalam tutorial ini, kami akan menunjukkan kepada Anda cara menyinkronkan salinan yang diperluas pada gulir menggunakan efek gulir baru Divi. Saat pengguna menggulir, bagian lain dari salinan akan muncul, memungkinkan mereka untuk membaca langkah demi langkah melalui konten yang Anda berikan. 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

Unduh Salinan Memperluas pada Tata Letak Gulir GRATIS

Untuk meletakkan tangan Anda pada salinan yang diperluas 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 Desain Bagian

Tambahkan Bagian Baru

Warna latar belakang

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #151515

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 90%
• Lebar Maks: 1380px

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus berikutnya.

• Padding Atas: 150px
• Padding Bawah: 150px

Tambahkan Modul Teks #1 ke Kolom

Tambah isi

Kemudian, tambahkan Modul Teks pertama dengan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Livvic
• Berat Font Teks: Tebal
• Warna Teks: #f1f1f1
• Ukuran Teks: 170px (Desktop), 100px (Tablet), 70px (Telepon)
• Tinggi Baris Teks: 1em

• Panjang Horizontal Bayangan Teks: 0,06em
• Panjang Vertikal Bayangan Teks: 0em
• Warna Bayangan Teks: rgba(79,79,79,0.74)
• Perataan Teks: Tengah (Desktop), Kiri (Tablet & Ponsel)

Modul Teks Klon Dua Kali

Kloning Modul Teks dua kali.

Ubah Konten

Ubah konten dari kedua Modul Teks duplikat.

Tambahkan Baris #2

Struktur Kolom

Tambahkan baris lain tepat di bawah yang sebelumnya menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus padding atas dan bawah default baris berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Berbatasan

Tambahkan batas atas berikutnya.

• Lebar Batas Atas: 1px
• Warna Batas Atas: #4c4c4c

Pengaturan Kolom

Jarak

Kami juga membuat beberapa perubahan pada pengaturan kolom. Buka pengaturan dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 5vw
• Padding Bawah: 10vw
• Padding Kiri: 6vw
• Padding Kanan: 6vw

Berbatasan

Gunakan batas kanan juga.

• Lebar Batas Kanan: 1px
• Warna Tepi Kanan: #4c4c4c

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Lanjutkan dengan menambahkan Modul Blurb ke kolom dengan beberapa konten pilihan Anda.

Pilih Ikon

Pilih ikon pilihan Anda selanjutnya.

Pengaturan Ikon

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

• Warna Ikon: #a3acff
• Penjajaran Gambar/Ikon: Kiri

Pengaturan Teks Judul

Ubah juga pengaturan teks judul.

• Judul Font: Livvic
• Judul Font Berat: Tebal
• Warna Teks Judul: #c1c1c1
• Ukuran Teks Judul: 35px

• Judul Teks Bayangan Panjang Horizontal: 0,06em
• Judul Teks Bayangan Panjang Vertikal: 0em
• Judul Teks Warna Bayangan: rgba(79,79,79,0.74)

Pengaturan Teks Tubuh

Kami juga membuat beberapa perubahan pada pengaturan teks isi.

• Warna Teks Tubuh: #878787
• Ukuran Teks Tubuh: 16px
• Tinggi Garis Tubuh: 2.4em

Blurb Judul CSS

Dan kita akan membuat beberapa ruang di sekitar judul dengan satu baris kode CSS yang akan kita tambahkan ke judul uraian di tab lanjutan.

margin: 30px 0 40px 0;

Klon Seluruh Kolom Dua Kali

Setelah Anda menyelesaikan seluruh kolom dan Modul Blurb di dalamnya, Anda dapat mengkloning seluruh kolom dua kali.

Hapus Batas Kolom 3

Buka pengaturan kolom 3 dan hapus batas kanan.

• Lebar Batas Kanan: 0px

Ubah Konten

Dan ubah konten Modul Blurb untuk setiap duplikat.

2. Tambahkan Efek Gulir

Bagian

Menskalakan Atas dan Bawah

Saatnya menambahkan efek gulir, dimulai dengan bagian. Gunakan efek gulir skala atas dan bawah dengan nilai-nilai berikut:

• Aktifkan Scaling Up and Down: Ya
• Skala Awal: 70%
• Skala Menengah: 100%
• Skala Akhir: 100%

Modul Teks #1

Memudar Masuk dan Keluar

Kemudian, buka Modul Teks pertama di baris pertama bagian Anda dan tambahkan efek memudar masuk dan keluar.

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

Menskalakan Atas dan Bawah

Gunakan efek scaling up and down juga.

• Aktifkan Scaling Up and Down: Ya
• Skala Awal: 0% (pada 47%)
• Skala Menengah: 100% (pada 56%)
• Skala Akhir: 100% (pada 64%)

Perluas Modul Teks #1 Efek Gulir

Lanjutkan dengan memperluas efek gulir ke dua Modul Teks lainnya di kolom.

• Kepada: Semua Teks
• Sepanjang: Kolom Ini

Modul Blurb #1

Menskalakan Atas dan Bawah

Selanjutnya, kita akan menambahkan efek gulir ke atas dan ke bawah skala ke Modul Blurb di kolom 1.

• Aktifkan Scaling Up and Down: Ya
• Skala Awal:
  • Desktop: 0%
  • Tablet & Telepon: 100%
• Skala Menengah: 100% (pada 33%)
• Skala Akhir: 100% (pada 64%)

Perluas Modul Blurb #1 Efek Gulir

Selesaikan tutorial dengan memperluas efek gulir ke semua Modul Blurb di baris dan selesai!

• Kepada: Semua Blurb
• Sepanjang: Baris Ini

Pratinjau

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

Desktop

Seluler

Pikiran Akhir

Dalam tutorial ini, kami telah menunjukkan kepada Anda cara kreatif untuk menyinkronkan salinan yang diperluas di bagian Divi Anda. Ini adalah cara yang bagus untuk menyorot salinan dan memungkinkan pengunjung membaca bagian yang berbeda dari bagian Anda langkah demi langkah. 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.