Loncat ke Konten Utama

Cara Membuat Transisi Seamless dengan Efek Gulir di Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 701.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Saat mendesain halaman layanan Anda, Anda ingin memastikan bahwa pengunjung Anda memperhatikan semua layanan berbeda yang Anda sediakan. Dalam banyak kasus, ini hanya akan menjadi satu layanan spesifik yang mereka cari, tetapi jika Anda memberikan cara yang efisien dalam struktur layanan Anda, pengunjung Anda lebih cenderung memperlakukan mereka semua. 

Dalam tutorial ini, kami akan menunjukkan cara berkreasi dengan efek gulir Divi dan membuat transisi layanan yang mulus. Anda juga dapat mendownload file JSON secara gratis!

Mari kita pergi.

Kemungkinan Hasil

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

Transisi antara bagian divi

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
Bagian parameter Divi

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
Konfigurasi jarak Divi

jarak

Kemudian tambahkan margin atas dan bawah khusus.

  • Margin atas: 200px
  • Margin bawah: 200px
Konfigurasi spasi baris Divi

Tambahkan modul teks ke kolom 1

Tambahkan konten H2

Saatnya menambahkan modul, dimulai dengan modul teks di kolom 1. Masukkan konten H2 yang Anda inginkan.

Layanan kami ditawarkan oleh para ahli saat ini

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
Kepala polisi divi

jarak

Kemudian tambahkan margin yang lebih rendah pada tablet dan telepon.

  • Margin bawah: 50 piksel (hanya tablet dan telepon)
Konfigurasi spasi teks Divi

Tambahkan modul teks ke kolom 2

Tambahkan konten

Mari beralih ke kolom kedua. Ada modul pertama yang kita butuhkan adalah modul teks dengan beberapa konten deskripsi.

Isi kotak teks divi

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
Parameter teks Divi

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
Pembatas yang terlihat

Baris

Kemudian ubah warna garis modul.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

  • Warna garis: # 000000
Latar belakang warna pembatas

perekat

Kemudian buat beberapa perubahan pada parameter ukuran.

  • Berat pembagi: 3px
  • Lebar: 28%
Ukuran pemisah Divi

jarak

Kami juga menambahkan margin teratas.

  • Margin atas: 10px
Jarak modul pemisah Divi

Tambahkan bagian # 2

jarak

Mari beralih ke bagian reguler berikutnya. Hapus bantalan atas default dari bagian tersebut.

  • Lapisan atas: 0px
Bagian 2 jarak divi

overflows

Sembunyikan juga luapannya.

  • Overflow horisontal: disembunyikan
  • Overflow vertikal: disembunyikan
Sembunyikan overflow modul divi

Tambahkan baris baru

Struktur kolom

Lanjutkan menambahkan baris pertama menggunakan struktur kolom berikut:

Pilih tata letak divi

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
Bagian divi konfigurasi talang

jarak

Kemudian hapus semua padding standar atas dan bawah.

  • Lapisan atas: 0px
  • Lapisan bawah: 0px
Pengaturan jarak modul Divi 1 baris

Pengaturan kolom 1

Warna latar belakang

Kemudian buka pengaturan untuk kolom 1 dan ubah warna latar belakang.

  • Warna Latar Belakang: # f7f7f7
Konfigurasi latar belakang modul garis Divi

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 modul baris

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)
Pengaturan jarak modul Divi

Tambahkan modul pemisahan ke kolom 1

jarak penglihatan

Pada kolom pertama, modul pertama yang kita butuhkan adalah modul separasi. Pastikan opsi "Tampilkan Pemisah" diaktifkan.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

  • Tampilkan pemisah: Ya
Tampilkan pemisah divi 1

Baris

Kemudian ubah warna garis modul.

  • Warna garis: # 000000
Pengaturan pemisah Divi

perekat

Juga buat perubahan pada parameter ukuran.

  • Berat pembagi: 3px
  • Lebar: 50%
Ukuran pemisah Divi

Tambahkan modul teks ke kolom 1

Tambahkan konten H3

Modul berikutnya yang kita butuhkan dalam kolom 1 adalah modul teks dengan konten H3.

Pengaturan bagian konten Divi

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 modul teks Divi

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
Penyesuaian font cetakan teks Divi

Tambahkan modul tombol ke kolom 2

Tambahkan salinan

Modul berikutnya dan terakhir yang kita butuhkan adalah modul tombol. Masukkan salinan pilihan Anda.

Pengaturan konten modul teks

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
Pengaturan gaya tombol Divi
  • Font Tombol: Triwulan
  • Berat font tombol: tebal
Pengaturan warna tombol Divi

jarak

Tambahkan juga padding khusus.

  • Lapisan atas: 50px
  • Lapisan bawah: 50px
  • Padding kiri: 100px
  • Padding kanan: 100px
Pengaturan jarak tombol modul Divi

Posisi

Dan posisikan ulang tombol sesuai:

  • Posisi: Mutlak
  • Lokasi: kiri bawah
Penyesuaian posisi modul tombol Divi

Kloning garis sebanyak yang diperlukan

Setelah Anda menyelesaikan seluruh baris dan semua modulnya, Anda dapat mengkloning seluruh baris tiga kali.

Modul clone divi

Ubah semua konten

Pastikan untuk mengedit semua konten dalam baris duplikat.

Edit konten bagian divi

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
Terapkan efek gulir divi

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
Konfigurasi bagian animasi fade divi

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:

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

  • Aktifkan gerakan vertikal: Ya
  • Mulai offset: -4
  • Offset rata-rata: 0 (26%)
  • End offset: 0
  • Efek pemicu gerakan: bagian tengah elemen
Konfigurasi aniation scrolling Divi

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
Animasi garis memudar Divi

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
Animasi bergulir modul garis divi

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
Pengaturan animasi tampilan modul garis Divi

Hasil akhir

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

Demo terakhir

final pikiran

Dalam artikel ini, kami telah menunjukkan kepada Anda cara membuat transisi layanan yang indah dengan efek scrolling Divi. Bahkan sebelum satu servis menghilang, servis lainnya mulai muncul, memberikan transisi yang menyenangkan untuk 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, silakan tinggalkan komentar di bagian komentar di bawah.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
0 saham
saham
menciak
Register