Porównanie typów gradientów w Divi's Gradient Builder

Rodzaje gradientów są częścią nowego Divi Gradient Builder. Nowe typy gradientów Divi umożliwiają dodawanie różnych kształtów i kolorów do tła. W tym poście porównamy te typy gradientów i pokażemy, jak z nich korzystać, aby tworzyć unikalne tła!

Zacznijmy.

Jakie są typy gradientów Divi?

Nowy Gradient Builder firmy Divi dodaje kilka nowych funkcji gradientów, które obejmują typy gradientów. Do wyboru są cztery rodzaje gradientów:

• Liniowy
• Okólnik
• Eliptyczny
• Stożkowy

Każdy z typów wyświetla gradient inaczej. Służą do kształtowania gradientu, który ma być wyświetlany jako liniowy wzór koloru, w okręgu, elipsie lub stożku. Zobaczymy to szczegółowo w naszych przykładach.

Na typy gradientów mają również wpływ inne kontrolki, takie jak pozycja, powtarzalność, jednostka miary dla suwaka gradientu i umieszczanie gradientu nad tłem.

Każda regulacja może mieć mały lub ogromny wpływ na nachylenie. Gradient może być subtelny lub może się wyróżniać. Małe lub duże zmiany można wprowadzić za pomocą jednej regulacji.

Mając to na uwadze, spójrzmy na kilka przykładów gradientów przy użyciu każdego z typów gradientów. Pokażemy trzy przykłady każdego typu gradientu. Pierwszy będzie standardowym rodzajem gradientu, który zobaczysz w sieci. Następne dwa będą trochę bardziej eksperymentalne, tylko po to, żeby zobaczyć, co można zrobić z typami gradientów.

Przykłady typów gradientów

W przypadku przykładów typu gradientu używam sekcji bohater ze strony docelowej bezpłatnego pakietu układów Bed and Breakfast, który jest dostępny w Divi. Ta sekcja ma już gradient, ale zastąpimy go i poeksperymentujemy. Możemy albo usunąć oryginalny gradient tła, albo go zmodyfikować. Wyniki są takie same. Dla uproszczenia zmodyfikuję to.

Dostosowałem tekst tytułu, zmieniając go z czarnego na biały.

Typ gradientu liniowego

Gradienty liniowe wyświetlają gradient tak, jakby były rozłożone na stronie.

Przykład pierwszego gradientu liniowego

Oto spojrzenie na nasz pierwszy przykład. Wyświetla jaśniejszy kolor po lewej stronie ekranu i ciemniejszy kolor po prawej, z płynnym przejściem między nimi.

Aby stworzyć ten przykład, dodaj dwa kolory. Pierwsza to rgba(92.158.82.0.76) na pozycji 0%. Drugi to rgba (0,10,4,0,76) na pozycji 97%.

• Kolor 1: rgba(92.158,82,0.76) (w pozycji 0%)
• Kolor 2: rgba (0,10,4,0,76) (w pozycji 97%)

Następnie zmień Gradient Type na Linear i ustaw Direction na 131deg. Niech się to nie powtarza . Ustaw jednostkę na procent. Umieść gradient nad obrazem tła.

• Typ gradientu: liniowy
• Kierunek: 131 stopni
• Powtórz: Nie
• Jednostka: procent
• Umieść gradient nad obrazem tła: Tak

Przykład drugiego gradientu liniowego

Oto spojrzenie na drugi przykład gradientu liniowego. Działa jak pierwszy, ale ma mocny przystanek po lewej stronie, gdzie przejmuje ciemniejszy odcień.

Aby go utworzyć, dodaj trzy stopnie gradientu. Pierwsza to rgba(18,76,41,076) na 13% pozycji. Drugi to rgba(92.158.82.0.76) na 13% pozycji. Kolor 3 to rgba (18,76,41,0.76) na pozycji 34%.

