Модуль меню полной ширины Divi позволяет разместить меню навигации в любом месте страницы. Это можно использовать для добавления меню второй страницы на страницу или вместе с функцией «Пустая страница», чтобы переместить основную навигацию в нижнюю часть страницы. Например, вы можете переместить свое меню под первым разделом, чтобы разместить людей с большим стартовым изображением. Это в основном позволяет перемещаться по странице с помощью конструктора для навигации по заголовку!
Как добавить модуль полноэкранного меню на свою страницу
Прежде чем вы сможете добавить полноразмерный модуль меню на свою страницу, вы должны сначала перейти в Divi Builder. Однажды Диви тема установлен на вашем Веб-сайт, вы заметите кнопку Использовать Divi Builder над редактором сообщений всякий раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать кнопку Включить Visual Builder когда вы просматриваете свой Веб-сайт на переднем плане, если вы вошли в панель управления WordPress.
После входа в Visual Builder вы можете нажать серую кнопку «плюс», чтобы добавить новый модуль на свою страницу. Новые полноразмерные модули могут быть добавлены только внутри полноразмерных разделов. Если вы начинаете новую страницу, не забудьте сначала добавить на свою страницу полноразмерный раздел. У нас есть несколько отличных руководств по использованию элементов раздела Divi.
Найдите модуль полноразмерного меню в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «Fullwith menu» или «full-width menu» (в зависимости от вашей версии), а затем нажать Enter для автоматического поиска и добавления модуля полноэкранного меню ! После добавления модуля вы увидите список опций модуля. Эти параметры разделены на три основные группы: Содержание , Дизайн et Передовой .
Пример использования: добавление меню полной ширины под заголовком страницы
В этом примере я покажу вам, как добавить полноразмерное меню под заголовком страницы.
Вот пример:
Поскольку это новое полностраничное меню заменит главное меню навигации по умолчанию, необходимо выбрать шаблон пустой страницы, чтобы меню навигации по умолчанию не отображалось вверху страницы в дополнение к меню полной ширины. что я добавлю.
Чтобы отредактировать шаблон страницы, перейдите в редактор своей страницы и выберите шаблон «пустая страница» в области Атрибуты страницы на правой боковой панели.
Поскольку этот модуль будет отображать меню, которое уже существует, важно, чтобы вы уже создали меню, прежде чем добавлять его в модуль меню полной ширины.
После того, как вы создали свое меню, используйте визуальный конструктор, чтобы добавить раздел полной ширины чуть ниже раздела заголовка страницы. Затем добавьте в раздел полноразмерный модуль меню.
Обновите настройки меню Fullwidth следующим образом:
Параметры содержимого
Меню: [выберите меню, которое следует использовать в модуле] Контекст: # 333333
Варианты дизайна
Цвет текста: Светлый Ориентация текста: Центральный Шрифт меню: Roboto Menu Размер шрифта: 20 пикселей
Вот так!
Трюк : Вы можете использовать параметры просмотра на вкладке «Дополнительно», чтобы скрыть это меню на мобильном устройстве и отобразить другое меню над заголовком, чтобы пользователи мобильных устройств могли видеть меню, не прокручивая страницу вниз. .
Параметры содержимого меню «Полная ширина»
На вкладке «Содержимое» вы найдете все элементы содержимого модуля, такие как текст, изображения и значки. Все, что контролирует какие появляется в вашем модуле, всегда будет найден в этой вкладке.
Меню
Выберите меню для использования в модуле. Вы можете создавать новые меню, используя страницу Появления> Меню из вашей панели управления WordPress. Каждый раз, когда вы создаете новое меню, его можно будет выбрать из этого раскрывающегося меню.
Цвет фона
По умолчанию модуль меню имеет белый цвет фона. Если вы хотите использовать другой цвет для фона вашего меню, вы можете выбрать его здесь с помощью палитры цветов.
Цвет фона раскрывающегося меню
По умолчанию раскрывающиеся меню в модуле меню наследуют цвет фона, определенный в предыдущем параметре. Если вы хотите, чтобы раскрывающиеся меню имели собственный цвет, вы можете выбрать собственный цвет, используя этот параметр.
Цвет фона мобильного меню
На мобильных устройствах модуль меню преобразован в другой дизайн и больше адаптирован для мобильных устройств. Вы можете управлять цветом фона раскрывающегося меню мобильного устройства независимо от его аналога на рабочем столе.
Ярлык администрации
Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.
Полноразмерные варианты меню меню
На вкладке «Дизайн» вы найдете все параметры стиля модуля, такие как шрифты, цвета, размер и интервал. Это вкладка, которую вы будете использовать для изменения внешнего вида вашего модуля. Каждый модуль Divi имеет длинный список настроек дизайна, которые вы можете использовать, чтобы изменить что угодно.
Открыть подменю
По умолчанию все подменю открываются в виде раскрывающегося меню под строкой главного меню. Если вы разместите свое меню в нижней части страницы, и ваше меню имеет длинные раскрывающиеся меню, вы можете открыть эти меню над модулем меню, чтобы меню не выходило за пределы окна браузера.
Сделать ссылки в меню полной ширины
По умолчанию ссылки верхнего уровня с модулем меню размещаются в пределах ширины вашего содержимого по умолчанию. Если вы хотите снять это ограничение и разместить ссылки на всю ширину страницы, начиная с крайней левой части экрана, вы можете включить эту опцию.
Цвет строки выпадающего меню
В раскрывающихся меню ссылки разделяются линией в 1 пиксель. Если вы хотите настроить цвет этой строки, вы можете выбрать собственный цвет с помощью палитры цветов в этой настройке.
Цвет текста
Здесь вы можете выбрать значение вашего текста. Если вы работаете на темном фоне, ваш текст должен быть включен. Если вы работаете со светлым фоном, ваш текст должен быть темным.
Текстовая ориентация
Это контролирует выравнивание текста в модуле. Вы можете выбирать между левым, правым и центральным.
Активный цвет ссылки
Цвета активных ссылок выделены в модуле меню, чтобы показать пользователю их текущее местоположение. Вы можете изменить цвет выделения, используемый для этих активных ссылок, используя этот параметр.
Цвет текста выпадающего меню
По умолчанию текст в раскрывающихся меню модуля наследует цвет текста главного меню. Однако вы можете изменить этот цвет, если вы определили собственный цвет фона раскрывающегося меню.
Цвет текста мобильного меню
По умолчанию текст в раскрывающихся меню модуля наследует цвет текста главного меню. Однако вы можете изменить этот цвет, если вы установили собственный цвет фона мобильного меню.
Шрифт меню
Вы можете изменить шрифт шрифта вашего меню, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и параметры подчеркивания.
Меню размера шрифта
Здесь вы можете настроить размер шрифта вашего меню. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или напрямую ввести желаемое значение размера текста в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы.
Цвет текста меню
По умолчанию все цвета текста в Divi отображаются в белом или темно-сером цвете. Если вы хотите изменить цвет цифрового текста, выберите нужный цвет в палитре цветов с помощью этой опции.
Расстояние между буквами меню
Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить расстояние между каждой буквой в числовом тексте, используйте ползунок диапазона, чтобы отрегулировать интервал, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.
Высота строки меню
Высота строки влияет на расстояние между каждой строкой числового текста. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода. расположен справа от курсора. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.
Расширенные опции полноэкранного меню
На вкладке «Дополнительно» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю пользовательские классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.
CSS-идентификатор
Введите необязательный идентификатор CSS, который будет использоваться для этого модуля. Идентификатор можно использовать для создания собственного стиля CSS или для ссылки на определенные разделы вашей страницы.
Класс CSS
Введите дополнительные классы CSS, которые будут использоваться для этого модуля. Класс CSS можно использовать для создания собственного стиля CSS. Вы можете добавить несколько классов, разделенных пробелом. Эти классы можно использовать в дочерней теме Divi или в пользовательской таблице стилей CSS, которую вы добавляете на свою страницу или веб-сайт. Веб-сайт используя параметры темы Divi или настройки страницы Divi Builder.
Пользовательский CSS
Пользовательский CSS также может быть применен к модулю и к любому внутреннему устройству модуля. В разделе «Пользовательский CSS» вы найдете текстовое поле, в котором вы можете добавить пользовательские таблицы стилей CSS непосредственно к каждому элементу. Записи CSS в этих настройках уже заключены в теги стилей. Так что просто введите правила CSS через точку с запятой.
Анимация выпадающего меню
Когда раскрывающееся меню включено, вы можете выбирать между различными анимациями. По умолчанию для анимации установлено постепенное исчезновение, но вы можете изменить это на: развернуть, перетащить или перевернуть.
видимость
Эта опция позволяет вам контролировать устройства, на которых появляется ваш модуль. Вы можете по отдельности деактивировать свой модуль на планшетах, смартфонах или настольных компьютерах. Это полезно, если вы хотите использовать разные моды на разных устройствах или если вы хотите упростить мобильный дизайн, удалив определенные элементы со страницы.
[vc_row center_row="yes"][vc_column width="1/2"][vcex_button target="blank" layout="expanded" align="center" font_family="Raleway" font_weight="700" style="flat" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]
Другие учебные пособия Divi
- сайты 5 для использования ресторана Divi темы
- Как добавить текст в продукт Divi WooCommerce
- Как изменить цвет меню между страницами Divi
- Как персонализировать сетки блога с Divi
- Как использовать роль DiVi редактор на WordPress
- Как создать полноэкранный слайдер Divi
- Как изменить цвет меню между страницами Divi
- Особенности, которые вы, вероятно, не знаете о Divi
- Как использовать Divi Builder в WordPress
- Как использовать модуль прокрутки видео Divi
- Как использовать модуль Flip Builder Flip
- Как добавить отзыв модуль на Divi Builder
- Как использовать текстовый модуль Divi
- Как создать слайдер на Divi
- Как редактировать роль пользователя Divi
- Как использовать модуль Divi Social Media
- Как пользоваться магазинным модулем на тему WordPress Divi
- Как использовать боковую панель Divi
- Как использовать модуль таблицы цен Divi
- Как использовать титульный модуль изданий Divi
- Как добавить видео модуль Divi
- Как использовать навигационный модуль статьи
- Как использовать модуль поиска Divi
- Как использовать модуль кошелька Divi
- Как использовать модуль пользователя в Divi Builder
- Как использовать модуль кошелька с фильтром Divi
- Как использовать ползунок полной ширины
- Как использовать модуль изображения Divi Builder
- Как использовать полноразмерный навигационный модуль Divi Builder
- Как использовать модуль галереи изображений
- Как использовать модуль карты полной ширины Divi Builder
- Как использовать модуль Divi Full Width Portfolio
- Как использовать полноразмерный заголовочный модуль Divi
- Как использовать Divi Counter Module
- Как использовать слайдер статей в Divi Builder
- Как использовать модуль Divi Email Optin