Cara Membuat Menu Mega eCommerce Kustom dengan Pembuat Tema Divi

Saat membangun situs web eCommerce menggunakan Divi dan WooCommerce, ada banyak cara untuk menyesuaikan keseluruhan tampilan dan nuansa situs web Anda. Modul WooCommerce Divi yang dikombinasikan dengan Divi Theme Builder memungkinkan Anda membuat template untuk halaman produk, halaman kategori, dan lainnya. Tetapi selain memastikan struktur situs web dan halaman WooCommerce Anda siap diluncurkan, penting juga untuk memikirkan pengalaman navigasi yang akan dimiliki pengunjung. Menu yang Anda buat untuk situs web eCommerce Anda menetapkan nada untuk perilaku pembelian pengunjung Anda di situs web Anda.

Untuk membantu situs web eCommerce Anda mencapai potensi penuhnya, kami akan menunjukkan kepada Anda cara membuat menu mega eCommerce khusus dengan Pembuat Tema Divi. Kami akan membangun semuanya secara visual, menggunakan elemen bawaan Divi, dan menggunakan elemen sebagai dropdown dengan beberapa kode. Dengan menggunakan pendekatan ini, Anda akan dapat membuat segala jenis menu mega eCommerce untuk situs web eCommerce yang Anda buat! Anda juga dapat mengunduh file JSON secara gratis.

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Menu Mega eCommerce GRATIS

Untuk mendapatkan tata letak menu mega eCommerce gratis, 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!

Cara Mengunggah File JSON

Buka zip folder zip yang dapat Anda unduh di atas. Kemudian, navigasikan ke situs WordPress Anda > Divi > Divi Library dan unggah JSON.

Setelah tata letak Anda disimpan di Perpustakaan Divi, Anda dapat menavigasi ke Divi Theme Builder dan mengimpor tata letak yang disimpan dengan mengklik "Tambahkan Header Global" atau "Tambahkan Header Kustom" dan pilih "Build Global/Custom Header". Buka tab "Tata Letak Tersimpan Anda" di Perpustakaan Divi, pilih tata letak yang telah Anda unggah pada langkah sebelumnya dan simpan semua Perubahan Pembuat Tema Divi.

Untuk memiliki menu yang berfungsi langsung, Anda harus melalui bagian pertama dari tutorial di bawah ini; menambahkan kelas CSS ke item menu pada tingkat individu. Anda juga harus mengaktifkan salah satu kelas CSS di dalam Modul Kode seperti yang ditunjukkan di bagian 5 dari tutorial ini. Jika ikon tidak muncul dengan benar, pastikan Anda memeriksa konten ikon di dalam Modul Kode. Ikon harus berisi konten “\4c” dan “\21” seperti yang dapat Anda lihat di layar cetak di bawah ini.

1. Tambahkan Kelas CSS ke Item Menu

Buka Menu di Penampilan

Di bagian pertama tutorial ini, kita akan menetapkan dua kelas CSS yang berbeda ke item menu yang ingin kita tambahkan menu mega dropdown. Untuk melakukannya, buka menu di pengaturan tampilan dasbor WordPress Anda.

Aktifkan Opsi Kelas CSS

Pastikan opsi kelas CSS diaktifkan di bagian atas dengan mengaktifkan opsi layar dan mengaktifkan opsi kelas CSS.

Tambahkan Kelas CSS Berturut-turut ke Item Menu yang Membutuhkan Dropdown

Masing-masing item menu yang ingin Anda tetapkan menu mega dropdown membutuhkan dua kelas CSS. Pertama, kelas CSS umum yang disebut "tingkat pertama". Kelas CSS kedua berisi nomor berurutan di akhir, "tingkat pertama-1", "tingkat pertama-2", "tingkat pertama-3", dll.

• Item menu pertama yang berisi dropdown: level pertama level-1
• Item menu kedua yang berisi dropdown: level pertama level-2
• Item menu ketiga yang berisi dropdown: level pertama level-3

2. Buat Header Global dengan Pembuat Tema Divi

Buka Divi Theme Builder & Mulai Buat Header Global

