Сравнение типов градиентов в конструкторе градиентов Divi

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

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

Что такое типы градиента Divi?

Новый Gradient Builder от Divi добавляет несколько новых функций градиента, которые включают типы градиентов. На выбор предлагается четыре типа градиента:

• Линейный
• Циркуляр
• Эллиптический
• Конический

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

На типы градиента также влияют другие элементы управления, такие как положение, независимо от того, повторяется он или нет, единица измерения для ползунка градиента и размещение градиента над фоном.

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

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

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

В качестве примеров градиентного типа я использую раздел героя с целевой страницы бесплатного пакета макетов «постель и завтрак», который доступен в Divi. В этом разделе уже есть градиент, но мы заменим его и поэкспериментируем. Мы можем либо удалить исходный фоновый градиент, либо изменить его. Результаты такие же. Для простоты я его изменю.

Я настроил текст заголовка, изменив его с черного на белый.

Тип линейного градиента

Линейные градиенты отображают градиент так, как если бы они были распределены по странице.

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

Вот посмотрите на наш первый пример. Он отображает более светлый цвет слева на экране и более темный цвет справа с плавным переходом между ними.

Чтобы создать этот пример, добавьте два цвета. Первый — это rgba(92,158,82,0,76) в позиции 0%. Второй — rgba(0,10,4,0,76) в позиции 97%.

• Цвет 1: rgba(92,158,82,0,76) (в позиции 0%)
• Цвет 2: rgba(0,10,4,0,76) (в положении 97%)

Затем измените тип градиента на линейный и установите направление на 131 градус. Пусть это не повторится . Установите единицу измерения в процентах. Поместите градиент над фоновым изображением.

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

Пример второго линейного градиента

Вот посмотрите на второй пример линейного градиента. Он работает так же, как и первый, но имеет жесткую остановку слева, где преобладает более темный оттенок.

Чтобы создать его, добавьте три точки градиента. Первый — rgba(18,76,41,0,76) в позиции 13%. Второй — rgba(92,158,82,0,76) на позиции 13%. Цвет 3 — это rgba (18,76,41,0,76) в позиции 34%.

• Цвет 1: rgba(18,76,41,0,76) (в позиции 13%)
• Цвет 2: rgba(92,158,82,0,76) (в позиции 13%)
• Цвет 3: rgba(18,76,41,0,76) (в позиции 34%)

Затем установите тип градиента на линейный и установите направление на 90 градусов. Пусть это не повторится . Измените единицу измерения на процент. Поместите его над фоновым изображением.

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

Третий пример линейного градиента

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

Этот имеет три цвета. Цвет 1 — это rgba (92 158, 82, 0,76) в позиции 13%. Цвет 2 — rgba(92,158,82,0,76) в позиции 23%. Третий цвет — rgba (18,76,41,0,76) в позиции 32%.

• Цвет 1: rgba(92,158,82,0,76) (в позиции 13%)
• Цвет 2: rgba(92,158,82,0,76) (в позиции 23%)
• Цвет 3: rgba(18,76,41,0,76) (в позиции 32%)

Установите тип градиента на линейный в направлении 209 градусов. Не допускайте повторения и установите единицу измерения на процент. Поместите градиент над фоновым изображением.

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

Тип кругового градиента

Круговой тип градиента создает круг с цветами.

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

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

Этот имеет 2 цвета. Первый — это rgba(92,158,82,0,76) в позиции 0%. Второй — rgba(0,10,4,0,76) в позиции 62%.

• Цвет 1: rgba(92,158,82,0,76) (в позиции 0%)
• Цвет 2: rgba(0,10,4,0,76) (в позиции 62%)

Установите Тип градиента на Круговой. Центрировать направление . Чтобы он не повторялся , измените единицу измерения на процент и поместите его над фоновым изображением.

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

Пример второго кругового градиента

Этот градиент размещает четкую круглую кромку в центре экрана.

Он имеет четыре цвета. Два цвета сложены. Первый — rgba(18,76,41,0,76) в позиции 13%. Второй — rgba(92,158,82,0,76) на позиции 33%. Цвет 3 — rgba(92,158,82,0,76) в позиции 51%. Цвет 4 — rgba (18,76,41,0,76). Он находится на позиции 51% над цветом 3.

• Цвет 1: rgba(18,76,41,0,76) (в позиции 13%)
• Цвет 2: rgba(92,158,82,0,76) (в позиции 33%)
• Цвет 3: rgba(92,158,82,0,76) (на позиции 51%)
• Цвет 4: rgba(18,76,41,0,76) (в позиции 51%)

Установите Тип градиента на Круговой и поместите Направление вверху слева. Чтобы он не повторялся , измените единицу измерения на процент и поместите его над фоновым изображением.

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

Пример третьего кругового градиента

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

