Divi: Tema WordPress terbaik sepanjang masa!

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

Jika Anda sedang mencari cara untuk membuat animasi yang halus dengan efek pengguliran bawaan Divi, Anda akan menyukai tutorial ini. Kami akan menunjukkan kepada Anda bagaimana menggabungkan snap gulir dengan efek gerakan bawaan Divi untuk membuat bagian ketinggian penuh yang dapat Anda gulirkan sekaligus. 

Kami akan mulai dengan membuat bagian pertama. Oleh karena itu, kami akan menggunakan kembali bagian ini di seluruh desain halaman kami. Untuk mengaktifkan scroll snapping, kami akan menggunakan properti CSS scroll snap yang akan kami tetapkan ke bagian, HTML, header, dan footer halaman kami. 

Kemungkinan Hasil

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

Gulir Divi menjentikkan pratinjau desktop

1. Buat halaman baru dan mulailah mendesain bagian pertama

Tambahkan halaman baru dan beralih ke Pembuat Visual

Mulailah dengan menambahkan halaman baru. Masukkan judul halaman, terbitkan halaman, dan beralih ke Visual Builder.

Tambahkan artikel divi
Artikel kreasi divi

Pengaturan bagian

perekat

Setelah berada di dalam halaman baru, buka bagian yang sudah ada dan ubah pengaturan ukuran.

  • Tinggi minimum: 100vh
Ukuran Divi

Elemen Utama

Kami juga menambahkan dua baris kode CSS ke bagian tersebut. Baris kode CSS ini akan membantu kita mengubah bagian tersebut menjadi titik snap untuk scroll gulir.

scroll-snap-align: start; scroll-snap-stop: normal;

Isi bagian css divi

jarak penglihatan

Untuk memastikan tidak ada yang di luar wadah bagian, kami akan menyembunyikan bagian meluap.

  • Overflow horisontal: disembunyikan
  • Overflow vertikal: disembunyikan
Bagian Masuer divi

Tambahkan baris # 1

Struktur kolom

Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Pilih struktur kolom

perekat

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

  • Gunakan Lebar Talang Khusus: Ya
  • Lebar Talang: 1
  • Lebar: 100%
  • Lebar Maks: 100%
Konfigurasi jarak kolom

Jarak

Kami juga menghapus padding bagian atas dan bawah default.

  • Lapisan Atas: 0px
  • Bantalan Bawah: 0px
Konfigurasi jarak divi

Posisi

Dan kami akan memposisikan ulang baris yang sesuai:

  • Posisi: Mutlak
  • Lokasi: Bawah Tengah
Konfigurasi posisi kolom Divi

Tambahkan Modul Teks ke Kolom

Biarkan Kotak Konten Kosong

Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Teks. Pastikan Anda membiarkan kotak konten modul kosong.

Modul teks Divi

Warna latar belakang

Kemudian, ubah warna latar belakang.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda membuat Mudah dan Gratis desain situs web atau blog apa pun dengan tampilan profesional. Berhentilah membayar banyak untuk situs web yang dapat Anda lakukan sendiri.

  • Warna Latar Belakang: # ffee00
Konfigurasi teks warna latar belakang Divi

Pengaturan teks

Kami juga akan menghapus ketinggian baris teks modul.

  • Tinggi Baris Teks: 1em
Penyesuaian teks tinggi garis Divi

Perekat

Kemudian, kita akan pergi ke pengaturan ukuran dan mengubah lebarnya.

  • Lebar: 30%
Jarak modul teks Divi

Jarak

Kami akan mengubah modul menjadi persegi dengan menambahkan beberapa pelapis atas juga.

  • Bantalan Atas: 30%
Modul divi jarak internal

Tambahkan Baris # 2

Struktur kolom

Di baris berikutnya. Gunakan struktur kolom berikut:

Pilih tata letak baris 2 divi

perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran di tab desain:

  • Gunakan lebar selokan khusus: Ya
  • Lebar selokan: 1
  • Lebar: 60vw
  • Lebar maks: 100%
Kolom 2 konfigurasi divi

jarak

Kemudian tambahkan margin atas kustom pada ukuran layar yang berbeda.

  • Margin atas: 20vh (desktop), 5vw (tablet dan telepon)
Konfigurasi jarak modul kolom Divi

Kolom 2 Spasi

Kemudian kita akan membuka pengaturan di kolom 2 dan menambahkan nilai isian khusus.

  • Lapisan atas: 2vh (tablet dan telepon)
  • Padding kiri: 2vw
  • Padding kanan: 2vw
Konfigurasi jarak kolom 2 modul divi

Tambahkan modul gambar ke kolom 1

Upload Gambar

Saatnya menambahkan mod, menambahkan mod gambar ke kolom 1 dan mengunggah gambar pilihan Anda.

Mengupload gambar diiv

perekat

Kami kemudian akan memaksa lebar penuh pada modul.

  • Lebar paksa penuh: Ya
Paksa divi lebar penuh

Tambahkan modul teks # 1 ke kolom 2

Tambahkan konten H2

Apakah Anda ingin menjual produk Anda di internet?

Unduh WooCommerce secara gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress dan dengan mudah membuat toko online Anda. Sempurna untuk pemula.

Pada kolom kedua, modul pertama yang kita butuhkan adalah modul teks dengan konten H2.

Kolom modul teks 2

Pengaturan teks H2

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

  • Tajuk 2 Huruf: Anton
  • Item 2 Ukuran teks: 5vw (desktop), 7vw (tablet), 9vw (telepon)
Ubah font diiv

Tambahkan modul teks # 2 ke kolom 2

