Cara Menampilkan Kategori Postingan Blog secara Visual di Header Divi Anda

Saat membuat tajuk global, kemungkinan besar Anda akan menyertakan item menu blog. Jika Anda tidak memiliki banyak kategori posting blog di situs web Anda, memilih satu item menu blog mungkin sudah cukup. Namun, jika Anda memiliki sekumpulan kategori yang berbeda dan ingin menyorot masing-masing kategori, Anda mungkin ingin mencoba pendekatan yang berbeda, seperti menampilkan secara visual setiap kategori blog di dalam menu tarik-turun.

Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana melakukannya dengan menggunakan Pembuat Tema Divi. Kami akan membangun menu dropdown menggunakan elemen dan opsi bawaan Divi dan kami akan menggabungkannya dengan beberapa kode yang memungkinkan kami menempatkan menu dropdown di dalam item menu blog. 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 The Global Header GRATIS

Untuk mendapatkan tajuk global 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.

1. Tambahkan Kelas CSS ke Item Menu Blog

Buka Menu di Penampilan

Di bagian pertama tutorial ini, kita akan menambahkan dua kelas CSS kustom ke item menu halaman blog di dalam menu WordPress. Untuk melakukannya, navigasikan ke menu di dalam dasbor WordPress Anda.

Aktifkan Opsi Kelas CSS

Di bagian atas halaman, pastikan Anda mengaktifkan opsi kelas CSS di dalam opsi layar.

Tambahkan Kelas CSS ke Item Menu Blog

Kemudian, temukan item menu blog Anda dan tambahkan dua kelas CSS ke dalamnya. Pastikan Anda meninggalkan spasi di antara kelas CSS.

• Kelas CSS: tingkat pertama tingkat pertama-1

2. Buat Header Kustom dengan Pembuat Tema Divi

Pergi ke Divi Theme Builder

Setelah kelas CSS item menu berada di tempatnya, saatnya untuk beralih ke Divi. Buka Divi Theme Builder dan pilih 'Add Global/Custom Header'.

Mulai Membangun Header Global

Kemudian, pilih 'Build Global Header' untuk diarahkan ke editor template.

Pengaturan Bagian

Warna latar belakang

Di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan terapkan warna latar belakang putih.

• Warna Latar Belakang: #FFFFFF

Jarak

Pindah ke tab desain dan hapus semua padding atas dan bawah default.

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

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 yang sesuai:

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

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Tambahkan Modul Menu ke Baris

Pilih Menu

Kemudian, tambahkan Modul Menu dan pilih menu yang telah Anda modifikasi di bagian pertama tutorial ini.

Unggah Logo

Unggah logo berikutnya.

Pengaturan Teks Menu

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

• Font Menu: Roboto Mono
• Gaya Font Menu: Huruf Besar
• Warna Teks Menu: #000000
• Ukuran Teks Menu: 18px
• Spasi Huruf Menu: -1px

Pengaturan Menu Dropdown

Ubah warna garis menu dropdown juga.

• Warna Garis Menu Dropdown: #FFFFFF

Pengaturan Ikon

Selanjutnya, ubah warna ikon menu hamburger di pengaturan ikon.

• Warna Ikon Menu Hamburger: #000000

Kelas CSS

Dan selesaikan pengaturan modul dengan menambahkan kelas CSS.

• Kelas CSS: menu kategori

3. Buat Desain Dropdown Blog

Tambahkan Baris #2

Struktur Kolom

Setelah baris Anda, yang berisi Modul Menu, berada di tempatnya, saatnya membuat menu tarik-turun yang berisi kategori blog visual. Untuk melakukannya, tambahkan baris baru dengan dua kolom berukuran sama. Seluruh baris akan menjadi menu tarik-turun kami untuk item menu blog.

Warna latar belakang

Buka pengaturan baris dan gunakan warna latar belakang putih.

• Warna Latar Belakang: #FFFFFF

Perekat

Pindah ke tab desain dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 80vw (Desktop), 100% (Tablet & Ponsel)
• Lebar Maks: 50vw (Desktop), 100% (Tablet & Ponsel)

Jarak

Ubah nilai padding berikutnya.

• Padding Atas: 10px
• Padding Bawah: 10px
• Padding Kiri: 10px
• Padding Bawah: 10px

Bayangan Kotak

Kami juga menggunakan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 30px
• Warna Bayangan: rgba(0,0,0,0.13) (Desktop), rgba(0,0,0,0) (Tablet & Ponsel)

Kelas CSS

Kemudian, kita akan menambahkan dua kelas CSS ke baris kita. Kelas CSS ini (dikombinasikan dengan beberapa kode nanti) akan membantu kita menempatkan seluruh penampung baris di dalam item menu blog sebagai dropdown.

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

Posisi

Pindah ke tab lanjutan dan ubah posisi baris juga.

• Posisi: Absolute (Desktop), Relatif (Tablet & Ponsel)
• Lokasi: Kanan Atas
• Offset Vertikal: 100px (Desktop), 0px (Tablet & Ponsel)
• Indeks Z: 11

Elemen Utama Kedua Kolom

Last but not least, selesaikan pengaturan baris dengan menambahkan satu baris kode CSS ke elemen utama setiap kolom. Ini akan membantu kita menjaga struktur kolom pada ukuran layar yang lebih kecil.

width: 50% !important;

Tambahkan Modul Teks ke Kolom 1

Tambahkan Nama Kategori

Saatnya menampilkan kategori blog kita secara visual! Tambahkan Modul Teks pertama ke kolom 1 dan tambahkan judul kategori ke kotak konten.

Tambahkan Tautan Kategori

Tambahkan tautan ke kategori Anda selanjutnya.

