5 Gaya Modul Header Divi Kreatif yang Dapat Anda Capai Menggunakan Pengaturan Bawaan

Di luar kotak, Modul Header Divi dapat membuat desain header yang mencolok hanya dengan beberapa penyesuaian. Ini menjadikannya modul yang sangat populer saat mendesain tajuk untuk situs web Anda di Divi. Dan dengan sedikit pemikiran out-of-the-box, Anda dapat membuat beberapa desain yang sangat unik hanya dengan menggunakan pengaturan bawaan (tanpa CSS khusus). Jadi bagi Anda yang ingin menjelajahi beberapa desain header baru, saya akan menunjukkan kepada Anda 5 gaya modul header Divi yang dapat menginspirasi Anda.

Menikmati!

Sneak Peek dari 5 Gaya Modul Header Divi

Gaya #1: Gradien Abstrak

Mulai Mendesain Gaya #1

Gaya #2: Ancaman Tiga Kali Lipat

Mulai Mendesain Gaya #2

Gaya #3: Bingkai Bulat

Mulai Mendesain Gaya #3

Gaya #4: Orang Kiri Campuran

Mulai Mendesain Gaya #4

Gaya #5: Tipe Penskalaan Besar

Mulai Mendesain Gaya #5

Apa yang Anda butuhkan untuk memulai

Untuk memulai, Anda memerlukan Tema Divi. Saya akan menggunakan Divi Builder untuk membuat desain di bagian depan. Anda juga akan membutuhkan beberapa gambar untuk menyelesaikan tutorial. Ingatlah bahwa Anda selalu dapat mengimpor gambar tata letak yang telah dibuat sebelumnya. Sebenarnya, untuk tutorial ini, saya akan menggunakan gambar dari Paket Tata Letak Perusahaan Pembersihan, Paket Tata Letak Pelatih Bisnis, dan Paket Tata Letak Freelancer Web.

Mari kita mulai!

Berlangganan Saluran Youtube Kami

Gaya #1: Gadient Abstrak

Desain modul header Divi pertama ini adalah desain sederhana dan serbaguna yang menggunakan latar belakang gradien dengan cara yang kreatif.

Untuk memulai, tambahkan bagian fullwidth baru dengan modul header fullwidth.

Perbarui konten pengaturan header dengan judul baru dan Gambar Header.

Kemudian perbarui pengaturan desain sebagai berikut:

Judul Font: Lato
Ukuran Teks Judul: 6vw
Tombol Satu Warna Latar Belakang: #0c71c3
Tombol Satu Lebar Batas: 0px
Padding Kustom: 8vw atas, 8vw bawah

Sebelum kita menambahkan background bagian kita, pertama-tama kita harus membuat background modul header transparan dan memberikan gradien kustom untuk membuat bentuk lingkaran kita di sudut kanan bawah. Kembali ke tab konten dan perbarui latar belakang sebagai berikut:

Warna Latar Belakang: rgba(255,255,255,0)
Warna Kiri Gradien Latar Belakang: #0096eb
Warna Kanan Gradien Latar Belakang: rgba(255,255,255,0)
Tipe Gradien: Radial
Arah Radial: Kanan Bawah
Posisi Awal: 25%
Posisi Akhir: 0%

Simpan Pengaturan

Selanjutnya kita perlu menambahkan desain latar belakang kita ke bagian yang akan berada di belakang modul header kita. Untuk melakukannya, buka pengaturan bagian dan perbarui yang berikut ini:

Warna Kiri Gradien Latar Belakang: #0096eb
Warna Kanan Gradien Latar Belakang: #007ea1
Tipe Gradien: Radial
Arah Radial: Kiri Atas
Posisi Awal: 43%
Posisi Akhir: 0%

Tip Desain: Jika Anda mencari beberapa warna untuk dicoba untuk gradien header Anda sendiri, saya sarankan untuk menarik warna yang digunakan pada gambar/grafik header yang mungkin Anda gunakan.

Untuk menambahkan elemen desain halus lainnya ke latar belakang abstrak kita, kita dapat menambahkan pembagi bagian atas dan bawah. Untuk melakukan ini, buka tab desain dan tambahkan pembagi berikut:

Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi Atas: rgba (150.210.210,0.2)
Tinggi Pembagi Atas: 8vw
Pengulangan Horizontal Pembagi Atas: 0,7x
Balik Pembagi Atas: Vertikal

Gaya Pembagi Bawah: lihat tangkapan layar
Warna Pembagi Bawah: rgba (150.210.210,0.2)
Tinggi Pembagi Bawah: 10vw
Pengulangan Horizontal Pembagi Bawah: 0,5x
Balik Pembagi Bawah: Vertikal

Itu dia! Lihat desain akhir.

Gaya #2: Ancaman Tiga Kali Lipat

