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

Искате ли да използвате Gradient Builder на Divi но не знаете кой тип градиент да изберете?

Типовете градиенти са част от новото Divi Конструктор на градиенти . Нови видове градиенти Divi ви позволяват да добавяте различни форми и цветове към вашия фон. 

В тази статия ще сравним тези типове градиенти и ще ви покажем как да ги използвате, за да създадете уникални фонове!

Нека да започнем.

Какви са типовете градиенти Divi?

Новият Gradient Builder на Divi добавя няколко нови градиентни функции, които включват типове градиенти. Има четири вида градиенти, от които да избирате:

• Линейна
• Circulaire
• Елипсовидна
• Конична

Всеки от типовете показва градиента по различен начин. Те се използват за оформяне на градиента, който да бъде показан като линеен цветен модел, в кръг, елипса или конус. Ще ги разгледаме подробно в нашите примери.

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

Всяка корекция може да има малко или огромно влияние върху градиента. Градиентът може да бъде фин или да се откроява. Малки или големи промени могат да бъдат направени само с една корекция.

Имайки това предвид, нека да разгледаме някои примери за градиенти, използващи всеки от типовете градиенти. Ще покажем три примера за всеки тип градиент. 

Първият ще бъде стандартен тип градиент, който ще видите в мрежата. Следващите две ще бъдат малко по-експериментални, само за да видите какво можете да направите с типовете градиенти.

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

За примери за градиентен тип използваме секцията Hero на началната страница на безплатен пакет с оформление за нощувка и закуска налични в Divi. Този раздел вече има градиент, но ще го заменим и ще експериментираме. 

Можем или да премахнем оригиналния фонов градиент, или да го променим. Резултатите са същите. За по-лесно ще го променим.

Персонализирахме текста на заглавието, като го променихме от черен на бял.

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

Прочетете още: 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%. The трети цвят е 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)

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

• Тип градиент: кръгъл
• Позиция на градиента: Център
• Повторение на градиента: НЕ
• Градиентна единица: процент
• Квадратен градиент над фоновото изображение: ДА

Втори пример за тип кръгъл градиент

Този градиент поставя ясен кръгъл ръб в центъра на екрана.

Има четири цвята. Два цвята са насложени. на премиер е 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 и поставете Посока в горния ляв ъгъл. Уверете се, че той не повтаряй , променете единство като процент и го поставете над фоновото изображение.

• Тип градиент: кръгъл
• Позиция на градиента: горе вляво
• Повторение на градиента: НЕ
• Градиентна единица: процент
• Квадратен градиент над фоновото изображение: ДА

Трети пример за тип кръгъл градиент

Този пример поставя няколко светли кръга в най-тъмния цвят, започвайки от средата на кръга.

Този също подрежда два цвята в определен ред, за да постигне този дизайн. The премиера цветът е rgba(18,76,41,0.76) на позиция 13%. цвят 2 е rgba(18,76,41,0.76) на позиция 44%. The 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)

смени го градиентен тип в кръг. Поставете посока надолу. повторение този. Нагласиединство на Percentage и поставете градиента над фоновото изображение.

• Тип градиент: кръгъл
• Позиция на градиента: отдолу
• Повторение на градиента: ДА
• Градиентна единица: процент
• Квадратен градиент над фоновото изображение: ДА

Тип елиптичен градиент

Елиптичните градиенти поставят цветовете във формата на елипса.

Първи пример за тип елиптичен градиент

Първият ни елиптичен пример поставя светла елипса в центъра на екрана с по-тъмен цвят около нея.

Този има два цвята. на премиер е 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)

смени го градиентен тип в елиптичен. Нагласи посока на Център. Уверете се, че този не повтаряй , коригирайтеединство на Percentage и го поставете над фоновото изображение.

• Тип градиент: Елиптичен
• Позиция на градиента: Център
• Повторение на градиента: НЕ
• Градиентна единица: процент
• Квадратен градиент над фоновото изображение: ДА

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

Нашият втори пример поставя много тънки кръгли линии в градиента.

Има два цвята. на премиер е 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)

смени го Тип градиент до елиптичен и коригирайте Посока на Високо. Имайте този в повторете. ПроменетеЕдиница в Viewport минимум. Поставете го над фоновото изображение.

• Тип градиент: Елиптичен
• Позиция на градиента: отгоре
• Повторение на градиента: ДА
• Градиентна единица: Минимум на прозореца за изглед (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%. The четвърти цветът е 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) на позиция 5deg. на втори е rgba(20,40,20,0.76) на позиция 7deg.

• Градиентни стопове:
  • 5deg: rgba(30,73,25,0.68)
  • 7deg: rgba(20,40,20,0.76)

Нагласи GradientType на Conical and the Посока при 221 градуса. Поставете позиция на върха. Повторете този и го поставете над фоновото изображение.

• Тип градиент: Коничен
• Посока на градиента: 221 градуса
• Позиция: Отгоре
• Повторение на градиента: ДА
• Квадратен градиент над фоновото изображение: ДА

Изтеглете DIVI сега!!!

Заключение

Това е нашият поглед към сравнението на типовете градиенти в Gradient Builder на Divi. 

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

За най-добри резултати експериментирайте с типове градиенти с различни посоки и позиции и включете или изключете опцията за повторение, за да видите какво можете да създадете.

Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.

Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.

Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.

Но междувременно, споделете тази статия във вашите различни социални мрежи.

...