Cara Menggabungkan Masker Latar Belakang dengan Pembagi Bagian di Divi

Menggabungkan topeng latar belakang dengan pembagi bagian di Divi menambahkan lapisan kreativitas lain ke gudang pilihan desain latar belakang yang sudah kuat. Jika Anda belum memiliki banyak pengalaman dengan opsi latar belakang Divi, Anda pasti akan ketinggalan. Satu opsi yang nyaman, namun kuat, memberi Anda kemampuan untuk menambahkan topeng latar belakang ke gradien latar belakang (atau gambar) hanya dalam beberapa klik. Selain opsi latar belakang, pembagi bagian juga memberi pengguna kemampuan untuk menyempurnakan desain latar belakang mereka.

Dalam tutorial ini, kami akan menunjukkan cara menggabungkan topeng latar belakang dengan pembagi bagian di Divi. Kami akan memberi Anda petunjuk langkah demi langkah tentang cara menyelesaikan desain latar belakang untuk bagian Divi menggunakan teknik ini. Plus, kami bahkan akan membahas cara membuat beberapa desain alternatif hanya dengan beberapa penyesuaian sederhana.

Menikmati!

Sneak Peek

Berikut adalah sekilas desain dari tutorial ini.

Konsep

Konsep dasar untuk tutorial ini adalah menggabungkan topeng latar belakang dan pembagi bagian untuk membuat bentuk topeng yang lebih unik.

Pertama, kami menambahkan topeng latar belakang.

Kemudian kami menambahkan pembagi bagian untuk melengkapi bentuk topeng dengan cara yang kreatif.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan
akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai yang baru
pelanggan, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah berada di
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!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, lakukan hal berikut:

1. Arahkan ke Perpustakaan Divi.
2. Klik tombol Impor di bagian atas halaman.
3. Di popup portabilitas, pilih tab impor
4. Pilih file unduhan dari komputer Anda (pastikan untuk meng-unzip file terlebih dahulu dan menggunakan file JSON).
5. Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di ujung depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".
4. Sekarang miliki kanvas kosong untuk mulai mendesain di Divi!

Cara Menggabungkan Masker dan Pembagi Latar Belakang di Divi

1. Tambahkan Ukuran Bagian dan Spasi

Untuk memulai, kita akan menambahkan ukuran dan spasi ke bagian yang ada di builder. Kami akan menunda menambahkan baris atau konten apa pun sehingga kami dapat berkonsentrasi pada desain latar belakang bagian

Buka pengaturan untuk Bagian. Di bawah tab Desain, perbarui ukuran dan spasi sebagai berikut:

• Tinggi Min: 50vw
• Padding: 0px atas, 0px bawah

Menggunakan unit panjang VW untuk ketinggian mungkin tampak aneh. Namun, karena kita akan menggunakan unit panjang VW untuk mengukur elemen latar belakang kita, ini akan memastikan skala desain lancar pada lebar browser yang berbeda.

2. Buat Gradien Latar Belakang

Setelah bagian memiliki ketinggian tertentu, kami siap untuk menambahkan gradien latar belakang ke bagian tersebut. Ini akan memberi kita beberapa warna latar belakang sehingga kita bisa menampilkan topeng latar belakang dan kombo pembagi nanti.

Di bawah tab Konten, klik tab gradien latar belakang di bawah opsi latar belakang. Kemudian tambahkan gradien sebagai berikut:

• Penghenti Warna 1: #1a2a6c (pada 20%)
• Color Stop 2: #b21f1f (pada 60%)
• Penghenti Warna 2: #fdbb2d (pada 100%)

3. Buat Topeng Latar Belakang

Sekarang kita memiliki gradien warna, kita siap untuk membuat topeng latar belakang.

Di bawah tab Background Mask, perbarui yang berikut ini:

• Topeng: Chevrons
• Warna Topeng: #000
• Transformasi Topeng: Terbalik
• Rasio Aspek Topeng: Lihat Tangkapan Layar

