Cara Menambahkan Label Sudut “Baru” atau “Unggulan” ke Item Menu di Header Divi Kustom Anda

Saat membuat tajuk situs web Anda, memberikan perhatian khusus pada perilaku pengunjung Anda dapat membantu meningkatkan rasio klik-tayang. Header Anda tidak hanya harus terlihat bagus, tetapi juga membantu memandu pengunjung ke halaman terpenting di situs web Anda. Teknik yang sering digunakan adalah menambahkan ajakan bertindak di dalam tajuk global Anda, tetapi itu bukan satu-satunya pilihan di luar sana. Anda juga dapat memilih label sudut pada item menu yang ingin Anda soroti. Dalam tutorial ini, kami akan menunjukkan cara menambahkan label "unggulan" atau "baru" ke item menu tertentu. Label sudut ini akan membantu menekankan item menu dalam daftar, yang meningkatkan perubahan pengunjung Anda menjadi penasaran dan mengklik. Anda juga dapat mengunduh template tajuk global!

Mari kita lakukan.

Pratinjau

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

Unduh Template Header Global GRATIS

Untuk mendapatkan template 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!

1. Tambahkan Label ke Item Menu WordPress

Buka Menu di Penampilan

Bagian pertama dari tutorial ini didedikasikan untuk menyiapkan label di dalam menu WordPress Anda. Untuk melakukannya, navigasikan ke dasbor WordPress > Menu > Buka menu utama yang Anda gunakan atau buat yang baru.

Tambahkan Label ke Item Menu Unggulan

Selanjutnya, kita akan menambahkan label unggulan ke item menu pilihan kita dengan menempatkan tag HTML label di depan item menu.

• <label class="menu-label featured-label">Featured</label>

  Jasa

Tambahkan Label ke Item Menu Baru

Kami akan melakukan hal yang sama untuk item menu lain pilihan kami dan mengubah kelas CSS di dalam tag bersama dengan salinan label.

• <label class="menu-label new-label">New</label>

  Kursus Gratis

2. Buka Divi Theme Builder

Buka Divi Theme Builder & Tambahkan Header Global

Sekarang label telah diatur, saatnya untuk beralih ke Divi. Arahkan ke Divi Theme Builder situs web Anda dan klik “Tambahkan Header Global.”

Mulai Membangun Dari Awal

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

3. Bangun Header Global

Pengaturan Bagian

Warna latar belakang

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan tambahkan warna latar belakang. Desain header yang akan kita buat berjalan dengan baik dengan Tutor Layout Pack, tetapi jangan ragu untuk membuat desain header apa pun yang Anda inginkan, selama Anda menyertakan Modul Kode (nanti) di dalamnya.

• Warna Latar Belakang: #2a3749

Jarak

Pindah ke tab desain bagian dan hapus semua padding atas dan bawah default dalam pengaturan spasi.

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

Visibilitas

Karena tumpang tindih yang akan kita tambahkan ke baris kita (seperti yang dapat Anda lihat di pratinjau), kita perlu mengatur kelebihan bagian agar terlihat.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Tambahkan Baris Baru

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 terapkan warna latar belakang putih.

• Warna Latar Belakang: #FFFFFF

Perekat

Pindah ke tab desain dan ubah pengaturan ukuran yang sesuai:

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

Jarak

Kami akan menerapkan beberapa nilai padding kustom ke pengaturan spasi juga.

• Padding Atas: 25px
• Padding Bawah: 25px
• Padding Kiri: 50px
• Padding Kanan: 50px

Berbatasan

Seiring dengan beberapa sudut membulat.

• Semua Sudut: 6px

Bayangan Kotak

Dan bayangan kotak yang halus.

• Posisi Vertikal Bayangan Kotak: 16px
• Warna Bayangan: rgba (0,0,0,0.07)

Ubah Terjemahan

Selanjutnya, kita akan memposisikan ulang baris menggunakan pengaturan transform translate di tab design.

• Ubah Terjemahan Kanan: 50px

Meluap

Untuk memastikan dropdown kami muncul pada ukuran layar yang lebih kecil, kami akan menyelesaikan pengaturan baris dengan mengatur overflow menjadi terlihat.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Tambahkan Modul Menu ke Kolom

Pilih Menu

Saatnya menambahkan Modul Menu. Pilih menu yang telah Anda edit di bagian pertama tutorial ini.

Unggah Logo

Unggah logo berikutnya.

Pengaturan Teks Menu

Kemudian, pindah ke tab desain dan ubah pengaturan teks menu sebagai berikut:

• Font Menu: PT Sans
• Warna Teks Menu: #000000
• Ukuran Teks Menu: 16px
• Perataan Teks: Kanan

Pengaturan Menu Dropdown

Ubah warna garis menu dropdown juga.

• Warna Garis Menu Dropdown: #007aff

Ikon

Lanjutkan dengan mengubah warna ikon menu hamburger di pengaturan ikon.

• Warna Ikon Menu Hamburger: #007aff

Perekat

Dan selesaikan pengaturan modul dengan menetapkan lebar maksimum logo ke pengaturan ukuran.

• Logo Lebar Maks: 40%

Tambahkan Modul Kode ke Kolom

Setelah Anda menyelesaikan keseluruhan tampilan dan nuansa Modul Menu Anda, lanjutkan dengan menambahkan Modul Kode tepat di bawahnya.

Tambahkan Kode CSS

Kode CSS berikut akan membantu kita menata label menu satu per satu dan membuat desain responsif:

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

4. Simpan semua Perubahan Pembuat Tema & Hasil Pratinjau

Setelah Anda menyelesaikan desain header, pastikan Anda menyimpan semua perubahan Divi Theme Builder sebelum melihat hasilnya di situs web Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menyorot item menu tertentu di dalam header global buatan Divi Anda. Lebih khusus lagi, kami telah menyertakan label sudut di menu WordPress kami, yang ditampilkan di dalam Modul Menu. Ini adalah cara yang bagus untuk menyorot item menu yang berbeda di dalam menu Anda tanpa membuat perjalanan navigasi yang berlebihan. Anda juga dapat mengunduh file JSON secara gratis! 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.