Divi: Porovnání různých typů gradientů

Chcete použít Tvůrce přechodů z divi ale nevíte, jaký typ gradientu zvolit?

Typy přechodů jsou součástí nového divi Tvůrce přechodů . Nové typy přechodů divi vám umožní přidat různé tvary a barvy na vaše pozadí. 

V tomto článku porovnáme tyto typy přechodů a ukážeme vám, jak je použít k vytvoření jedinečných pozadí!

Začněme.

Jaké jsou typy gradientů Divi?

Nový nástroj Divi Gradient Builder přidává několik nových funkcí přechodu, které zahrnují typy přechodů. Na výběr jsou čtyři typy přechodů:

• Lineární
• kruhový
• Eliptika
• Kónický

Každý z typů zobrazuje přechod jinak. Používají se k tvarování přechodu, který má být zobrazen jako lineární barevný vzor, ​​v kruhu, elipse nebo kuželu. Podrobně je uvidíme v našich příkladech.

Typy přechodů jsou také ovlivněny dalšími ovládacími prvky, jako je poloha, zda se má nebo nemá opakovat, měrná jednotka pro posuvník přechodu a umístění přechodu nad pozadím.

Každá úprava může mít malý nebo velký dopad na gradient. Gradient může být jemný nebo výrazný. Malé nebo velké změny lze provést pouze jedním nastavením.

S ohledem na to se podívejme na některé příklady přechodů pomocí každého z typů přechodů. Ukážeme si tři příklady každého typu gradientu. 

První bude standardní typ přechodu, který uvidíte na webu. Následující dva budou trochu experimentálnější, jen abychom viděli, co můžete dělat s typy přechodů.

Příklady typů přechodů

Pro příklady typu přechodu používáme sekci Hrdina na domovské stránce bezplatný balíček rozložení bed and breakfast k dispozici v Divi. Tato sekce již má sklon, ale nahradíme jej a provedeme nějaké experimenty. 

Původní gradient pozadí můžeme buď odstranit, nebo upravit. Výsledky jsou stejné. Pro zjednodušení jej upravíme.

Text nadpisu jsme přizpůsobili jeho změnou z černé na bílou.

Typ lineárního přechodu

Čtěte také: Divi: Jak používat prolnutí vzorů na obrázcích na pozadí

Lineární přechody zobrazují přechod, jako by byl rozprostřen po stránce.

První příklad typu lineárního gradientu

Zde je náhled našeho prvního příkladu. Zobrazuje světlejší barvu na levé straně obrazovky a tmavší barvu na pravé straně s plynulým přechodem mezi nimi.

Chcete-li vytvořit tento příklad, přidejte dvě barvy. a přední je rgba(92,158,82,0.76) na pozici 0 %. a druhý je rgba(0,10,4,0.76) na pozici 97 %.

• Přechodové zastávky:
  • 0 %: rgba (92,158,82,0.76)
  • 97 %: rgba (0,10,4,0.76)

Poté změňte Styl gradient na Lineární a nastavte Vedení přes 131 stupňů. že on neopakuj se. Nastavjednota na procentech. Umístěte přechod nad obrázek na pozadí.

• Typ gradientu: Lineární
• Směr gradientu: 131 stupňů
• Opakovat gradient: NE
• Přechodová jednotka: procento
• Čtvercový přechod nad obrázkem pozadí: ANO

Druhý příklad typu lineárního gradientu

Zde je náhled druhého příkladu lineárního přechodu. Funguje jako první, ale má tvrdou zarážku vlevo, kde přebírá tmavší odstín.

Chcete-li vytvořit tento, přidejte tři zarážky přechodu. a přední je rgba(18,76,41,0.76) na pozici 13 %. a druhý je rgba(92,158,82,0.76) na pozici 13 %. barva 3 je rgba(18,76,41,0.76) na pozici 34 %.

• Přechodové zastávky:
  • 13 %: rgba (18,76,41,0.76)
  • 13 %: rgba (92,158,82,0.76)
  • 34 %: rgba (18,76,41,0.76)

Poté nastavte Styl gradient na Lineární a nastavte Vedení přes 90 stupňů. že on neopakuj se . Změňjednota procento. Umístěte jej nad obrázek na pozadí.

• Typ gradientu: Lineární
• Směr gradientu: 90 stupňů
• Opakovat gradient: NE
• Přechodová jednotka: procento
• Čtvercový přechod nad obrázkem pozadí: ANO

Třetí příklad typu lineárního gradientu

Náš třetí příklad umístí světlou čáru diagonálně přes pravý horní roh a dotkne se tmavší čáry.

Tento má tři barvy. barva 1 je rgba(92,158,82,0.76) na pozici 13 %. barva 2 je rgba(92,158,82,0.76) na pozici 23 %. The třetí barva je rgba(18,76,41,0.76) na pozici 32 %.

