Cara Mendesain Logo Menu Bar Crossing Di Dalam Divi Header

Rifat Divi Tutorials Oct 15, 2021

Divi memberi kita peluang besar untuk mendekorasi situs web kita dengan berbagai cara, dan ada banyak opsi yang tersedia di dalam Divi yang benar-benar dapat membuat desain yang memukau. Pernahkah Anda berpikir untuk membuat tajuk di mana logo Anda akan berdiri di bilah menu utama dan sekunder? Nah, itulah yang akan kita pelajari hari ini. Ini adalah cara inovatif untuk menampilkan header Anda. Jadi jangan buang waktu lagi dan lihat bagaimana melakukannya!

Puncak Menyelinap

Ini adalah desain header yang akan kita buat hari ini.

Bagian Satu: Template Header Global

Pertama-tama, kita perlu membuat template header global. Untuk melakukan itu, mari kita pergi ke "Divi

Klik opsi "Tambahkan tajuk Global" dan Anda akan melihat menu tarik-turun. Pilih "Build Global Header" dan lanjutkan.

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang

Bagian Kedua: Merancang Header

Menambahkan: Bagian Khusus

Kami akan memilih bagian Specialty untuk membuat desain ini.

Struktur Kolom

Silakan, pilih struktur kolom yang ditandai untuk bagian tersebut.

Warna Latar Belakang: Kolom 1

Sekarang, buka pengaturan kolom 1 dari bagian Kekhususan yang baru dibuat dan ubah warna latar belakang.

  • Warna Latar Belakang: rgba(255,191,0,0.27)

Perekat

Ubah nilai berikut dari tab Desain.

  • Samakan Tinggi Kolom: Ya
  • Gunakan Lebar Talang Kustom: Ya
  • Lebar Talang: 1
  • Lebar bagian dalam: 100%
  • Lebar Maks Dalam: 2580px

Jarak

Sekarang pindah ke pengaturan Spasi dari tab Desain yang sama.

  • Padding Atas: 0px
  • Padding Bawah: 0px
  • Kolom 1 Padding Atas: 0px
  • Kolom 1 Padding Bawah: 0px
  • Kolom 2 Padding Atas: 0px
  • Kolom 2 Padding Bawah: 0px

ID CSS kolom

Di bawah tab Lanjutan, mari terapkan ID CSS khusus ke kedua kolom.

  • Kolom 1 ID CSS: header-first-column
  • Kolom 2 ID CSS: header-kedua-kolom

Menambahkan: Modul Gambar Ke Kolom 1

Unggah Gambar

Sekarang tambahkan modul gambar ke kolom 1 dan masukkan logo Anda.

Penyelarasan

Sekarang pindah ke tab desain dan buat perubahan pada perataan gambar.

  • Penjajaran Gambar: Tengah

Perekat

Dari bagian ukuran, ubah nilai lebar maksimum.

Visibilitas

Sekarang, sembunyikan modul khusus ini dari perangkat yang lebih kecil, kami akan menonaktifkan visibilitas ponsel dan tablet.

Menambahkan: Baris 1 Ke Kolom 2

Struktur Kolom

Kami akan menambahkan struktur kolom yang ditandai pada kolom bagian Khusus kami 2. Ini akan bertindak sebagai Baris pertama kami.

Warna latar belakang

Terapkan warna latar belakang dari pengaturan baris.

  • Warna Latar Belakang: rgba (161,99,255,0.1)

Jarak

Dari tab Desain, ubah pengaturan spasi sebagai berikut:

  • Padding Atas: 10px
  • Padding Bawah: 10px
  • Padding Kiri: 5%
  • Padding Kanan: 5%

Berbatasan

Sekarang, buat beberapa perubahan pada pengaturan perbatasan.

  • Lebar Batas Bawah: 3px
  • Lebar Batas Kiri: Desktop: 3px, Tablet, dan Ponsel: 0px
  • Warna Batas: #6c2eb9

CSS Elemen Utama

Sekarang, tuliskan Kode CSS di blok "Elemen Utama" dari tab Lanjutan.

display: flex;
justify-content: center;
align-items: center;

Visibilitas: Sembunyikan Kolom 1 Dan 2

Kami akan menyembunyikan visibilitas kolom 1 Dan 2 untuk perangkat yang lebih kecil untuk merancang penyederhanaan. Ini akan membuat desain kita lebih bersih.

Menambahkan: Modul Media Sosial Ke Kolom 1

Penambahan Jejaring Sosial

Mari tambahkan modul ikuti media sosial ke kolom satu. Pilih platform media sosial yang Anda inginkan dan tambahkan di sini.

Ubah Warna Untuk Latar Belakang Dan Ikon

Kami akan membuat beberapa penyesuaian warna pada modul Ikuti Media Sosial.

  • Warna Latar Belakang: #DBDD54
  • Warna Ikon: rgba(123,15,255,0.46)

Berbatasan

