Как использовать опцию повторения градиента Divi для создания пользовательских фоновых узоров

Параметры фона Divi предоставляют множество способов создания фоновых узоров. Вы даже можете создавать фоновые узоры, используя только градиенты. Опция Gradient Repeat делает это простым и легким. В этом посте мы увидим, как использовать параметр Divi Gradient Repeat для создания пользовательских фоновых узоров.

Давайте начнем.

Что такое градиентный повтор

Опция Gradient Repeat создает узор на основе точек градиента. Остановки градиента — это измерения, которые определяют, где цвета появляются и останавливаются в пределах градиента. Divi Gradient Builder использует эти остановки для создания шаблона.

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

Включить параметр повторения градиента

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

Прокрутите вниз до Фона . Выберите вкладку « Градиент фона » и нажмите « Добавить градиент фона » .

Под полосой остановки градиента находится параметр « Повторить градиент ». Это отключено по умолчанию. Просто щелкните по нему, чтобы включить его.

Градиент теперь будет повторяться, создавая шаблон на основе ваших остановок градиента и других ваших настроек градиента, таких как единица градиента.

Единицы градиента

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

В конструкторе фоновых градиентов Divi есть 15 единиц на выбор. Давайте рассмотрим на примере четыре самых популярных варианта. Как мы увидим в наших примерах, результат будет меняться в зависимости от количества остановок градиента и настроек. Я использую цвета из наших примеров и настроил их на повторение, чтобы их было легче увидеть. Я буду использовать три цвета с этими настройками:

• Цвет 1: #fff6ee (позиция 14%).
• Цвет 2: #ede3dc (позиция 46%).
• Цвет 3: #e8ded7 (позиция 82%).

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

• Тип: Линейный
• Направление: 214 градусов
• Повторить градиент: Да
• Единица измерения: процент
• Поместить градиент над фоновым изображением: Нет

Процентов

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

Пиксели

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

Высота области просмотра (vh)

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

Ширина области просмотра (vw)

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

Примеры градиентного повтора

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

Нам нужно внести одну корректировку в первый столбец раздела. Откройте настройки строки, щелкнув значок шестеренки.

Затем выберите значок шестеренки для первого столбца.

Колонка один градиент

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

• Цвет 1: #f4d5b8 (позиция 0px)
• Цвет 2: rgba (244 213 184,0) (позиция 100 пикселей)

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

• Тип: Линейный
• Направление: 180 градусов
• Повторить градиент: нет
• Единица измерения: процент
• Поместить градиент над фоновым изображением: Нет

Расстояние

Мы добавим интервал слева от столбца. Перейдите к настройкам дизайна , прокрутите вниз до Spacing и выберите значок планшета , чтобы открыть параметры устройства. Добавьте 5% отступа слева для вкладок рабочего стола и планшета. Выберите вкладку телефона и удалите левый отступ. Оставьте верхнюю и правую части с их текущими настройками.

• Верхнее заполнение: 180 пикселей
• Отступ слева: 5%
• Правый отступ: 80px

Пример первый

В нашем первом примере создается повторяющийся по диагонали узор с тонкими линиями.

У этого есть три остановки градиента. Первый цвет — #fff6ee, размещенный в позиции 4px. Второй — #ede3dc, размещенный в позиции 9px. Последним является #e8ded7, размещенный в позиции 14 пикселей. Это означает, что градиент останавливается на 14 пикселях, где начнется повторение. Остановки цвета расположены близко друг к другу, что делает рисунок небольшим.

• Цвет 1: #fff6ee (позиция 4 пикселя)
• Цвет 2: #ede3dc (позиция 9px)
• Цвет 3: #e8ded7 (позиция 14 пикселей)

Для настроек градиента измените тип градиента на линейный и установите его направление на 156 градусов. Включите повторяющийся градиент . Выберите Пиксели для Единиц .

• Тип: Линейный
• Направление: 156 градусов
• Повторить градиент: Да
• Единица измерения: пиксели
• Поместить градиент над фоновым изображением: Нет

Пример второй

Наш второй пример создает диагональный повторяющийся узор с более крупными линиями.

У этого есть три остановки градиента. Первый — это цвет #fff6ee, размещенный в позиции 4px. Наш второй цвет #ede3dc, размещенный в позиции 43px. Последним является #e8ded7, размещенный в позиции 50px. Этот градиент остановится на 50px и повторит узор.

• Цвет 1: #fff6ee (позиция 4 пикселя)
• Цвет 2: #ede3dc (позиция 43 пикселя)
• Цвет 3: #e8ded7 (позиция 50 пикселей)

Для настроек градиента выберите Linear для Type и установите Direction на 156deg. Включите Repeat Gradient и измените Unit на Pixels.

• Тип: Линейный
• Направление: 156 градусов
• Повторить градиент: Да
• Единица измерения: пиксели
• Поместить градиент над фоновым изображением: Нет

Пример третий

Наш третий пример создает повторяющийся круговой узор с кругами среднего размера.

У этого есть три остановки градиента. Первый цвет — #fff6ee, размещенный в позиции 4px. Цвет 2 — #e8ded7, размещенный в позиции 7px. Последний цвет #ede3dc, размещенный в позиции 8px. Этот градиент остановится на 8 пикселях, а другие цвета будут расположены близко друг к другу, создавая плотный узор.

• Цвет 1: #fff6ee (позиция 4 пикселя)
• Цвет 2: #e8ded7 (позиция 7px)
• Цвет 3: #ede3dc (позиция 8px)

Для настроек градиента измените Type на Circular и установите Direction на Bottom. Включите Repeat Gradient и измените Unit на Percent.

• Тип: Круглый
• Направление: снизу
• Повторить градиент: Да
• Единица измерения: процент
• Поместить градиент над фоновым изображением: Нет

Пример четвертый

Наш четвертый пример создает круговой узор с большими кругами.

У этого есть три остановки градиента. Первый — #fff6ee, размещенный в позиции 4px. Второй — #e8ded7, размещенный в позиции 23px. Третий — #ede3dc, размещенный на позиции 31px. Этот градиент создает более крупный узор с более отдаленными друг от друга цветами и останавливается на 31 пикселе.

• Цвет 1: #fff6ee (позиция 4 пикселя)
• Цвет 2: #e8ded7 (позиция 23 пикселя)
• Цвет 3: #ede3dc (позиция 31px)

Для настроек градиента измените Type на Circular и установите Direction на Center. Включите Repeat Gradient и измените Unit на Percent.

• Тип: Круглый
• Направление: Центр
• Повторить градиент: Да
• Единица измерения: процент
• Поместить градиент над фоновым изображением: Нет

Окончание мыслей

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

Ждем вашего ответа. Используете ли вы опцию повторения градиента Divi с вашими пользовательскими фонами? Дайте нам знать об этом в комментариях.