Строки Divi и их параметры

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

Настройки контента

Фоновый цвет

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

Фоновая картинка

Фоновые изображения могут быть применены ко всей строке.

Фоновое видео MP4

К строкам можно применить фоновые видео. Если вы хотите применить фоновое видео, вы должны загрузить видео в формате MP4 и WEBM или ввести URL видео.

Ширина фонового видео

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

Высота фонового видео

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

Приостановить видео

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

Цвет фона столбца

Для каждого столбца в строке вы можете назначить уникальный цвет фона.

Фоновое изображение столбца

Для каждого столбца в строке вы можете назначить уникальное фоновое изображение.

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

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

Дизайн

Использовать пользовательскую ширину желоба

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

Ширина расстояния между столбцами сайта

Ширина расстояния регулирует расстояние между столбцами. Существует 4 размера: от 1 до 4. Установка ширины промежутка на 1 приведет к отсутствию промежутка между столбцами. В сочетании с опцией Полноэкранная секция это может создавать эффекты, аналогичные модулю Полноэкранное портфолио.

Выровнять высоту столбца

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

Максимальная ширина (%)

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

Максимальная ширина (px)

Установка ширины предотвратит превышение элементом заданной ширины. Может использоваться в сочетании со стандартной настройкой ширины.

Выравнивание

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

Мин высота

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

Высота

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

Максимальная высота

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

Расстояние > Поле

Добавляет пространство снаружи элемента, увеличивая расстояние между элементом и другими элементами на странице.

Расстояние > Внутренний отступ

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

Рамка

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

Box Shadow (Тень)

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

Фильтр

Примените различные фильтры (яркость, оттенок, насыщенность и т.д.) к вашим элементам.

Преобразование

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

Анимация

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

Расширенные опции

ID и класс CSS > CSS ID

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

ID и класс CSS > КЛАСС CSS

Вы можете назначить CSS-класс для строки, если хотите, чтобы он был нацелен на вашу таблицу стилей.

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

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

Видимость

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

Давайте проведем тест-драйв некоторых настроек

Теперь, когда мы рассмотрели все настройки, давайте протестируем несколько, чтобы показать, что возможно при творческом использовании каждой настройки. В этом примере я коснусь настройки Максимальной ширины в качестве введения. Возможность сделать строку полноширинной — одна из самых универсальных опций в наборе. Это расширит ширину строки до края браузера, как в разделе с полной шириной. Однако, в отличие от секции полной ширины, строки полной ширины могут иметь структуру столбцов, и в них можно разместить любой модуль! В приведенном ниже примере я создал строку из 4 столбцов и добавил квадратное изображение в каждый столбец. Затем я включил Максимальную ширину на 100 процентов и 2560 px, чтобы расширить строку до краев окна браузера.

Затем я уменьшил размер «Ширина расстояния между столбцами сайта» до «1», чтобы убрать интервал между столбцами в строке.

Наконец, я удалил отступы над и под строкой, изменив верхнее и нижнее значения расстояний на «0».

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