Как оптимизировать модуль меню Divi с 5 глобальными пресетами (бесплатная загрузка)

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

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

Давайте начнем!

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы использовать эти глобальные предустановки меню в глобальном заголовке, вы должны сначала импортировать макет (с его предустановками) в библиотеку Divi следующим образом:

1. Перейдите в Divi> Divi Library.
2. Нажмите кнопку импорта / экспорта вверху страницы.
3. Выберите вкладку Импорт во всплывающем окне переносимости.
4. Выберите файл JSON макета для импорта
5. Выберите предустановки для импорта
6. Нажмите кнопку импорта

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

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Создание 5 глобальных предустановок модуля меню в Divi

# 1 - Ссылки кнопок по центру с логотипом

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

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

Затем добавьте в строку модуль меню.

Откройте настройки меню и добавьте меню в модуль.

Затем добавьте в модуль логотип сайта как динамическое содержимое.

На вкладке дизайна обновите следующее:

• Стиль: по центру

• Шрифт меню: Poppins
• Толщина шрифта меню: полужирный
• Стиль шрифта меню: TT
• Размер текста меню: 14 пикселей (рабочий стол), 24 пикселя (планшет и телефон)
• Расстояние между буквами меню: 0,15 мкм
• Высота строки меню: 1,3 м (настольный компьютер), 1,8 м (планшет и телефон)

• Максимальная высота логотипа: 60 ​​пикселей

• Поля: низ 0 пикселей

На вкладке «Дополнительно» мы добавим несколько пользовательских стилей ссылок меню, чтобы они отображались в виде кнопок.

Ссылка меню CSS

Добавьте следующий настраиваемый CSS в ссылку меню:

На рабочем столе…

min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

При наведении…

background: #333333;
color: #ffffff;
opacity: 1;

CSS ссылки активного меню

background: #333333;
color: #ffffff;
opacity: 1;

Меню логотипа CSS

margin-bottom: 10px;

Стиль 1 Результат

Вот окончательный результат ...

Добавление стиля меню 1 в качестве глобального пресета

Дубликат раздела

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

Создать новый пресет из текущих стилей

Чтобы добавить глобальную предустановку, откройте настройки исходного модуля меню, который мы создали, и щелкните раскрывающуюся ссылку «Предустановка».

Выберите «Создать новую предустановку из текущих стилей».

Дайте новой предустановке имя («Связи с центральными кнопками с логотипом»), затем сохраните предустановку.

# 2 - Встроенный центрированный логотип со ссылками на кнопки

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

На вкладке дизайна обновите стиль:

• Стиль: встроенный логотип по центру

Из-за пользовательского CSS, унаследованного от предыдущего стиля модуля, ссылки меню сохраняют дизайн кнопки, а логотип идеально располагается в центре. Пользовательский стиль ссылок на кнопки позволяет ссылкам меню сохранять красивый симметричный дизайн.

На вкладке «Дополнительно» обновите CSS логотипа меню следующим образом:

margin-bottom: 0px;

Стиль 2 Результат

Вот окончательный результат.

Добавление стиля меню 2 в качестве глобального пресета

Дубликат раздела

Прежде чем мы добавим стиль меню в качестве глобального пресета, продублируйте весь раздел, содержащий модуль меню (стиль 2), чтобы мы могли использовать стили меню для быстрого старта следующего дизайна.

Создать новый пресет из текущих стилей

Чтобы добавить глобальную предустановку, откройте настройки исходного модуля меню для стиля 2, который мы создали, и щелкните раскрывающуюся ссылку «Предустановка».

Выберите «Создать новую предустановку из текущих стилей».

Дайте предустановке имя («Встроенный центрированный логотип со ссылками на кнопки») и сохраните предустановку.

# 3 - Полностью центрированное пространственное меню VW с мобильной этикеткой

Для этого следующего стиля меню мы собираемся разработать полноразмерное центрированное меню без логотипа, которое имеет текст меню, размер и интервал которого равен единице длины vw, так что он масштабируется с шириной браузера. У него также будет ярлык «меню» над значком гамбургера на мобильном телефоне.

Чтобы создать третий глобальный пресет меню, нам понадобится строка во всю ширину. Откройте настройки строки, содержащие повторяющееся меню, и обновите следующее:

• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Откройте настройки модуля меню и удалите логотип.

На вкладке дизайна обновите стиль:

• Стиль: по центру

Затем обновите размер текста со следующей единицей длины VW, чтобы размер текста масштабировался вместе с шириной браузера.