Этот также складывает два цвета в определенном порядке, чтобы получить этот дизайн. Первый цвет — rgba(18,76,41,0,76) в позиции 13%. Цвет 2 — rgba (18,76,41,0,76) в позиции 44%. Третий цвет накладывается поверх второго цвета. Это rgba(92,158,82,0,76) на позиции 44%. Цвет 4 — rgba(92,158,82,0,76) в позиции 51%.

• Цвет 1: rgba(18,76,41,0,76) (в позиции 13%)
• Цвет 2: rgba(18,76,41,0,76) (в позиции 44%)
• Цвет 3: rgba(92,158,82,0,76) (в позиции 44%)
• Цвет 4: rgba(92,158,82,0,76) (на позиции 51%)

Измените тип градиента на круговой. Поместите Направление внизу. Имейте это, чтобы повторить . Установите Unit на Percent и поместите градиент над фоновым изображением.

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

Эллиптический тип градиента

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

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

Наш первый эллиптический пример помещает эллипс светлого цвета в центр экрана с более темным цветом вокруг него.

Этот имеет два цвета. Первый — это rgba(92,158,82,0,76) в позиции 0%. Второй — rgba(0,10,4,0,76) в позиции 50%.

• Цвет 1: rgba(92,158,82,0,76) (в позиции 0%)
• Цвет 2: rgba(0,10,4,0,76) (в позиции 50%)

Измените тип градиента на эллиптический. Установите направление на центр. Не повторяйте это, установите Unit на Percent и поместите его над фоновым изображением.

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

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

Наш второй пример размещает множество тонких круглых линий по всему градиенту.

Он имеет два цвета. Первый — rgba(92,158,82,0,76) на позиции 34pt. Второй — rgba(0,10,4,0,76) на позиции 39pt.

• Цвет 1: rgba(92,158,82,0,76) (на позиции 34pt)
• Цвет 2: rgba(0,10,4,0,76) (на позиции 39pt)

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

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

Третий пример эллиптического градиента

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

Этот имеет два цвета. Первый — rgba(32,68,35,0,73) на позиции 34vmin. Второй — rgba(0,10,4,0,76) на позиции 39vmin.

• Цвет 1: rgba(32,68,35,0,73) (в позиции 34vmin)
• Цвет 2: rgba(0,10,4,0,76) (в позиции 39vmin)

Измените тип градиента на эллиптический и установите направление на верх. Пусть это повторится . Измените Unit на Viewport Minimum. Поместите его над фоновым изображением.

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

Конический тип градиента

Конический тип градиента отображает градиент в форме конуса, как будто конус виден сверху.

Первый пример конического градиента

В этом примере диагональная линия размещается от центра градиента влево со светлым цветом с одной стороны и темным цветом с другой.

Он имеет два цвета. Первый — это rgba(92,158,82,0,76) в позиции 0%. Второй — rgba(0,10,4,0,76) в позиции 50%.

• Цвет 1: rgba(92,158,82,0,76) (в позиции 0%)
• Цвет 2: rgba(0,10,4,0,76) (в положении 50%)

Измените тип градиента на конический. Установите направление на 221 градус. Сосредоточьте позицию и не повторяйте ее. Поместите градиент над изображением.

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

Пример второго конического градиента

Этот пример похож на предыдущий, но в нем линия располагается от центра вверх.

Этот имеет четыре цвета. Первый — rgba(20,40,20,0,76) в позиции 7%. Цвет 2 — rgba (30,73,25,0,68) в позиции 24%. Цвет 3 — rgba(103,132,30,0,68) в позиции 65%. Четвертый цвет — rgba(38,86,26,0,68) в позиции 85%.

• Цвет 1: rgba(20,40,20,0,76) (в позиции 7%)
• Цвет 2: rgba(30,73,25,0,68) (в позиции 24%)
• Цвет 3: rgba(103,132,30,0,68) (в положении 65%)
• Цвет 4: rgba(38,86,26,0,68) (в позиции 85%)

Установите тип градиента на конический и направление на 0 градусов. Центрировать позицию . Не повторяйте его и поместите над изображением.

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

Третий пример конического градиента

Наш последний пример помещает всплеск линий от верхнего центра градиента наружу во всех направлениях.

Этот имеет два цвета. Первый — rgba(30,73,25,0,68) в позиции 5 градусов. Второй - rgba (20,40,20,0,76) в позиции 7 градусов.

• Цвет 1: rgba(30,73,25,0,68) (в позиции 5 градусов)
• Цвет 2: rgba(20,40,20,0,76) (в позиции 7 градусов)

Установите eth Gradient Type на Conical и Direction на 221deg. Поместите позицию вверху. Повторите это и поместите над фоновым изображением.

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

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

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

Ждем вашего ответа. Использовали ли вы различные типы градиентов в Divi Gradient Builder? Сообщите нам о своем опыте в комментариях.