4. Tambahkan Pembagi Latar Belakang Bagian

Setelah topeng kita berada di tempatnya, kita dapat memodifikasi bentuk topeng lebih lanjut dengan menggunakan pembagi bagian. Dalam contoh ini, kita akan menambahkan pembagi bagian setengah lingkaran ke atas dan bawah. Ini akan menekan topeng latar belakang agar terlihat lebih seperti desain panah mewah.

Untuk melakukannya, klik tab Desain dan tambahkan Pembagi berikut:

Pertama, tambahkan pembagi atas di bawah tab Atas.

• Gaya Pembagi: Lihat Tangkapan Layar
• Warna Pembagi: #000
• Tinggi Pembagi: 10vw

Selanjutnya, tambahkan pembagi bawah di bawah tab Bawah.

• Gaya Pembagi: Lihat Tangkapan Layar
• Warna Pembagi: #000
• Tinggi Pembagi: 10vw
• Flip Pembagi: Flip Vertikal

Hasil

Inilah hasilnya sejauh ini.

Menyesuaikan Opsi Latar Belakang dan Pembagi untuk Lebih Banyak Desain

Sekarang setelah Anda memiliki ide dasar, kita dapat dengan mudah bermain-main dengan pembagi bagian opsi latar belakang untuk membuat lebih banyak desain.

Desain Alternatif #1

Untuk desain alternatif pertama kami, kami akan memutar topeng latar belakang yang ada dan mengganti pembagi bagian setengah lingkaran dengan segitiga.

Untuk melakukannya, buka pengaturan bagian yang ada, klik tab Mask latar belakang, dan perbarui yang berikut ini:

• Transformasi Topeng: Balik Vertikal, Putar
• Rasio Aspek Topeng: Lihat Tangkapan Layar

Selanjutnya, perbarui Pembagi Bagian sebagai berikut:

Pembagi Atas

• Gaya Pembagi: Lihat Tangkapan Layar
• Tinggi Pembagi: 13vw

Pembagi Bawah

• Gaya Pembagi: Lihat Tangkapan Layar
• Tinggi Pembagi: 13vw
• Flip Pembagi: nonaktifkan

Hasil

Inilah hasilnya.

Desain Alternatif #2

Untuk desain alternatif kedua dan terakhir, kita akan mengganti Chevrons Mask dengan Diagonal Bars 2 Mask dan juga memberikan pembagi bagian atas baru untuk menambahkan efek swooshing halus pada desain.

Untuk melakukannya, buka pengaturan bagian yang ada, klik tab Mask latar belakang, dan perbarui yang berikut ini:

• Topeng: Batang Diagonal 2
• Transformasi Topeng: Flip Horisontal
• Rasio Aspek Topeng: Lihat Tangkapan Layar

Selanjutnya, perbarui Pembagi Bagian sebagai berikut:

Pembagi Atas

• Gaya Pembagi: Lihat Tangkapan Layar
• Flip Pembagi: Flip Horiizontal

Pembagi Bawah

• Gaya Pembagi: Tidak Ada

Hasil

Inilah hasilnya.

Hasil Akhir

Untuk memberi Anda gambaran yang lebih baik tentang seperti apa tampilan latar belakang ini dengan beberapa konten, saya menambahkan baris kolom tunggal dengan judul besar yang diposisikan di tengah bagian. Saya juga menambahkan desain tambahan untuk masing-masing yang menyertakan gambar dengan mode campuran.

Periksa mereka!

Untuk menjelajahi pengaturan yang digunakan untuk konten dan gambar, silakan unduh tata letak gratis untuk tutorial ini (lihat di atas) yang mencakup setiap desain.

Pikiran Akhir

Menggabungkan topeng dan pembagi bagian untuk desain latar belakang membuka lebih banyak kemungkinan untuk menciptakan bentuk unik untuk topeng bawaan tersebut. Jangan ragu untuk menjelajahi berbagai kombinasi Anda sendiri. Mudah-mudahan, ini akan berguna untuk situs web Anda sendiri atau proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!