Cara Menyertakan Bilah Menu Utama dalam Desain Halaman Divi Anda

Diterbitkan: 2018-08-26

Navigasi adalah bagian penting dari pengalaman pengguna di situs web Anda. Sangat penting untuk memastikan pengunjung Anda dapat menavigasi dengan mulus melalui situs web Anda tanpa harus berkompromi pada estetika. Secara default, Bilah Menu Utama WordPress ditempatkan di bagian atas setiap halaman dan dianggap terpisah dari desain halaman yang Anda pilih untuk diikuti. Namun, dalam banyak kasus, memasukkan menu Anda ke dalam desain halaman secara keseluruhan dapat memberikan hasil yang menakjubkan. Ini akan memberikan tampilan dan nuansa yang lebih koheren pada situs web Anda.

Dalam posting ini, kami akan menunjukkan kepada Anda cara memasukkan bilah menu utama dalam desain halaman Divi Anda. Ini adalah perubahan sederhana namun dinamis pada cara menu utama biasanya ditampilkan, menghadirkan tampilan unik untuk setiap proyek Divi.

Mari kita lakukan!

Berlangganan Saluran Youtube Kami

Pratinjau

Mari kita mulai dengan melihat hasil akhir pada berbagai ukuran layar:

bilah menu utama

Pengaturan Penyesuai Tema

Buka Penyesuai Tema

Sebelum kita mulai membangun desain kita, mari kita mulai dengan beberapa perubahan Penyesuai Tema. Buka Dasbor WordPress Anda > Tampilan > Sesuaikan .

Simpan Gambar Latar Belakang

Karena kita akan melepaskan Bilah Menu Utama dari atas, kita memerlukan sesuatu untuk menutupi ruang yang biasanya digunakan. Kami akan menggunakan gambar latar belakang berikut, jadi lanjutkan dan simpan di komputer Anda:

dengan perbatasan

Unggah Gambar Latar Belakang ke Pengaturan Umum

Lalu, buka Pengaturan Umum > Latar Belakang dan unggah gambar ke latar belakang situs web Anda.

  • Gambar Latar Belakang Peregangan: Diaktifkan
  • Posisi Latar Belakang: Tetap

Pengaturan Bilah Menu Utama

Kami juga akan menggabungkan Bilah Menu Utama yang siap dengan desain Divi kami. Untuk melakukannya, kita perlu mengubah pengaturan Bilah Menu Utama terlebih dahulu. Buka Header & Navigasi > Bilah Menu Utama dan gunakan pengaturan berikut:

  • Tinggi Maks Logo: 100
  • Ukuran Teks: 18
  • Spasi Huruf: -1
  • Font: Poppins
  • Warna Teks: #333333
  • Warna Tautan Aktif: #f55c83
  • Warna Latar Belakang: rgba(255,255,255,0)
  • Warna Latar Menu Dropdown: #FFFFFF

Tambahkan Halaman Baru

CSS Kustom Halaman

Untuk membuat bilah menu utama tumpang tindih dengan desain halaman kita, kita memerlukan sedikit kode CSS. Anda dapat memilih apakah Anda ingin menerapkan tumpang tindih di seluruh situs web Anda atau hanya pada halaman tertentu. Jika Anda memilih untuk menambahkannya ke satu halaman saja, tambahkan kode CSS berikut ke pengaturan halaman Anda: 

#main-header {
margin-top: 140px;
}

Tambahkan Bagian Baru

Warna latar belakang

Mari kita mulai dengan desainnya! Tambahkan halaman baru, alihkan ke Visual Builder dan tambahkan bagian pertama Anda. Buka pengaturan bagian berikutnya dan tambahkan 'rgba(255,255,255,0.81)' sebagai warna latar belakang. Ini akan memungkinkan gambar latar belakang situs web kami untuk ditampilkan.

Jarak

Lanjutkan dengan masuk ke pengaturan Spasi dan tambahkan margin dan padding kustom berikut:

  • Margin Atas & Bawah: 100px
  • Margin Kiri & Kanan: 60px
  • Padding Atas: 135px
  • Padding Bawah: 0px

Sudut Bulat

Tambahkan '30px' ke masing-masing sudut bagian Anda juga.

Berbatasan

