Cara Menambahkan Masker dan Pola Latar Belakang ke Divi Header Anda

Diterbitkan: 2022-05-14

Fitur topeng dan pola latar belakang baru Divi lebih umum digunakan untuk bagian pada halaman. Tapi, kita juga bisa menambahkannya ke header! Dalam tutorial ini, kami akan menunjukkan cara menambahkan topeng dan pola latar belakang ke template header Divi menggunakan pembuat tema. Ini adalah cara yang bagus untuk membuat desain tajuk yang benar-benar unik untuk situs web Anda.

Mari kita mulai.

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

tambahkan topeng dan pola latar belakang ke header divi

tambahkan topeng dan pola latar belakang ke header divi

tambahkan topeng dan pola latar belakang ke header divi

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 pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam 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

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 bersama 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.

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 templat tajuk ke Perpustakaan Divi Anda, lakukan hal berikut:

  1. Navigasikan ke Pembuat Tema Divi.
  2. Klik tombol Impor di kanan atas halaman.
  3. Di popup portabilitas, pilih tab impor
  4. Pilih file unduhan dari komputer Anda (pastikan unzip file terlebih dahulu dan gunakan 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. Navigasikan ke Pembuat Tema Divi.
  2. Klik area Add Global Header dari template situs web default (atau gunakan template baru jika Anda tidak ingin menjadi global.
  3. Di menu tarik-turun, pilih Bangun Header Global.

tambahkan topeng dan pola latar belakang ke header divi

Setelah itu, Anda dapat mulai mendesain header baru menggunakan Divi Builder.

Bagaimana cara menambahkan Masker dan Pola Latar Belakang ke Header Divi

1. Membuat Latar Belakang Bagian dengan Warna dan Pola Latar Belakang

Untuk memulai, buka pengaturan bagian yang ada. Di bawah tab konten, perbarui opsi latar belakang dengan pengaturan latar belakang berikut:

Warna latar belakang:

  • Warna Latar Belakang: #262d3f

Pola Latar Belakang:

  • Pola Pembukaan: Pil
  • Warna Pola: rgba (255,255,255,0.1)
  • Ukuran Derai: Ukuran Khusus
  • Lebar Pola: 1px

tambahkan topeng dan pola latar belakang ke header divi

Bagian Padding

Di bawah tab desain, perbarui padding bagian sebagai berikut:

  • Padding: 0px atas, 0px bawah

Ini akan sedikit mengurangi ruang vertikal header.

tambahkan topeng dan pola latar belakang ke header divi

2. Menambahkan Tata Letak Baris

Setelah background bagian selesai, kita siap untuk menambahkan konten header. Dalam hal ini kita akan menambahkan menu di sebelah kiri dan tombol cta di sebelah kanan sehingga kita perlu menambahkan tata letak baris yang akan berfungsi. Tambahkan tata letak tiga perempat seperempat (dua kolom) ke bagian.

tambahkan topeng dan pola latar belakang ke header divi

Kami akan kembali ke pengaturan baris sebentar lagi. Untuk saat ini, mari tambahkan beberapa konten tiruan.

3. Menambahkan Konten Header Mock (Menu dan Tombol)

Sekarang kita siap untuk menambahkan menu dan tombol CTA ke header kita. Karena tutorial ini berfokus pada desain latar belakang header, kami tidak akan mencantumkan semua pengaturan desain untuk konten tiruan. Namun, silakan unduh template gratis dari tutorial ini untuk melihat lebih dekat pengaturan yang digunakan dalam ilustrasi ini.

Di kolom kiri baris, tambahkan menu baru.

tambahkan topeng dan pola latar belakang ke header divi

Pastikan untuk memilih menu dan menambahkan logo. Kemudian gunakan pengaturan desain untuk mendesain menu sesuai keinginan Anda.

tambahkan topeng dan pola latar belakang ke header divi

Di kolom kanan, tambahkan modul tombol dan sesuaikan juga dengan keinginan Anda.

tambahkan topeng dan pola latar belakang ke header divi

4. Membuat Latar Belakang Baris dengan Gradien, Mask, 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:

  • Gradient Stop 1 Warna: Transparan
  • Gradien Berhenti 1 Posisi: 50%
  • Gradien Berhenti 2 Warna: #ff4c00
  • Gradien Stop 2 Posisi: 75%
  • Arah Gradien: 90 derajat

tambahkan topeng dan pola latar belakang ke header divi

Pola

  • Pola Pembukaan: Pil
  • Warna Pola: rgba (38,45,63,0.48)
  • Ukuran Pola: 1px
  • Pola Offset Vertikal: 20px

Catatan: Offset vertikal dari pola diatur ke 20px karena ada bantalan atas 20px pada bagian di atas baris. Ini memastikan pola bagian sejajar dengan pola baris.

tambahkan topeng dan pola latar belakang ke header divi

Topeng

  • Topeng: Chevrons
  • Warna Topeng: #262d3f

Untuk header, akan lebih baik jika Anda menggunakan mask yang memiliki desain simetris. Topeng Chevrons adalah pilihan yang bagus karena tidak hanya terlihat keren tetapi juga mengarahkan pengguna untuk melihat tombol di sebelah kanan.

CATATAN: Untuk header, yang terbaik adalah menjaga ukuran mask diatur ke "Stretch to Fill" sehingga menutupi ruang horizontal tanpa mengorbankan desain topeng.

tambahkan topeng dan pola latar belakang ke header divi

5. Sentuhan Terakhir ke Baris

Untuk melengkapi desain (secara harfiah), kita akan menambahkan radius batas dan beberapa penyesuaian lagi pada baris.

Radius Perbatasan, Perbatasan, dan Spasi

Di bawah tab desain, perbarui padding sebagai berikut:

  • Padding: 5px atas, 5px bawah

tambahkan topeng dan pola latar belakang ke header divi

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 pada sisi kiri baris karena tepi persegi topeng akan memenuhi baris meskipun sudutnya membulat.

tambahkan topeng dan pola latar belakang ke header divi

Jarak Kolom untuk Perataan Vertikal Konten

Dan untuk satu sentuhan terakhir, tambahkan beberapa bantalan ke kolom kedua untuk memusatkan tombol secara vertikal.

  • Padding: 13px atas, 13px bawah

tambahkan topeng dan pola latar belakang ke header divi

Hasil Akhir

Mari kita lihat hasil akhirnya. Berikut adalah tajuk baru kami yang digunakan di salah satu halaman dari Paket Tata Letak Pelatih Pribadi kami.

Gradiennya agak halus jadi inilah tampilannya lebih dekat.

tambahkan topeng dan pola latar belakang ke header divi

Dan berikut adalah desain header di desktop dan mobile.

tambahkan topeng dan pola latar belakang ke header divi

tambahkan topeng dan pola latar belakang ke header divi

tambahkan topeng dan pola latar belakang ke header divi

Selamat Bereksperimen

Desain latar belakang header hanyalah puncak gunung es. Ada banyak eksplorasi yang harus dilakukan dengan opsi latar belakang yang tersedia di Divi. Misalnya, hanya dengan beberapa klik, kita dapat menambahkan pola garis diagonal dan kombo topeng garis diagonal untuk membuat header yang diilustrasikan di bawah ini.

Pikiran Akhir

Semoga tutorial ini membantu Anda memahami bagaimana topeng dan pola latar belakang Divi dapat bekerja secara harmonis 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 situs web Anda sendiri atau proyek mendatang.

Untuk lebih lanjut, lihat cara menggabungkan pembuat gradien baru Divi dengan topeng dan pola.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!