Как дублировать основное меню элегантной темы с помощью Divi
Опубликовано: 2017-04-25Новое меню Elegant Themes было популярной просьбой разработчиков продублировать на своих сайтах. Главная особенность меню - кнопка призыва к действию (CTA), которая привлекает внимание посетителей, меняя цвета и анимируя при прокрутке страницы вниз. Наличие на вашем сайте такой кнопки с призывом к действию, скорее всего, увеличит количество кликов и количество конверсий.
Сегодня я собираюсь показать вам, как дублировать главное меню Elegant Theme с помощью Divi. Чтобы реализовать собственный стиль и функциональность кнопки, я буду использовать комбинацию CSS и jQuery.
Давайте начнем!
Реализация дизайна
Подпишитесь на наш канал Youtube
Создание меню
На панели управления WordPress перейдите в Внешний вид → Меню . В верхней части страницы меню щелкните Параметры экрана и установите флажок Классы CSS. Это позволит вам добавить собственный класс CSS к вашим пунктам меню.
Теперь нажмите «Создать новое меню» и дайте своему меню имя.
Нажмите кнопку «Создать меню».
Затем добавьте ссылки меню в новое меню. Поскольку мы дублируем меню Elegant Themes, я добавляю следующие настраиваемые ссылки:
Темы
Плагины
Блог
Контакт
Авторизоваться
Присоединяйтесь, чтобы скачать
После того, как вы закончите добавлять ссылки в свое меню, выберите новое меню в качестве основного меню для вашего сайта.
Чтобы изменить ссылку меню «Присоединиться для загрузки» на кнопку CTA, вам нужно будет добавить к ней собственный класс CSS, чтобы вы могли стилизовать его позже с помощью CSS. Чтобы добавить класс, щелкните стрелку справа от пункта меню «Присоединиться к загрузке», чтобы открыть параметры конфигурации. Добавьте класс с именем «jointoday_button» в текстовое поле «Классы CSS».
Сохранить меню
После того, как меню создано и установлено в качестве главного меню, пора добавить стиль к меню навигации и кнопке CTA.
Стилизация меню навигации
Сначала нам нужно изменить размер текста в основной строке меню. Перейдите в « Настройщик тем» → «Заголовок и навигация» → «Панель основного меню» . Сохраните все настройки по умолчанию и измените размер текста на 15.
Остальная часть меню навигации будет оформлена с использованием настраиваемого CSS. В разделе «Настройщик тем» перейдите в раздел «Дополнительные CSS» и добавьте следующий настраиваемый CSS-код (вы также можете добавить его в файл style.css дочерней темы):
/*** 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;
}
}
Вы почти закончили. Давайте посмотрим, как выглядит меню на данный момент.
Обратите внимание, что тень под меню была удалена и отображается только тогда, когда фиксированная навигация активирована при прокрутке страницы вниз. Кроме того, кнопка CTA была стилизована для изменения цвета при фиксированной навигации.
Добавление jQuery
Все, что осталось сделать, это добавить дополнительное изменение цвета и импульсную анимацию к кнопке при прокрутке вниз до определенной точки на странице. Эта дополнительная функция привлекает дополнительное внимание к кнопке CTA, когда пользователь взаимодействует с контентом. Чтобы добавить этот эффект, нам нужно добавить дополнительный класс CSS к кнопке только тогда, когда пользователь прокручивает до определенной точки на странице. В этом случае мы будем добавлять класс et_highlight_nav в меню, когда пользователь прокручивает до точки, превышающей 50 процентов тела страницы. Этот класс будет удален, когда пользователь вернется к началу страницы.
Вы можете добиться этого, добавив jQuery. Перейдите в Divi → Параметры темы и на вкладке «Интеграция» добавьте следующий jQuery в текстовую область «Добавить код в заголовок вашего блога»:
<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>
Класс et_highlight_nav теперь можно использовать для стилизации кнопки CTA с импульсной анимацией и синим цветом. Поскольку вы уже добавили собственный CSS для этого эффекта ранее, все готово.
Ознакомьтесь с меню прямо сейчас.
Кнопка CTA теперь станет синей и будет мигать по мере прокрутки страницы вниз и сбрасываться, когда вы вернетесь в верхнюю часть страницы.
Изменение цвета кнопки CTA
Поскольку кнопка CTA использует собственный класс CSS, вы можете изменить стиль кнопки в соответствии с вашим сайтом, изменив CSS, который вы добавили ранее. Просто замените цветовой код своим. Вот разделы CSS, нацеленные на разные стили кнопок:
Если вы измените цвет кнопки, не забудьте изменить нижнюю границу кнопки на мобильном устройстве, изменив здесь CSS:
Как это выглядит на мобильных устройствах?
Пользовательский CSS, добавленный ранее, будет центрировать ваши пункты меню и правильно размещать вашу кнопку CTA на мобильном телефоне, как и в элегантном мобильном меню тем.
Шрифт меню
В этом уроке я использую шрифт Open Sans по умолчанию в качестве шрифта меню. Шрифт по умолчанию для сайта Elegant Themes (включая текст меню) - это шрифт Poppins. Вы можете импортировать этот шрифт с помощью Google Fonts, следуя инструкциям в предыдущем посте.
Последние мысли
Вот и все! Вы успешно продублировали главное меню Elegant Themes. И вы можете настроить стиль вашей кнопки CTA в соответствии с дизайном вашего сайта, настроив собственный CSS. Поскольку цвета кнопок меняются при фиксированной навигации и анимируются при прокрутке страницы вниз, пользователи с большей вероятностью заметят призыв к действию, который поможет вашим конверсиям.
Я надеюсь, что это новое меню будет полезным для будущих проектов. И я с нетерпением жду вашего ответа в комментариях ниже.
Наслаждаться!