Kemudian, tambahkan batas atas ke bagian Anda:

  • Lebar Batas Atas: 35px
  • Warna Batas Atas: #333333

Bayangan Kotak

Untuk menyelesaikannya, tambahkan bayangan kotak yang sangat halus.

  • Kekuatan Buram Bayangan Kotak: 61px
  • Kekuatan Penyebaran Bayangan Kotak: -13px

Tambahkan Baris #1

Struktur Kolom

Saatnya mulai menambahkan baris dan modul! Tambahkan baris pertama Anda menggunakan dua kolom berukuran sama.

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan Ukuran:

  • Jadikan Baris Ini Lebar Penuh: Ya
  • Samakan Tinggi Kolom: Ya

Jarak

Tambahkan beberapa bantalan khusus berikutnya:

  • Padding Atas: 250px (Desktop), 50px (Tablet & Ponsel)
  • Padding Bawah: 200px (Desktop), 100px (Tablet), 50px (Ponsel)
  • Kolom 1 Padding Kiri: 50px (Desktop), 0px (Tablet & Ponsel)

Tambahkan Modul Teks Judul ke Kolom 1

Pengaturan Teks H1

Sekarang kita dapat mulai menambahkan modul. Kita akan mulai dengan kolom pertama dengan menambahkan judul baru Modul Teks.

  • Font Judul: Poppins
  • Berat Font Judul: Sedang
  • Ukuran Teks Judul: 120px (Desktop), 80px (Tablet), 58px (Telepon)

Tambahkan Warna Berbeda ke Bagian Salin

Anda dapat dengan mudah mengubah warna kata dalam judul Anda dengan beralih ke tab Teks dan menambahkan warna ke kata pilihan Anda dengan menggunakan tag rentang.

Tambahkan Modul Teks Deskripsi ke Kolom 1

Pengaturan Teks

Tepat di bawah Modul Teks sebelumnya, lanjutkan dan tambahkan deskripsi Modul Teks menggunakan pengaturan teks berikut:

  • Font Teks: Poppins
  • Berat Font Teks: Reguler
  • Ukuran Teks: 20px (Desktop), 15px (Tablet & Ponsel)
  • Tinggi Baris Teks: 2em

Jarak

Kami membutuhkan beberapa margin tambahan untuk Modul Teks ini:

  • Margin Atas & Bawah: 50px

Tambahkan Modul Tombol ke Kolom 1

Pengaturan Tombol

Modul terakhir pada kolom ini adalah Modul Tombol. Setelah Anda menambahkan salinan CTA, ubah gaya tombol:

  • Gunakan Gaya Kustom untuk Tombol: Ya
  • Warna Teks Tombol: #FFFFFF
  • Warna Gradien 1: #f45085
  • Warna Gradien 2: #f88c7e
  • Arah Gradien: 137deg
  • Lebar Batas Tombol: 0px
  • Radius Perbatasan Tombol: 40px
  • Font Tombol: Poppins
  • Berat Font Tombol: Reguler
  • Gaya Font: Huruf Besar

Jarak

Buka pengaturan Spasi berikutnya dan tambahkan beberapa margin dan padding ke tombol Anda:

  • Margin Bawah: 100px (Desktop), 20px (Tablet & Ponsel)
  • Padding Atas & Bawah: 15px
  • Padding Kiri & Kanan: 50px

Bayangan Kotak

Last but not least, kami akan menggunakan bayangan kotak yang sangat halus untuk membuat lebih banyak kedalaman di halaman kami:

  • Kekuatan Buram Bayangan Kotak: 55px
  • Kekuatan Penyebaran Bayangan Kotak: -4px
  • Warna Bayangan: rgba (84,84,84,0.25)

Tambahkan Modul Gambar ke Kolom 2

Simpan & Unggah Gambar

Kolom kedua hanya berisi Modul Gambar. Kami menggunakan mockup yang merupakan bagian dari Paket Tata Letak Pemasaran Digital Divi. Silakan dan simpan gambar di bawah ini ke komputer Anda. Setelah Anda melakukannya, tambahkan ke Modul Gambar di kolom kedua Anda.

Tambahkan Baris #2

Struktur Kolom

Saatnya menambahkan baris kedua! Pilih struktur kolom berikut untuk itu:

