Wordpress, Как это сделать

Кнопка призыва к действию в меню Divi

Кнопка призыва к действию в меню Divi | WESPE CLUB

Для начала

Одним из наиболее важных веб-элементов является призыв к действию. Они могут иметь форму кнопок, размещенных по всему сайту, но добавление их в нетрадиционные места может помочь привлечь внимание посетителя сайта. Кнопка призыва к действию в меню Divi – отличное решение для эффективной работы с посетителями сайта.

В следующем уроке вы узнаете, как создать привлекательную кнопку призыва к действию для мобильного меню Divi.

Ищете код? Пропустите пошаговое руководство по Divi и перейти прямо к библиотеке кода.

Кнопка призыва к действию в меню Divi

Веб-элемент, которым часто пренебрегают, — это меню навигации. Обычно он находится в заголовке сайта вместе с логотипом и, возможно, значками социальных сетей.

Чтобы оживить свой веб-дизайн, вы можете легко создать выделяющийся призыв к действию из пункта меню Divi. Вместо обычного отображения в виде фрагмента текста с небольшим количеством CSS вы можете стилизовать элемент меню так, чтобы он выглядел как кнопка.

Прежде чем приступить к работе с этим руководством, запустите резервная копия вашего сайта прежде чем вносить какие-либо изменения и настройки кода.

Как добавить кнопку призыва к действию в мобильное меню Divi

Этот урок будет состоять из нескольких частей:

  • Во-первых, вам нужно создать меню и добавьте кнопку призыва к действию
  • Далее вам нужно будет добавить собственный класс к пункту меню призыва к действию
  • Наконец, вам нужно будет оформить элемент меню с помощью CSS

Давайте погрузимся!

Шаг 1. Создайте меню WordPress

Перейдите к Внешний вид > Меню и создайте новое меню. Обязательно включите страницу с призывом к действию. Я создал страницу под названием «Запланировать звонок». Это побудит посетителей сайта заказать звонок мне.

Убедитесь, что для этого параметра установлено главное меню. Не забудьте нажать меню «Сохранить».

Учебное пособие по Divi, кнопка призыва к действию, меню навигации, задняя часть

Добавление пункта меню с призывом к действию в меню WordPress

В интерфейсе меню будет выглядеть примерно так:

Настройка навигационного меню кнопки призыва к действию в Divi

Пример навигационного меню

Шаг 2. Добавьте собственный класс в пункт меню призыва к действию.

Вернуться в Внешний вид > Меню консоль. В самом верху страницы нажмите кнопку Параметры экрана вкладку и убедитесь, что CSS-классы выбран. Если нет, выберите его, установив флажок. Эта опция будет автоматически обновляться.

Учебное пособие Divi, параметры экрана кнопки призыва к действию, классы CSS

Нажмите раскрывающееся меню «Параметры экрана», чтобы отобразить дополнительные параметры.

Затем найдите пункт меню, который вы хотите настроить как выдающуюся кнопку призыва к действию. В моем примере это пункт меню «Запланировать звонок».

Нажмите на маленький стрелка раскрывающегося списка чтобы открыть параметры настройки меню. В поле, где написано CSS-классы (необязательно), добавьте текст: меню_cta

Кнопка призыва к действию в учебнике Divi добавить класс CSS в пункт меню

Присвойте уникальный класс пункту меню.

Нажмите Сохранить изменения.

Теперь вы только что добавили в меню собственный класс. Далее мы будем использовать этот класс для нацеливания на конкретный пункт меню и стилизовать его с помощью CSS.

Шаг 3. Настройте кнопку призыва к действию с помощью CSS

Теперь пришло время настроить внешний вид кнопки призыва к действию с помощью CSS. Ты можешь добавить CSS в Divi несколькими способами. Наш предпочтительный метод заключается в использовании Таблица стилей CSS в нашей дочерней теме.

Если у вас еще не настроена дочерняя тема, вы можете скачать бесплатно здесь. Если вам нужно немного больше информации о дочерних темах и о том, как их использовать, прочитайте наш удобный Руководство по детской теме Divi.

Как только ваша дочерняя тема будет запущена, перейдите к Внешний вид > Редактор и выберите таблица стилей. Скопируйте следующий код и вставьте его в файл style.css.

По завершении нажмите Обновить файл.

Код включает в себя обычное состояние отображения и изменение состояния при наведении. Я добавил зеленый цвет, чтобы он соответствовал дизайну сайта, и привлекательный оранжевый цвет Divi Space для цвета при наведении.

В коде есть комментарии, которые подскажут вам, какие переменные следует изменить, чтобы добавить свои собственные цвета.

Стилизация кнопки призыва к действию в меню Divi

Если вы хотите создать другой внешний вид для мобильного меню Divi, скопируйте и вставьте следующий код в свою таблицу стилей.

Вариант 2

Это создаст серую кнопку призыва к действию.

Серая кнопка призыва к действию в учебнике Divi

Создайте яркий серый пункт меню с помощью CSS

Вариант 3

Это создаст синюю кнопку призыва к действию.

Кнопка призыва к действию в Divi, синяя кнопка

Создайте яркий синий пункт меню с помощью CSS

Вариант 4

Это создаст оранжевую кнопку призыва к действию со значком телефона.

Кнопка призыва к действию в учебнике Divi, оранжевая кнопка со значком

Создайте яркий оранжевый пункт меню со значком с помощью CSS.

Вариант 5

Это создаст оранжевую кнопку призыва к действию.

Кнопка призыва к действию в учебнике Divi, оранжевая кнопка

Создайте яркий оранжевый пункт меню с помощью CSS

Завершение мыслей

Изменение внешнего вида вашего веб-сайта отлично подходит для того, чтобы посетители вашего сайта были вовлечены и развлекались. Один из способов привлечь их внимание — добавить интересные кнопки и призывы к действию в уникальных местах.

Мы надеемся, что вам понравился этот урок и что он повысил удобство использования вашего сайта.
Дайте нам знать, какие уроки Divi и быстрые фрагменты CSS вы хотели бы видеть в будущем! Комментируйте свои запросы на фрагменты ниже!

Source link

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *