Вы хотите создать пользовательские фоновые узоры, используя параметр Gradient Repeat в Divi ?
Варианты фона Divi предлагают множество способов создания фоновых узоров. Вы даже можете создавать фоновые узоры, используя только градиенты. Опция Gradient Repeat делает это простым и легким.
В этой статье мы увидим, как использовать опцию «Повтор градиента» Divi для создания собственных фоновых рисунков.
Давайте начнем.
Смотрите также: Divi: Как создать контактную форму, которая появляется после нажатия на кнопку
Что такое градиентный повтор
Опция Gradient Repeat создает узор на основе точек градиента. Остановки градиента — это измерения, которые определяют, где цвета появляются и останавливаются в градиенте. Divi и его Gradient Builder используют эти остановки для создания узора.
Последний цвет сообщает градиенту, где находится точка останова в градиенте. Вы можете иметь столько цветов, сколько хотите, до этой точки останова.
Le Построитель градиентов затем повторит это, чтобы заполнить экран, который создает шаблон. Опцию можно добавить в любой раздел, строку, столбец или модуль, и их можно использовать вместе.
Активируйте опцию «Градиент фона».
Чтобы активировать опцию Градиентное повторение, откройте настройки раздела, щелкнув значок шестеренки. Он также работает со строками, столбцами и модули.
Прокрутите до проверка данных . Выберите вкладку Градиентный фон и нажмите Добавить фоновый градиент.
Под полосой остановки градиента находится параметр, называемый Градиентное повторение . Это отключено по умолчанию. Просто нажмите на нее, чтобы активировать.
Теперь градиент будет повторяться, создавая шаблон на основе ваших остановок градиента и других ваших настроек градиента, таких как единица градиента.
Единицы градиента
Единица градиента является единицей измерения. Это указывает, что обозначают номера остановок градиента на полосе градиента, что определяет способ измерения остановок градиента. Это влияет на шаблон, созданный опцией повтора.
Генератор фонового градиента Divi предлагает 15 единиц. Давайте рассмотрим на примере четыре самых популярных варианта. Как мы увидим в наших примерах, результат будет меняться в зависимости от вашего количества остановок градиента и ваших настроек.
Процент (процент)
Процент измеряет остановки градиента в процентах. Это вычисляет точки градиента на основе родительского элемента. Чем меньше последний градиентный стежок, тем плотнее создается узор. При настройке положения одного из цветов этот цвет перемещается, а остальные остаются на месте.
Пиксели (пикс.)
Пиксели измеряют количество пикселей для каждой остановки градиента. Это дает градиенту меньший шаблон, чем большинство других типов единиц. Перемещение положения первого или последнего цвета изменяет положение каждого цвета.
Высота окна (вх)
Область просмотра — это видимая часть окна браузера. Измеряется по высоте и ширине отдельно. Высота окна использует ограничители градиента для измерения процента высоты размера окна. Настройка положения первого или последнего цвета влияет на все цвета.
Ширина окна (vw)
Ширина окна использует остановки градиента для измерения процентной доли ширины окна (или ширины браузера). Регулировки меняются в зависимости от ширины. Когда вы увеличиваете или уменьшаете число, этот конкретный цвет меняет положение, в то время как другие остаются прежними.
Примеры использования опции «Градиентный повтор»
Читайте также: Divi: как создать планшет с прокручиваемым тизерным контентом
В наших примерах мы используем раздел «Призыв к действию» на главной странице веб-сайта. бесплатный пакет макетов акупунктуры доступны в Диви.
Нам нужно будет внести коррективы в первый столбец раздела. Откройте их параметры линии нажав на значок шестеренки.
Затем выберите значок передач для первого столбца.
столбец один градиент
Первый столбец имеет собственный фоновый градиент. Это часть макета. Мы не изменим этого. Мы будем использовать этот же градиент в наших четырех примерах. Вот настройки на случай, если они вам понадобятся.
- Остановки градиента:
- 0px: #f4d5b8
- 100 пикселей: RGBA (244,213,184,0 XNUMX XNUMX)
Настройки градиента
- Тип градиента: Линейный
- Положение градиента: 180 градусов
- Повторить градиент: НЕТ
- Единица градиента: процент
- Квадратный градиент над фоновым изображением: НЕТ
расстояние
Мы добавим интервал слева от столбца. Доступ к вкладке Проект, прокрутите до Расстояние и выберите значок планшета чтобы открыть параметры устройства.
Добавьте 5% левого отступа для вкладок рабочего стола и планшета. Выберите вкладку телефона и удалите левый отступ. Оставьте Top и Right с их текущими настройками.
- Набивка
- Верх: 180 пикселей
- Слева: 5%
- Слева: 80 пикселей
пример один
В нашем первом примере создается диагональный повторяющийся узор с тонкими линиями.
У этого есть три остановки градиента.
- Остановки градиента:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Используйте следующие настройки.
- Тип градиента: Линейный
- Направление градиента: 156 градусов
- Повторить градиент: ДА
- Единица градиента: пиксели
- Квадратный градиент над фоновым изображением: Нет
Второй пример
Наш второй пример создает диагональный повторяющийся узор с более крупными линиями.
У этого есть три остановки градиента.
- Остановки градиента:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
Для настроек градиента,
- Тип градиента: Линейный
- Направление градиента: 156 градусов
- Повторить градиент: ДА
- Единица градиента: пиксели
- Квадратный градиент над фоновым изображением: НЕТ
Пример третий
Наш третий пример создает повторяющийся круговой узор с кругами среднего размера.
У этого есть три остановки градиента.
- Остановки градиента
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Примените следующие настройки градиента
- Тип градиента: круговой
- Положение градиента: снизу
- Повторить градиент: ДА
- Единица градиента: процент
- Квадратный градиент над фоновым изображением: НЕТ
Пример 4
Наш четвертый пример создает круговой узор с большими кругами.
У этого есть три остановки градиента.
- Остановки градиента:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
Для настроек градиента измените следующим образом:
- Тип градиента: круговой
- Положение градиента: Центр
- Повторить градиент: ДА
- Единица градиента: процент
- Квадратный градиент над фоновым изображением: Нет
Скачайте DIVI прямо сейчас!!!
Заключение
Это наш взгляд на то, как использовать опцию для Градиентное повторение от Divi для создания пользовательских фонов. Многие корректировки в настройках градиента влияют на дизайн градиента.
Gradient Repeat хорошо работает со всеми этими настройками, позволяя легко создавать интересные пользовательские фоновые узоры.
Мы рекомендуем попробовать приведенные здесь примеры и внести изменения, чтобы увидеть, как это влияет на градиенты, и создать свои собственные настраиваемые фоновые градиенты.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
