Cara Mengoptimalkan Modul Menu Divi dengan 5 Preset Global (Unduh GRATIS)

Menu adalah bagian penting dari situs mana pun sehingga masuk akal untuk menghabiskan sedikit waktu dan upaya ekstra untuk memastikannya ditampilkan dengan benar. Di Divi, kita dapat membuat menu kustom dengan cepat menggunakan modul Menu Divi, yang menyediakan banyak opsi gaya yang kita butuhkan. Tetapi selalu membantu untuk merampingkan proses mendesain tajuk situs web Anda dengan menyiapkan beberapa preset global menu sebelumnya. Ini akan memungkinkan Anda untuk menerapkan kerangka gaya menu kustom dengan mengklik tombol sehingga Anda dapat menghabiskan lebih banyak waktu untuk menyesuaikan desain agar sesuai dengan merek situs web Anda. Misalnya, jika Anda menginginkan menu di tengah dengan logo dan tautan yang terlihat seperti tombol, Anda dapat menggunakan prasetel global untuk menerapkan kerangka kerja itu dalam satu klik. Ini menghemat waktu dan energi Anda yang berharga.

Dalam tutorial ini, kami akan membagikan 5 preset global modul menu yang dapat Anda gunakan saat membuat header Divi kustom Anda. Selain unduhan gratis yang mencakup semua 5 preset, kami akan memandu Anda melalui proses pembuatan preset tersebut dari awal.

Mari kita mulai!

Sneak Peek

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

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

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

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk menggunakan preset global menu ini pada header global Anda, Anda harus terlebih dahulu mengimpor tata letak (dengan presetnya) ke Divi Library sebagai berikut:

1. Buka Divi > Perpustakaan Divi.
2. Klik tombol impor/ekspor di bagian atas halaman.
3. Pilih tab Impor di popup portabilitas
4. Pilih file JSON tata letak yang akan diimpor
5. Pilih Impor Preset
6. Klik Tombol Impor

Lalu buka pembuat tema dan edit tajuk global. Tambahkan modul menu di mana Anda ingin logo menjadi dan gunakan preset untuk menata dan menempatkan menu yang sesuai.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Membuat 5 Preset Global Modul Menu di Divi

#1 – Tautan Tombol Terpusat Dengan Logo

Untuk prasetel global gaya menu pertama kita, kita akan mendesain menu yang memiliki tautan tombol dengan lebar yang sama sehingga menu terlihat simetris. Kami bahkan akan menyertakan status hover yang cocok dengan status aktif tautan tombol menu.

Untuk membuat preset global menu pertama ini, tambahkan baris satu kolom ke bagian reguler.

Kemudian tambahkan modul menu ke baris.

Buka pengaturan menu dan tambahkan menu ke modul.

Kemudian tambahkan logo situs sebagai konten dinamis ke modul juga.

Di bawah tab desain, perbarui yang berikut ini:

• Gaya: Terpusat

• Font menu: Poppins
• Berat Font Menu: Tebal
• Gaya Font Menu: TT
• Ukuran Teks Menu: 14px (desktop), 24px (tablet dan ponsel)
• Spasi Huruf Menu: 0.15em
• Tinggi Baris Menu: 1.3em (desktop), 1.8em (tablet dan ponsel)

• Tinggi Maks Logo: 60px

• Margin: 0px bawah

Di bawah tab Advanced, kita akan menambahkan beberapa gaya tautan menu kustom sehingga muncul sebagai tombol.

CSS Tautan Menu

Tambahkan CSS Kustom berikut ke Tautan Menu:

Di Desktop…

min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

Arahkan kursor…

background: #333333;
color: #ffffff;
opacity: 1;

CSS Tautan Menu Aktif

background: #333333;
color: #ffffff;
opacity: 1;

Menu Logo CSS

margin-bottom: 10px;

Gaya 1 Hasil

Berikut adalah hasil akhirnya…

Menambahkan Gaya Menu 1 sebagai Preset Global

Bagian Duplikat

Sebelum kita menambahkan gaya menu sebagai preset global, duplikat seluruh bagian yang berisi modul menu sehingga kita dapat menggunakan gaya menu untuk memulai desain berikutnya.

