Cara Menggunakan Topeng Latar Belakang & Pengaturan Transformasi Pola

Pola latar belakang adalah cara yang bagus untuk memberikan situs web Anda beberapa bakat visual dan menonjol dari keramaian. Topeng latar belakang baru dan pengaturan transformasi pola Divi dapat digabungkan dalam banyak cara untuk membuat pola latar belakang tersebut. Dalam posting ini, kita akan melihat cara menggunakan topeng latar belakang dan pengaturan transformasi pola Divi untuk membuat beberapa latar belakang yang menarik untuk tata letak Divi Anda.

Mari kita mulai.

Pratinjau

Pertama, berikut ini lihat setiap contoh dengan desktop, telepon, dan opsi alternatif untuk masing-masing.

Contoh Satu Hasil

Desktop Versi Reguler

Telepon Versi Reguler

Desktop Versi Alternatif

Telepon Versi Alternatif

Contoh Dua Hasil

Desktop Versi Reguler

Telepon Versi Reguler

Desktop Versi Alternatif

Telepon Versi Alternatif

Contoh Tiga Hasil

Desktop Versi Reguler

Telepon Versi Reguler

Desktop Versi Alternatif

Telepon Versi Alternatif

Topeng Latar Belakang Divi dan Opsi Transformasi Pola

Fitur topeng dan pola latar belakang baru Divi menyertakan beberapa opsi untuk menyesuaikannya. Penyesuaian termasuk membalik horizontal dan vertikal, berputar, dan membalik. Untuk melihat opsi, buka pengaturan Latar Belakang bagian atau baris dan pilih tab Pola Latar Belakang atau Topeng Latar Belakang.

Setelah Anda menambahkan pola atau topeng, pengaturan transformasi akan muncul. Cukup klik 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.

Saya telah menambahkan topeng Layer Blog pada gambar di bawah ini. Mari gunakan ini untuk mendemonstrasikan cara kerja topeng latar belakang dan pengaturan transformasi pola.

Membalik Horisontal

Ini adalah Pembalikan Horizontal. Saya telah menerapkan pengaturan transformasi ke pola dan topeng.

Pembalikan Vertikal

Ini adalah Pembalikan Vertikal untuk pola dan topeng.

Berputar

Yang ini menunjukkan Rotating untuk pola dan topeng.

Pembalikan

Contoh ini menunjukkan Pembalikan untuk pola dan topeng.

Topeng Latar Belakang dan Kombinasi Transformasi Pola

Tentu saja, kita juga dapat menggunakan pengaturan transformasi dalam berbagai kombinasi. Berikut adalah beberapa contoh.

Yang ini memutar pola dan membalikkan topeng.

Contoh ini menggunakan Vertical Flipping, Rotating, dan Inverting untuk pola latar belakang. Topeng latar belakang menggunakan Horizontal Flipping, Vertical Flipping, dan Rotating.

Untuk contoh ini, saya telah menggunakan Horizontal Flipping and Rotating untuk pola latar belakang, dan Vertical Flipping and Rotating untuk topeng latar belakang.

Contoh Pengaturan Latar Belakang Mask & Transformasi Pola

Selanjutnya, mari kita lihat bagaimana pengaturan ini dapat digunakan dengan tata letak Divi. Kami akan menggunakan bagian sebagai titik awal kami dan membuat tiga contoh. Kami akan menatanya dan kemudian menggunakan pengaturan transformasi untuk mengubahnya untuk setiap contoh.

Untuk contoh saya, saya menggunakan versi modifikasi dari bagian pahlawan dari halaman arahan Perencanaan Kawasan yang tersedia dalam Divi. Inilah tampilan bagian saya. Modifikasi menyederhanakan bagian pahlawan untuk kebutuhan kita. Ini menggunakan Latar Belakang Warna Latar Belakang: #92a5ab.

• Latar belakang: #92a5ab

Topeng Latar Belakang & Pengaturan Transformasi Pola Contoh Satu

Contoh pertama kami memberi kami lengkungan yang duduk secara vertikal di tengah layar. Satu sisi layar memiliki pola berumbai. Kemudian, kita akan membuat versi alternatif dengan lengkungan 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 Background Pattern dan Inverting untuk Pattern Transform.

• Pola Latar Belakang: Berumbai
• Transformasi Pola: Pembalikan

Topeng Latar Belakang

Pilih tab Background Mask dan pilih Arch untuk Background Mask. Ubah Mask Color menjadi #616d72 dan atur Mask Transform ke Inverting. Ini menyelesaikan versi pertama lengkungan dengan jumbai.

• Topeng Latar Belakang: Arch
• Warna: #616d72
• Transformasi Topeng: Pembalikan

Contoh Satu Variasi

Selanjutnya, mari kita buat variasi dari desain kita. Cukup ubah Mask Transform untuk Background Pattern menjadi Horizontal Flipping dan Vertical Flipping. Ini mengubah lengkungan untuk menghadap ke arah lain dan menggeser polanya, sehingga tidak hanya terlihat seperti bayangan cermin.

• Transformasi Topeng: Pembalikan Horizontal, Pembalikan Vertikal

Latar Belakang Mask & Pola Transform Pengaturan Contoh Dua

Untuk contoh kedua kami, kami akan membuat oval di tengah layar dengan pola di dalam oval. Kemudian, kita akan mengubah penempatan polanya. 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 polanya. Atur Transformasi Pola ke Pembalikan.

• Pola Latar Belakang: Shippo
• Transformasi Pola: Pembalikan

Topeng Latar Belakang

