Cara Menduplikasi Menu Utama Tema Elegan dengan Divi
Diterbitkan: 2017-04-25Menu Tema Elegan baru telah menjadi permintaan populer bagi pengembang untuk menduplikasi di situs mereka sendiri. Fitur utama menu adalah tombol ajakan bertindak (CTA) yang menarik perhatian pengunjung dengan mengubah warna dan animasi saat menggulir halaman ke bawah. Memiliki tombol CTA semacam ini di situs Anda kemungkinan akan meningkatkan rasio klik dan konversi.
Hari ini saya akan menunjukkan cara menduplikasi menu utama Tema Elegan menggunakan Divi. Untuk menerapkan gaya kustom dan fungsionalitas tombol, saya akan menggunakan kombinasi CSS dan jQuery.
Mari kita mulai!
Menerapkan Desain
Berlangganan Saluran Youtube Kami
Membuat Menu
Dari Dasbor WordPress, buka Appearance → Menus . Di bagian atas halaman menu, klik Opsi Layar dan centang Kelas CSS. Ini akan memungkinkan Anda untuk menambahkan kelas CSS khusus ke item menu Anda.
Sekarang klik "buat menu baru" dan beri nama menu Anda.
Klik tombol "Buat Menu".
Selanjutnya, tambahkan tautan menu ke menu baru Anda. Karena kami menduplikasi menu Tema Elegan, saya menambahkan tautan khusus berikut:
Tema
Plugin
Blog
Kontak
Gabung
Bergabunglah untuk Mengunduh
Setelah Anda selesai menambahkan tautan ke menu Anda, pilih menu baru sebagai menu utama untuk situs Anda.
Untuk mengubah tautan menu “Join to Download” menjadi tombol CTA, Anda perlu menambahkan kelas CSS khusus ke dalamnya sehingga Anda dapat menatanya nanti menggunakan CSS. Untuk menambahkan kelas, klik panah di sebelah kanan item menu Gabung untuk Mengunduh untuk membuka opsi konfigurasi. Tambahkan kelas yang disebut "jointoday_button" di dalam kotak teks Kelas CSS.
Simpan Menu
Dengan menu yang dibuat dan ditetapkan sebagai menu utama, saatnya menambahkan gaya ke menu navigasi dan tombol CTA.
Menata Menu Navigasi
Pertama, kita perlu mengubah ukuran teks bilah menu utama Anda. Buka Penyesuai Tema → Tajuk & Navigasi → Bilah Menu Utama . Simpan semua pengaturan default dan ubah ukuran teks menjadi 15.
Menu navigasi lainnya akan ditata menggunakan CSS khusus. Di bawah Penyesuai Tema, buka CSS Tambahan dan tambahkan CSS khusus berikut (Anda juga dapat menambahkan ini ke file style.css tema anak Anda):
/*** remove shadow on main header***/
#main-header {
box-shadow: none;
}
/*** add shadow to fixed header ***/
@media (min-width: 981px) {
#main-header.et-fixed-header {
box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
-webkit-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
-moz-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
}
}
/*** adjust padding on menu ***/
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 23px;
}
#top-menu li {
padding: 0 10px !important;
}
.et_header_style_left #et-top-navigation {
padding-top: 20px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 10px;
}
/*** style the menu button ***/
.jointoday_button a {
color: #f92c8b !important;
line-height: 9px;
font-weight: 600;
padding: 13px 16px !important;
text-transform: uppercase;
font-size: 12px !important;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
display: block;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
border: 2px solid #f92c8b;
}
.jointoday_button a:hover {
opacity: 1 !important;
color: #fff !important;
background-color: #f92c8b;
}
.et-fixed-header #top-menu .jointoday_button a:hover {
background-color: #de20b3;
border: 2px solid #de20b3;
box-shadow: 0px 5px 20px #aab9c3;
-moz-box-shadow: 0px 5px 20px #aab9c3;
-webkit-box-shadow: 0px 5px 20px #aab9c3;
}
.et-fixed-header #top-menu .jointoday_button a {
color: #fff !important;
background-color: #f92c8b;
box-shadow: 0px 5px 20px #d6dee4;
-moz-box-shadow: 0px 5px 20px #d6dee4;
-webkit-box-shadow: 0px 5px 20px #d6dee4;
border: 2px solid #f92c8b;
}
.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a {
background-color: #2cc2e6;
border: 2px solid #2cc2e6;
animation: highlight-nav .8s ease;
-webkit-animation: highlight-nav .8s ease;
}
#main-header.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a:hover {
background-color: #f92c8b;
border: 2px solid #f92c8b;
box-shadow: 0px 5px 20px #aab9c3;
-moz-box-shadow: 0px 5px 20px #aab9c3;
-webkit-box-shadow: 0px 5px 20px #aab9c3;
}
@-webkit-keyframes highlight-nav {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2)
}
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes highlight-nav {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2)
}
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
/*** style the mobile menu links and button ***/
@media (max-width: 980px) {
.et_mobile_menu li {
text-align: center;
}
.et_mobile_menu li a {
border-bottom: none;
}
.et_mobile_menu li a:hover {
background-color: transparent;}
.jointoday_button a {
border-bottom: 2px solid #f92c8b !important;
}
}
Kamu hampir selesai. Mari kita lihat seperti apa menunya sejauh ini.
Perhatikan bayangan di bawah menu telah dihapus dan hanya muncul saat navigasi tetap diaktifkan saat menggulir halaman ke bawah. Juga, tombol CTA telah ditata untuk mengubah warna pada navigasi tetap.
Menambahkan jQuery
Yang tersisa untuk dilakukan adalah menambahkan perubahan warna tambahan dan animasi pulsa ke tombol saat menggulir ke bawah ke titik tertentu pada halaman. Fungsionalitas tambahan ini menarik perhatian lebih lanjut ke tombol CTA saat pengguna terlibat dengan konten. Untuk menambahkan efek ini, kita perlu menambahkan kelas CSS tambahan ke tombol hanya ketika pengguna menggulir ke titik tertentu pada halaman. Dalam hal ini, kami akan menambahkan kelas “et_highlight_nav” ke menu saat pengguna menggulir ke titik yang lebih besar dari 50 persen isi halaman. Kelas ini akan dihapus setelah pengguna menggulir kembali ke bagian atas halaman.
Anda dapat melakukannya dengan menambahkan beberapa jQuery. Buka Divi → Opsi Tema , dan di bawah tab Integrasi, tambahkan jQuery berikut ke area teks “Tambahkan kode ke kepala blog Anda”:
<script>
jQuery(document).ready(function($){
jQuery(window).scroll(function() {
var $main_header = jQuery('#main-header'),
$body = jQuery('body'),
scrollPercentage = 100 * (jQuery(this).scrollTop() / $body.height()),
scroll = $(window).scrollTop(),
objectPosition = $body.offset().top;
if (scroll < objectPosition) {
$main_header.removeClass("et_highlight_nav");
}
if (scrollPercentage >= 50){
$main_header.addClass("et_highlight_nav");
}
});
});
</script>
Kelas “et_highlight_nav” sekarang dapat digunakan untuk menata tombol CTA dengan animasi pulsa dan warna biru. Karena Anda sudah menambahkan CSS khusus untuk efek ini sebelumnya, Anda sudah siap.
Lihat menunya sekarang.
Tombol CTA sekarang akan berubah menjadi biru dan berdenyut saat Anda menggulir halaman lebih jauh ke bawah dan mengatur ulang saat Anda kembali ke bagian atas halaman.
Mengubah Warna tombol CTA Anda
Karena tombol CTA menggunakan kelas CSS khusus, Anda dapat mengubah gaya tombol agar sesuai dengan situs Anda dengan menyesuaikan CSS yang Anda tambahkan sebelumnya. Cukup ganti kode warna dengan kode Anda sendiri. Berikut adalah bagian CSS yang menargetkan gaya tombol yang berbeda:
Jika Anda mengubah warna tombol Anda, pastikan untuk mengubah batas bawah tombol Anda di ponsel dengan mengubah CSS di sini:
Bagaimana Tampilannya di Ponsel?
CSS khusus yang ditambahkan sebelumnya akan memusatkan item menu Anda dan menempatkan tombol CTA Anda dengan benar di ponsel seperti pada menu ponsel tema elegan.
Font Menu
Untuk tutorial ini, saya menggunakan font default Open Sans sebagai font menu. Font default untuk situs Elegant Themes (termasuk teks menu) adalah font yang disebut Poppins. Anda dapat mengimpor font ini menggunakan Google Font dengan mengikuti instruksi pada posting sebelumnya ini.
Pikiran Akhir
Itu dia! Anda telah berhasil menggandakan menu utama Tema Elegan. Dan, Anda dapat menyesuaikan gaya tombol CTA agar sesuai dengan desain situs Anda dengan menyesuaikan CSS khusus. Karena warna tombol berubah pada navigasi tetap dan bernyawa saat menggulir halaman ke bawah, pengguna lebih cenderung memperhatikan CTA yang akan membantu konversi Anda.
Saya harap menu baru ini akan menjadi fitur yang berguna untuk proyek yang akan datang. Dan saya berharap untuk mendengar dari Anda di komentar di bawah.
Menikmati!