Tambahkan konten

Tambahkan modul teks lain tepat di bawah tepat di bawah yang sebelumnya dan masukkan konten deskripsi pilihan Anda.

Tambahkan konten ke modul teks divi

Pengaturan teks

Ubah pengaturan teks modul sebagai berikut:

  • Font Teks: Buka Sans
  • Ukuran teks: 0.8vw (desktop), 2vw (tablet), 2.5vw (telepon)
  • Tinggi baris teks: 1,8 em
Konfigurasi penyelarasan Divi

jarak

Dan tambahkan margin atas dan bawah kustom ke pengaturan jarak.

  • Margin atas: 2vw
  • Margin bawah: 2vw
Konfigurasi jarak modul teks Divi

Tambahkan modul tombol ke kolom 2

Tambahkan salinan

Modul berikutnya dan terakhir yang kita butuhkan di kolom ini adalah modul tombol. Tambahkan salinan pilihan Anda.

Tambahkan tombol divi

Pengaturan tombol

Gaya tombol sesuai:

  • Gunakan gaya khusus untuk tombol: Ya
  • Ukuran teks tombol: 1vw (desktop), 2vw (tablet), 3vw (telepon)
  • Warna Teks Tombol: # 333333
  • Warna Batas Tombol: # 333333
  • Jari-jari tombol: 1px
Pengaturan tombol Divi
  • Font Tombol: Anton
  • Tombol Font Style: Huruf Besar
Gaya tombol modul Divi

jarak

Dan selesaikan pengaturan modul dengan menambahkan nilai khusus berdasarkan ukuran layar.

  • Margin Internal Tinggi: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
  • Margin Internal Rendah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
  • Margin Internal Kiri: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)
  • Margin Internet Kanan: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)
Konfigurasi jarak tombol Divi

2. Tambahkan efek gulir ke berbagai elemen

Modul teks pada baris # 1

Animasi Vertikal

Setelah semua elemen berada di tempatnya, saatnya untuk menambahkan efek gulir. Buka Modul Teks di baris pertama Anda dan gunakan beberapa gerakan vertikal.

  • Aktifkan Gerakan Vertikal: Ya
  • Mulai Offset: 4
  • Offset Tengah: 0
  • Mengakhiri Offset: -4
  • Pemicu Efek Gerak: Elemen Tengah
Animasi modul teks Divi

Baris # 2

Kolom 1

Animasi Horisontal

Kemudian buka kolom pertama dari baris kedua Anda dan tambahkan gerakan horizontal.

  • Aktifkan gerakan horizontal: Ya
  • Mulai offset: -3
  • Offset rata-rata: 0 (dari 40% hingga 60%)
  • End offset: -3
  • Pemicu Efek Gerak: Bagian Tengah Elemen
Animasi horizontal
Pudar masuk dan keluar

Kami juga menerapkan efek fade in dan fade out ke kolom yang sama.

  • Aktifkan fade in dan out: Ya
  • Opacity awal: 0%
  • Opacity rata-rata: 100%
  • End opacity: 100%
  • Pemicu Efek Gerak: Bagian Tengah Elemen
Animasi pudar

Kolom 2

Pergerakan horizontal

Kemudian kita akan membuka parameter kolom kedua dan menerapkan parameter gerakan horisontal berikut:

  • Aktifkan gerakan horizontal: Ya
  • Mulai offset: 3
  • Offset rata-rata: 0 (dari 40% hingga 60%)
  • End offset: 3
  • Pemicu Efek Gerak: Bagian Tengah Elemen
Kolom gerakan horizontal 2
Pudar masuk dan keluar

Dengan efek fade masuk dan keluar.

  • Aktifkan fade in dan out: Ya
  • Opacity awal: 0%
  • Opacity rata-rata: 100%
  • End opacity: 100%
  • Pemicu Efek Gerak: Bagian Tengah Elemen
Keluaran Fondue

4. Gunakan kembali bagian pertama

Klon bagian empat kali

Setelah Anda menyelesaikan bagian pertama dan efek gulirnya, Anda dapat mengkloningnya sebanyak yang Anda suka.

Bagian klon

Ubah warna latar belakang semua bagian lainnya

Kami akan mengubah warna latar belakang dari semua bagian lainnya.

  • Warna Latar Belakang: # 111111

5. Tambahkan kode CSS untuk mengaktifkan pengambilan gulir pada halaman HTML

Tambahkan modul kode ke bagian terakhir halaman

Sekarang untuk mengaktifkan scrolling capture pada HTML halaman kita, kita akan menambahkan modul kode dimanapun di bagian terakhir halaman kita.

Penyisipan modul kode

Masukkan kode HTML HTML

Baris kode CSS ini akan membantu kita menerapkan perataan gulir ke kode HTML halaman kita:

<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>

Tambahkan Gulir Gertakan Mulai ke Header dan Footer

Kami akan memastikan bahwa header dan footer kami juga merupakan titik gulir (seperti bagian kami) dengan menambahkan baris kode CSS berikut:

header, footer {scroll-snap-align: start;}

Selesai

Dalam artikel ini, kami telah menunjukkan kepada Anda cara membuat animasi yang halus dengan menggabungkan scrolling snap dengan efek gerakan bawaan Divi. Ini adalah cara terbaik untuk mengaktifkan efek gulir hanya dengan satu gulir. 

Tangkapan gulir membantu pengunjung dengan mudah menavigasi berbagai bagian situs web Anda. Kami menggabungkannya dengan desain bagian tinggi penuh. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.

0 saham
saham
menciak
Register