Для начала
Одним из наиболее важных веб-элементов является призыв к действию. Они могут иметь форму кнопок, размещенных по всему сайту, но добавление их в нетрадиционные места может помочь привлечь внимание посетителя сайта. Кнопка призыва к действию в меню Divi — отличное решение для эффективной работы с посетителями сайта.
В следующем уроке вы узнаете, как создать привлекательную кнопку призыва к действию для мобильного меню Divi.
Ищете код? Пропустите пошаговое руководство по Divi и перейти прямо к библиотеке кода.
Кнопка призыва к действию в меню Divi
Веб-элемент, которым часто пренебрегают, — это меню навигации. Обычно он находится в заголовке сайта вместе с логотипом и, возможно, значками социальных сетей.
Чтобы оживить свой веб-дизайн, вы можете легко создать выделяющийся призыв к действию из пункта меню Divi. Вместо обычного отображения в виде фрагмента текста с небольшим количеством CSS вы можете стилизовать элемент меню так, чтобы он выглядел как кнопка.
Прежде чем приступить к работе с этим руководством, запустите резервная копия вашего сайта прежде чем вносить какие-либо изменения и настройки кода.
Как добавить кнопку призыва к действию в мобильное меню Divi
Этот урок будет состоять из нескольких частей:
- Во-первых, вам нужно создать меню и добавьте кнопку призыва к действию
- Далее вам нужно будет добавить собственный класс к пункту меню призыва к действию
- Наконец, вам нужно будет оформить элемент меню с помощью CSS
Давайте погрузимся!
Шаг 1. Создайте меню WordPress
Перейдите к Внешний вид > Меню и создайте новое меню. Обязательно включите страницу с призывом к действию. Я создал страницу под названием «Запланировать звонок». Это побудит посетителей сайта заказать звонок мне.
Убедитесь, что для этого параметра установлено главное меню. Не забудьте нажать меню «Сохранить».
Добавление пункта меню с призывом к действию в меню WordPress
В интерфейсе меню будет выглядеть примерно так:
Пример навигационного меню
Шаг 2. Добавьте собственный класс в пункт меню призыва к действию.
Вернуться в Внешний вид > Меню консоль. В самом верху страницы нажмите кнопку Параметры экрана вкладку и убедитесь, что CSS-классы выбран. Если нет, выберите его, установив флажок. Эта опция будет автоматически обновляться.
Нажмите раскрывающееся меню «Параметры экрана», чтобы отобразить дополнительные параметры.
Затем найдите пункт меню, который вы хотите настроить как выдающуюся кнопку призыва к действию. В моем примере это пункт меню «Запланировать звонок».
Нажмите на маленький стрелка раскрывающегося списка чтобы открыть параметры настройки меню. В поле, где написано CSS-классы (необязательно), добавьте текст: меню_cta
Присвойте уникальный класс пункту меню.
Нажмите Сохранить изменения.
Теперь вы только что добавили в меню собственный класс. Далее мы будем использовать этот класс для нацеливания на конкретный пункт меню и стилизовать его с помощью CSS.
Шаг 3. Настройте кнопку призыва к действию с помощью CSS
Теперь пришло время настроить внешний вид кнопки призыва к действию с помощью CSS. Ты можешь добавить CSS в Divi несколькими способами. Наш предпочтительный метод заключается в использовании Таблица стилей CSS в нашей дочерней теме.
Если у вас еще не настроена дочерняя тема, вы можете скачать бесплатно здесь. Если вам нужно немного больше информации о дочерних темах и о том, как их использовать, прочитайте наш удобный Руководство по детской теме Divi.
Как только ваша дочерняя тема будет запущена, перейдите к Внешний вид > Редактор и выберите таблица стилей. Скопируйте следующий код и вставьте его в файл style.css.
/* Divi call to action button normal state */
@media (min-width: 980px) {
.menu_cta {
padding: 0!important;
border-radius: 30px;
border: solid 2px #19ba97; /* change the color of the border */
transition: 0.3s;
background-color: #19ba97; /* change the color of the background */
}
.menu_cta a{
color: #f4f4f4!important; /* change the color of the button text */
padding: 15px 30px 15px 30px!important;
}
/* Divi call to action button hover state */
#top-menu-nav .menu_cta a:hover {
opacity: 1;
}
.menu_cta:hover {
border: solid 2px #fe8400; /* change the color of the hover border */
background: #fe8400; /* change the color of the hover background */
}
}
По завершении нажмите Обновить файл.
Код включает в себя обычное состояние отображения и изменение состояния при наведении. Я добавил зеленый цвет, чтобы он соответствовал дизайну сайта, и привлекательный оранжевый цвет Divi Space для цвета при наведении.
В коде есть комментарии, которые подскажут вам, какие переменные следует изменить, чтобы добавить свои собственные цвета.
Стилизация кнопки призыва к действию в меню Divi
Если вы хотите создать другой внешний вид для мобильного меню Divi, скопируйте и вставьте следующий код в свою таблицу стилей.
Вариант 2
Это создаст серую кнопку призыва к действию.
Создайте яркий серый пункт меню с помощью CSS
@media (min-width: 980px) {
.menu_cta {
background-color: #f2f2f2;
background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
border: 1px solid #bfbfbf;
box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
color: #8c8c8c;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border-radius: 3px;
font-family: Verdana, sans-serif;
transition: all 20ms ease-out;
}
.menu_cta:hover {
background: #f2f2f2;
border-color: #8c8c8c;
box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
}
.menu_cta a{
color: #23282d!important;
padding: 12px 30px 12px!important;
}
}
#top-menu-nav .menu_cta a:hover {
opacity: 1;
}
Вариант 3
Это создаст синюю кнопку призыва к действию.
Создайте яркий синий пункт меню с помощью CSS
@media (min-width: 980px) {
.menu_cta {
width: 160px;
height: 46px;
background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%);
border-radius: 5px;
border-bottom: 4px solid #2b8bc6;
color: #fbfbfb;
font-weight: 600;
text-indent: 5px;
cursor: pointer;
}
.menu_cta:active {
box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
top: 1px;
}
.menu_cta:after {
content: '';
width: 0;
height: 0;
display: block;
border-top: 22px solid #187dbc;
border-bottom: 22px solid #187dbc;
border-left: 16px solid transparent;
border-right: 20px solid #187dbc;
position: absolute;
opacity: 0.6;
right: 0;
top: 0;
border-radius: 0 5px 5px 0;
}
.menu_cta a{
color: #fbfbfb;
font-family: 'Open Sans', sans-serif;
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
text-align: left;
padding: 15px 30px 15px 12px;
}
}
#top-menu-nav .menu_cta a:hover {
opacity: 1;
}
Вариант 4
Это создаст оранжевую кнопку призыва к действию со значком телефона.
Создайте яркий оранжевый пункт меню со значком с помощью CSS.
@media (min-width: 980px) {
.menu_cta {
background-color: #ff6900;
color: #fff;
padding: 0 !important;
}
.menu_cta a {
color: #fff !important;
padding: 10px 15px 10px 35px !important;
}
.menu_cta a:before {
content: '\e090';
color: #fff;
font-family: 'ETmodules';
font-size: 16px;
line-height: 1;
position: absolute;
left: 12px;
}
}
Вариант 5
Это создаст оранжевую кнопку призыва к действию.
Создайте яркий оранжевый пункт меню с помощью CSS
.menu_cta {
background-color: #ff6900;
color: #fff;
padding: 0 !important;
}
.menu_cta a {
color: #fff !important;
padding: 15px 15px 15px 15px !important;
}
Завершение мыслей
Изменение внешнего вида вашего веб-сайта отлично подходит для того, чтобы посетители вашего сайта были вовлечены и развлекались. Один из способов привлечь их внимание — добавить интересные кнопки и призывы к действию в уникальных местах.
Мы надеемся, что вам понравился этот урок и что он повысил удобство использования вашего сайта.
Дайте нам знать, какие уроки Divi и быстрые фрагменты CSS вы хотели бы видеть в будущем! Комментируйте свои запросы на фрагменты ниже!