• Kolor 1: rgba(18,76,41,0.76) (na pozycji 13%)
• Kolor 2: rgba(92.158,82,0.76) (na 13% pozycji)
• Kolor 3: rgba(18,76,41,0.76) (na pozycji 34%)

Następnie ustaw Gradient Type na Linear i ustaw Direction na 90deg. Niech się to nie powtarza . Zmień jednostkę na procent. Umieść go nad obrazem tła.

• Typ gradientu: liniowy
• Kierunek: 90 stopni
• Powtórz: Nie
• Jednostka: procent
• Umieść gradient nad obrazem tła: Tak

Przykład trzeciego gradientu liniowego

Nasz trzeci przykład umieszcza jasną linię koloru po przekątnej w prawym górnym rogu, dotykając ciemniejszej linii koloru.

Ten ma trzy kolory. Kolor 1 to rgba (92 158 82, 0,76) na 13% pozycji. Kolor 2 to rgba (92 158 82, 0,76) na 23% pozycji. Trzeci kolor to rgba(18,76,41,076) na pozycji 32%.

• Kolor 1: rgba(92.158,82,0.76) (na 13% pozycji)
• Kolor 2: rgba(92.158,82,0.76) (na pozycji 23%)
• Kolor 3: rgba(18,76,41,0.76) (na pozycji 32%)

Ustaw typ gradientu na liniowy w kierunku 209 stopni. Nie powtarzaj tego i ustaw jednostkę na procent. Umieść gradient nad obrazem tła.

• Typ gradientu: liniowy
• Kierunek: 209 stopni
• Powtórz: Nie
• Jednostka: procent
• Umieść gradient nad obrazem tła: Tak

Okrągły typ gradientu

Gradient kołowy tworzy okrąg z kolorami.

Przykład pierwszego okrągłego gradientu

Nasz pierwszy przykład z gradientem kołowym umieszcza jasny kolor na środku i ciemniejszy kolor na krawędziach.

Ten ma 2 kolory. Pierwsza to rgba(92.158.82.0.76) na pozycji 0%. Drugi to rgba (0,10,4,0,76) na pozycji 62%.

• Kolor 1: rgba(92.158,82,0.76) (w pozycji 0%)
• Kolor 2: rgba (0,10,4,0,76) (w pozycji 62%)

Ustaw typ gradientu na Okrągły. Wyśrodkuj kierunek . Nie powtarzaj , zmień Jednostkę na Procent i umieść ją nad obrazem tła.

• Typ gradientu: Okrągły
• Kierunek: Centrum
• Powtórz: Nie
• Jednostka: procent
• Umieść gradient nad obrazem tła: Tak

Przykład drugiego gradientu kołowego

Ten gradient umieszcza wyraźną okrągłą krawędź na środku ekranu.

Ma cztery kolory. Dwa kolory są ułożone w stos. Pierwsza to rgba(18,76,41,076) na 13% pozycji. Drugi to rgba (92 158 82, 0,76) na 33% pozycji. Kolor 3 to rgba (92 158 82 0,76) na pozycji 51%. Kolor 4 to rgba (18,76,41,76). Znajduje się na 51% pozycji, powyżej koloru 3.

• Kolor 1: rgba(18,76,41,0.76) (na pozycji 13%)
• Kolor 2: rgba(92.158,82,0.76) (na pozycji 33%)
• Kolor 3: rgba(92.158,82,0.76) (na pozycji 51%)
• Kolor 4: rgba(18,76,41,0.76) (na pozycji 51%)

Ustaw Typ gradientu na Okrągły i umieść Kierunek w lewym górnym rogu. Nie powtarzaj , zmień Jednostkę na Procent i umieść ją nad obrazem tła.

• Typ gradientu: Okrągły
• Kierunek: górny lewy
• Powtórz: Nie
• Jednostka: procent
• Umieść gradient nad obrazem tła: Tak

Przykład trzeciego gradientu kołowego