Buat Preset Baru Dari Gaya Saat Ini

Untuk menambahkan preset global, buka pengaturan modul menu asli yang kami buat dan klik tautan dropdown Preset.

Pilih Buat Preset Baru Dari Gaya Saat Ini.

Beri nama preset baru ("Centered Button Links w/ Logo"), lalu simpan preset.

#2 – Logo Berpusat Sebaris dengan Tautan Tombol

Untuk membuat preset global menu kedua, buka pengaturan modul menu duplikat dari desain sebelumnya.

Di bawah tab desain, perbarui gaya:

• Gaya: Logo Berpusat Sebaris

Karena CSS Kustom yang diwarisi dari gaya modul sebelumnya, tautan menu mempertahankan desain tombol sementara logo berada di tengah dengan sempurna. Penataan tautan tombol khusus memungkinkan tautan menu untuk mempertahankan desain simetris yang bagus.

Di bawah tab Advanced, perbarui CSS Logo Menu sebagai berikut:

margin-bottom: 0px;

Hasil Gaya 2

Berikut adalah hasil akhirnya.

Menambahkan Gaya Menu 2 sebagai Preset Global

Bagian Duplikat

Sebelum kita menambahkan gaya menu sebagai preset global, duplikat seluruh bagian yang berisi modul menu (gaya 2) sehingga kita dapat menggunakan gaya menu untuk memulai desain berikutnya.

Buat Preset Baru Dari Gaya Saat Ini

Untuk menambahkan preset global, buka pengaturan modul menu asli untuk gaya 2 yang kami buat dan klik tautan dropdown Preset.

Pilih Buat Preset Baru Dari Gaya Saat Ini.

Beri nama preset ("Logo Berpusat Sebaris dengan Tautan Tombol") dan simpan preset.

#3 – Menu Spasi VW Terpusat Penuh dengan Label Seluler

Untuk gaya menu selanjutnya ini, kita akan mendesain menu fullwidth centered tanpa logo yang memiliki teks menu yang berukuran dan spasi dengan satuan panjang vw sehingga berskala dengan lebar browser. Itu juga akan memiliki label "menu" di atas ikon hamburger di ponsel.

Untuk membuat preset global menu ketiga, kita membutuhkan baris lebar penuh. Buka pengaturan baris yang menampung menu duplikat dan perbarui yang berikut ini:

• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Buka pengaturan modul menu dan hapus logo.

Di bawah tab desain, perbarui gaya:

• Gaya: Terpusat

Kemudian perbarui ukuran teks dengan satuan panjang VW berikut sehingga skala ukuran teks dengan lebar browser.

• Ukuran Teks Menu: 1.5vw (desktop)

Untuk membuat label “menu” untuk menu seluler, kita dapat menambahkan beberapa CSS khusus ke tampilan Elemen Before Psuedo di Tablet sebagai berikut:

Sebelum CSS

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

Perhatikan bahwa keluarga font diatur ke "poppins" agar sesuai dengan font yang digunakan oleh tautan menu. Anda perlu memperbarui ini jika Anda menggunakan font yang berbeda.

CATATAN: Ini mungkin atau mungkin tidak ditampilkan pada pembuat visual. Anda mungkin harus memuat halaman langsung untuk melihat hasilnya.

Selanjutnya, kita akan menambahkan beberapa spasi tambahan dan batas tautan menu di hover. Lanjutkan untuk menambahkan CSS Kustom berikut:

Menu Tautan CSS (desktop):

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

Menu Tautan CSS (arahkan kursor):

color: #333;
border: 1px solid #333;
opacity:1;

CSS Tautan Menu Aktif :

color: #333;
border: 1px solid #333;
opacity:1;

Gaya 3 Hasil

Menambahkan Gaya Menu 3 sebagai Preset Global

Bagian Duplikat

Sebelum kita menambahkan gaya menu sebagai preset global, duplikat seluruh bagian yang berisi modul menu (gaya 3) sehingga kita dapat menggunakan gaya menu untuk memulai desain berikutnya.