• Размер текста меню: 1.5vw (рабочий стол)

Чтобы создать метку «меню» для мобильного меню, мы можем добавить некоторый настраиваемый CSS к элементу Before Psuedo на дисплее планшета следующим образом:

До CSS

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

Обратите внимание, что для семейства шрифтов установлено значение «poppins», чтобы соответствовать шрифту, используемому ссылками меню. Вам нужно будет обновить это, если вы используете другой шрифт.

ПРИМЕЧАНИЕ. Это может отображаться или не отображаться в визуальном построителе. Возможно, вам придется загрузить живую страницу, чтобы увидеть результат.

Затем мы собираемся добавить дополнительные интервалы и границы ссылок меню при наведении курсора. Продолжайте добавлять следующий настраиваемый CSS:

Ссылка меню CSS (рабочий стол):

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

Ссылка в меню CSS (при наведении):

color: #333;
border: 1px solid #333;
opacity:1;

CSS ссылки активного меню:

color: #333;
border: 1px solid #333;
opacity:1;

Стиль 3 Результат

Добавление стиля меню 3 в качестве глобального пресета

Дубликат раздела

Прежде чем мы добавим стиль меню в качестве глобального предустановки, продублируйте весь раздел, содержащий модуль меню (стиль 3), чтобы мы могли использовать стили меню для быстрого старта следующего дизайна.

Создать новый пресет из текущих стилей

Чтобы добавить стиль 3 в качестве глобального предустановки, откройте настройки исходного модуля меню для стиля 3, который мы создали, и щелкните раскрывающуюся ссылку «Предустановка».

Выберите «Создать новую предустановку из текущих стилей».

Дайте предустановке имя («Полностью центрированное меню VW с разнесенной этикеткой») и сохраните предустановку.

# 4 - Меню с правильным интервалом и мобильной этикеткой

Чтобы создать четвертый глобальный пресет меню, нам нужно будет обновить макет столбца строки, добавив макет 1/4 3/4. Это будет имитировать настраиваемый макет заголовка, который будет включать модуль меню справа и отдельное место для изображения логотипа в левом столбце.

Убедитесь, что меню находится в правом столбце. Затем откройте настройки меню и обновите параметры элементов, чтобы отобразить значок корзины покупок и значок поиска.

На вкладке дизайна обновите стиль:

• Стиль: Выровнено по левому краю

Затем обновите следующие стили ссылок и выравнивание текста:

• Цвет активной ссылки: # ac3cf7
• Размер текста меню (рабочий стол): 14 пикселей
• Выравнивание текста: вправо

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

Добавьте следующий настраиваемый CSS:

До CSS (планшет)

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

Ссылка меню CSS:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Стиль 4 Результат

Вот окончательный результат нашего выровненного по правому краю меню. Я добавил светло-серый фон к строке, чтобы вы могли лучше видеть выравнивание.

Добавление стиля меню 4 в качестве глобального пресета

Дубликат раздела

Прежде чем мы добавим стиль меню в качестве глобального пресета, продублируйте весь раздел, содержащий модуль меню (стиль 4), чтобы мы могли использовать стили меню для быстрого старта следующего дизайна.

Создать новый пресет из текущих стилей

Чтобы добавить стиль 4 в качестве глобального предустановки, откройте настройки исходного модуля меню для стиля 4, который мы создали, и щелкните раскрывающуюся ссылку «Предустановки».

Выберите «Создать новую предустановку из текущих стилей».

Дайте предустановке имя («Меню с правым интервалом с мобильной этикеткой») и сохраните предустановку.

# 4 - Меню с левым интервалом и мобильной этикеткой

Чтобы создать этот четвертый глобальный пресет меню, нам нужно будет обновить макет столбца строки с макетом 1/4 3/4. Это будет имитировать настраиваемый макет заголовка, который будет включать модуль меню слева и отдельное место для изображения логотипа (или CTA) в правом столбце.

Откройте настройки меню и обновите выравнивание текста для ссылок меню:

• Выравнивание текста: по левому краю

Затем нам нужно настроить метку мобильного меню так, чтобы она располагалась над навигацией по гамбургерам с левой стороны. А добавив «direction: rtl» на планшет, мы позаботимся о том, чтобы значки мобильных устройств выровнялись по левому краю и на мобильных устройствах.

На вкладке «Дополнительно» обновите следующий настраиваемый CSS:

Перед CSS (планшет):

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

Основной элемент (планшет):

direction:rtl;

Ссылка меню CSS:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Вот окончательный результат.

Окончательные результаты

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!