Ten przykład umieszcza kilka jasnych okręgów w ciemniejszym kolorze, zaczynając od środka okręgu.

Ten również układa dwa kolory w określonej kolejności, aby uzyskać ten projekt. Pierwszy kolor to rgba(18,76,41,076) na 13% pozycji. Kolor 2 to rgba(18,76,41,0.76) na pozycji 44%. Trzeci kolor nakłada się na drugi kolor. To rgba (92.158.82.0.76) na pozycji 44%. Kolor 4 to rgba (92 158 82, 0,76) na pozycji 51%.

• Kolor 1: rgba(18,76,41,0.76) (na pozycji 13%)
• Kolor 2: rgba(18,76,41,0.76) (na pozycji 44%)
• Kolor 3: rgba (92 158, 82, 0,76) (na pozycji 44%)
• Kolor 4: rgba (92.158,82,0.76) (na pozycji 51%)

Zmień typ gradientu na okrągły. Umieść kierunek na dole. Miej ten do powtórzenia . Ustaw jednostkę na procent i umieść gradient nad obrazem tła.

• Typ gradientu: Okrągły
• Kierunek: dół
• Powtórz: tak
• Jednostka: procent
• Umieść gradient nad obrazem tła: Tak

Eliptyczny typ gradientu

Gradienty eliptyczne umieszczają kolory w kształcie elipsy.

Przykład pierwszego gradientu eliptycznego

Nasz pierwszy przykład eliptyczny umieszcza elipsę o jasnym kolorze na środku ekranu z ciemniejszym kolorem wokół niej.

Ten ma dwa kolory. Pierwsza to rgba(92.158.82.0.76) na pozycji 0%. Drugi to rgba (0,10,4,0,76) na pozycji 50%.

• Kolor 1: rgba(92.158,82,0.76) (w pozycji 0%)
• Kolor 2: rgba (0,10,4,0,76) (na pozycji 50%)

Zmień typ gradientu na eliptyczny. Ustaw kierunek na środek. Nie powtarzaj tego, ustaw jednostkę na procent i umieść ją nad obrazem tła.

• Typ gradientu: eliptyczny
• Kierunek: Centrum
• Powtórz: Nie
• Jednostka: procent
• Umieść gradient nad obrazem tła: Tak

Przykład drugiego gradientu eliptycznego

Nasz drugi przykład umieszcza wiele cienkich okrągłych linii w całym gradiencie.

Ma dwa kolory. Pierwszy to rgba(92.158.82.0.76) na pozycji 34pt. Drugi to rgba (0,10,4,0,76) na 39 pkt.

• Kolor 1: rgba (92 158, 82, 0,76) (w pozycji 34 pkt)
• Kolor 2: rgba (0,10,4,0.76) (w pozycji 39 pkt)

Zmień typ gradientu na eliptyczny i ustaw kierunek na lewo. Niech to powtórzyć . Zmień jednostkę na punkty. Umieść go nad obrazem tła.

• Typ gradientu: eliptyczny
• Kierunek: w lewo
• Powtórz: tak
• Jednostka: punkty
• Umieść gradient nad obrazem tła: Tak

Trzeci przykład gradientu eliptycznego

Nasz trzeci przykład umieszcza wiele półokręgów w gradiencie.

Ten ma dwa kolory. Pierwszy to rgba(32,68,35,0.73) na pozycji 34vmin. Drugi to rgba (0,10,4,0.76) na pozycji 39vmin.

• Kolor 1: rgba(32,68,35,0.73) (w pozycji 34vmin)
• Kolor 2: rgba (0,10,4,0.76) (w pozycji 39vmin)

Zmień Typ gradientu na Eliptyczny i ustaw Kierunek na Górę. Niech to powtórzyć . Zmień jednostkę na minimum rzutni. Umieść go nad obrazem tła.

