Пропустить

Учебник Divi: как использовать полноэкранный модуль меню

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

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

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

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

модуль заголовка полной ширины divi.png

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

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

использовать divi builder

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

полное меню divi.png

Найдите модуль полноэкранного заголовка в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «полноэкранный заголовок» и затем нажать «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;

раздел divi module full screen.png

Вот так!

example header divi.jpg

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

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

раздел контента divi.png

Название

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

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

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

Кнопка # 1 Text

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

Кнопка # 2 Text

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

Содержание

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

URL кнопки 1

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

URL кнопки 2

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

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

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

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

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

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

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

Цвет фона

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

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

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

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

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

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

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

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

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

модуль дизайна секции полная ширина divi.png

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

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

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

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

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

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

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

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

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

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

значок

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

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

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

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

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

выравнивание divi модуля полная ширина в head.png

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

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

Цвет текста

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

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

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

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

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

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

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

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

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

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

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

название секция дизайн модуля в голове полный экран divi.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

модуль дизайна раздела divi head full width.png

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

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

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

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

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

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

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

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

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

По умолчанию все кнопки 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 вашей дочерней темы.

Заголовок модуля divi раздела advance.png

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

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

Класс CSS

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

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

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

видимость

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

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

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

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

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

Вверх