Gaya modul tajuk divi berikutnya ini mencakup tiga ajakan bertindak termasuk dua tombol dan ikon gulir ke bawah. Mencocokkan ikon tombol dengan ikon gulir membantu aspek simetris dari desain. Dan pembagi bagian membuat desain segitiga abstrak yang bagus yang mengarahkan pengguna ke bawah halaman.

Buat bagian lebar penuh baru dengan header lebar penuh.

Kemudian perbarui teks untuk Judul, Teks Tautan Tombol #1, dan Teks Tautan Tombol #2.

Kemudian perbarui sisa desain sebagai berikut:

Warna Latar Belakang: #1a1844
Orientasi Teks & Logo: Tengah
Ikon: lihat tangkapan layar
Gulir ke Bawah Ukuran Ikon: 20px
Judul Font: Lato
Judul Font Berat: Berat
Judul Teks Ukuran: 5vw (desktop), 40px (tablet), 30px (smartphone)
Tinggi Baris Judul: 1.3em
Tombol Dua Warna Latar Belakang: #fe4943
Tombol Dua Lebar Perbatasan: 0px
Tombol Dua Ikon: panah kanan (lihat tangkapan layar)
Tombol Satu Warna Latar Belakang: #fe4943
Tombol Satu Lebar Batas: 0px
Tombol Satu Ikon: panah kiri (lihat tangkapan layar)
Tombol Satu Penempatan Ikon: Kiri
Padding Kustom: 10vw atas, 10vw kiri

Sekarang yang harus kita lakukan adalah menambahkan pembagi bagian untuk membuat desain latar belakang segitiga. Buka pengaturan bagian dan perbarui pengaturan desain berikut:

Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi Atas: rgba(255,255,255,0.3)
Tinggi Pembagi Atas: 45vw

Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi Atas: rgba(255,255,255,0.1)
Tinggi Pembagi Atas: 45vw

Sekarang mari kita lihat desain akhir:

Tip Desain Bonus: Penyesuaian Seluler untuk Tombol

Saya tahu saya mengatakan tidak ada CSS khusus, tetapi ini adalah pengembangan ekstra yang tidak penting, saya pikir beberapa dari Anda akan menikmatinya. Anda mungkin memperhatikan bahwa untuk header dengan dua tombol, tombol kedua memiliki margin kiri yang menghilangkan desain pada smartphone. Untuk desain yang lebih bersih pada ponsel cerdas, Anda dapat menambahkan potongan CSS khusus ke pengaturan halaman Anda untuk membuat tombol dengan lebar yang sama dan tanpa margin tombol kedua.

Buka pengaturan halaman di Divi Builder dan tambahkan CSS berikut

@media (max-width: 550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
  display: block;
  width: 100%;
margin-left: 0px;    
  }
}

Sekarang lihat desain di ponsel.

Gaya #3: Bingkai Bulat

Desain modul header divi bulat ini adalah cara yang bagus untuk membingkai gambar latar belakang dan konten header Anda untuk lebih fokus pada ajakan bertindak Anda. Yang diperlukan hanyalah beberapa penyesuaian pada radius batas tajuk Anda, bayangan kotak, dan beberapa spasi khusus.

Untuk memulai, buat bagian lebar penuh baru dengan header lebar penuh.

Pertama, mari perbarui elemen konten untuk header dengan menambahkan Judul, teks Tombol #1 Link, dan gambar Logo.

Selanjutnya tambahkan gambar latar belakang yang cukup besar untuk merentangkan tinggi dan lebar header. Karena ini akan menjadi header yang membulat, coba gunakan gambar dengan tinggi dan lebar yang sama (seperti 1000px kali 1000px).

Kemudian perbarui pengaturan desain lainnya sebagai berikut:

Simpan Pengaturan.

Kemudian buka pengaturan bagian untuk menambahkan warna latar belakang dan spasi sebagai berikut:

Warna Latar Belakang: #000000
Padding Kustom: 5vw atas, 5vw bawah

Sekarang periksa desain akhir.

Orang Kiri Campuran

Desain header ini memiliki beberapa fitur desain yang unik. Modul header sebenarnya diubah ukurannya dan rata kiri untuk mengekspos bagian kanan gambar latar belakang bagian. Dan konten modul header memiliki efek campuran yang mengekspos gambar latar belakang melalui konten. Untuk melakukan ini, Anda memerlukan jenis gambar latar belakang yang tepat untuk bagian Anda. Umumnya, Anda ingin gambar memiliki elemen yang lebih gelap sehingga konten campuran akan lebih terlihat.

Mari kita mulai.

Pertama, buat bagian fullwidth baru dengan header fullwidth.

Sebelum kami mulai memperbarui gaya tajuk kami, lompat ke pengaturan bagian terlebih dahulu dan tambahkan latar belakang berikut:

Tambahkan gambar latar belakang dengan titik fokus gambar di sebelah kanan.

