Apakah Anda ingin membuat latar belakang yang unik dan menakjubkan dengan topeng dan pola latar belakang dari Divi ?
Fitur topeng dan pola latar belakang baru dari Divi paling sering digunakan untuk bagian halaman. Tapi kita juga bisa menambahkannya ke header!
Dalam tutorial ini, kami akan menunjukkan cara menambahkan masker dan pola latar belakang ke templat header Divi menggunakan konstruktor tema.
Ini adalah cara yang bagus untuk membuat desain tajuk yang benar-benar unik untuk Anda situs jaringan.
Mari kita mulai.
penelitian
Berikut sekilas desain yang akan kita buat dalam tutorial ini.
Buka pembuat tema Divi dan mulailah membuat tajuk global
Dari dasbor WordPress, buka Divi > Pembuat Tema
Klik “Tambahkan Tajuk Global”
Sélectionnez “Bangun Tajuk Global”.
Setelah itu, Anda dapat mulai mendesain header baru menggunakan Divi Builder.
Cara Menambahkan Masker dan Pola Latar Belakang ke Header Divi
Membuat latar belakang bagian dengan warna dan pola latar belakang
Baca juga: Divi: Cara membuat bagian Testimonial dalam bentuk grid
Untuk memulai, buka pengaturan bagian yang ada.
Di bawah tab Konten, perbarui opsi latar belakang dengan pengaturan berikut:
Warna latar belakang:
- Latar Belakang: #262d3f
Latar BelakangPola:
- Model: Pil
- Warna Pola: rgba (255,255,255,0.1)
- Ukuran pola: ukuran khusus.
- Lebar pola: 1px
Lapisan
Di bawah tab Mendesain, perbarui padding bagian sebagai berikut:
- Padding (Atas dan Bawah): 0px
Ini akan sedikit mengurangi ruang vertikal header.
Tambahkan baris dengan tata letak kolom berikut
Menambahkan konten tajuk placeholder (menu dan tombol)
Di kolom kiri baris, tambahkan menu baru.
Pilih menu.
Kemudian tambahkan logo dan gunakan pengaturan untuk menyesuaikan menu dan logo sesuai keinginan.
Di kolom kanan, tambahkan modul tombol dan sesuaikan juga dengan keinginan Anda.
Membuat latar belakang garis dengan gradien, topeng dan pola
Gradien
Buka pengaturan baris yang berisi menu dan tombol Anda. Kemudian perbarui opsi latar belakang dengan pengaturan latar belakang berikut:
Gradien latar belakang:
- Gradien Berhenti 1 (50%): Hapus
- Gradien Berhenti 2 (75%): #ff4c00
- Kemudi: 90 derajat
pola
- Model: Pil
- Warna Pola: rgba (38,45,63,0.48)
- Ukuran Pola: 1 piksel
- Offset Vertikal: 20px
Catatan: Offset vertikal dari pola diatur ke 20px karena ada bantalan atas 20px pada bagian di atas garis. Ini memastikan bahwa pola bagian sejajar dengan pola baris.
Topeng Latar Belakang
- Topeng: Herringbone
- Warna Topeng: #262d3f
CATATAN: Untuk header, sebaiknya atur ukuran mask ke "Extend to Fill" sehingga menutupi ruang horizontal tanpa mengorbankan desain mask.
Sentuhan terakhir ke garis
Lihat juga: Divi: Cara menggunakan "Gradient Builder" untuk mempercantik gambar Anda
Untuk menyelesaikan desain, kami akan menambahkan radius batas dan beberapa pengeditan lagi pada garis.
Jari-jari, batas, dan jarak batas
Di bawah tab Mendesain, perbarui padding sebagai berikut:
- Padding (Atas dan Bawah): 5px
Kemudian berikan baris sudut membulat yang bagus untuk elemen desain tambahan.
- Sudut Bulat: 50px
- Lebar Batas Kiri: 50px
- Warna Batas Kiri: #262d3f
Kita perlu memberi batas ke sisi kiri baris karena tepi persegi topeng akan memenuhi baris meskipun sudutnya membulat.
Hasil akhir
Mari kita lihat hasil akhirnya.
Gradiennya sedikit halus, jadi inilah tampilannya.
Dan inilah desain header desktop dan mobile.
Unduh DIVI Sekarang!!!
Kesimpulan
Desain latar belakang header hanyalah puncak gunung es. Ada banyak penjelajahan yang harus dilakukan dengan opsi latar belakang yang tersedia di Divi.
Kami harap tutorial ini telah membantu Anda memahami bagaimana topeng dan pola latar belakang Divi dapat bekerja sama untuk membuat desain latar belakang yang unik untuk header Anda.
Jangan ragu untuk bereksperimen dengan lebih banyak kombinasi desain latar belakang agar sesuai dengan desain Anda sendiri. situs jaringan atau proyek Anda yang akan datang.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan 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.
...
