Пропустить

Как использовать навигационный модуль Full-Width Divi Builder

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Модуль меню полной ширины Divi позволяет разместить меню навигации в любом месте страницы. Это можно использовать для добавления меню второй страницы на страницу или вместе с функцией «Пустая страница», чтобы переместить основную навигацию в нижнюю часть страницы. Например, вы можете переместить свое меню под первым разделом, чтобы разместить людей с большим стартовым изображением. Это в основном позволяет перемещаться по странице с помощью конструктора для навигации по заголовку!

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

Прежде чем вы сможете добавить модуль меню полной ширины на свою страницу, вы должны сначала перейти в Divi Builder. Как только тема Divi будет установлена ​​на вашем веб-сайте, вы увидите кнопку Использовать Divi Builder над редактором сообщений всякий раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать кнопку Включить Visual Builder когда вы просматриваете свой веб-сайт на переднем плане, если вы подключены к своей панели управления WordPress.

Использование конструктора divi

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

меню полной ширины module.png

Найдите модуль полноразмерного меню в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «Fullwith menu» или «full-width menu» (в зависимости от вашей версии), а затем нажать Enter для автоматического поиска и добавления модуля полноэкранного меню ! После добавления модуля вы увидите список опций модуля. Эти параметры разделены на три основные группы: Содержание , Дизайн et Передовой .

Пример использования: добавление меню полной ширины под заголовком страницы

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

Вот пример:

пример меню fullwidth divi.jpg

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

Чтобы отредактировать шаблон страницы, перейдите в редактор своей страницы и выберите шаблон «пустая страница» в области Атрибуты страницы на правой боковой панели.

атрибут page.png

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

Пример меню wordpress.jpg

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

добавьте меню полной ширины ниже title.jpg

Обновите настройки меню Fullwidth следующим образом:

Параметры содержимого

Меню: [выберите меню, которое следует использовать в модуле] Контекст: # 333333

Варианты дизайна

Цвет текста: Светлый Ориентация текста: Центральный Шрифт меню: Roboto Menu Размер шрифта: 20 пикселей

Вот так!

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

меню результатов divi.jpg

Параметры содержимого меню «Полная ширина»

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

fullwidth-menu-section content.png

Меню

Выберите меню для использования в модуле. Вы можете создавать новые меню, используя страницу Появления> Меню из вашей панели управления WordPress. Каждый раз, когда вы создаете новое меню, его можно будет выбрать из этого раскрывающегося меню.

Цвет фона

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

Цвет фона раскрывающегося меню

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

Цвет фона мобильного меню

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

Ярлык администрации

Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.

Полноразмерные варианты меню меню

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

меню модуля дизайна раздела fullwidth.png

Открыть подменю

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

Сделать ссылки в меню полной ширины

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

Цвет строки выпадающего меню

В раскрывающихся меню ссылки разделяются линией в 1 пиксель. Если вы хотите настроить цвет этой строки, вы можете выбрать собственный цвет с помощью палитры цветов в этой настройке.

Цвет текста

Здесь вы можете выбрать значение вашего текста. Если вы работаете на темном фоне, ваш текст должен быть включен. Если вы работаете со светлым фоном, ваш текст должен быть темным.

Текстовая ориентация

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

Активный цвет ссылки

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

Цвет текста выпадающего меню

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

Цвет текста мобильного меню

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

Шрифт меню

Вы можете изменить шрифт шрифта вашего меню, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и параметры подчеркивания.

Меню размера шрифта

Здесь вы можете настроить размер шрифта вашего меню. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или напрямую ввести желаемое значение размера текста в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы.

Цвет текста меню

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

Расстояние между буквами меню

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

Высота строки меню

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

Расширенные опции полноэкранного меню

На вкладке «Дополнительно» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю пользовательские классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

расширенный раздел расширенного профиля меню divi.png

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

CSS-идентификатор

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

Класс CSS

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

Пользовательский CSS

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

Анимация выпадающего меню

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

видимость

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

Другие учебные пособия Divi

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
17 акции
доля10
чирикать3
Регистрация4