• Přechodové zastávky:
  • 13 %: rgba (92,158,82,0.76)
  • 23 %: rgba (92,158,82,0.76)
  • 32 %: rgba (18,76,41,0.76)

Definujte Styl gradient na lineární v a směr 209 stupňů. Narodil se neopakuj se a nastavtejednota na procentech. Umístěte přechod nad obrázek na pozadí.

• Typ gradientu: Lineární
• Směr gradientu: 209 stupňů
• Opakovat gradient: NE
• Přechodová jednotka: procento
• Čtvercový přechod nad obrázkem pozadí: ANO

Kruhový typ přechodu

Typ kruhového přechodu vytváří kruh s barvami.

První příklad typu kruhového gradientu

Náš první příklad kruhového přechodu umístí světlou barvu do středu a tmavší barvu kolem okrajů.

Tento má 2 barvy. a přední je rgba(92,158,82,0.76) na pozici 0 %. a druhý je rgba(0,10,4,0.76) na pozici 62 %.

• Přechodové zastávky:
  • 0 %: rgba (92,158,82,0.76)
  • 62 %: rgba (0,10,4,0.76)

Definujte Styl gradient na kruhovém. Vycentrujte směr . Ujistěte se, že on neopakuj se , Změňjednota v procentech a umístěte jej nad obrázek na pozadí.

• Typ přechodu: Kruhový
• Pozice gradientu: Střed
• Opakovat gradient: NE
• Přechodová jednotka: procento
• Čtvercový přechod nad obrázkem pozadí: ANO

Druhý příklad typu kruhového gradientu

Tento přechod umístí jasný kruhový okraj do středu obrazovky.

Má čtyři barvy. Dvě barvy se překrývají. a přední je rgba(18,76,41,0.76) na pozici 13 %. a druhý je rgba(92,158,82,0.76) na pozici 33 %. barva 3 je rgba(92,158,82,0.76) na pozici 51 %. barva 4 je rgba(18,76,41,0.76). Je umístěn na pozici 51 %, nad barvou 3.

• Přechodové zastávky:
  • 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)

Definujte Styl přechod na kruhový a umístěte Vedení v levém horním rohu. Ujistěte se, že on neopakuj se , Změň jednota v procentech a umístěte jej nad obrázek na pozadí.

• Typ přechodu: Kruhový
• Pozice přechodu: Vlevo nahoře
• Opakovat gradient: NE
• Přechodová jednotka: procento
• Čtvercový přechod nad obrázkem pozadí: ANO

Třetí příklad typu kruhového přechodu

Tento příklad umístí několik světlých kruhů v nejtmavší barvě, počínaje středem kruhu.

Tento také skládá dvě barvy v určitém pořadí, aby se dosáhlo tohoto designu. The premiéra barva je rgba(18,76,41,0.76) na pozici 13 %. barva 2 je rgba(18,76,41,0.76) na pozici 44 %. The třetí barva překrývá druhou barvu. Toto je rgba (92,158,82,0.76) na pozici 44 %. barva 4 je rgba(92,158,82,0.76) na pozici 51 %.

• Přechodové zastávky:
  • 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)

Změň to typ gradientu v kruhovém. Umístete směr dolů. opakovat toto. Nastavjednota na Procento a umístěte přechod nad obrázek na pozadí.

• Typ přechodu: Kruhový
• Pozice gradientu: Spodní
• Opakovat přechod: ANO
• Přechodová jednotka: procento
• Čtvercový přechod nad obrázkem pozadí: ANO

Typ eliptického přechodu

Eliptické přechody umisťují barvy do tvaru elipsy.

První příklad typu eliptického gradientu

Náš první eliptický příklad umístí světlou elipsu do středu obrazovky s tmavší barvou kolem ní.

Tento má dvě barvy. a přední je rgba(92,158,82,0.76) na pozici 0 %. a druhý je rgba(0,10,4,0.76) na pozici 50 %.

• Přechodové zastávky:
  • 0 %: rgba (92,158,82,0.76)
  • 50 %: rgba (0,10,4,0.76)

Změň to typ gradientu v eliptickém. Nastav směr na středisku. Ujistěte se, že tento neopakuj se , upravtejednota na procento a umístěte jej nad obrázek na pozadí.

• Typ přechodu: Eliptický
• Pozice gradientu: Střed
• Opakovat gradient: NE
• Přechodová jednotka: procento
• Čtvercový přechod nad obrázkem pozadí: ANO

Druhý příklad typu eliptického gradientu

Náš druhý příklad umístí mnoho tenkých kruhových čar v celém gradientu.

Má dvě barvy. a přední je rgba(92,158,82,0.76) na pozici 34pt. a druhý je rgba(0,10,4,0.76) na pozici 39pt.

