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

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

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

Давайте приступим к делу!

Подпишитесь на наш канал Youtube

Предварительный просмотр

Начнем с того, что посмотрим на конечный результат на экранах разных размеров:

Настройки настройщика тем

Перейдите в настройщик тем

Прежде чем мы начнем создавать наш дизайн, давайте начнем с некоторых изменений Настройщика тем. Перейдите в панель управления WordPress> Внешний вид> Настроить .

Сохранить фоновое изображение

Поскольку мы собираемся отделить основную панель меню сверху, нам понадобится что-то, чтобы закрыть пространство, которое она обычно занимает. Мы будем использовать следующее фоновое изображение, поэтому сохраните его на своем компьютере:

Загрузить фоновое изображение в общие настройки

Затем перейдите в Общие настройки> Фон и загрузите изображение на фон своего веб-сайта.

• Фоновое изображение Strech: включено
• Положение фона: фиксированное

Настройки основной панели меню

Мы также собираемся объединить готовую первичную панель меню с нашим дизайном Divi. Для этого нам нужно сначала изменить настройки основной панели меню. Перейдите в Заголовок и навигация> Основная строка меню и используйте следующие настройки:

• Максимальная высота логотипа: 100
• Размер текста: 18
• Расстояние между буквами: -1
• Шрифт: Poppins
• Цвет текста: # 333333
• Цвет активной ссылки: # f55c83
• Цвет фона: rgba (255,255,255,0)
• Цвет фона выпадающего меню: #FFFFFF

Добавить новую страницу

Пользовательский CSS страницы

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

#main-header {
margin-top: 140px;
}

Добавить новый раздел

Фоновый цвет

Приступим к дизайну! Добавьте новую страницу, переключитесь на Visual Builder и добавьте свой первый раздел. Затем откройте настройки раздела и добавьте rgba (255,255,255,0.81) в качестве цвета фона. Это позволит просвечивать фоновое изображение нашего веб-сайта.

Интервал

Перейдите к настройкам Spacing и добавьте следующие настраиваемые поля и отступы:

• Верхнее и нижнее поля: 100 пикселей
• Левое и правое поле: 60 пикселей
• Верхний отступ: 135 пикселей
• Нижний отступ: 0 пикселей

Закругленные углы

Также добавьте 30 пикселей в каждый угол раздела.

Граница

Затем добавьте верхнюю границу к вашему разделу:

• Ширина верхней границы: 35 пикселей
• Цвет верхней границы: # 333333.

Коробка Тень

В завершение добавьте очень тонкую тень блока.

• Сила размытия тени коробки: 61 пикс.
• Сила распространения тени коробки: -13 пикселей

Добавить строку №1

Структура столбца

Пора начинать добавлять ряды и модули! Добавьте первую строку, используя два столбца одинакового размера.

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера:

• Сделать эту строку полной шириной: Да
• Выровнять высоту столбца: Да

Интервал

Добавьте несколько пользовательских отступов:

• Верхний отступ: 250 пикселей (рабочий стол), 50 пикселей (планшет и телефон)
• Нижний отступ: 200 пикселей (рабочий стол), 100 пикселей (планшет), 50 пикселей (телефон)
• Отступ слева для столбца 1: 50 пикселей (рабочий стол), 0 пикселей (планшет и телефон).

Добавить модуль текста заголовка в столбец 1

Настройки текста H1

Теперь мы можем начать добавлять модули. Мы начнем с первого столбца, добавив новый заголовок «Текстовый модуль».

• Шрифт заголовка: Poppins
• Толщина шрифта заголовка: средний
• Размер текста заголовка: 120 пикселей (рабочий стол), 80 пикселей (планшет), 58 пикселей (телефон)

Добавить другой цвет к части копии

Вы можете легко изменить цвет слова в заголовке, переключившись на вкладку «Текст» и добавив цвет к выбранному слову с помощью тегов span.

Добавить текстовый модуль описания в столбец 1

Настройки текста

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

• Шрифт текста: Поппинс
• Толщина шрифта текста: Обычный
• Размер текста: 20 пикселей (рабочий стол), 15 пикселей (планшет и телефон)
• Высота текстовой строки: 2em

Интервал

Нам понадобится дополнительный запас для этого текстового модуля:

• Верхнее и нижнее поля: 50 пикселей

Добавить модуль кнопок в столбец 1

Настройки кнопок

Последний модуль в этом столбце - это кнопочный модуль. После того, как вы добавили копию CTA, измените стили кнопок:

