Хотите знать, как настроить корзину и значки поиска модуля Divi Fullwidth Menu?
Меню вашего Веб-сайт является одной из самых важных частей вашего Веб-сайт из-за прямого влияния, которое это может оказать на то, как пользователи перемещаются по вашему содержание.
Хорошо продуманная строка меню может иметь большое значение, упрощая навигацию, выделяя ключевые страницы и улучшая общее взаимодействие с пользователем.
Модуль «Полноширинное меню» Divi предлагает большую гибкость, позволяя вам настраивать корзину покупок и значки поиска по своему усмотрению.
В этом уроке мы собираемся показать вам три разных дизайна модуля «Полноширинное меню» с разным стилем для корзины покупок и значков поиска.
Давайте начнем!
обследование
Вот предварительный просмотр того, что мы будем разрабатывать.
Первый дизайн
Для первого дизайна мы размещаем один из значков слева, а другой справа, выбрав структуру меню по центру. Мы также изменим цвет при наведении.
Второй дизайн
Для второго дизайна мы размещаем две иконки справа и меняем цвет при наведении.
Третий дизайн
Для третьего дизайна мы используем дополнительный CSS для настройки значков.
Читайте также: Divi: Как настроить модуль «Таймер обратного отсчета» с помощью GIF
Настройка корзины покупок и значков поиска модуля «Полноширинное меню» Divi
Создайте глобальный заголовок
Для каждого из трех дизайнов меню мы начнем с открытия конструктора темы Диви.
Для этого из панели управления WordPress перейдите в Divi > Конструктор тем
Затем нажмите Добавить глобальный заголовок
Тогда выбирай Построить глобальный заголовок
Вставьте новый раздел полной ширины.
Затем удалите предыдущий раздел.
Вставьте модуль Полноэкранное меню.
Загрузите свой логотип из меню.
Теперь мы готовы продолжить.
Первый дизайн
Наш первый дизайн будет включать встроенные эффекты наведения Divi для изменения цвета текста и значков при наведении. Давайте начнем.
Смотрите также: Divi: как добавить значок гамбургера в модуль меню
Начните с открытия настроек модуля и добавления фона.
- Фон: #fbf9f4
Перейти на вкладку Проект и выберите макет логотипа.
- Стиль: встроенный центрированный логотип
Теперь давайте изменим некоторые настройки текста меню.
- Цвет активной ссылки: #09148c
- Шрифт меню: рубиновый
- Толщина шрифта меню: Жирный
- Стиль шрифта: ТТ и U (с заглавной буквы и подчеркнуто)
Затем установите цвет текста меню, размер текста и интервал между буквами.
- Цвет текста меню: #000000
- Размер текста меню: 21px
- Расстояние между буквами: 1px
Мы хотим добавить в это меню эффекты при наведении, поэтому измените цвет текста меню при наведении. Установите другой цвет текста меню при наведении.
- Цвет текста меню (при наведении): #b70018
Затем перейдите в настройки Выпадающее меню под вкладкой Проект.
- Цвет фона выпадающего меню: #fbf9f4
- Цвет строки выпадающего меню: #b70018
- Цвет текста меню: #000000
Мы хотим, чтобы цвет текста выпадающего меню также менялся при наведении, поэтому выберите параметры наведения для этого параметра и установите другой цвет текста.
- Цвет текста выпадающего меню (при наведении): #b70018
- Цвет активной ссылки выпадающего меню: #b70018
- Цвет фона мобильного меню: #fbf9f4
- Цвет текста мобильного меню: #000000
Опять же, мы хотим, чтобы цвет текста мобильного меню менялся при наведении. Выберите параметры наведения для этого параметра, затем установите другой цвет текста при наведении.
- Цвет текста мобильного меню (при наведении курсора): #b70018
Настройка корзины и значка поиска
Теперь давайте добавим и настроим корзину и значки поиска. Под вкладкой Содержаниеперейти к Elements и включите значок корзины покупок и значок поиска.
- Показать значок корзины: ДА
- Показать значок поиска: ДА
Вернуться на вкладку Проект и откройте настройки значков. Каждая из наших иконок будет черной и красной при наведении. Сначала установите черный цвет.
- Цвет значка корзины: #000000
- Цвет значка поиска: #000000
- Цвет значка меню гамбургера: #000000
Затем выберите значок при наведении и добавьте цвет при наведении.
- Цвет значка корзины (при наведении курсора): #b70018
- Цвет значка поиска (при наведении): #b70018
- Цвет значка меню гамбургера (при наведении курсора): #b70018
Установите размер значка.
- Размер шрифта значка корзины: 25 пикселей
- Размер шрифта значка поиска: 25 пикселей
Перейти в раздел Расстояние, затем задайте верхний и нижний отступы.
- Отступы (сверху и снизу): 5 пикселей
Наконец, мы добавим границу вверху и внизу модуля меню. Откройте настройки границы.
- Ширина верхней границы: 3 пикселя
- Ширина нижней границы: 3 пикселя
Окончательный дизайн
И вот наш окончательный дизайн.
Второй дизайн
Наш второй дизайн будет использовать встроенные эффекты наведения Divi для изменения размера значков меню и текста при наведении. Давайте начнем.
Во-первых, мы добавим фоновый градиент в модуль меню. Градиент имеет три стопа, настройки следующие:
- Остановки градиента:
- 0%: RGBA(255,255,255,0 XNUMX XNUMX)
- 23%: RGBA(252,199,76,0.65 XNUMX XNUMX)
- 82%: RGBA(232,119,255,0.32 XNUMX XNUMX)
Установите тип градиента и положение градиента.
- Тип градиента: конический
- Положение градиента: снизу
Затем перейдите на вкладку Проект и установить макет (Планировка).
- Стиль: по центру
Перейти в раздел Текст меню настроить дизайн текста меню.
- Цвет активной ссылки: #FFFFFF
- Меню шрифтов: Syne
- Вес шрифта: полужирный
- Стиль шрифта меню: TT (верхний регистр)
- Цветовое меню текста: #FFFFFF
Теперь установите размер текста меню и межбуквенный интервал.
- Размер текста меню: 20px
- Расстояние между буквами меню: 2 пикселя
Так как мы хотим, чтобы размер текста нашего меню увеличивался при наведении, выберите параметр наведения.
- Размер текста меню: 22px
Затем измените настройки дизайна в раскрывающемся меню.
- Цвет фона выпадающего меню: #fcda90
- Цвет строки выпадающего меню: #FFFFFF
- Цветовое меню текста: #FFFFFF
- Цвет активной ссылки выпадающего меню: #FFFFFF
Установите фон мобильного меню и цвет текста.
- Цвет фона мобильного меню: #fcda90
- Цвет текста мобильного меню: #FFFFFF
Настройка корзины и значка поиска
Теперь приступим к настройке значков нашего меню. Перейти к Elements под вкладкой Содержание и включите значок корзины покупок и значок поиска.
- Значок корзины для покупок: ДА
- Показать значок поиска: ДА
Вернуться на вкладку Проект и откройте настройки значков.
- Цвет значка корзины: #ffffff
- Цвет значка поиска: #ffffff
- Цвет значка меню гамбургера: #ffffff
Иконки будут иметь темно-оранжевый цвет при наведении. Выберите вариант обложки и установите цвет.
- Цвет значка корзины (при наведении курсора): #fcac00
- Цвет значка поиска (при наведении): #fcac00
- Цвет значка меню гамбургера (при наведении курсора): #fcac00
Затем установите размер шрифта для корзины и значков поиска.
- Размер шрифта значка корзины покупок: 25 пикселей
- Размер шрифта значка поиска: 25 пикселей
Чтобы увеличить размер значка при наведении, выберите параметр наведения.
- Размер шрифта значка корзины (при наведении): 30 пикселей
- Размер шрифта значка поиска (при наведении): 30 пикселей
Наконец, перейдите в раздел Расстояние и установите верхний и нижний отступы.
- Отступы (сверху и снизу): 5 пикселей
Окончательный дизайн
Вот окончательный вариант нашего второго макета меню.
Третий дизайн
Для нашего окончательного дизайна мы добавим фоновый круг за значками корзины, используя собственный CSS.
Читайте также: Divi: Как создать липкое и расширяемое меню при наведении курсора
Давайте начнем.
Во-первых, добавьте цвет фона к модулю.
- Фон: #efb6ac
Затем перейдите на вкладку Проект и откройте опцию Текст меню.
- Цвет активной ссылки: #e84322
- Шрифт меню: Cinzel
- Меню толщины шрифта: сверхжирный
Мы хотим, чтобы цвет текста меню менялся при наведении. Во-первых, установите цвет текста меню.
- Меню цвета текста (рабочий стол): #e7644a
Щелкните значок при наведении и установите цвет текста при наведении.
- Цвет текста меню (при наведении): #e84322
Затем установите размер текста меню и межбуквенный интервал.
- Размер текста меню: 21px
- Расстояние между буквами меню: 1 пикселя
Мы также хотим, чтобы расстояние между буквами увеличивалось при наведении, поэтому выберите параметр наведения для настроек.
- Расстояние между буквами меню: 2 пикселя
Установите выравнивание текста по левому краю.
- Выравнивание текста: по левому краю
Затем измените следующие настройки в раскрывающемся меню.
- Цвет фона выпадающего меню: #efb6ac
- Цвет линии выпадающего меню: #e7644a
Читайте также: Divi: Как создать раздел отзывов в виде сетки
- Цвет текста выпадающего меню
- Рабочий стол: #e7644a
- Наведение: #e84322
- Цвет активной ссылки выпадающего меню: #e84322
Установите фон мобильного меню и цвет текста.
- Цвет фона мобильного меню: #efb6ac
- Цвет текста мобильного меню:
- Рабочий стол: #e7644a
- Наведение: #e84322
Настройка корзины и значка поиска
Сначала перейдите к Elements под вкладкой Содержание и включите значок корзины покупок и значок поиска.
- Показать значок корзины: ДА
- Показать значок покупок: ДА
Затем вернитесь на вкладку Проект и откройте настройки значков. Установите цвет значка.
- Цвет значка корзины: #e7644a
- Цвет значка поиска: #e7644a
- Цвет значка меню гамбургера: #e7644a
Цвет этих значков будет меняться при наведении. Включите параметры наведения и установите цвет.
- Цвет значка корзины (при наведении курсора): #e84322
- Цвет значка поиска (при наведении): #e84322
- Цвет значка меню гамбургера (при наведении курсора): #e84322
Мы также хотим, чтобы размер значка увеличивался при наведении. Во-первых, установите размер шрифта значка.
- Размер шрифта значка корзины: 22 пикселей
- Размер шрифта значка поиска: 22 пикселей
Затем установите размер шрифта значка при наведении.
- Размер шрифта значка корзины (при наведении): 26 пикселей
- Размер шрифта значка поиска (при наведении): 26 пикселей
Затем перейдите в раздел Расстояние и добавить верхний и нижний отступы.
- Отступы (сверху и снизу): 5 пикселей
Наконец, мы можем добавить пользовательский CSS в глобальный заголовок, чтобы добавить круги позади корзины и значок поиска.
Вы можете настроить этот CSS по своему усмотрению, чтобы он соответствовал дизайну вашего модуля меню.
Откройте настройки шаблона шапки, затем перейдите на вкладку Фильтр и вставьте следующий пользовательский CSS.
.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}
Окончательный дизайн
Это завершает дизайн нашего третьего и последнего макета меню.
Конечный результат
Теперь давайте взглянем на окончательный дизайн трех разных меню.
Первый дизайн
Скачайте DIVI прямо сейчас!!!
Второй дизайн
Третий дизайн
Скачайте DIVI прямо сейчас!!!
Заключение
Модуль меню Divi, а также значки корзины и поиска легко настраиваются для создания уникальных макетов и дизайнов для вашего сайта. Веб-сайт.
Вы можете легко улучшить внешний вид своих модулей меню, используя встроенные настройки Divi, такие как эффекты наведения и пользовательский CSS.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
