Apakah Anda ingin memberikan dimensi lain pada Anda? situs web dengan topeng latar belakang Divi Lengket?
Pilihan lengket dari Divi memungkinkan Anda membuat banyak sekali desain berbeda untuk situs web Anda. Tutorial hari ini menambahkan daftar hal-hal yang dapat Anda lakukan. Semoga ini bisa membantu memicu kreativitas Anda.
Kami akan menunjukkan cara membuat topeng latar belakang yang lengket.
Tutorial ini menggabungkan opsi lengket dari Divi dengan mode pencampuran filter.
penelitian
Sebelum masuk ke tutorial ini, mari kita lihat hasilnya pada ukuran layar yang berbeda.
Biro
mobil
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
Beralih ke tab Desain Bagian dan hapus pengaturan spasi default di bawah ini:
- Padding (Atas dan Bawah): 0px
Meluap
Kemudian sembunyikan luapan bagian di tab Advanced.
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
Tambahkan baris #1
Struktur kolom
Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:
- Lebar: 100%
- Lebar Maks: 100%
jarak
Hapus juga semua margin default.
- Padding (Atas dan Bawah): 0px
Filter
Kami juga menambahkan blending mode ke baris ini. Blending mode ini akan membantu kita membuat topeng nanti di tutorial.
- Mode Campuran: Layar
Z-indeks
Untuk memastikan baris ini tetap di bawah baris kedua, kami akan menambahkan ke bagian, kami mengubah indeks-z di tab Advanced.
- Indeks Z: 9
Parameter kolom
Selanjutnya kita akan membuka pengaturan kolom.
Warna latar belakang
Kami menggunakan warna latar belakang yang benar-benar putih.
- Warna Latar Belakang: #ffffff
Elemen utama CSS
Kami juga menambahkan nilai tinggi ke elemen utama di tab Advanced.
height: 100vh;
Tambahkan modul "Teks" ke baris
Biarkan area konten kosong
Setelah Anda selesai dengan pengaturan baris, tambahkan modul Teks ke kolomnya.
Tinggalkan area isi kosong. Sebagai gantinya, kita menggunakan modul ini untuk membuat bentuk yang memperlihatkan bagian gambar latar belakang bagian tersebut.
Warna latar belakang
Kita akan menggunakan warna latar belakang yang lebih gelap untuk modul ini.
- Warna Latar Belakang: #0b3835
perekat
Selanjutnya kita akan mengakses tab Mendesain dan ubah parameter ukuran sebagai berikut:
- Lebar:
- Desktop: 20vw
- Tablet dan Telepon: 70 vw
- Tinggi:
- Desktop: 30vh
- Tablet dan Telepon: 10vh
jarak
Kami juga menambahkan margin teratas.
- Margin (Atas): 3vh
Berbatasan
Dan kita akan menyertakan sudut membulat.
- Sudut Bulat: 15px
Tambahkan baris 2
Struktur kolom
Lanjutkan dengan menambahkan baris lain ke bagian menggunakan struktur kolom berikut:
perekat
Buka pengaturan baris dan buat perubahan berikut pada opsi Perekat mengikuti:
- Lebar: 100%
- Lebar Maks: 100%
Z-indeks
Tingkatkan juga indeks-z pada baris tersebut. Hal ini akan membantu memastikan bahwa isi garis tersebut tetap berada di atas garis sebelumnya.
- indeks Z: 12
Tambahkan modul "Teks" ke baris
Tambahkan konten H2
Saatnya menambahkan modul, dimulai dengan modul Teks pertama yang berisi isi H2 pilihan Anda.
Pengaturan teks H2
Sesuaikan pengaturan teks H2 sebagai berikut:
- Font: Tampilan Playfair
- Perataan Teks: Terpusat
- Warna Teks: #0b3835
- Ukuran :
- Desktop: 150px
- Tablet dan Ponsel: 45px
- Tinggi Garis: 1,2 em
perekat
Selanjutnya, navigasikan ke pengaturan ukuran dan terapkan pengaturan berikut:
- Lebar Maks: 980px
- Modul Keselarasan: Pusat
jarak
Sertakan juga margin atas negatif.
Tambahkan modul "Tombol" ke baris
Tambahkan konten ke tombol
Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah modul Button. Tambahkan konten pilihan Anda.
Penjajaran tombol
Beralih ke tab Mendesain modul dan memodifikasi perataan tombol.
- Penjajaran Tombol: Tengah
Pengaturan tombol
Selanjutnya, buka pengaturan tombol dan terapkan gaya berikut:
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran teks tombol: 15px
- Warna teks tombol: #ffffff
- Warna latar belakang tombol: #000000
- Lebar batas tombol: 0 piksel
- Radius Perbatasan Tombol: 100px
- Font Tombol: Montserrat
- Berat Huruf Tombol: Semi Tebal
- Gaya Huruf: TT
jarak
Kami juga menambahkan nilai margin dan padding khusus ke pengaturan spasi.
- Margin (Bawah): 60vh
- Padding (Atas dan Bawah): 15px
- Padding (Kiri dan Kanan): 40px
Terapkan efek lengket
Buka baris #1
Sekarang kita telah membangun dasar desain kita, saatnya untuk menerapkan gaya lengket. Buka pengaturan baris pertama.
Terapkan opsi lengket
Buka tab Advanced dan terapkan pengaturan persisten berikut:
- Posisi Lengket: Tongkat Ke Atas
- Batas Lengket Bawah: Bagian
- Offset Dari Elemen Lengket Sekitarnya: YA
- Default Transisi Dan Gaya Lengket: YA
Opsi Tempel Modul Teks
Sekarang garisnya lengket, kita bisa menerapkan gaya ke modul teks di dalam garis. Buka pengaturan modul.
Ukuran Lengket
Selanjutnya, buka pengaturan ukuran dan terapkan nilai ukuran berikut:
- Lebar (Lengket): 80 vw
- Tinggi (Lengket): 90vh
Waktu transisi
Terakhir, navigasikan ke tab Advanced dan meningkatkan durasi transisi.
- Durasi Transisi: 500ms
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
Biro
Unduh DIVI Sekarang!!!
mobil
Unduh DIVI Sekarang!!!
Kesimpulan
Dalam artikel ini, kami sekali lagi menunjukkan kepada Anda cara berkreasi dengan opsi lengket Divi.
Secara khusus, kami telah menunjukkan kepada Anda cara menggabungkan pengaturan filter Divi dan opsi lengket.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
