Apakah Anda ingin menggunakan topeng dan pola untuk bagian Pahlawan Anda di Divi ?
Topeng baru dan pola latar belakang Divi adalah salah satu fitur desain baru kami yang paling keren. Setiap topeng dan pola dapat dikombinasikan dengan elemen latar belakang lainnya (seperti warna, gambar, dan gradien) untuk kombinasi unik yang tak terhitung jumlahnya hanya dengan beberapa klik.
Hari ini kami akan menunjukkan cara menggunakan Divi dan topeng baru serta pola latar belakang untuk mendesain bagian pahlawan.
Dalam tutorial ini, kita akan membahas langkah-langkah penting yang diperlukan untuk membuat topeng dan pola latar belakang.
Kami bahkan akan menunjukkan cara memposisikan gambar latar belakang agar sesuai dengan desain topeng. Ini akan memberi Anda alat Anda perlu membuat bagian Pahlawan yang sempurna untuk situs Anda dalam hitungan menit.
penelitian
Berikut sekilas desain yang akan kita buat dalam tutorial ini.
Baca juga: Divi: Cara membuat kisi gambar responsif dengan tautan dan efek melayang
Contoh bagian Pahlawan dengan topeng dan pola putih.
Ini adalah versi gelap dari bagian Pahlawan yang sama dengan topeng dan pola hitam.
Dengan desain ini, Anda dapat dengan mudah mengubah topeng dan posisi topeng hanya dengan beberapa klik!
Buat halaman baru dengan Divi Builder
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik penggunaan Divi Pembangun
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu Anda akan memiliki kanvas kosong untuk mulai mendesain Divi.
Cara Menggunakan Masker Divi dan Pola Latar Belakang di Bagian Pahlawan Anda
1. Buat struktur tata letak
Untuk bagian pahlawan ini, kita akan menggunakan struktur tata letak klasik dengan judul dan ajakan bertindak di sebelah kiri dan gambar (atau desain visual) di sebelah kanan.
Untuk contoh ini, desain visual kita akan dibuat menggunakan opsi latar belakang Divi. Tapi sebelum kita sampai ke seluk beluknya, kita perlu membuat baris dua kolom untuk menghemat ruang di sisi kanan halaman untuk menampilkan topeng latar belakang bagian dan desain pola kita.
2. Tambahkan judul dan ajakan bertindak
Di kolom kiri (kolom 1), tambahkan modul Teks untuk judul utama Anda, modul Teks untuk teks subjudul Anda, dan modul Tombol untuk tombol Anda.
3. Tambahkan spasi vertikal ke bagian
Untuk membuat desain latar belakang kita terlihat tinggi dan indah, kita perlu menambahkan ketinggian vertikal ke bagian tersebut. Cara sederhana untuk melakukannya adalah dengan menambahkan padding ke bagian atas dan bawah. Ingatlah bahwa kita perlu menyesuaikan padding pada tablet dan layar ponsel untuk memberi ruang bagi desain latar belakang kita setelah kolom ditumpuk secara vertikal.
Buka pengaturan bagian. Di bawah tab desain, perbarui padding sebagai berikut:
- Lapisan:
- Desktop: 20vw Atas, 20vw Bawah
- Tablet: 8vw Atas, 48vw Bawah
- Telepon: 8vw Atas, 70vw Bawah
4. Tambahkan gambar latar belakang dan gradien
Selanjutnya, kita dapat menambahkan gambar latar belakang dan gradien ke bagian tersebut. Ingatlah bahwa titik fokus utama gambar latar belakang akan terlihat di sisi kanan bagian, jadi gunakan gambar yang memiliki apa yang ingin Anda lihat di sisi kanan.
Untuk contoh ini, kami menggunakan gambar dengan cakrawala kota. Sisi kanan gambar memiliki bangunan yang tampak lebih dekat dan lebih baik, sehingga berfungsi dengan sangat baik.
Di bawah tab Gambar Latar, unggah gambar di latar belakang bagian.
Di Divi, Anda dapat dengan mudah menambahkan gradien warna ke gambar latar belakang. Di bawah tab Gradien Latar Belakang, tambahkan gradien berikut ke latar belakang bagian:
- Gradien Berhenti:
- 0%: #3e22ff
- 100%: jelas
- Gradien Persegi Di Atas Gambar Latar Belakang : YA
5. Buat pola latar belakang untuk bagian
Sekarang setelah kita memiliki gambar latar belakang dan gradien, kita dapat menambahkan pola latar belakang untuk melengkapi desain.
Dalam contoh ini, kita akan menggunakan pola halus yang hanya menambahkan sedikit tekstur untuk memberikan tampilan yang lebih unik.
Di bawah tab Pola Latar Belakang, perbarui berikut ini:
- Pola Latar Belakang: Berumbai
TRIK: Dengan pola latar belakang, biasanya yang terbaik adalah membuatnya tetap halus. Coba gunakan ukuran khusus untuk desain yang lebih kecil, lalu turunkan opacity warnanya.
6. Buat topeng latar belakang untuk bagian
Dengan pola latar belakang kami di tempat, kami akhirnya siap untuk menguji topeng latar belakang baru untuk desain kami. Ada banyak pilihan dan variasi untuk dipilih. Untuk contoh ini, kita akan menggunakan topeng sarang lebah.
Di bawah tab Topeng Latar Belakang, perbarui berikut ini:
- Masker: Sarang Lebah
- Warna Topeng: #ffffff
- Ukuran: Penutup
7. Sesuaikan posisi gambar latar belakang
Karena kita menggunakan topeng latar belakang, bagian dari gambar latar belakang kita ditutupi (atau "bertopeng").
Dalam contoh ini, kami akan memastikan bagian kanan bawah gambar paling terlihat, dan kami akan memindahkannya sedikit ke kanan untuk menampilkan lebih banyak bangunan.
Di bawah tab Gambar, perbarui yang berikut ini:
- Posisi Gambar Latar Belakang: Kanan Bawah
- Gambar Latar Belakang Horizontal Offset: -4vw
8. Gunakan mode campuran
Salah satu cara untuk berkreasi dengan semua elemen latar belakang ini adalah dengan menambahkan blending mode. Mode pencampuran dapat ditambahkan ke salah satu opsi latar belakang, dan mereka dapat digunakan untuk mencampur beberapa lapisan latar belakang (gambar, gradien, topeng, dll.) dengan cara yang kreatif.
Untuk contoh ini, kita akan memadukan gambar latar belakang dengan warna gradien. Untuk melakukan ini, klik pada tab Gambar Latar dan tambahkan blending mode untuk memadukan warna gradien dengan gambar latar belakang sebagai berikut:
- Campuran Gambar Latar Belakang: Kalikan
9. Sesuaikan topeng latar belakang untuk seluler
Penting untuk memastikan bahwa desain topeng latar belakang juga terlihat bagus di perangkat seluler. Untungnya, opsi bawaan membuat proses ini lebih mudah.
Ingatlah bahwa kami telah menambahkan bantalan ekstra pada tablet dan ponsel untuk memberi ruang bagi desain latar belakang kami.
Sekarang yang perlu kita lakukan adalah menggunakan opsi transformasi latar belakang dan rasio aspek untuk menyesuaikan topeng untuk seluler.
Di bawah tab Topeng Latar Belakang, aktifkan opsi responsif dan perbarui yang berikut:
Versi Tablet
- Transformasi Topeng: Balik Vertikal, Balik Horizontal, Putar
- Rasio Aspek Topeng: persegi
Versi telepon
- Transformasi Topeng: Balik Vertikal, Balik Horizontal, Putar
- Rasio Aspek Topeng: Potret
Hasil
Lihat desain yang telah kami buat sejauh ini.
Komputer desktop
Versi tablet
Edisi Telepon
10. Buat versi gelap
Jika Anda menginginkan versi gelap dari desain ini, cukup ubah warna topeng latar belakang menjadi warna gelap (seperti hitam).
Kemudian ubah warna pola menjadi hitam.
Kemudian ubah judul dan teks subtitle menjadi putih. Dan Anda mungkin ingin memperbarui warna tombol juga.
Seperti inilah tampilan versi gelapnya.
Hasil akhir
Lihat juga: Divi: Cara menyesuaikan tautan "Baca Selengkapnya" dari sebuah Blog
Berikut adalah tampilan lain dari hasil akhir kami.
Unduh DIVI Sekarang!!!
Kesimpulan
Rancang bagian Pahlawan untuk Anda situs jaringan sangat menyenangkan dengan topeng dan pola latar belakang dari Divi. Pilihan latar belakang mudah diubah untuk mendapatkan desain yang sempurna. Dan ada banyak opsi lain yang dapat Anda gunakan (seperti mode campuran) untuk membuat latar belakang yang lebih unik.
Selain itu, Anda dapat menambahkan topeng dan pola ke elemen Divi mana pun, bukan hanya bagian. Jadi selamat bereksperimen!
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.
...