Sekarang dari pengaturan perbatasan, buat ikon sosial kita membulat.

  • Semua Sudut: 100px

Menambahkan: Modul Teks Ke Kolom 2

Modul Dan Konten

Tambahkan modul teks ke Kolom 2 dan tambahkan tagline atau apa pun sesuai pilihan Anda.

Pengaturan Teks

Mengubah gaya teks.

  • Font Teks: Poppins
  • Perataan Teks: Tengah

Menambahkan: Modul Tombol Ke Kolom 3

Modul Dan Konten

Di Kolom 3, tambahkan modul tombol dan konten pilihan Anda.

Penjajaran Tombol

Dari tab desain, ubah perataan tombol sehingga dapat ditempatkan dengan sempurna pada perangkat ukuran layar yang berbeda.

  • Penjajaran Tombol: Desktop: Kanan, Tablet, dan Ponsel: Tengah

Pengaturan Tombol

Sekarang buat beberapa penyesuaian pada tombol agar lebih menarik.

  • Gunakan Gaya Kustom Untuk Tombol: Ya
  • Ukuran Teks Tombol: 14px
  • Warna Teks Tombol: #DBDD54
  • Warna Latar Tombol: #158DD8
  • Font Tombol: Poppins
  • Berat Huruf Tombol: Tebal
  • Gaya Font Tombol: Huruf Besar
  • Tampilkan Ikon Tombol: Ya
  • Penempatan Ikon Tombol: Kiri

Jarak

Sekarang buat perubahan berikut pada nilai padding.

  • Padding Atas: 10px
  • Padding Bawah: 10px
  • Padding Kiri: 50px
  • Padding Kanan: 30px

Menambahkan: Baris 2 Ke Kolom 2

Struktur Kolom

Sekarang, kita akan menambahkan baris terakhir ke modul kolom ini.

Warna latar belakang

Terapkan warna berikut sebagai latar belakang.

  • Warna Latar Belakang: rgba (161,99,255,0.1)

Jarak

Sesuaikan pengaturan jarak baris.

  • Padding Atas: 20px
  • Padding Bawah: 20px
  • Padding Kiri: 5%
  • Padding Kanan: 5%

Berbatasan

Kemudian, terapkan pengaturan perbatasan berikut:

  • Lebar Batas Kiri: Desktop: 3px, Tablet, dan Ponsel: 0px
  • Warna Batas Kiri: #6c2eb9

Menambahkan: Modul Menu Ke Kolom 2

Sekarang, pilih menu kebutuhan Anda dan atur.

Unggah Logo Untuk Tablet Dan Ponsel

Tambahkan logo untuk perangkat dengan ukuran layar yang lebih kecil.

Pengaturan Teks Menu

Sekarang lakukan beberapa penyesuaian pada teks menu agar terlihat lebih teratur.

  • Font Menu: Poppins
  • Warna Teks Menu: #6c2eb9
  • Ukuran Teks Menu: 16px

Pengaturan Teks Menu Dropdown

Sekarang tambahkan warna garis ke menu dropdown kami.

  • Warna Garis Menu Dropdown: rgba(0,0,0,0)

Pengaturan Ikon

Sekarang, ubah pengaturan ikon.

  • Warna Ikon Keranjang Belanja: #6c2eb9
  • Warna Ikon Pencarian: #6c2eb9
  • Warna Ikon Menu Hamburger: #6c2eb9

Perekat

Terapkan lebar maksimum logo pada tablet dan ponsel.

  • Logo Lebar Maks: Tablet: 70px Dan Telepon: 50px

Menambahkan: Modul Kode Ke Kolom 1

Untuk membawa perubahan pada desain header kita, kita akan melakukan sedikit penyesuaian CSS. Untuk melakukannya, tambahkan modul kode di kolom 1. Sekarang salin kode di bawah ini dan tempel ke modul itu. Pastikan untuk meletakkannya di antara kode Gaya .

@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}
 
#header-second-column {
width: 90% !important;
}
}
 
@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}

Bagian Tiga: Simpan Desainnya

Kami selesai mendesain. Semuanya ditempatkan dengan sempurna dan sekarang mari kita simpan desainnya dan lihat hasilnya. Klik ikon silang di kanan atas. Ini akan membawa Anda ke Dashboard dan klik simpan desain.

Tampilan Akhir

Jadi ini adalah bagaimana desain akhir kami terlihat.

Kesimpulan

Kami telah menyebutkan sebelumnya bahwa, dengan Divi , Anda dapat membawa lebih banyak kreativitas ke desain Anda. Ada banyak cara untuk membuat situs web Anda rapi, dan Divi dapat memberikan semua dukungan itu. Saya harap tutorial hari ini akan membantu Anda membuat tajuk unik untuk situs web Anda. Jangan ragu untuk membagikan pemikiran Anda, dan jika Anda menyukai tutorial ini, berbagi dengan ramah akan membuat Anda LUAR BIASA!

Divi WordPress Theme