Ряды — это различные варианты расположения столбцов, которые можно разместить внутри разделов. Как и модули, строки имеют различные настройки, доступ к которым можно получить, щелкнув значок настроек в левом верхнем углу строки. В этом уроке мы рассмотрим некоторые функции и то, как их можно использовать для создания уникальных макетов. В частности, настройки линий можно использовать для значительного увеличения разнообразия макетов, созданных с помощью Divi Builder, потому что они создают структуру, в которой размещаются ваши модули.
Настройки контента
Цвет фона
Фоновые изображения можно применить ко всей строке. По умолчанию линии имеют прозрачный цвет фона.
Фоновое изображение
Фоновые изображения можно применить ко всей строке.
MP4 фоновое видео
. видео фон можно применять к линиям. Если вы хотите применить фоновое видео, вам необходимо загрузить видео в формате MP4 и WEBM и ввести видео здесь.
Веб фоновое видео
. видео фон можно применять к линиям. Если вы хотите применить фоновое видео, вам необходимо загрузить видео в формате MP4 и WEBM и ввести видео сюда.
Ширина фонового видео
После того, как ваши видео будут загружены, вам нужно указать ширину вашего видео здесь. Он должен быть равен фактической ширине видео, иначе положение фона будет неправильным.
Высота фонового видео
После того, как ваши видео будут загружены, вам нужно будет указать здесь высоту вашего видео. Он должен быть равен реальной высоте видео, иначе положение фона будет неправильным.
Видео пауза
Если вы хотите, чтобы видео останавливалось при нажатии, включите эту опцию.
Цвет фона столбца
Для каждого столбца в строке вы можете назначить уникальный цвет фона.
Фоновое изображение столбца
Каждому столбцу в строке можно назначить уникальное фоновое изображение.
Ярлык администратора
Это изменит метку модуля в генераторе для облегчения идентификации. При использовании представления WireFrame в Visual Builder эти метки будут отображаться в блоке модуля интерфейса. Divi Строитель.
Расчетные параметры
Используйте эффект параллакса
Если вы хотите использовать эффект параллакса для фонового изображения линии, вы можете включить его здесь, а затем выбрать нужный метод параллакса.
Эффект параллакса столбца
Здесь вы можете выбрать, следует ли использовать эффект параллакса для фонового изображения определенного столбца в строке.
Сделайте эту строку полной шириной
Если этот параметр включен, линия будет охватывать всю ширину окна браузера (аналогично разделу во всю ширину). Это отличный способ создать классные макеты столбцов во всю ширину.
Используйте пользовательскую ширину
Вы также можете присвоить линии произвольную ширину. Например, если вы хотите добавить вариации к фиду страницы и сделать одну строку больше остальных, вы можете ввести здесь произвольное значение ширины.
Используйте ширину желоба
Ширина желоба задает расстояние между колоннами. Существует 4 размера желоба, начиная с 0. определение установка ширины желоба на 1 приведет к отсутствию промежутков между столбцами. В сочетании с параметром «Полная ширина» это может создавать эффекты, аналогичные модулю «Полноэкранный режим портфолио».
Выровнять высоту столбца
Это отличный вариант, особенно полезный, когда вы применили цвета фона к отдельным столбцам. При включении этого параметра все столбцы в строке должны иметь одинаковое значение высоты.
Custom Padding
Если вы хотите настроить заливку линии, вы можете сделать это здесь.
Таможенная маржа
Если вы хотите отрегулировать край линии, вы можете сделать это здесь.
Пользовательская вставка столбцов
Если вы хотите настроить заполнение определенного столбца в строке, вы можете сделать это здесь.
Пользовательское поле столбца
Если вы хотите настроить поля определенного столбца в строке, вы можете сделать это здесь.
Расширенные настройки
CSS-идентификатор
Вы можете назначить строке CSS ID, если хотите указать ее в таблице стилей или с помощью якорных ссылок.
Класс CSS
Вы можете назначить CSS-класс для строки, если вы хотите использовать его в своей таблице стилей.
Идентификатор колонки CSS
Вы можете назначить CSS ID определенному столбцу в строке, если хотите указать его в таблице стилей или с помощью якорных ссылок.
Столбец класса CSS
Вы можете назначить класс CSS определенному столбцу в вашей строке, если вы хотите использовать его в своей таблице стилей.
Avant
CSS-запись здесь для применения: до основной строки div.
Основной элемент
CSS-запись здесь, чтобы применить к основной строке div.
После
CSS-запись здесь для применения: после основной строки div.
Передняя колонка
Введите CSS для применения: перед указанным столбцом div.
Элемент основного столбца
Введите CSS здесь, чтобы применить к указанному столбцу div.
Столбец после
Запись CSS здесь для применения: после указанного столбца div.
видимость
Эта опция позволяет вам управлять устройствами, на которых появляется ваш линейный модуль. Вы можете по отдельности деактивировать свой модуль на планшетах, смартфонах или настольных компьютерах. Это полезно, если вы хотите использовать разные моды на разных устройствах или если вы хотите упростить мобильный дизайн, удалив определенные элементы со страницы.
Практическое руководство
Теперь, когда мы рассмотрели все настройки, давайте протестируем несколько, чтобы показать вам, что возможно при творческом использовании каждой настройки. В этом примере я расскажу о настройке полноэкранной строки в качестве введения. Возможность создания строки «Во весь экран» - одна из самых универсальных опций набора. Это расширит ширину линии до края браузера, аналогично разделу Full Screen (или FullWidth). Однако, в отличие от раздела Fullwidth, строки FullWidth могут иметь структуру столбцов и могут содержать любой модуль! В приведенном ниже примере я создал строку из 4 столбцов и добавил квадратное изображение в каждый столбец. Затем я включил «Сделать эту линию полной шириной», чтобы расширить линию до краев окна браузера.
Затем я уменьшил размер «Промежуток» до «1», чтобы убрать интервал между столбцами в строке.
Наконец, я удалил заливку над и под линией, изменив верхнее и нижнее значения с параметром «Custom Fill» на «0».
Результатом является полное преобразование строки, превращающее нашу обычную строку из 4 столбцов изображений в полноразмерную галерею изображений без полей, которая выглядит потрясающе по сравнению с зеленой частью ниже. Такой же эффект можно создать с помощью настраиваемых цветов фона столбцов и текстовых модификаций. Возможности безграничны!
