[Ad_1]
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 ini. Untuk mengakses unduhan, Anda harus berlangganan milis Divi Daily kami menggunakan bentuk di bawah. Sebagai pelanggan baru, Anda akan menerima lebih banyak manfaat Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah dan klik unduh. Anda tidak akan "berlangganan kembali" 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:
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
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 gratis Divi, pastikan untuk berlangganan kami buletin melalui email dan ke kami Saluran YouTube agar Anda selalu menjadi orang pertama yang mengetahui dan memanfaatkan konten gratis ini.
[Ad_2]
