Saat mendesain halaman layanan Anda, Anda ingin memastikan bahwa Anda pengunjung perhatikan semua layanan berbeda yang Anda berikan. Dalam banyak kasus, ini hanya akan menjadi satu layanan khusus yang mereka cari, tetapi jika Anda memberikan cara yang disederhanakan dalam struktur layanan Anda, kemungkinan besar Anda pengunjung berurusan dengan mereka semua.
Dalam tutorial ini, kami akan menunjukkan cara berkreasi dengan efek gulir dari Divi dan menciptakan transisi layanan yang mulus. Anda juga dapat mengunduh file JSON secara gratis!
Mari kita pergi.
Kemungkinan Hasil
Sebelum kita menyelami tutorialnya, mari kita lihat hasilnya pada ukuran layar yang berbeda.
1, buat ulang struktur elemen
Tambahkan bagian # 1
jarak
Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan ubah nilai padding pada ukuran layar yang berbeda.
- Lapisan atas: 80px (desktop dan tablet), 0px (telepon)
- Lapisan bawah: 80px
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan lebih banyak modul, buka parameter garis dan terapkan perubahan berikut pada parameter dimensi:
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Lebar: 90%
- Lebar maks: 1580px
jarak
Kemudian tambahkan margin atas dan bawah khusus.
- Margin atas: 200px
- Margin bawah: 200px
Tambahkan modul teks ke kolom 1
Tambahkan konten H2
Saatnya menambahkan modul, dimulai dengan modul teks di kolom 1. Masukkan isi H2 pilihan Anda.
Pengaturan teks H2
Buka tab desain modul dan ubah pengaturan teks H2 sebagai berikut:
- Judul 2 Polisi: Triwulan
- Header 2 Ukuran teks: 80px (desktop), 50px (tablet), 40px (telepon)
- Tinggi baris 2 kepala: 1.2em
jarak
Kemudian tambahkan margin yang lebih rendah pada tablet dan telepon.
- Margin bawah: 50 piksel (hanya tablet dan telepon)
Tambahkan modul teks ke kolom 2
Tambahkan konten
Mari beralih ke kolom kedua. Di sana modul pertama yang kita butuhkan adalah modul teks dengan tertentu isi keterangan.
Pengaturan teks
Beralih ke tab desain modul dan ubah pengaturan teks yang sesuai:
- Font teks: kabin
- Gaya font teks: huruf besar
- Warna teks: # 000000
- Ukuran teks: 18px (desktop), 15px (tablet), 13px (telepon)
- Penempatan surat teks: 3px (desktop), 1px (tablet dan telepon)
- Tinggi baris teks: 3em
Tambahkan modul pemisahan ke kolom 2
jarak penglihatan
Modul selanjutnya dan terakhir yang kita butuhkan pada kolom ini adalah modul separasi. Pastikan opsi "Tampilkan Pemisah" diaktifkan.
- Tampilkan pemisah: Ya
Baris
Kemudian ubah warna garis modul.
- Warna garis: # 000000
perekat
Kemudian buat beberapa perubahan pada parameter ukuran.
- Berat pembagi: 3px
- Lebar: 28%
jarak
Kami juga menambahkan margin teratas.
- Margin atas: 10px
Tambahkan bagian # 2
jarak
Mari beralih ke bagian reguler berikutnya. Hapus bantalan atas default dari bagian tersebut.
- Lapisan atas: 0px
overflows
Sembunyikan juga luapannya.
- Overflow horisontal: disembunyikan
- Overflow vertikal: disembunyikan
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris pertama menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan lebih banyak modul, buka parameter garis, akses parameter dimensi dan buat modifikasi berikut:
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Menyamakan ketinggian kolom: Ya
- Lebar: 90%
- Lebar maks: 1580px
jarak
Kemudian hapus semua padding standar atas dan bawah.
- Lapisan atas: 0px
- Lapisan bawah: 0px
Pengaturan kolom 1
Warna latar belakang
Kemudian buka pengaturan untuk kolom 1 dan ubah warna latar belakang.
- Warna Latar Belakang: # f7f7f7
jarak
Selesaikan pengaturan kolom dengan menambahkan nilai padding kustom pada ukuran layar yang berbeda.
- Lapisan atas: 200px (meja), 100px (tablet dan telepon)
- Lapisan bawah: 200px (meja), 100px (tablet dan telepon)
- Bantalan kiri: 8%
- Padding kanan: 8%
Pengaturan kolom 2
jarak
Lanjutkan dengan membuka pengaturan di kolom 2. Buka tab lanjutan dan tambahkan nilai padding kustom pada ukuran layar yang berbeda.
- Lapisan teratas: 100px (desktop), 50px (tablet dan telepon)
- Lapisan bawah: 200px
- Padding kiri: 150 px (meja), 0 px (tablet dan telepon)
Tambahkan modul pemisahan ke kolom 1
jarak penglihatan
Pada kolom pertama, modul pertama yang kita butuhkan adalah modul separasi. Pastikan opsi "Tampilkan Pemisah" diaktifkan.
- Tampilkan pemisah: Ya
Baris
Kemudian ubah warna garis modul.
- Warna garis: # 000000
perekat
Juga buat perubahan pada parameter ukuran.
- Berat pembagi: 3px
- Lebar: 50%
Tambahkan modul teks ke kolom 1
Tambahkan konten H3
Modul selanjutnya yang kita perlukan pada kolom 1 adalah modul teks dengan isi H3.
Pengaturan teks H3
Beralih ke tab desain modul dan ubah pengaturan teks H3:
- Judul 3 Polisi: Triwulan
- Warna teks item 3: # 000000
- Item 3 Ukuran teks: 50px (desktop), 40px (tablet), 35px (telepon)
- Tinggi baris 3 kepala: 1.1em
Tambahkan modul teks ke kolom 2
Tambahkan konten
Pada kolom kedua, modul pertama yang kita butuhkan adalah modul teks dengan beberapa konten deskripsi.
Pengaturan teks
Ubah pengaturan teks modul sebagai berikut:
- Font teks: kabin
- Gaya font teks: huruf besar
- Ukuran teks: 18px (desktop), 15px (tablet), 13px (telepon)
- Penempatan surat teks: 3px (desktop), 1px (tablet dan telepon)
- Tinggi baris teks: 3em
Tambahkan modul tombol ke kolom 2
Tambahkan salinan
Modul berikutnya dan terakhir yang kita butuhkan adalah modul tombol. Masukkan salinan pilihan Anda.
Pengaturan tombol
Kemudian gaya tombolnya.
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran teks tombol: 20 piksel
- Warna teks tombol: #ffffff
- Warna latar tombol: # 000000
- Lebar batas tombol: 0px
- Font Tombol: Triwulan
- Berat font tombol: tebal
jarak
Tambahkan juga padding khusus.
- Lapisan atas: 50px
- Lapisan bawah: 50px
- Padding kiri: 100px
- Padding kanan: 100px
Posisi
Dan posisikan ulang tombol sesuai:
- Posisi: Mutlak
- Lokasi: kiri bawah
Kloning garis sebanyak yang diperlukan
Setelah Anda menyelesaikan seluruh baris dan semua modulnya, Anda dapat mengkloning seluruh baris tiga kali.
Ubah semua konten
Pastikan untuk mengedit semua konten dalam baris duplikat.
2. Terapkan efek gulir
Efek gulir baris pertama
Pergerakan horizontal
Setelah Anda menyelesaikan semua baris di bagian Anda, sekarang saatnya menambahkan efek scrolling. Buka baris pertama dari bagian tersebut dan tambahkan gerakan horizontal.
- Aktifkan gerakan horizontal: Ya
- Mulai offset: -5
- Offset rata-rata: 0 (26%)
- End offset: 0
- Pemicu Efek Gerak: Bagian Tengah Elemen
Pudar masuk dan keluar
Juga gunakan efek fade masuk dan keluar.
- Aktifkan fade in dan out: Ya
- Opacity awal: 100%
- Opacity rata-rata: 100% (pada 50%)
- End opacity: 0% (hingga 53%)
- Pemicu Efek Gerak: Bagian Tengah Elemen
Efek gulir baris tengah
Gerakan vertikal
Selanjutnya, kami akan menambahkan efek gulir ke semua baris antara baris pertama dan terakhir dari bagian tersebut. Pertama gunakan gerakan vertikal:
- Aktifkan gerakan vertikal: Ya
- Mulai offset: -4
- Offset rata-rata: 0 (26%)
- End offset: 0
- Efek pemicu gerakan: bagian tengah elemen
Pudar masuk dan keluar
Aktifkan juga efek fade in dan out.
- Aktifkan fade in dan out: Ya
- Opacity awal: 0%
- Opacity rata-rata: 100% (dari 27% hingga 50%)
- Offset akhir: 0 (pada 53%)
- Pemicu Efek Gerak: Bagian Tengah Elemen
Efek Gulir Baris Terakhir
Gerakan vertikal
Kemudian buka baris terakhir dari bagian dan tambahkan gerakan vertikal berikut:
- Aktifkan gerakan vertikal: Ya
- Mulai offset: -4
- Offset rata-rata: 0 (26%)
- End offset: 0
- Pemicu Efek Gerak: Bagian Tengah Elemen
Pudar masuk dan keluar
Dengan efek memudar masuk dan keluar dan Anda selesai!
- Aktifkan fade in dan out: Ya
- Opacity awal: 0%
- Opacity rata-rata: 100% (dari 27% hingga 50%)
- End opacity: 100% (hingga 53%)
- Pemicu Efek Gerak: Bagian Tengah Elemen
Hasil akhir
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
final pikiran
Dalam artikel ini, kami menunjukkan cara membuat transisi servis yang indah dengan efek gulir dari Divi. Bahkan sebelum satu servis menghilang, servis lainnya mulai muncul, memberikan transisi bagus yang mudah dilihat. Pendekatan ini akan membantu Anda menyoroti setiap layanan pada tingkat individu. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.
