[ad_1]
Для начала
Одним из наиболее важных веб-элементов является призыв к действию. Они могут иметь форму кнопок, размещенных по всему сайту, но добавление их в нетрадиционные места может помочь привлечь внимание посетителя сайта. Кнопка призыва к действию в меню Divi — отличное решение для эффективной работы с посетителями сайта.
В следующем уроке вы узнаете, как создать привлекательную кнопку призыва к действию для мобильного меню Divi.
Ищете код? Пропустите пошаговое руководство по Divi и перейти прямо к библиотеке кода.
Кнопка призыва к действию в меню Divi
Веб-элемент, которым часто пренебрегают, — это меню навигации. Обычно он находится в заголовке сайта вместе с логотипом и, возможно, значками социальных сетей.
Чтобы оживить свой веб-дизайн, вы можете легко создать выделяющийся призыв к действию из пункта меню Divi. Вместо обычного отображения в виде фрагмента текста с небольшим количеством CSS вы можете стилизовать элемент меню так, чтобы он выглядел как кнопка.
Прежде чем приступить к работе с этим руководством, запустите резервная копия вашего сайта прежде чем вносить какие-либо изменения и настройки кода.
Как добавить кнопку призыва к действию в мобильное меню Divi
Этот урок будет состоять из нескольких частей:
- Во-первых, вам нужно создать меню и добавьте кнопку призыва к действию
- Далее вам нужно будет добавить собственный класс к пункту меню призыва к действию
- Наконец, вам нужно будет оформить элемент меню с помощью CSS
Давайте погрузимся!
Шаг 1. Создайте меню WordPress
Перейдите к Внешний вид > Меню и создайте новое меню. Обязательно включите страницу с призывом к действию. Я создал страницу под названием «Запланировать звонок». Это побудит посетителей сайта заказать звонок мне.
Убедитесь, что для этого параметра установлено главное меню. Не забудьте нажать меню «Сохранить».
В интерфейсе меню будет выглядеть примерно так:
Шаг 2. Добавьте собственный класс в пункт меню призыва к действию.
Вернуться в Внешний вид > Меню консоль. В самом верху страницы нажмите кнопку Параметры экрана вкладку и убедитесь, что CSS-классы выбран. Если нет, выберите его, установив флажок. Эта опция будет автоматически обновляться.
Затем найдите пункт меню, который вы хотите настроить как выдающуюся кнопку призыва к действию. В моем примере это пункт меню «Запланировать звонок».
Нажмите на маленький стрелка раскрывающегося списка чтобы открыть параметры настройки меню. В поле, где написано CSS-классы (необязательно), добавьте текст: меню_cta
Нажмите Сохранить изменения.
Теперь вы только что добавили в меню собственный класс. Далее мы будем использовать этот класс для нацеливания на конкретный пункт меню и стилизовать его с помощью CSS.
Шаг 3. Настройте кнопку призыва к действию с помощью CSS
Теперь пришло время настроить внешний вид кнопки призыва к действию с помощью CSS. Ты можешь добавить CSS в Divi несколькими способами. Наш предпочтительный метод заключается в использовании Таблица стилей CSS в нашей дочерней теме.
Если у вас еще не настроена дочерняя тема, вы можете скачать бесплатно здесь. Если вам нужно немного больше информации о дочерних темах и о том, как их использовать, прочитайте наш удобный Руководство по детской теме Divi.
Как только ваша дочерняя тема будет запущена, перейдите к Внешний вид > Редактор и выберите таблица стилей. Скопируйте следующий код и вставьте его в файл style.css.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* 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
Это создаст серую кнопку призыва к действию.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@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
Это создаст синюю кнопку призыва к действию.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
@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
Это создаст оранжевую кнопку призыва к действию со значком телефона.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@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
Это создаст оранжевую кнопку призыва к действию.
1 2 3 4 5 6 7 8 9 10 |
.menu_cta { background-color: #ff6900; color: #fff; padding: 0 !important; } .menu_cta a { color: #fff !important; padding: 15px 15px 15px 15px !important; } |
Завершение мыслей
Изменение внешнего вида вашего веб-сайта отлично подходит для того, чтобы посетители вашего сайта были вовлечены и развлекались. Один из способов привлечь их внимание — добавить интересные кнопки и призывы к действию в уникальных местах.
Мы надеемся, что вам понравился этот урок и что он повысил удобство использования вашего сайта.
Дайте нам знать, какие уроки Divi и быстрые фрагменты CSS вы хотели бы видеть в будущем! Комментируйте свои запросы на фрагменты ниже!
[ad_2]