Selanjutnya, pilih tab Background Mask . Pilih Eclipse untuk Background Mask dan arahkan kursor ke opsi Background. Pilih ikon tablet yang muncul. Ini akan membuka pengaturan perangkat. Untuk pengaturan desktop, atur Color ke #758489. Untuk Mask Transform, pilih Horizontal Flipping and Rotating. Ini menyelesaikan versi desktop. Mari kita ubah untuk versi seluler.

• Topeng Latar Belakang: Eclipse
• Warna: #758489
• Transformasi Topeng: Membalik Horizontal, Berputar

Tablet dan Telepon

Tablet dan Telepon keduanya akan menggunakan pengaturan yang sama, jadi kita hanya perlu mengubah pengaturan Tablet. Pilih tab Tablet dan ubah Mask Transform menjadi Horizontal Flipping.

• Transformasi Topeng: Pembalikan Horizontal, Pembalikan

Contoh Dua Variasi

Selanjutnya, kita akan membuat variasi untuk contoh kedua kita. Pertama, pilih tab Background Pattern dan atur Pattern Color ke rgba(0,0,0,0.06).

• Warna Pola: rgba (0,0,0,0.06)

Selanjutnya, pilih tab Background Mask dan pilih Horizontal Flipping, Rotating, dan Inverting untuk Mask Transform.

• Transformasi Topeng: Membalik Horizontal, Memutar, Membalik

Tablet dan Telepon

Untuk opsi tablet dan ponsel, pilih ikon tablet . Ubah Mask Transform menjadi Horizontal Flipping dan Inverting. Versi alternatif dari contoh dua sekarang telah selesai.

• Transformasi Topeng: Pembalikan Horizontal, Pembalikan

Topeng Latar Belakang & Pengaturan Transformasi Pola Contoh Tiga

Untuk contoh pengaturan topeng dan transformasi pola ketiga, kita akan menggunakan pola sarang lebah dengan topeng cat. Kami juga akan membuat versi seluler untuk yang ini.

Pola Latar Belakang

Pertama, pilih tab pengaturan perangkat dan pilih ikon desktop . Pilih tab Background Pattern dan pilih Honeycomb untuk Background Pattern. Ubah Warnanya menjadi rgba(0,0,0,0.42). Untuk yang satu ini, kita akan membiarkan opsi Pattern Transform 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

Selanjutnya, pilih tab Background Mask . Pilih Paint untuk Background Mask. Ubah Warnanya menjadi #697b82. Pilih Pembalikan Vertikal untuk Transformasi Topeng.

• Topeng Latar Belakang: Cat
• Warna: #697b82
• Transformasi Topeng: Pembalikan Vertikal

Selanjutnya, pilih Cover untuk Size. Ini membuka beberapa opsi lagi. Pilih Kanan Bawah untuk Posisi. Itu saja untuk versi desktop. Selanjutnya, kita akan membuat versi mobile.

• Ukuran: Penutup
• Posisi: Kanan Bawah

Tablet dan Telepon

Selanjutnya, pilih tab tablet dan ubah Background Mask Transform menjadi Vertical Flipping and Rotating. Ini melengkapi penataan untuk contoh ketiga kita. Selanjutnya, kita akan membuat versi alternatif.

• Transformasi Topeng Latar Belakang: Pembalikan Vertikal, Memutar

Contoh Tiga Variasi

Untuk versi alternatif dari contoh ini, kita akan menyesuaikan Background Pattern dan Background Mask.

Pola Latar Belakang

Untuk Background Pattern , ubah Pattern Color menjadi rgba(0,0,0,0.11). Ubah Transformasi Pola menjadi Horizontal Flipping, Vertical Flipping, dan Rotating.

• Warna Pola: rgba (0,0,0,0.11)
• Transformasi Pola: Membalik Horizontal, Membalik Vertikal, Memutar

Topeng Latar Belakang

Selanjutnya, pilih tab Background Mask . Ubah Warna menjadi putih dan Mask Transform menjadi Horizontal Flipping, Vertical Flipping, dan Inverting.

• Warna: #ffffff
• Transformasi Topeng: Pembalikan Horizontal, Pembalikan Vertikal, Pembalikan

Selanjutnya, ubah Mask Size menjadi Cover lalu pilih Center untuk Mask Position.

• Ukuran Masker: Penutup
• Posisi Masker: Tengah

Tablet dan Telepon

Terakhir, pilih tab tablet untuk membuat versi seluler. Pilih tab Background Mask dan pilih keempat opsi untuk Mask Transform. Ini melengkapi versi alternatif dari contoh ketiga.

• Transformasi Topeng Latar Belakang: Pembalikan Horizontal, Pembalikan Vertikal, Rotasi, Pembalikan

Hasil

Berikut ini lihat setiap contoh dengan desktop, telepon, dan opsi alternatif untuk masing-masing.

Contoh Satu Hasil

Desktop Versi Reguler

Telepon Versi Reguler

Desktop Versi Alternatif

Telepon Versi Alternatif

Contoh Dua Hasil

Desktop Versi Reguler

Telepon Versi Reguler

Desktop Versi Alternatif

Telepon Versi Alternatif

Contoh Tiga Hasil

Desktop Versi Reguler

Telepon Versi Reguler

Desktop Versi Alternatif

Telepon Versi Alternatif

Mengakhiri Pikiran

Itulah tampilan kami tentang cara menggunakan topeng latar belakang dan pengaturan transformasi pola Divi untuk membuat banyak desain 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 alat untuk menambahkan keanggunan ke latar belakang Divi Anda. Cara terbaik untuk belajar menggunakannya adalah dengan bermain-main dengan penyesuaian dan melihat apa yang dapat Anda buat.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba topeng latar belakang dan pengaturan transformasi pola Divi di tata letak Divi Anda? Beri tahu kami tentang hal itu di komentar.