Warna Kiri Gradien Latar Belakang: rgba(0,0,0,0.54)
Warna Kanan Gradien Latar Belakang: rgba(255,255,255,0)
Arah Gradien: 90 derajat
Arah Radial: Kanan Bawah
Posisi Awal: 50%
Posisi Akhir: 0%
Tempatkan Gradien Di Atas Gambar Latar Belakang: YA

Tujuan dari gradien adalah untuk membuat sisi kiri gambar lebih gelap sehingga ketika kita memadukan konten modul header akan lebih mudah dibaca. Selain itu, Anda tidak akan dapat melihat latar belakang bagian sekarang karena warna latar belakang tajuk default masih aktif. Kami akan mengubahnya selanjutnya.

Buka pengaturan header dan perbarui konten dengan Judul, Teks Tautan Tombol #1, dan logo gelap.

Sekarang ubah warna latar belakang menjadi putih.

Kemudian perbarui yang berikut ini:

Judul Font Berat: Ultra Tebal
Warna Teks Judul: #000000
Judul teks Ukuran: 8vw
Tinggi Baris Judul: 1.1em
Tombol SATU ukuran teks: 2.7vw
Tombol Satu Warna teks: #000000
Tombol Satu Lebar Perbatasan: 0.2em
Tombol Satu Warna Batas: #edf000
Berat Huruf: Sangat Tebal
Lebar: 50% (desktop, tablet, dan smartphone)
Mode Campuran: Layar

Berikut adalah desain akhir.

Gaya #5: Tipe Penskalaan Besar

Desain modul header Divi ini memperkenalkan cara sederhana dan efektif untuk membuat teks besar yang diskalakan dengan jendela browser tanpa mengorbankan desain. Karena kita menggunakan modul header lebar penuh, kita perlu sedikit memperluas area konten kita. Kemudian kita perlu menggunakan satuan panjang vw untuk mengukur teks kita. Desain ini akan bagus untuk header bagian.

Untuk memulai, buat bagian lebar penuh baru dengan header lebar penuh.

Dalam pengaturan header lebar penuh, perbarui yang berikut ini:

Judul: Konsultasi
Teks Subjudul: Layanan
Tombol #1 Teks Tautan: Mulai Sekarang

Hapus teks default di kotak konten.

Kemudian tambahkan gambar logo ringan.

Selanjutnya kita akan meningkatkan max-width default container header kita untuk menciptakan lebih banyak ruang horizontal untuk header Anda. Untuk melakukan ini, buka tab lanjutan dan tambahkan CSS berikut di bawah Header Container:

width: 100% ;
max-width: 100% ;

Sekarang perbarui pengaturan desain lainnya sebagai berikut:

Tambahkan gambar latar belakang.
Orientasi Teks & Logo: Tengah
Judul Font: Cuprum
Judul Font Berat: Tebal
Judul Font Gaya: TT
Judul Teks Warna: #bfbfbf
Judul teks Ukuran: 10vw
Spasi Surat Judul: 0.1em
Font Subjudul: Cuprum
Perataan Teks Subjudul: Kanan (ini membantu memusatkan teks dengan spasi huruf)
Ukuran Teks Subjudul: 3vw
Spasi Surat Subjudul: 7.8vw
Tombol Satu Lebar Batas: 0px
Tombol Satu Font: Tembaga
Ikon Tombol Satu: lihat tangkapan layar

Caranya adalah dengan menggunakan satuan panjang vw untuk teks. Kemudian sesuaikan spasi huruf subjudul agar sejajar dengan teks judul sebaik mungkin.

Untuk memaksimalkan jarak horizontal, kita perlu menambahkan lebar khusus ke konten header sebagai berikut:

Lebar Konten: 80%;

Meskipun ini kurang dari default 100%, mengubah pengaturan akan menimpa default dan menyesuaikan dengan css kustom yang kami tambahkan sebelumnya.

Terakhir, tambahkan bayangan kotak untuk melengkapi desain:

Bayangan Kotak: lihat tangkapan layar
Kekuatan Buram Bayangan Kotak: 0px
Kekuatan Penyebaran Bayangan Kotak: 60px

Sekarang lihat hasil akhirnya.

Ubah Mereka Menjadi Header Layar Penuh!

Desain di atas dapat dengan mudah dibuat layar penuh dengan mengklik tombol. Ini adalah fitur hebat dari modul header lebar penuh. Cukup buka pengaturan desain header dan pilih opsi "Make Fullscreen".

Selain itu, Anda harus mengeluarkan bantalan khusus untuk desain ini agar header pas dengan sempurna di dalam jendela browser.

Pikiran Akhir

Ini hanya beberapa kemungkinan desain header yang tersedia dengan Modul Header Divi. Dan bereksperimen dengan semua pengaturan desain bisa sangat menyenangkan. Jika ada, saya harap contoh-contoh ini akan menjadi sedikit inspirasi untuk proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar di bawah.

Bersulang!