Divi: Сравнение различных типов градиентов

Вы хотите использовать Gradient Builder Divi но вы не знаете, какой тип градиента выбрать?

Типы градиентов являются частью нового Divi Построитель градиентов . Новые типы градиентов Divi позволяют добавлять различные формы и цвета к фону. 

В этой статье мы сравним эти типы градиентов и покажем, как использовать их для создания уникальных фонов!

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

Какие бывают типы градиента Divi?

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

• Линейный
• Circulaire
• эллиптический
• конический

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

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

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

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

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

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

В качестве примеров типа градиента мы используем раздел «Герой» на главной странице веб-сайта. бесплатный пакет макетов «постель и завтрак» доступны в Диви. В этом разделе уже есть градиент, но мы заменим его и поэкспериментируем. 

Мы можем либо удалить исходный фоновый градиент, либо изменить его. Результаты такие же. Для простоты изменим его.

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

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

Читайте также: Divi: как использовать смешивание узоров на фоновых изображениях

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

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

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

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

• Остановки градиента:
  • 0%: RGBA(92,158,82,0.76)
  • 97%: RGBA(0,10,4,0.76)

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

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

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

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

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

• Остановки градиента:
  • 13%: RGBA(18,76,41,0.76)
  • 13%: RGBA(92,158,82,0.76)
  • 34%: RGBA(18,76,41,0.76)

Затем установите Тип градиент на Линейный и установите Руководство более 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%.

• Остановки градиента:
  • 13%: RGBA(92,158,82,0.76)
  • 23%: RGBA(92,158,82,0.76)
  • 32%: RGBA(18,76,41,0.76)

Определите Тип градиент к линейному в a направление 209 градусов. Родился не повторяй и установитеединство в процентах. Поместите градиент над фоновым изображением.

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

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

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

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

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

Этот имеет 2 цвета. в премьер-министр rgba(92,158,82,0.76) в позиции 0%. в второй rgba(0,10,4,0.76) в позиции 62%.

• Остановки градиента:
  • 0%: RGBA(92,158,82,0.76)
  • 62%: RGBA(0,10,4,0.76)

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

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

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

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

Он имеет четыре цвета. Два цвета накладываются друг на друга. в премьер-министр 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.

• Остановки градиента:
  • 13%: RGBA(18,76,41,0.76)
  • 33%: RGBA(92,158,82,0.76)
  • 51%: RGBA(92,158,82,0.76)
  • 51%: RGBA(18,76,41,0.76)

Определите Тип градиент на Circular и поместите Руководство в левом верхнем углу. Убедитесь, что он не повторяй , изменить единство в процентах и ​​поместите его над фоновым изображением.

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

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

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

Этот также складывает два цвета в определенном порядке для достижения этого дизайна.  Премьера цвет rgba (18,76,41,0.76) в позиции 13%. цвет 2 rgba(18,76,41,0.76) в позиции 44%.  troisième цвет перекрывает второй цвет. Это rgba(92,158,82,0.76) в позиции 44%. цвет 4 rgba(92,158,82,0.76) в позиции 51%.

• Остановки градиента:
  • 13%: RGBA(18,76,41,0.76)
  • 44%: RGBA(18,76,41,0.76)
  • 44%: RGBA(92,158,82,0.76)
  • 51%: RGBA(92,158,82,0.76)

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

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

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

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

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

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

Этот имеет два цвета. в премьер-министр rgba(92,158,82,0.76) в позиции 0%. в второй rgba(0,10,4,0.76) в позиции 50%.

• Остановки градиента:
  • 0%: RGBA(92,158,82,0.76)
  • 50%: RGBA(0,10,4,0.76)

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

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

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

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

Он имеет два цвета. в премьер-министр rgba(92,158,82,0.76) на позиции 34pt. в второй это rgba (0,10,4,0.76) на позиции 39pt.

• Остановки градиента:
  • 34pt: rgba(92,158,82,0.76)
  • 39pt: rgba(0,10,4,0.76)

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

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

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

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

Этот имеет два цвета. в премьер-министр rgba(32,68,35,0.73) на позиции 34vmin. в второй rgba(0,10,4,0.76) на позиции 39vmin.

• Остановки градиента:
  • 34vmin: rgba(32, 68, 35, 0.73)
  • 39vmin: rgba(0,10,4,0.76)

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

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

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

Смотрите также: Divi: Как создать фоновые переходы между элементами

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

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

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

Он имеет два цвета. в премьер-министр rgba(92,158,82,0.76) в позиции 0%. в второй rgba(0,10,4,0.76) в позиции 50%.

• Остановки градиента:
  • 0%: RGBA(92,158,82,0.76)
  • 50%: RGBA(0,10,4,0.76)

Измени это тип градиента в коническом. Настроить направление более 221 градуса. Центр должность et не повторяй это . Поместите градиент над изображением.

• Тип градиента: конический
• Направление градиента: 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%.

• Остановки градиента:
  • 7%: RGBA(20,40,20,0.76)
  • 24%: RGBA(30,73,25,0.68)
  • 65%: RGBA(103,132,30,0.68)
  • 85%: RGBA(38,86,26,0.68)

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

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

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

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

Этот имеет два цвета. в премьер-министр это rgba (30,73,25,0.68) в позиции 5 градусов. в второй это rgba (20,40,20,0.76) в позиции 7 градусов.

• Остановки градиента:
  • 5 градусов: RGBA(30,73,25,0.68)
  • 7 градусов: RGBA(20,40,20,0.76)

Установить Тип градиента на коническом и Руководство при 221 град. Поместите должность выше. Повторить этот и поместите его над фоновым изображением.

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

Скачайте DIVI прямо сейчас!!!

Заключение

Это наш взгляд на сравнение типов градиентов в Gradient Builder от Divi. 

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

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

Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.

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

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...