Buat Preset Baru Dari Gaya Saat Ini

Untuk menambahkan gaya 3 sebagai preset global, buka pengaturan modul menu asli untuk gaya 3 yang kita buat dan klik tautan dropdown Preset.

Pilih Buat Preset Baru Dari Gaya Saat Ini.

Beri nama preset ("Menu Spasi VW Berpusat Penuh dengan Label Seluler") dan simpan preset.

#4 – Menu Spasi Kanan dengan Label Seluler

Untuk membuat preset global menu keempat, kita perlu memperbarui tata letak kolom baris dengan tata letak tiga perempat 0ne-fourth. Ini akan meniru tata letak tajuk khusus yang akan menyertakan modul menu di sebelah kanan dan tempat terpisah untuk gambar logo di kolom kiri.

Pastikan menu ada di kolom kanan. Kemudian buka pengaturan menu dan perbarui opsi Elemen untuk menampilkan ikon keranjang belanja dan ikon pencarian.

Di bawah tab desain, perbarui gaya:

• Gaya: Rata Kiri

Selanjutnya perbarui gaya tautan dan perataan teks berikut:

• Warna Tautan Aktif: #ac3cf7
• Ukuran Teks Menu (desktop): 14px
• Perataan Teks: Kanan

Sekarang ikon hamburger kita di ponsel akan berada di sisi kanan, kita perlu menyesuaikan penempatan label menu di ponsel. Kemudian kita akan menambahkan beberapa tautan menu CSS untuk memastikan tautan diberi spasi dan duduk rata di sisi kanan kolom/baris.

Tambahkan CSS Kustom berikut:

Sebelum CSS (tablet)

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

CSS Tautan Menu:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Gaya 4 Hasil

Berikut adalah hasil akhir dari menu rata kanan kami. Saya menambahkan latar belakang abu-abu terang ke baris sehingga Anda dapat melihat perataan lebih baik.

Menambahkan Gaya Menu 4 sebagai Preset Global

Bagian Duplikat

Sebelum kita menambahkan gaya menu sebagai preset global, duplikat seluruh bagian yang berisi modul menu (gaya 4) sehingga kita dapat menggunakan gaya menu untuk memulai desain berikutnya.

Buat Preset Baru Dari Gaya Saat Ini

Untuk menambahkan gaya 4 sebagai preset global, buka pengaturan modul menu asli untuk gaya 4 yang kita buat dan klik tautan dropdown Preset.

Pilih Buat Preset Baru Dari Gaya Saat Ini.

Beri nama preset ("Menu Spasi Kanan dengan Label Seluler") dan simpan preset.

#4 – Menu Spasi Kiri dengan Label Seluler

Untuk membuat preset global menu keempat ini, kita perlu memperbarui tata letak kolom baris dengan tata letak tiga perempat 0ne-fourth. Ini akan meniru tata letak tajuk khusus yang akan menyertakan modul menu di sebelah kiri dan tempat terpisah untuk gambar logo (atau CTA) di kolom kanan.

Buka pengaturan untuk menu dan perbarui perataan teks untuk tautan menu:

• Perataan Teks: Kiri

Kemudian kita perlu menyesuaikan label menu seluler sehingga berada di atas navigasi hamburger di sisi kiri. Dan dengan menambahkan "arah: rtl" di tablet, kami akan memastikan ikon ponsel akan sejajar di sebelah kiri di ponsel juga.

Di bawah tab Lanjutan, perbarui CSS Kustom berikut:

Sebelum CSS (tablet):

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

Elemen Utama (tablet):

direction:rtl;

CSS Tautan Menu:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Berikut adalah hasil akhirnya.

Hasil Akhir

Pikiran Akhir

Meskipun gaya luar modul menu ini adalah dasar, desain kerangka dalam dari tata letak menu sangat membantu untuk memulai proses kreatif. Selain itu, memiliki preset global dengan kerangka kerja ini hanya akan mempercepat proses lebih jauh. Jangan ragu untuk menjelajahi lebih banyak cara untuk menyesuaikan modul menu dan menambahkan preset unik untuk proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!