Latar Belakang Gradien

Kemudian, terapkan latar belakang gradien berikut:

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

Gambar latar belakang

Unggah gambar latar belakang pilihan Anda. Jika Anda menginginkan hasil yang sama persis seperti dalam tutorial ini, unggah salah satu ilustrasi yang dapat Anda temukan di folder yang dapat Anda unduh di awal posting ini.

• Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
• Pengulangan Gambar Latar Belakang: Ulangi X (horizontal)

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Roboto Mono
• Berat Font Teks: Tebal
• Warna Teks: #ffffff
• Ukuran Teks: 1.9vw (Desktop), 3vw (Tablet), 3.5vw (Telepon)
• Spasi Surat Teks: -0.1vw
• Tinggi Baris Teks: 1em

Perekat

Ubah pengaturan ukuran berikutnya.

• Lebar: 99%
• Penyelarasan Modul: Kiri

Jarak

Ubah juga pengaturan spasi.

• Margin Bawah: 10px
• Margin Kanan: 1% (Tablet & Ponsel)
• Padding Atas: 60% (Desktop), 40% (Tablet & Ponsel)
• Padding Bawah: 4%
• Padding Kiri: 2%

Elemen Utama CSS

Dan selesaikan pengaturan modul dengan menambahkan satu baris kode CSS ke elemen utama modul.

cursor: pointer;

Modul Teks Klon & Tempatkan Duplikat di Kolom 2

Setelah Anda menyelesaikan Modul Teks pertama, klon modul dan tempatkan duplikatnya di kolom 2.

Ubah Modul Teks di Kolom 2

Ubah Nama Kategori & Tautan

Ubah judul kategori dan tautan di modul duplikat.

Ubah Gambar Latar Belakang

Ubah gambar latar belakang juga. Anda dapat menemukan ilustrasi di folder unduhan.

• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan

Ubah Ukuran

Ubah perataan modul di pengaturan ukuran berikutnya.

• Penyelarasan Modul: Kanan

Klon Kedua Modul Sekali

Setelah Anda menyelesaikan kedua modul (satu di setiap kolom), Anda dapat mengkloning keduanya sekali.

Ubah Nama & Tautan Kategori

Ubah nama kategori dan tautan di dalam modul duplikat.

Ubah Gambar Latar Belakang

Bersama dengan gambar latar belakang. Anda dapat menemukan ilustrasi baru di folder yang dapat Anda unduh di awal posting ini.

• Ukuran Gambar Latar Belakang: Sesuai
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan

• Ukuran Gambar Latar Belakang: Sesuai
• Posisi Gambar Latar Belakang: Kanan Bawah

4. Tambahkan Kode CSS & JQuery

Tambahkan Modul Kode Di Bawah Modul Menu di Baris #1

Setelah Anda menyelesaikan baris yang berisi nama kategori menu tarik-turun, tambahkan Modul Kode ke baris pertama di bagian Anda, tepat di bawah Modul Menu.

Tambahkan Kode CSS

Tambahkan baris kode CSS berikut ke Modul Kode:

<style>
/* 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);  
}
  
.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: #00C995; 
}  
  
.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: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

Tambahkan Kode JQuery

Bersama dengan beberapa coe JQuery yang akan membantu menempatkan baris, yang berisi kategori, di dalam item menu blog Anda. Pastikan Anda menempatkan kode JQuery di antara tag skrip seperti yang Anda lihat di layar cetak di bawah ini.

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 Item Dropdown Blog

Segera setelah Anda selesai menyesuaikan semua item dropdown, Anda hanya memiliki satu hal yang harus dilakukan: menyembunyikan seluruh baris yang berisi item menu dropdown. Ini, dalam kombinasi dengan fungsi memuat di dalam kode kita, akan mencegah menu tarik-turun muncul saat memuat halaman. Setelah Anda mengaktifkan kelas CSS ini, Anda tidak akan melihat baris kedua di dalam Visual Builder lagi, tetapi Anda akan dapat mengaksesnya dalam mode gambar rangka dan/atau menonaktifkan sementara kelas CSS saat membuat perubahan pada menu tarik-turun Anda. Untuk mengaktifkan kelas, hapus tanda kurung '/* */' di awal dan akhir kelas CSS.

6. Menambahkan Lebih Banyak Dropdown Kategori Posting

Baris Kategori Blog Klon

Jika Anda ingin menambahkan lebih banyak dropdown kategori, Anda dapat mengkloning seluruh baris dropdown yang telah Anda buat.

Akses Baris Duplikat di Panel Lapisan

Karena kami menggunakan pemosisian absolut di desktop, baris akan ditempatkan di atas satu sama lain. Untuk mengakses baris satu per satu, buka panel lapisan di dalam Divi Builder Anda dan buka pengaturan baris duplikat.

Ubah Kelas CSS Baris Duplikat

Ubah Kelas CSS kedua di baris duplikat Anda. Pastikan nomor yang Anda gunakan berurutan.

• Kelas CSS: menu dropdown dropdown-menu-2

Tambahkan Kelas CSS ke Item Menu di Penampilan

Kemudian, navigasikan kembali ke menu WordPress Anda di dalam dasbor Anda dan tambahkan kelas CSS berikut ke item menu lain dan Anda selesai:

• Kelas CSS: tingkat pertama tingkat pertama-2

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 berkreasi dengan header Divi Anda dan item menu blog. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara memasukkan kategori blog secara visual sebagai item menu tarik-turun yang tampak hebat di semua ukuran layar. Pendekatan ini akan membantu Anda menyoroti setiap kategori blog yang berbeda sambil tetap menjaga tampilan dan nuansa minimal pada pandangan pertama. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan, 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.