• Использовать пользовательские стили для кнопки: Да
• Цвет текста кнопки: #FFFFFF
• Цвет градиента 1: # f45085
• Цвет градиента 2: # f88c7e
• Направление градиента: 137 градусов
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 40 пикселей
• Шрифт кнопки: Поппинс
• Толщина шрифта кнопки: Обычный
• Стиль шрифта: прописные

Интервал

Затем откройте настройки Spacing и добавьте поля и отступы к вашей кнопке:

• Нижнее поле: 100 пикселей (рабочий стол), 20 пикселей (планшет и телефон)
• Отступ сверху и снизу: 15 пикселей
• Отступ слева и справа: 50 пикселей

Коробка Тень

И последнее, но не менее важное: мы будем использовать очень тонкую тень блока, чтобы создать большую глубину на нашей странице:

• Сила размытия тени коробки: 55 пикселей
• Сила распространения тени коробки: -4px
• Цвет тени: rgba (84,84,84,0.25)

Добавить модуль изображения в столбец 2

Сохранить и загрузить изображение

Второй столбец содержит только модуль изображения. Мы используем макет, который является частью пакета макетов цифрового маркетинга Divi. Сохраните изображение ниже на свой компьютер. После этого добавьте его в модуль изображения во втором столбце.

Добавить строку №2

Структура столбца

Пора добавить вторую строку! Выберите для него следующую структуру столбцов:

Цвет фона столбца 1

Затем откройте настройки строки и добавьте «#FFFFFF» в качестве цвета фона столбца 1.

Копировать кнопку градиентный фон

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

Вставить градиентный фон в столбец 2

Затем вернитесь к настройкам строки и вставьте градиентный фон во второй столбец.

Цвет фона столбца 3

Для третьего столбца мы используем цвет фона «#FFFFFF».

Размеры

Далее перейдите к настройкам размеров и измените настройки:

• Использовать нестандартную ширину: Да
• Настраиваемая ширина: 2600 пикселей
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Нам также понадобятся дополнительные отступы:

• Отступ сверху и снизу: 0 пикселей
• Отступ сверху и снизу столбца: 30 пикселей

Коробка Тень

И последнее, но не менее важное: мы будем использовать тонкую тень блока:

• Сила размытия тени коробки: 61 пикс.
• Сила распространения тени коробки: -20 пикселей

Добавить модуль Blurb # 1

Выберите значок

Всего нам понадобится три модуля Blurb. Мы начнем с одного, а потом клонируем его, чтобы сэкономить время. Идите вперед и добавьте новый модуль Blurb в первый столбец. После добавления содержимого выберите нужный значок.

Настройки значков

Измените настройки вашего значка соответствующим образом:

• Цвет значка: # f55c83
• Расположение значков: слева
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 88 пикселей (компьютер и планшет), 50 пикселей (телефон)

Настройки текста заголовка

Затем откройте настройки текста заголовка и внесите некоторые изменения:

• Шрифт заголовка: Poppins
• Плотность шрифта заголовка: средний
• Размер текста заголовка: 34 пикселя (настольный компьютер и планшет), 23 пикселя (телефон)

Настройки основного текста

Также необходимо изменить основной текст:

• Шрифт основного текста: Poppins
• Плотность основного шрифта: Обычный
• Размер основного текста: 16 пикселей (рабочий стол), 14 пикселей (планшет и телефон)
• Высота линии тела: 2em

Интервал

А чтобы создать более эстетичный дизайн, добавьте отступы:

• Отступ сверху и снизу: 100 пикселей
• Отступ слева и справа: 50 пикселей (компьютер и планшет), 10 пикселей (телефон)

Клонировать модуль Blurb дважды и поместить в оставшиеся столбцы

Идите вперед и дважды клонируйте свои модули Blurb. После этого разместите их в оставшихся столбцах.

Измените модуль Blurb в столбце 2

Изменить цвет значка

Третий модуль Blurb не требует изменений, а вот второй - нет. Начните с изменения цвета значка на белый.

Изменить цвет текста

Затем откройте настройки текста и измените цвет текста на «Светлый».

Отключить фиксированную навигацию

Чтобы убедиться, что основная панель меню сохраняет свое место в дизайне, нам также необходимо отключить фиксированную панель навигации. Для этого перейдите в панель управления WordPress> Divi> Параметры темы> Отключите параметр «Фиксированная панель навигации» и сохраните настройки .

Предварительный просмотр

Теперь, когда мы выполнили все шаги, давайте окончательно посмотрим на результат на экранах разных размеров:

Последние мысли

В этом посте мы показали вам, как творчески включить основную строку меню в общий дизайн страницы Divi. Такой подход поможет вам создать более согласованный вид на вашем веб-сайте. Мы также создали пример с нуля. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!