Setelah item menu Anda tersedia, saatnya untuk beralih ke Divi. Kami akan membuat header global baru dengan menavigasi ke Divi Theme Builder kami dan mengklik "Tambahkan Global Header". Kami akan membuat tajuk global dari awal.

Bagian #1 Pengaturan

Jarak

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Visibilitas

Sembunyikan bagian ini di tablet dan ponsel berikutnya. Kami hanya menyimpan bagian ini pada ukuran layar yang lebih besar untuk memastikan pengalaman navigasi pada ukuran layar yang lebih kecil tidak berlebihan.

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 95%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Gambar ke Kolom 1

Unggah Logo

Saatnya menambahkan modul, dimulai dengan Modul Gambar di kolom 1. Unggah logo Anda.

Jarak

Pindah ke tab desain modul dan tambahkan beberapa margin atas.

• Margin Atas: 3%

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Ke kolom berikutnya. Tambahkan Modul Teks dengan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Oswald
• Berat Font Teks: Sedang
• Gaya Font Teks: Huruf Besar
• Warna Teks: #000000
• Ukuran Teks: 19px

Jarak

Tambahkan beberapa margin atas dan bawah juga.

• Margin Atas: 5%
• Margin Bawah: 5%

Modul Teks Klon Dua Kali & Tempatkan Duplikat di Kolom 3 & 4

Ubah Salin

Setelah Anda menyelesaikan Modul Teks pertama di kolom 2, Anda dapat mengkloningnya dua kali dan menempatkan duplikatnya di kolom 3 dan 4. Pastikan Anda mengubah konten di kedua modul duplikat.

Tambahkan Bagian #2

Jarak

Tambahkan bagian lain tepat di bawah yang sebelumnya. Buka pengaturan bagian dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Berbatasan

Kemudian, buka pengaturan perbatasan dan terapkan batas atas dan bawah.

• Lebar Batas Atas:
  • Desktop: 2px
  • Tablet & Ponsel: 0px
• Lebar Batas Bawah: 2px
• Warna Batas: #ff6600

Tambahkan Modul Menu ke Kolom

Pilih Menu

Tambahkan Modul Menu ke kolom baris dan pilih menu pilihan Anda.

Tambahkan Logo di Tablet & Ponsel

Kemudian, tambahkan logo di tablet dan ponsel dengan mengaktifkan opsi responsif dan mengunggah file gambar logo Anda. Biarkan area desktop kosong.

Elemen

Kami juga mengaktifkan keranjang belanja dan ikon pencarian.

• Tampilkan Ikon Keranjang Belanja: Ya
• Tampilkan Ikon Pencarian: Ya

Pengaturan Teks Menu

Pindah ke tab desain dan ubah pengaturan teks menu sebagai berikut:

• Font Menu: Oswald
• Gaya Font Menu: Huruf Besar
• Warna Teks Menu: #000000
• Ukuran Teks Menu: 19px

Pengaturan Teks Menu Dropdown

Kami juga mengubah warna garis menu dropdown.

• Warna Garis Menu Dropdown: #ffffff

Pengaturan Ikon

Seiring dengan pengaturan ikon.

• Warna Ikon Keranjang Belanja: #ff6600
• Warna Ikon Pencarian: #ff6600
• Warna Ikon Menu Hamburger: #ff6600

Kelas CSS

Selesaikan pengaturan modul dengan menambahkan kelas CSS. Kita akan menggunakan kelas CSS ini nanti di tutorial saat kita akan menambahkan kode.

• Kelas CSS: menu kategori

3. Bangun Baris Dropdown Di Dalam Templat Header

Tambahkan Bagian Baru (Didedikasikan untuk Dropdown Item Menu Pertama)

Perekat

Sekarang setelah kita memiliki menu, saatnya untuk beralih ke bagian selanjutnya dari tutorial yang didedikasikan untuk membuat dropdown mega menu eCommerce. Untuk membangun mega menu dropdown eCommerce pertama, kami akan menambahkan bagian baru. Buka pengaturan bagian dan pastikan lebar dan lebar maksimum diatur ke 100% dalam pengaturan ukuran.

• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Kelas CSS

Kemudian, tambahkan dua kelas CSS. Angka di akhir kelas CSS kedua adalah angka yang sama dengan angka yang digunakan untuk item menu pertama di bagian pertama tutorial ini.

• Kelas CSS: dropdown-menu dropdown-menu-1

Tambahkan Baris Baru ke Bagian

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Perekat

Pindah ke tab desain baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default juga.

• Padding Atas: 0px
• Padding Bawah: 0px

Berbatasan

Dan terapkan batas bawah.

• Lebar Batas Bawah: 2px
• Warna Batas Bawah: #ff6600

Pengaturan Kolom 1 & 2

Selanjutnya, buka pengaturan kolom 1 dan 2 satu per satu.

Jarak

Tambahkan nilai padding responsif berikut ke kedua kolom:

• Bantalan Atas:
  • Desktop & Tablet: 10%
  • Telepon: 5%
• Bantalan Bawah:
  • Desktop & Tablet: 10%
  • Telepon: 5%
• Padding Kiri: 5%
• Padding Kanan: 5%

Elemen Utama CSS

Bersama dengan satu baris kode CSS. Ini akan membantu kita menempatkan kolom di samping satu sama lain pada ukuran layar yang lebih kecil juga.

width: 50% !important

Pengaturan Kolom 3

Latar Belakang Gradien

Ke kolom 3 pengaturan. Terapkan latar belakang gradien berikut:

• Warna 1: rgba(0,0,0,0.08)
• Warna 2: #0a0a0a
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Gambar latar belakang

Unggah gambar latar belakang pilihan Anda selanjutnya.

Elemen Utama CSS

Dan tambahkan beberapa margin kanan ke kolom menggunakan satu baris kode CSS.

margin-right: 10px !important;

Visibilitas

Untuk memastikan dropdown seluler kami tidak terlalu berlebihan, kami menyembunyikan seluruh kolom ini di tablet dan ponsel.

Pengaturan Kolom 4

Latar Belakang Gradien

Selanjutnya, kita memiliki kolom keempat. Tambahkan latar belakang gradien yang sama.

• Warna 1: rgba(0,0,0,0.08)
• Warna 2: #0a0a0a
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Gambar latar belakang

Unggah gambar latar belakang di sini juga.

Visibilitas

Dan sembunyikan kolom di tablet dan ponsel.

Tambahkan Modul Teks ke Kolom 1

Tambahkan Nama Kategori Produk ke Kotak Konten

Saatnya menambahkan modul! Anda dapat menempatkan apa pun yang Anda inginkan di dropdown ini. Kami menggunakan Modul Teks, dimulai dengan yang pertama di kolom 1. Tambahkan nama kategori.

Tambahkan Tautan Kategori Produk

Tambahkan tautan ke kategori ini selanjutnya.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks sebagai berikut:

• Font Teks: Oswald
• Gaya Font Teks: Huruf Besar
• Warna Teks: #000000
• Ukuran teks:
  • Desktop: 22px
  • Tablet: 18 piksel
  • Telepon: 16px
• Spasi Huruf Teks: -0.6px
• Tinggi Baris Teks: 2.4em

Berbatasan

Tambahkan batas bawah juga.

• Lebar Batas Bawah: 2px
• Warna Batas Bawah:
  • Bawaan: rgba(0,0,0,0)
  • Arahkan kursor: #ff6600

Klon & Ubah Modul Teks Sesering yang Dibutuhkan

Setelah Anda menyelesaikan yang pertama, Anda dapat mengkloningnya sebanyak yang Anda inginkan dan menyebarkan duplikat di kedua kolom 1 dan 2.

Ubah Judul & Tautan Kategori Produk

Pastikan Anda mengubah semua nama dan tautan kategori produk.

Tambahkan Modul Teks ke Kolom 3

Tambahkan Nama Kategori Produk

Ke kolom ketiga. Tambahkan Modul Teks baru dan masukkan nama kategori produk.

Tambahkan Tautan Kategori Produk