• Přechodové zastávky:
  • 34pt: rgba (92,158,82,0.76)
  • 39pt: rgba (0,10,4,0.76)

Změň to Styl přechod na eliptický a upravte Vedení na levé straně. Mít tento na opakovat. Změňjednota v tečkách. Umístěte jej nad obrázek na pozadí.

• Typ přechodu: Eliptický
• Pozice gradientu: vpravo
• Opakovat přechod: ANO
• Přechodová jednotka: tečky (pt)
• Čtvercový přechod nad obrázkem pozadí: ANO

Třetí příklad typu eliptického gradientu

Náš třetí příklad umístí do gradientu mnoho půlkruhů.

Tento má dvě barvy. a přední je rgba(32,68,35,0.73) na pozici 34vmin. a druhý je rgba(0,10,4,0.76) na pozici 39vmin.

• Přechodové zastávky:
  • 34vmin: rgba(32, 68, 35, 0.73)
  • 39 vmin: rgba (0,10,4,0.76)

Změň to Styl přechod na eliptický a upravte Vedení na Vysoké. Mít tento na opakovat. ZměňJednotka v minimu zobrazení. Umístěte jej nad obrázek na pozadí.

• Typ přechodu: Eliptický
• Pozice gradientu: nahoře
• Opakovat přechod: ANO
• Jednotka přechodu: Minimální zobrazení (vmin)
• Čtvercový přechod nad obrázkem pozadí: ANO

Kónický typ přechodu

Viz také: Divi: Jak vytvořit přechody na pozadí mezi prvky

Typ kuželového přechodu zobrazuje přechod jako kužel, jako by se na kužel díval shora.

První příklad typu kuželového gradientu

Tento příklad umístí diagonální čáru od středu přechodu doleva se světlou barvou na jedné straně a tmavou barvou na druhé.

Má dvě barvy. a přední je rgba(92,158,82,0.76) na pozici 0 %. a druhý je rgba(0,10,4,0.76) na pozici 50 %.

• Přechodové zastávky:
  • 0 %: rgba (92,158,82,0.76)
  • 50 %: rgba (0,10,4,0.76)

Změň to typ gradientu v kuželovitém. Upravte směr přes 221 stupňů. Vycentrujte pozice et neopakuj to . Umístěte přechod nad obrázek.

• Typ gradientu: Kuželový
• Směr gradientu: 221 stupňů
• Pozice: Střed
• Opakovat gradient: NE
• Čtvercový přechod nad obrázkem pozadí: ANO

Druhý příklad typu kuželového gradientu

Tento příklad je podobný předchozímu, ale umístí středovou linii nahoru.

Tento má čtyři barvy. a přední je rgba(20,40,20,0.76) na pozici 7 %. barva 2 je rgba(30,73,25,0.68) na pozici 24 %. barva 3 je rgba(103,132,30,0.68) na pozici 65 %. The čtvrtý barva je rgba(38,86,26,0.68) na pozici 85 %.

• Přechodové zastávky:
  • 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)

Definujte typ gradientu na kuželové a směr při 0 stupních. Vycentrujte pozice . Narodil se neopakuj se a umístěte jej nad obrázek.

• Typ gradientu: Kuželový
• Směr gradientu: 0 stupňů
• Pozice: Střed
• Opakovat gradient: NE
• Čtvercový přechod nad obrázkem pozadí: ANO

Třetí příklad typu kuželového gradientu

Náš poslední příklad umístí shluk čar od horního středu gradientu směrem ven ve všech směrech.

Tento má dvě barvy. a přední je rgba(30,73,25,0.68) v poloze 5 stupňů. a druhý je rgba(20,40,20,0.76) v poloze 7 stupňů.

• Přechodové zastávky:
  • 5 stupňů: rgba (30,73,25,0.68)
  • 7 stupňů: rgba (20,40,20,0.76)

Nastav GradientType na kuželovém a Vedení při 221 st. Umístete pozice nahoře. Opakovat tento a umístěte jej nad obrázek na pozadí.

• Typ gradientu: Kuželový
• Směr gradientu: 221 stupňů
• Pozice: Nahoře
• Opakovat přechod: ANO
• Čtvercový přechod nad obrázkem pozadí: ANO

Stáhnout DIVI hned!!!

Proč investovat do čističky vzduchu?

Toto je náš pohled na srovnání typů přechodů v Divi's Gradient Builder. 

Jak můžete vidět z těchto příkladů, nastavení jsou jednoduchá, ale kterékoli z nich může výrazně změnit návrh přechodu. 

Chcete-li dosáhnout nejlepších výsledků, experimentujte s typy přechodů s různými směry a polohami a zapněte nebo vypněte možnost opakování, abyste viděli, co můžete vytvořit.

Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.

Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...