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.

[Ad_1]

Cara Anda menggunakan fitur bawaan Divi secara kreatif dapat membuat perbedaan dalam desain halaman Anda. Efek pengguliran Divi, misalnya, memungkinkan Anda membuat interaksi pengguliran yang indah. Hari ini kami menambahkan tutorial lain ke daftar hal-hal yang dapat Anda lakukan dengan efek gulir bawaan Divi. Secara khusus, kami akan menunjukkan cara menggabungkan salinan gulir. Sepintas, salinannya ditempatkan di bawah gambar yang menyertainya. Namun, segera setelah Anda menggulir ke titik tertentu, salinan akan muncul di atas gambar produk dan mulai menyatu dengan gambar. Hal ini menyebabkan efek eye-catching yang tampaknya mudah. Anda juga dapat mengunduh file layout JSON secara gratis!

Mari kita pergi.

penelitian

Sebelum kita masuk ke tutorial, mari kita lihat hasilnya pada ukuran layar yang berbeda.

Biro

mobil

Unduh tata letaknya GRATIS

Untuk mendapatkan tata letak gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mengakses unduhan, Anda harus berlangganan milis Divi Daily kami menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak manfaat Divi setiap hari Senin dan paket Tata Letak Divi gratis! Jika Anda sudah ada di daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "terdaftar ulang" atau menerima email tambahan.

Mari kita mulai membuat ulang!

Tambahkan 2x bagian placeholder

Tambahkan bagian baru

Mulailah dengan menambahkan bagian placeholder ke halaman yang sedang Anda kerjakan.

perekat

Buka pengaturan bagian dan ubah ketinggian di pengaturan ukuran.

Bagian klon

Kloning bagian tersebut sekali. Ini membuat Anda memiliki dua bagian placeholder di halaman Anda. Bagian placeholder ini akan membantu Anda melihat efek akhir setelah melalui tutorial. Di situs web langsung, bagian placeholder akan diganti dengan bagian normal yang Anda gunakan di seluruh halaman.

Tambahkan bagian baru di antara bagian placeholder

Setelah bagian placeholder berada di tempatnya, tambahkan bagian baru di antara bagian placeholder.

Warna latar belakang

Buka pengaturan bagian dan gunakan warna latar belakang putih.

  • Warna Latar Belakang: #ffffff

jarak

Beralih ke tab desain bagian dan ubah nilai padding atas dan bawah:

  • Padding atas: 10vh
  • Padding bawah: 10vh

Tambahkan baris #1

Struktur kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

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.

perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris, buka pengaturan ukuran, dan ubah nilai lebar dan lebar maksimum.

  • Lebar: 100%
  • Lebar maksimum: 100%

Tambahkan modul teks ke kolom

Tambahkan salinan

Satu-satunya modul yang kita butuhkan untuk baris ini adalah modul teks. Tambahkan salinan pilihan Anda.

Pengaturan teks

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

  • Font teks: Montserrat
  • Berat Font Teks: Sangat Tebal
  • Gaya font teks: huruf besar
  • Warna teks: # ff2ea
  • Ukuran Teks: 11vw
  • Tinggi baris teks: 1 em
  • Perataan teks: Tengah

Tambahkan baris #2

Struktur kolom

Tambahkan baris lain ke bagian menggunakan struktur kolom berikut:

perekat

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

  • Gunakan lebar selokan khusus: Ya
  • Lebar selokan: 2
  • Lebar: 90%
  • Perataan garis: Pusat

Tambahkan modul gambar ke kolom

Unggah gambar

Tambahkan modul gambar ke kolom baris. Unggah gambar pilihan Anda.

penjajaran

Beralih ke tab desain modul dan ubah perataan gambar yang sesuai:

perekat

Lalu pergi ke pengaturan ukuran dan paksa lebar penuh pada modul.

Tambahkan modul tombol ke kolom

Tambahkan salinan

Modul berikutnya dan terakhir yang akan kita tambahkan ke kolom adalah modul tombol. Gunakan salinan pilihan Anda.

Perataan tombol

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.

Buka tab Desain dan ubah perataan tombol.

Pengaturan tombol

Kemudian gaya tombol sebagai berikut:

  • Gunakan gaya khusus untuk tombol: Ya
  • Ukuran Teks Tombol: 16px
  • Warna Teks Tombol: # 000000
  • Warna latar tombol: #ffffff
  • Lebar batas tombol: 0px
  • Jarak huruf tombol: 2px
  • Font tombol: Montserrat
  • Berat font tombol: tebal
  • Gaya font tombol: huruf besar

jarak

Juga gunakan nilai padding khusus dalam pengaturan spasi.

  • Padding atas: 20px
  • Padding bawah: 20px
  • Bantalan kiri: 5%
  • Bantalan kanan: 5%

Tambahkan posisi absolut ke baris 1

Setelah Anda menyelesaikan baris kedua, kembali ke baris #1. Buka pengaturan baris, buka tab lanjutan dan jadikan bagian itu mutlak. Dengan melakukan ini, baris dan modul teks di dalamnya akan ditempatkan di bawah baris yang berisi modul gambar.

  • Posisi: Absolut
  • Lokasi: Pusat

Klon baris n ° 1 dan tempatkan duplikat di bawah baris n ° 2

Untuk memungkinkan modul teks muncul di atas gambar, kita memerlukan baris lain dengan nilai indeks-z yang lebih tinggi. Kloning baris pertama dan tempatkan duplikat di bawah baris kedua.

Terapkan efek ke baris 3

Meningkatkan indeks Z

Buka baris duplikat dan ubah indeks z di tab lanjutan.

Ubah warna teks

Buka modul teks di baris dan ubah warna teks.

Terapkan mode campuran ke garis

Kemudian buka pengaturan baris dan ubah mode campuran di pengaturan filter.

Gunakan efek gulir pada modul teks di baris # 3

Tambahkan efek fade in dan fade out

Selesaikan tutorial dengan membuka kembali pod teks, membuka efek gulir, dan mengaktifkan efek fade in dan fade out. Itu dia!

  • Aktifkan fade in dan fade out: Ya
    • Mulai opasitas: 0%
    • Opasitas sedang: 0% (hingga 26%)
    • Opasitas akhir: 100% (pada 28%)
  • Pemicu Efek Gerak: Elemen Tengah

penelitian

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

Biro

mobil

final pikiran

Dalam artikel ini, kami telah menunjukkan kepada Anda cara berkreasi dengan efek gulir bawaan Divi. Secara khusus, kami menunjukkan kepada Anda cara mengacak salinan gulir. Pada awalnya, salinannya tampak di bawah gambar. Setelah menggulir, salinan terungkap di atas gambar dan menyatu dengan gambar. 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 Hadiah Divi, pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.



[Ad_2]

Link sumber

0 saham
saham
menciak
Register