Apakah Anda ingin menggabungkan pengaturan topeng latar belakang dan opsi transformasi pola? Divi untuk membuat latar belakang yang unik?
Desain latar belakang adalah cara yang bagus untuk memberikan situs jaringan bakat visual dan menonjol dari keramaian. Pengaturan Background Mask dan Pattern Transform baru dari Divi dapat dikombinasikan dalam banyak cara untuk membuat pola latar belakang ini.
Dalam artikel ini, kita akan melihat cara menggunakan topeng latar belakang dan pengaturan transformasi pola dari Divi untuk membuat latar belakang yang menarik untuk tata letak Anda Divi.
Mari kita mulai.
penelitian
Pertama, inilah preview dari setiap contoh pada ukuran layar yang berbeda (ponsel dan desktop).
Baca juga: Divi: Cara menggunakan efek bayangan dan arahkan kursor untuk membuat konten interaktif
Contoh 1
Versi 1 di desktop
Versi 1 di ponsel
Unduh DIVI Sekarang!!!
Versi 2 di desktop
Versi 2 di ponsel
Contoh 2
Versi 1 di desktop
Versi 1 di ponsel
Unduh DIVI Sekarang!!!
Versi 2 di desktop
Versi 2 di ponsel
Contoh 3
Versi 1 di desktop
Versi 1 di Ponsel
Unduh DIVI Sekarang!!!
Versi 2 di desktop
Versi 2 di ponsel
Topeng Latar Belakang Divi dan Opsi Transformasi Pola
Fitur topeng dan pola latar belakang baru Divi mencakup beberapa opsi untuk menyesuaikannya. Penyesuaian termasuk flip horizontal dan vertikal, rotasi dan inversi. Untuk melihat opsi, buka pengaturan latar belakang bagian atau garis dan pilih tab Pola latar belakang atau topeng Latar belakang.
Setelah Anda menambahkan pola atau topeng, pengaturan transformasi muncul. Cukup klik pada opsi yang ingin Anda gunakan. Kita dapat menggunakannya bersama-sama dan dalam kombinasi apa pun yang kita inginkan.
Cara Kerja Pengaturan Topeng dan Transformasi Pola Divi
Pola di bawah ini adalah Zig Zag dengan pengaturan default.
Kami menambahkan topeng Layer Blog pada gambar di bawah ini. Mari kita gunakan untuk mendemonstrasikan bagaimana pengaturan Background Mask dan Pattern Transform bekerja.
Balik Horisontal
Ini adalah pembalikan horizontal. Kami menerapkan pengaturan transformasi ke pola dan topeng.
Balik Vertikal
Ini adalah flip vertikal untuk pola dan topengnya.
Rotasi
Yang ini menunjukkan Rotasi untuk pola dan topeng.
Balik
Contoh ini menunjukkan Invert untuk pola dan topeng.
Topeng latar belakang dan kombinasi transformasi pola
Tentu saja, kita juga dapat menggunakan parameter transformasi dalam berbagai kombinasi. Berikut adalah beberapa contoh.
Ini memutar pola dan membalikkan topeng.
Contoh ini menggunakan flip vertikal, rotasi, dan inversi untuk pola latar belakang. Topeng latar belakang menggunakan flip horizontal, flip vertikal, dan rotasi.
Untuk contoh ini, kami menggunakan flip dan rotasi horizontal untuk pola latar belakang, dan flip dan rotasi vertikal untuk topeng latar belakang.
Contoh pengaturan topeng latar belakang dan transformasi pola
Selanjutnya, mari kita lihat bagaimana pengaturan ini dapat digunakan dengan tata letak Divi. Kami akan menggunakan satu bagian sebagai titik awal dan membuat tiga contoh. Kami akan menyesuaikannya dan kemudian menggunakan pengaturan transformasi untuk memodifikasinya untuk setiap contoh.
Untuk contoh kami, kami menggunakan versi modifikasi dari bagian Pahlawan dari halaman arahan tata letak Perencanaan Perkebunan tersedia di Divi.
Berikut adalah ikhtisar dari bagian yang dimaksud. Ini menggunakan warna latar belakang: #92a5ab.
- Latar belakang: #92a5ab
Topeng Latar Belakang dan Parameter Transformasi Pola Contoh 1
Contoh pertama kami memberi kami lengkungan yang duduk secara vertikal di tengah layar. Satu sisi layar memiliki pola berumbai. Selanjutnya, kita akan membuat versi alternatif dengan busur menghadap ke arah lain.
pola latar belakang
Buka pengaturan bagian, gulir ke bawah ke Latar Belakang dan pilih tab Pola Latar Belakang. Pilih Tufted untuk pola latar belakang dan Inverting untuk Transformasi Pola.
- Pola Latar Belakang: Berumbai
- Transformasi Pola: Terbalik
topeng latar belakang
Pilih tab Topeng Latar Belakang dan pilih Lengkungan untuk topeng latar belakang. Ubah warna topeng ke #616d72 dan atur transformasi topeng ke Invert. Ini melengkapi versi busur pertama kami dengan jumbai.
- Topeng Latar Belakang: Arch
- Warna Topeng: #616d72
- Transformasi Topeng: Balikkan
Contoh 1 Versi 2
Selanjutnya, mari kita buat variasi dari desain kita. Hanya memodifikasi transformasi topeng untuk pola latar belakang dalam flip horizontal dan flip vertikal. Ini mengubah lengkungan untuk menghadap ke arah lain dan mengimbangi polanya, sehingga tidak hanya terlihat seperti bayangan cermin.
- Mask Transform: flip horizontal, flip vertikal
Topeng Latar Belakang dan Parameter Transformasi Pola Contoh 2
Untuk contoh kedua kami, kami akan membuat oval di tengah layar dengan pola di dalam oval. Selanjutnya, kita akan mengubah penempatan pola. Kami juga akan memodifikasi yang ini untuk ukuran layar yang berbeda.
Pola latar belakang
Di pengaturan latar belakang, pilih tab Pola Latar Belakang dan pilih Shippo untuk motif. Atur transformasi pola ke Invert.
- Latar Belakang Pola: Shippo
- Transformasi Pola: Terbalik
topeng latar belakang
Kemudian pilih tab Topeng Latar Belakang dan ubah pengaturan berikut.
- Topeng Latar Belakang: Elips
- Warna: #758489
- Transformasi Topeng: flip horizontal, rotasi
Tablet dan telepon
Baik tablet dan ponsel akan menggunakan pengaturan yang sama, jadi kita hanya perlu mengubah pengaturan tablet. Pilih Tab tablet dan memodifikasi transformasi topeng dalam pembalikan horizontal.
- Transformasi Topeng: flip horizontal, inversi
Contoh 2 Versi 2
Selanjutnya, kita akan membuat variasi untuk contoh kedua kita. Pertama, pilih tab Pola Latar Belakang dan atur Warna Pola ke rgba(0,0,0,0.06).
- Warna Pola: rgba (0,0,0,0.06)
Kemudian pilih tab Topeng Latar Belakang dan pilih Flip Horizontal, Rotate, dan Invert untuk transformasi mask.
- Mask Transform: flip horizontal, rotasi, inversi
Tablet dan telepon
Untuk opsi tablet dan ponsel, pilih ikon Tablet. Ubah transformasi topeng dalam pembalikan dan inversi horizontal. Versi alternatif dari contoh dua sekarang telah selesai.
- Transformasi Topeng: flip horizontal, inversi
Topeng Latar Belakang dan Parameter Transformasi Pola Contoh 3
Untuk contoh ketiga kami dari pengaturan topeng dan transformasi pola, kami akan menggunakan pola sarang lebah dengan topeng cat. Kami juga akan membuat versi seluler untuk yang satu ini.
pola latar belakang
Pertama, pilih tab Pengaturan Perangkat dan pilih ikon Perangkat. biro. Pilih tab Pola Latar Belakang dan pilih Honeycomb untuk pola latar belakang. Ubah Warnanya menjadi rgba(0,0,0,0.42). Untuk yang ini kita akan meninggalkan pilihan Transformasi Pola dinonaktifkan. Kami akan menambahkannya untuk versi alternatif.
- Pola Latar Belakang: Sarang Lebah
- Warna Pola: rgba (0,0,0,0.42)
- Transformasi Pola: tidak ada
topeng latar belakang
Kemudian pilih tab Topeng Latar Belakang. Pilih Cat untuk topeng latar belakang. Ubah warnanya menjadi #697b82. Pilih Flip Vertical untuk transformasi topeng.
- Topeng Latar Belakang: Cat
- Warna Topeng: #697b82
- Transformasi Topeng: flip vertikal
Kemudian pilih Penutup untuk ukuran. Ini membuka beberapa opsi lagi. Memilih Kanan bawah untuk lokasi. Itu saja untuk versi desktop. Selanjutnya, kita akan membuat versi mobile.
- Ukuran Masker: Penutup
- Posisi Masker: Kanan Bawah
Tablet dan telepon
Kemudian pilih tab tablet dan memodifikasi transformasi topeng latar belakang dalam flip dan rotasi vertikal. Ini melengkapi gaya untuk contoh ketiga kita. Selanjutnya, kita akan membuat versi alternatif.
- Transformasi Topeng: flip vertikal, rotasi
Contoh 3 Versi 2
Untuk versi alternatif dari contoh ini, kami akan menyesuaikan pola latar belakang dan topeng latar belakang.
pola latar belakang
Untuk pola background, ubah warna pola menjadi rgba(0,0,0,0.11). Ubah transformasi pola menjadi flip horizontal, flip vertikal, dan rotate.
- Warna Topeng: rgba(0,0,0,0.11)
- Mask Transform: flip horizontal, flip vertikal, rotasi
topeng latar belakang
Kemudian pilih tab Topeng Latar Belakang. Ubah warna menjadi putih dan transformasi topeng menjadi flip horizontal, flip vertikal dan inversi.
- Warna Topeng: #ffffff
- Mask Transform: flip horizontal, flip vertikal, inversi
Selanjutnya, ubah ukuran mask yang akan ditutup, lalu pilih Center untuk posisi mask.
- Ukuran Masker: Penutup
- Posisi Masker: Tengah
Tablet dan telepon
Akhirnya pilih tab tablette untuk membuat versi seluler. Pilih tab topeng latar belakang dan pilih empat opsi transformasi topeng. Ini melengkapi versi alternatif dari contoh ketiga.
- Mask Transform: flip horizontal, flip vertikal, rotasi, inversi
Hasil Akhir
Berikut adalah ikhtisar dari setiap contoh dengan ukuran layar yang berbeda (Desktop dan Telepon)
Contoh 1
Versi 1 di desktop
Versi 1 di Ponsel
Versi 2 di Desktop
Versi 2 di ponsel
Contoh 2
Versi 1 di Desktop
Versi 1 di Ponsel
Versi 2 di Desktop
Versi 2 di Ponsel
Contoh 3
Versi 1 di desktop
Versi 1 di Ponsel
Versi 2 di Desktop
Versi 2 di Ponsel
Unduh DIVI Sekarang!!!
Lihat juga: Divi: Cara membuat bagian anggota tim sebagai korsel
Kesimpulan
Ini adalah tampilan kami tentang cara menggunakan topeng latar belakang dan pengaturan transformasi pola Divi untuk membuat banyak pola latar belakang yang menarik.
Karena pola dan topeng dapat digunakan bersama, pengaturan transformasinya juga dapat digunakan bersama. Ini membuka banyak opsi desain, memberi Anda lebih banyak lagialat untuk menambahkan keanggunan ke latar belakang Divi Anda.
Cara terbaik untuk mempelajari cara menggunakannya adalah dengan bermain-main dengan penyesuaian dan melihat apa yang dapat Anda buat.
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.
...
