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

Как добавить модуль Divi Full Screen Menu

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

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

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

Пример использования: добавление полноэкранного заголовка на страницу "О программе"

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

Все полноэкранные модули доступны только при использовании полноэкранных разделов. Используя Visual Builder, вставьте новый полноэкранный раздел. Затем добавьте в раздел модуль Person.

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

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

Заголовок: О нас Текст подзаголовка: Мы делаем разные вещи ... URL фонового изображения: [вставить изображение 1920 x 800] Цвет фона наложения: rgba (0,0,0,0.2 , XNUMX)

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

Ориентация текста и логотипа: Средняя кнопка Прокрутка вниз Кнопка: ДА Значок: [выберите значок] Значок прокрутки вниз Цвет: # fcbf00 Значок прокрутки: 50 пикселей Цвет текста: Светлый Цвет текста: # fcbf00 Шрифт Заголовок: Открыть без, полужирный, верхний регистр Размер шрифта заголовка: 60 ​​пикселей (рабочий стол), 40 пикселей (планшет), 30 пикселей (телефон) Размер шрифта субтитров: 25 пикселей

Расширенные настройки (пользовательский CSS)

Основной элемент:
обивка: 100px 0;

Вот так!

Параметры содержимого полноэкранного заголовка

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

Название

Введите название своей страницы здесь.

Текст субтитров

Если вы хотите использовать субтитры, добавьте их сюда. Ваша подпись появится под вашим заголовком мелким шрифтом.

Кнопка # 1 Text

Введите текст для кнопки.

Кнопка # 2 Text

Введите текст для кнопки.

Содержание

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

URL кнопки 1

Введите URL-адрес кнопки.

URL кнопки 2

Введите URL-адрес кнопки.

URL изображения логотипа

Загрузите желаемое изображение или введите URL-адрес изображения, которое хотите просмотреть.

URL изображения заголовка

Загрузите желаемое изображение или введите URL-адрес изображения, которое хотите просмотреть.

URL фонового изображения

Если установлено, это изображение будет использоваться в качестве фона для этого модуля. Чтобы удалить фоновое изображение, просто удалите URL-адрес из поля настроек. Фоновые изображения будут отображаться поверх цветов фона, что означает, что цвет фона не будет виден при применении фонового изображения.

Цвет фона

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

Фоновый цвет наложения

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

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

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

Варианты дизайна заголовка полной ширины

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

Ориентация текста и логотипа

Это контролирует, как ваш текст выравнивается в модуле.

Сделать полный экран

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

Используйте эффект параллакса

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

Метод параллакса

Определите метод, используемый для эффекта параллакса.

Показать кнопку прокрутки вниз

Здесь вы можете выбрать, будет ли отображаться кнопка прокрутки вниз.

значок

Выберите значок для отображения для кнопки прокрутки вниз.

Прокрутите вниз значок Цвет

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

Прокрутите вниз Размер значка

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

Выравнивание изображения по вертикали

Это контролирует ориентацию изображения в модуле.

Цвет текста

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

Вертикальное выравнивание текста

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

Название шрифта

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

Размер шрифта заголовка

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

Цвет текста заголовка

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

Интервал заглавных букв

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

Высота строки заголовка

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

Шрифт содержимого

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

Размер шрифта содержимого

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

Цвет текста контента

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

Промежуточные буквы содержимого

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

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

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

Шрифт субтитров

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

Размер шрифта субтитров

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

Цвет текста субтитров

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

Интервал букв субтитров

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

Высота линии субтитров

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

Максимальная ширина текста

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

Используйте пользовательские стили для кнопки

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

Размер текста кнопки

Этот параметр можно использовать для увеличения или уменьшения размера текста на кнопке. Кнопка адаптируется по мере увеличения и уменьшения размера текста.

Цвет текста кнопки

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

Цвет фона кнопки

По умолчанию кнопки имеют прозрачный цвет фона. Это можно изменить, выбрав желаемый цвет фона в палитре цветов.

Кнопка ширины границы

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

Цвет рамки кнопки

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

Рамка границы кнопки

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

Интервал букв кнопок

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

Шрифт кнопки

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

Добавить значок кнопки

Отключено, этот параметр удалит значки с вашей кнопки. По умолчанию все кнопки Divi отображают значок стрелки при наведении курсора.

Значок кнопки

Если значки включены, вы можете использовать этот параметр, чтобы выбрать, какой значок использовать на вашей кнопке. У Divi есть разные значки на выбор.

Кнопка со значком цвета

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

Кнопка размещения значков

Вы можете выбрать отображение значка вашей кнопки слева или справа от кнопки.

Показывать только значок при наведении курсора на кнопку

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

Цвет текста кнопки наведения

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

Цвет фона кнопки наведения (цвет кнопки наведения)

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

Кнопка Hover Border Color (цвет рамки наведения)

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

Наведите указатель поворота границы

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

Кнопка разметки заметок

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

Расширенные параметры заголовка полной ширины

На вкладке «Дополнительно» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты 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