Tambahkan juga tautannya.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Oswald
• Berat Font Teks: Tebal
• Gaya Font Teks: Huruf Besar
• Warna Teks: #ffffff
• Ukuran Teks: 3.4vw
• Tinggi Baris Teks: 1em

Posisi

Ubah posisi modul juga.

• Posisi: Absolut
• Lokasi: Kiri Bawah
• Offset Vertikal: 2%
• Offset Horisontal: 2%

Modul Teks Klon di Kolom 3 & Tempatkan Duplikat di Kolom 4

Anda dapat mengkloning Modul Teks di kolom 3 dan menempatkan duplikatnya di kolom 4.

Ubah Nama & Tautan Kategori Produk

Pastikan Anda mengubah nama kategori produk beserta tautannya.

Klon Seluruh Bagian untuk Digunakan Kembali sebagai Dropdown untuk Item Menu Lainnya

Segera setelah Anda membuat dropdown bagian pertama, Anda dapat mengkloningnya dua kali.

Ubah Semua Nama & Tautan Kategori Produk

Ubah semua nama kategori produk di dropdown baru.

Ubah Bagian Kelas CSS Secara Berturut-turut

Bersama dengan bagian terakhir kelas CSS untuk setiap duplikat. Pastikan Anda mengikuti urutan yang berurutan.

• Kelas CSS: dropdown-menu dropdown-menu-2

• Kelas CSS: dropdown-menu dropdown-menu-3

4. Tambahkan Kode CSS & JQuery

Tambahkan Modul Kode Baru Di Atas Modul Menu

Sekarang setelah kita memiliki semua elemen menu, saatnya untuk menempatkan dropdown mega menu eCommerce di dalam menu kita. Untuk melakukannya, kami akan menambahkan beberapa kode ke Modul Kode baru. Tempatkan Modul Kode ini tepat di atas Modul Menu di bagian kedua Anda.

Masukkan Kode CSS

Buka Modul Kode dan tambahkan baris kode CSS berikut di antara tag gaya seperti yang Anda lihat di layar cetak di bawah ini :

/* Enable class below once you're done editing the menu */ 
   
/*
.dropdown-menu {
visibility: hidden;
}
*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);    
  
position: absolute!important;
top: 75px;
bottom: auto;
left: 0px;
right: auto;
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}

.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
} 

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #FF6600; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF6600;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
.category-menu .et_pb_menu__menu>nav>ul>li {
position: static !important;
}

.category-menu .et_mobile_menu .dropdown-menu {
visibility: visible !important;
}

Masukkan Kode JQuery

Tambahkan kode JQuery di antara tag skrip seperti yang Anda lihat di layar cetak di bawah ini juga.

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

5. Aktifkan Kelas CSS Setelah Anda Selesai Menyesuaikan Menu

Segera setelah Anda selesai menyesuaikan semua bagian dropdown, Anda hanya memiliki satu hal yang harus dilakukan: menyembunyikannya pada pandangan pertama. Ini akan mencegah menu tarik-turun muncul saat memuat halaman. Setelah Anda mengaktifkan kelas CSS ini, Anda tidak akan melihat bagian dropdown di dalam Visual Builder lagi, tetapi Anda akan dapat mengaksesnya dalam mode wireframe dan/atau menonaktifkan sementara kelas CSS saat membuat perubahan pada bagian dropdown Anda. Untuk mengaktifkan kelas, hapus tanda kurung '/* */' di awal dan akhir kelas CSS.

6. Simpan Perubahan Pembuat Tema Divi

Setelah Anda menyelesaikan tajuk global, pastikan untuk menyimpan semua perubahan Divi Theme Builder sebelum melihat hasilnya di situs web Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat menu mega eCommerce khusus di dalam Pembuat Tema Divi. Kami telah membangun dropdown menggunakan elemen bawaan Divi dan menggabungkannya dengan beberapa kode yang membantu menghubungkan menu ke dropdown yang sesuai. Pendekatan ini memungkinkan Anda untuk sepenuhnya menyesuaikan dropdown eCommerce Anda, di berbagai ukuran layar, tanpa menggunakan plugin! Anda juga dapat mengunduh file JSON. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.