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

Хотите использовать конструктор градиентов 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 прямо сейчас!!!

Заключение

Это наш подход к сравнению типов градиентов в конструкторе градиентов Divi. 

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

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

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

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

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

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

...