Cara Membuat Topeng Latar Belakang Lengket dengan Divi

Opsi lengket Divi memungkinkan Anda membuat banyak desain berbeda untuk situs web Anda. Posting hari ini menambahkan tutorial lain ke daftar hal-hal yang dapat Anda capai dan semoga membantu memicu kreativitas. Kami akan menunjukkan kepada Anda cara membuat topeng latar belakang yang lengket, dan membuat topeng ini mengikuti pengunjung saat menggulir sampai akhir bagian. Tutorial ini menggabungkan opsi lengket Divi dengan mode campuran filter. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letaknya GRATIS

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

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Buat Desain di Divi

Tambahkan Bagian Baru

Gambar latar belakang

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Unggah gambar latar belakang pilihan Anda.

• Ukuran Gambar Latar Belakang: Sampul

Jarak

Pindah ke tab desain bagian dan hapus semua padding atas dan bawah default dalam pengaturan spasi.

• Padding Atas: 0px
• Padding Bawah: 0px

Meluap

Sembunyikan kelebihan bagian di tab lanjutan berikutnya.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:

• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default juga.

• Padding Atas: 0px
• Padding Bawah: 0px

Filter

Kami juga menambahkan mode campuran ke baris ini. Mode campuran ini akan membantu kita membuat topeng nanti di tutorial.

• Mode Campuran: Layar

Indeks Z

Untuk memastikan baris ini tetap berada di bawah baris kedua yang akan kita tambahkan ke bagian, kita memodifikasi indeks z di tab lanjutan.

• Indeks Z: 9

Pengaturan Kolom

Selanjutnya, kita akan membuka pengaturan kolom.

Warna latar belakang

Kami menggunakan warna latar belakang yang benar-benar putih. Warna lain yang Anda gunakan di sini akan ditampilkan melalui gambar latar bagian, jadi penting untuk tetap menggunakan warna putih seluruhnya.

• Warna Latar Belakang: #ffffff

Elemen Utama CSS

Kami juga menambahkan nilai tinggi ke elemen utama di tab lanjutan. Setelah kita mengubah baris menjadi lengket, ketinggian ini akan memastikan bahwa kolom menutupi seluruh gambar latar bagian setiap saat.

height: 100vh;

Tambahkan Modul Teks ke Baris

Biarkan Kotak Konten Kosong

Setelah Anda menyelesaikan pengaturan baris, tambahkan Modul Teks ke kolomnya. Biarkan kotak konten kosong. Kami, sebagai gantinya, menggunakan modul ini untuk membuat bentuk yang mengungkapkan bagian dari gambar latar bagian.

Warna latar belakang

Untuk memungkinkan mode campuran menampilkan bagian dari gambar latar bagian, kami menggunakan warna latar belakang yang lebih gelap untuk modul ini.

• Warna Latar Belakang: #0b3835

Perekat

Kemudian, kita akan menavigasi ke tab desain dan mengubah pengaturan ukuran sebagai berikut:

• Lebar:
  • Desktop: 20vw
  • Tablet & Telepon: 70vw
• Tinggi:
  • Desktop: 30vh
  • Tablet & Telepon: 10vh

Jarak

Kami juga menambahkan beberapa margin atas.

• Margin Atas: 3vh

Berbatasan

Dan kami akan menyertakan beberapa sudut membulat.

• Semua Sudut: 15px

Tambahkan Baris #2

Struktur Kolom

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

Perekat

Tanpa menambahkan modul, buka pengaturan baris dan buat perubahan berikut pada pengaturan ukuran:

• Lebar: 100%
• Lebar Maks: 100%

Indeks Z

Tingkatkan indeks z baris juga. Ini akan membantu memastikan konten baris tetap berada di atas baris sebelumnya.

• Indeks Z: 12

Tambahkan Modul Teks ke Baris

Tambahkan Konten H2

Saatnya menambahkan modul, dimulai dengan Modul Teks pertama yang berisi beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Gaya pengaturan teks H2 sebagai berikut:

• Judul 2 Font: Tampilan Playfair
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #0b3835
• Judul 2 Ukuran Teks:
  • Desktop: 150px
  • Tablet & Ponsel: 45px
• Pos 2 Tinggi Baris: 1.2em

Perekat

Kemudian, navigasikan ke pengaturan ukuran dan terapkan pengaturan berikut:

• Lebar Maks: 980px
• Penyelarasan Modul: Pusat

Jarak

Sertakan beberapa margin atas negatif juga.

Tambahkan Modul Tombol ke Baris

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Penjajaran Tombol

Pindah ke tab desain modul dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Lalu, buka pengaturan tombol dan terapkan gaya berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 15px
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #000000
• Lebar Batas Tombol: 0px
• Radius Batas Tombol: 100px

• Font Tombol: Montserrat
• Berat Huruf Tombol: Semi Tebal
• Gaya Font Tombol: Huruf Besar

Jarak

Kami menambahkan beberapa margin kustom dan nilai padding ke pengaturan spasi juga.

• Margin Bawah: 60vh
• Padding Atas: 15px
• Padding Bawah: 15px
• Padding Kiri: 40px
• Padding Kanan: 40px

2. Terapkan Efek Lengket

Buka Baris #1

Sekarang kita telah membangun fondasi desain kita, saatnya untuk menerapkan gaya lengket. Buka pengaturan baris pertama.

Terapkan Opsi Lengket

Navigasikan ke tab lanjutan dan terapkan setelan tempel berikut:

• Posisi Lengket: Menempel ke Atas
• Batas Lengket Bawah: Bagian
• Offset Dari Elemen Lengket Sekitarnya: Ya
• Default Transisi dan Gaya Lengket: Ya

Opsi Tempel Modul Teks

Sekarang baris telah berubah menjadi lengket, kita dapat menerapkan gaya lengket ke Modul Teks di dalam baris. Buka pengaturan modul.

Ukuran Lengket

Kemudian, navigasikan ke pengaturan ukuran dan terapkan nilai ukuran lengket berikut:

• Lebar Lengket: 80vw
• Tinggi Lengket: 90vh

Durasi Transisi

Last but not least, navigasikan ke tab lanjutan dan tingkatkan durasi transisi. Itu dia!

• Durasi Transisi: 500ms

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami, sekali lagi, menunjukkan kepada Anda cara berkreasi dengan opsi lengket Divi. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menggabungkan pengaturan filter Divi dan opsi lengket untuk membuat topeng latar belakang yang lengket. 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 gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.