• Typ gradientu: eliptyczny
• Kierunek: Góra
• Powtórz: tak
• Jednostka: minimalna obserwacja
• Umieść gradient nad obrazem tła: Tak

Stożkowy typ gradientu

Stożkowy typ gradientu wyświetla gradient w kształcie stożka, tak jakby stożek był widziany z góry.

Przykład pierwszego gradientu stożkowego

Ten przykład umieszcza ukośną linię od środka gradientu po lewej stronie z jasnym kolorem po jednej stronie i ciemnym kolorem po drugiej.

Ma dwa kolory. Pierwsza to rgba(92.158.82.0.76) na pozycji 0%. Drugi to rgba (0,10,4,0,76) na pozycji 50%.

• Kolor 1: rgba(92.158,82,0.76) (w pozycji 0%)
• Kolor 2: rgba (0,10,4,0,76) (na pozycji 50%)

Zmień typ gradientu na stożkowy. Ustaw kierunek na 221 stopni. Wyśrodkuj pozycję i nie powtarzaj jej. Umieść gradient nad obrazem.

• Typ gradientu: Stożkowy
• Kierunek: 221 stopni
• Pozycja: Centrum
• Powtórz: Nie
• Umieść gradient nad obrazem tła: Tak

Przykład drugiego gradientu stożkowego

Ten przykład jest podobny do poprzedniego, ale umieszcza linię od środka w górę.

Ten ma cztery kolory. Pierwsza to rgba(20,40,20,76) na pozycji 7%. Kolor 2 to rgba (30,73,25,0.68) na pozycji 24%. Kolor 3 to rgba (103 132 30 0,68) na pozycji 65%. Czwarty kolor to rgba(38,86,26,068) na pozycji 85%.

• Kolor 1: rgba(20,40,20,0.76) (na pozycji 7%)
• Kolor 2: rgba (30,73,25,0.68) (na pozycji 24%)
• Kolor 3: rgba (103.132,30,0.68) (w pozycji 65%)
• Kolor 4: rgba(38,86,26,0.68) (w pozycji 85%)

Ustaw typ gradientu na stożkowy, a kierunek na 0deg. Wyśrodkuj pozycję . Nie powtarzaj tego i umieść go nad obrazem.

• Typ gradientu: Stożkowy
• Kierunek: 0deg
• Pozycja: Centrum
• Powtórz: Nie
• Umieść gradient nad obrazem tła: Tak

Trzeci przykład gradientu stożkowego

Nasz ostatni przykład umieszcza serię linii od górnej środkowej części gradientu na zewnątrz we wszystkich kierunkach.

Ten ma dwa kolory. Pierwszy to rgba (30,73,25,0.68) w pozycji 5 stopni. Drugi to rgba (20,40,20,0.76) w pozycji 7 stopni.

• Kolor 1: rgba (30,73,25,0.68) (w pozycji 5 stopni)
• Kolor 2: rgba(20,40,20,0.76) (w pozycji 7 stopni)

Ustaw eth Gradient Type na Conical i Direction na 221deg. Umieść pozycję na górze. Powtórz to i umieść nad obrazem tła.

• Typ gradientu: Stożkowy
• Kierunek: 221 stopni
• Pozycja: Góra
• Powtórz: tak
• Umieść gradient nad obrazem tła: Tak

Końcowe myśli

Oto nasze spojrzenie na porównanie typów gradientów w Divi's Gradient Builder. Jak widać na tych przykładach, ustawienia są proste, ale każde z nich może znacząco wpłynąć na projekt gradientu. Aby uzyskać najlepsze wyniki, wypróbuj typy gradientów z różnymi kierunkami i pozycjami oraz włącz lub wyłącz opcję powtarzania, aby zobaczyć, co możesz stworzyć.

Chcemy usłyszeć od Ciebie. Czy używałeś różnych typów gradientów w Divi Gradient Builder? Daj nam znać o swoim doświadczeniu w komentarzach.