Warna Latar Kolom 1

Kemudian, buka pengaturan baris dan tambahkan '#FFFFFF' sebagai Warna Latar Kolom 1.

Salin Latar Belakang Gradien Tombol

Kita akan menghemat waktu dan menyalin gradien yang telah kita gunakan untuk Modul Tombol. Untuk melakukannya, buka Modul Tombol, buka pengaturan tombol, klik kanan latar belakang gradien dan salin.

Tempel Latar Belakang Gradien di Kolom 2

Kemudian, kembali ke pengaturan baris Anda dan tempel latar belakang gradien di kolom kedua.

Warna Latar Kolom 3

Untuk kolom ketiga, kami menggunakan warna latar belakang '#FFFFFF'.

Perekat

Buka pengaturan Ukuran berikutnya dan ubah pengaturan:

  • Gunakan Lebar Kustom: Ya
  • Lebar Kustom: 2600px
  • Gunakan Lebar Talang Kustom: Ya
  • Lebar Talang: 1

Jarak

Kami juga membutuhkan beberapa bantalan tambahan:

  • Padding Atas & Bawah: 0px
  • Padding Atas & Bawah Kolom: 30px

Bayangan Kotak

Last but not least, kita akan menggunakan bayangan kotak halus:

  • Kekuatan Buram Bayangan Kotak: 61px
  • Kekuatan Penyebaran Bayangan Kotak: -20px

Tambahkan Modul Blurb #1

Pilih Ikon

Kita membutuhkan tiga Blurb Modules secara total. Kami akan memulai dengan satu dan mengkloningnya setelah itu untuk menghemat waktu. Silakan dan tambahkan Modul Blurb baru ke kolom pertama. Setelah menambahkan konten Anda, pilih ikon pilihan.

Pengaturan Ikon

Ubah pengaturan ikon Anda sesuai:

  • Warna Ikon: #f55c83
  • Penempatan Ikon: Kiri
  • Gunakan Ukuran Font Ikon: Ya
  • Ikon Ukuran Font: 88px (Desktop & Tablet), 50px (Telepon)

Pengaturan Teks Judul

Buka pengaturan teks judul berikutnya dan buat beberapa perubahan:

  • Judul Font: Poppins
  • Judul Font Berat: Sedang
  • Judul Teks Ukuran: 34px (Desktop & Tablet), 23px (Telepon)

Pengaturan Teks Tubuh

Teks isi juga perlu dimodifikasi:

  • Font Tubuh: Poppins
  • Berat Huruf Tubuh: Reguler
  • Ukuran Teks Isi: 16px (Desktop), 14px (Tablet & Ponsel)
  • Tinggi Garis Tubuh: 2em

Jarak

Dan untuk membuat desain yang lebih menarik secara estetika, tambahkan beberapa bantalan:

  • Padding Atas & Padding Bawah: 100px
  • Padding Kiri & Kanan: 50px (Desktop & Tablet), 10px (Telepon)

Clone Blurb Module Dua Kali dan Tempatkan di Kolom Tersisa

Silakan dan klon Modul Blurb Anda dua kali. Setelah Anda melakukannya, letakkan di kolom yang tersisa.

Ubah Modul Blurb di Kolom 2

Ubah Warna Ikon

Modul Blurb ketiga tidak memerlukan perubahan apa pun, namun modul kedua membutuhkannya. Mulailah dengan mengubah Warna Ikon menjadi putih.

Ubah Warna Teks

Buka Pengaturan Teks selanjutnya dan ubah Warna Teks menjadi 'Terang'.

Nonaktifkan Navigasi Tetap

Untuk memastikan Bilah Menu Utama tetap berada di dalam desain, kita juga perlu menonaktifkan Bilah Navigasi Tetap. Untuk melakukannya, buka Dasbor WordPress > Divi > Opsi Tema > Nonaktifkan opsi 'Bilah Navigasi Tetap' dan simpan pengaturannya .

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda:

bilah menu utama

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara memasukkan bilah menu utama secara kreatif dalam keseluruhan desain halaman Divi Anda. Pendekatan ini akan membantu Anda menciptakan tampilan dan nuansa yang lebih koheren di situs web Anda. Kami telah membuat contoh dari awal juga. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!