Czy chciałbyś użyć Gradient Builder of Divi ale nie wiesz jaki rodzaj gradientu wybrać?
Typy gradientowe są częścią nowości Divi Konstruktor gradientów . Nowe typy gradientów Divi umożliwiają dodawanie różnych kształtów i kolorów do tła.
W tym artykule porównamy te rodzaje 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
- okrągły
- Eliptyka
- 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 je szczegółowo na naszych przykładach.
Na typy gradientów mają również wpływ inne kontrolki, takie jak położenie, powtarzanie, jednostka miary paska przewijania gradientu i umieszczenie gradientu nad tłem.
Każda korekta może mieć mały lub ogromny wpływ na gradient. Gradient może być subtelny lub wyróżniać się. Małe lub duże zmiany można wprowadzić za pomocą tylko 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 rodzaju gradientu.
Pierwszym będzie standardowy gradient, który zobaczysz w Internecie. Następne dwa będą nieco bardziej eksperymentalne, tylko po to, aby zobaczyć, co możesz zrobić z różnymi rodzajami gradientów.
Przykłady typów gradientów
W przypadku przykładów typu gradientowego korzystamy z sekcji Hero na stronie głównej bezpłatny pakiet układu łóżka i śniadania dostępne 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 zmodyfikujemy go.
Dostosowaliśmy tekst tytułu, zmieniając go z czarnego na biały.
Typ gradientu liniowego
Czytaj także: Divi: Jak używać mieszania wzorów na obrazach tła
Gradienty liniowe wyświetlają gradient tak, jakby był rozłożony na stronie.
Pierwszy przykład typu gradientu liniowego
Oto podgląd naszego pierwszego przykładu. 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. ten premier rgba(92,158,82,0.76) na pozycji 0%. ten Dopiero to rgba(0,10,4,0.76) na 97% pozycji.
- Gradient zatrzymuje się:
- 0%: rgba (92,158,82,0.76)
- 97%: rgba (0,10,4,0.76)
Następnie zmień Rodzaj Nieruchomości gradient na Linear i ustaw Kierunek ponad 131 stopni. że on nie powtarzaj. Ustawjedność na procent. Umieść gradient nad obrazem tła.
- Typ gradientu: liniowy
- Kierunek gradientu: 131 stopni
- Powtórz gradient: NIE
- Jednostka gradientu: procent
- Kwadratowy gradient nad obrazem tła : TAK
Drugi przykład typu gradientu liniowego
Oto podgląd drugiego przykładu gradientu liniowego. Działa jak pierwszy, ale ma mocny przystanek po lewej stronie, gdzie przejmuje ciemniejszy odcień.
Aby go utworzyć, dodaj trzy stopnie gradientu. ten premier rgba(18,76,41,0.76) na pozycji 13%. ten Dopiero to rgba(92,158,82,0.76) na 13% pozycji. kolor 3 to rgba(18,76,41,0.76) na 34% pozycji.
- Gradient zatrzymuje się:
- 13%: rgba (18,76,41,0.76)
- 13%: rgba (92,158,82,0.76)
- 34%: rgba (18,76,41,0.76)
Następnie ustaw Rodzaj Nieruchomości gradient na Linear i ustaw Kierunek ponad 90 stopni. że on nie powtarzaj . Zmienićjedność odsetek. Umieść go nad obrazem tła.
- Typ gradientu: liniowy
- Kierunek gradientu: 90 stopni
- Powtórz gradient: NIE
- Jednostka gradientu: procent
- Kwadratowy gradient nad obrazem tła : TAK
Trzeci przykład typu gradientu liniowego
Nasz trzeci przykład umieszcza jasną linię po przekątnej w prawym górnym rogu, dotykając ciemniejszej linii.
Ten ma trzy kolory. kolor 1 to rgba(92,158,82,0.76) na 13% pozycji. kolor 2 rgba(92,158,82,0.76) na pozycji 23%. The trzeci kolor to rgba(18,76,41,0.76) na 32% pozycji.
- Gradient zatrzymuje się:
- 13%: rgba (92,158,82,0.76)
- 23%: rgba (92,158,82,0.76)
- 32%: rgba (18,76,41,0.76)
Zdefiniuj Rodzaj Nieruchomości gradient do liniowy w a kierunek 209 stopni. Urodzony nie powtarzaj i ustawjedność na procent. Umieść gradient nad obrazem tła.
- Typ gradientu: liniowy
- Kierunek gradientu: 209 stopni
- Powtórz gradient: NIE
- Jednostka gradientu: procent
- Kwadratowy gradient nad obrazem tła : TAK
Okrągły typ gradientu
Gradient kołowy tworzy okrąg z kolorami.
Pierwszy przykład typu gradientu kołowego
Nasz pierwszy przykład z gradientem kołowym umieszcza jasny kolor na środku i ciemniejszy kolor na krawędziach.
Ten ma 2 kolory. ten premier rgba(92,158,82,0.76) na pozycji 0%. ten Dopiero to rgba(0,10,4,0.76) na 62% pozycji.
- Gradient zatrzymuje się:
- 0%: rgba (92,158,82,0.76)
- 62%: rgba (0,10,4,0.76)
Zdefiniuj Rodzaj Nieruchomości gradient na Circular. Wyśrodkuj kierunek . Upewnij się, że on… nie powtarzaj , zmienićjedność jako procent i umieść go nad obrazem tła.
- Typ gradientu: Okrągły
- Pozycja gradientu: Środek
- Powtórz gradient: NIE
- Jednostka gradientu: procent
- Kwadratowy gradient nad obrazem tła : TAK
Drugi przykład typu gradientu kołowego
Ten gradient umieszcza wyraźną okrągłą krawędź na środku ekranu.
Ma cztery kolory. Nałożone są dwa kolory. ten premier rgba(18,76,41,0.76) na pozycji 13%. ten Dopiero to rgba(92,158,82,0.76) na 33% pozycji. kolor 3 to rgba(92,158,82,0.76) na 51% pozycji. kolor 4 to rgba(18,76,41,0.76). Znajduje się na pozycji 51%, nad kolorem 3.
- Gradient zatrzymuje się:
- 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)
Zdefiniuj Rodzaj Nieruchomości nachylenie do Okrągłe i umieść Kierunek w lewym górnym rogu. Upewnij się, że on… nie powtarzaj , zmienić jedność jako procent i umieść go nad obrazem tła.
- Typ gradientu: Okrągły
- Pozycja gradientu: górny lewy
- Powtórz gradient: NIE
- Jednostka gradientu: procent
- Kwadratowy gradient nad obrazem tła : TAK
Trzeci przykład typu gradientu kołowego
Ten przykład umieszcza kilka jasnych okręgów w najciemniejszym kolorze, zaczynając od środka okręgu.
Ten również układa dwa kolory w określonej kolejności, aby osiągnąć ten projekt. The premiera kolor to rgba(18,76,41,0.76) na 13% pozycji. kolor 2 rgba(18,76,41,0.76) na pozycji 44%. The troisième kolor nakłada się na drugi kolor. Jest to rgba(92,158,82,0.76) na pozycji 44%. kolor 4 to rgba(92,158,82,0.76) na 51% pozycji.
- Gradient zatrzymuje się:
- 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)
Zmień to typ gradientu w okrągłym. Umieść kierunek na dole. powtarzać ten. Ustawjedność na Procent i umieść gradient nad obrazem tła.
- Typ gradientu: Okrągły
- Pozycja gradientu: dół
- Powtarzaj gradient: TAK
- Jednostka gradientu: procent
- Kwadratowy gradient nad obrazem tła : TAK
Eliptyczny typ gradientu
Gradienty eliptyczne umieszczają kolory w kształcie elipsy.
Pierwszy przykład eliptycznego typu gradientu
Nasz pierwszy przykład eliptyczny umieszcza jasną elipsę na środku ekranu z ciemniejszym kolorem wokół niej.
Ten ma dwa kolory. ten premier rgba(92,158,82,0.76) na pozycji 0%. ten Dopiero to rgba(0,10,4,0.76) na 50% pozycji.
- Gradient zatrzymuje się:
- 0%: rgba (92,158,82,0.76)
- 50%: rgba (0,10,4,0.76)
Zmień to typ gradientu na eliptycznym. Ustaw kierunek na środku. Upewnij się, że ten nie powtarzaj , poprawićjedność na Procent i umieść go nad obrazem tła.
- Typ gradientu: Eliptyczny
- Pozycja gradientu: Środek
- Powtórz gradient: NIE
- Jednostka gradientu: procent
- Kwadratowy gradient nad obrazem tła : TAK
Drugi przykład eliptycznego typu gradientu
Nasz drugi przykład umieszcza wiele cienkich okrągłych linii w gradiencie.
Ma dwa kolory. ten premier to rgba(92,158,82,0.76) na pozycji 34 pkt. ten Dopiero jest rgba(0,10,4,0.76) na pozycji 39pt.
- Gradient zatrzymuje się:
- 34 pkt: rgba (92,158,82,0.76)
- 39 pkt: rgba (0,10,4,0.76)
Zmień to Rodzaj Nieruchomości gradient na eliptyczny i dostosuj Kierunek na lewo. Miej ten na powtarzać. Zmienićjedność w kropkach. Umieść go nad obrazem tła.
- Typ gradientu: Eliptyczny
- Pozycja gradientu: w prawo
- Powtarzaj gradient: TAK
- Jednostka gradientu: kropki (pt)
- Kwadratowy gradient nad obrazem tła : TAK
Trzeci przykład eliptycznego typu gradientu
Nasz trzeci przykład umieszcza wiele półokręgów w gradiencie.
Ten ma dwa kolory. ten premier to rgba(32,68,35,0.73) na pozycji 34vmin. ten Dopiero to rgba (0,10,4,0.76) w pozycji 39vmin.
- Gradient zatrzymuje się:
- 34 min: rgba (32, 68, 35, 0.73)
- 39 min: rgba (0,10,4,0.76)
Zmień to Rodzaj Nieruchomości gradient na eliptyczny i dostosuj Kierunek na wysokości. Miej ten na powtarzać. ZmienićJednostka w minimum rzutni. Umieść go nad obrazem tła.
- Typ gradientu: Eliptyczny
- Pozycja gradientu: góra
- Powtarzaj gradient: TAK
- Jednostka gradientu: minimalna rzutnia (vmin)
- Kwadratowy gradient nad obrazem tła : TAK
Stożkowy typ gradientu
Zobacz też: Divi: Jak tworzyć przejścia w tle między elementami
Gradient stożkowy wyświetla gradient jako stożek, tak jakby stożek był oglądany z góry.
Pierwszy przykład typu gradientu stożkowego
Ten przykład umieszcza ukośną linię od środka gradientu w lewo z jasnym kolorem po jednej stronie i ciemnym kolorem po drugiej.
Ma dwa kolory. ten premier rgba(92,158,82,0.76) na pozycji 0%. ten Dopiero to rgba(0,10,4,0.76) na 50% pozycji.
- Gradient zatrzymuje się:
- 0%: rgba (92,158,82,0.76)
- 50%: rgba (0,10,4,0.76)
Zmień to typ gradientu w stożkowym. Poprawić kierunek ponad 221 stopni. Wyśrodkuj position et nie powtarzaj tego . Umieść gradient nad obrazem.
- Typ gradientu: Stożkowy
- Kierunek gradientu: 221 stopni
- Pozycja: Centrum
- Powtórz gradient: NIE
- Kwadratowy gradient nad obrazem tła : TAK
Drugi przykład typu gradientu stożkowego
Ten przykład jest podobny do poprzedniego, ale umieszcza linię środkową w górę.
Ten ma cztery kolory. ten premier to rgba(20,40,20,0.76) na 7% pozycji. kolor 2 to rgba(30,73,25,0.68) na 24% pozycji. kolor 3 rgba(103,132,30,0.68) na pozycji 65%. The czwarty kolor to rgba(38,86,26,0.68) na 85% pozycji.
- Gradient zatrzymuje się:
- 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)
Zdefiniuj typ gradientu na stożkowym i kierunek przy 0 stopniach. Wyśrodkuj position . Urodzony nie powtarzaj i umieść go nad obrazem.
- Typ gradientu: Stożkowy
- Kierunek gradientu: 0 stopni
- Pozycja: Centrum
- Powtórz gradient: NIE
- Kwadratowy gradient nad obrazem tła : TAK
Trzeci przykład typu 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. ten premier to rgba(30,73,25,0.68) w pozycji 5deg. ten Dopiero to rgba(20,40,20,0.76) w pozycji 7 stopni.
- Gradient zatrzymuje się:
- 5 stopni: rgba (30,73,25,0.68)
- 7 stopni: rgba (20,40,20,0.76)
Ustaw Typ gradientu na stożkowym i Kierunek w 221 st. Umieść position u góry. Powtarzać ten i umieść go nad obrazem tła.
- Typ gradientu: Stożkowy
- Kierunek gradientu: 221 stopni
- Pozycja: Góra
- Powtarzaj gradient: TAK
- Kwadratowy gradient nad obrazem tła : TAK
Pobierz DIVI teraz !!!
Wnioski
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 mieć duży wpływ na projekt gradientu.
Aby uzyskać najlepsze wyniki, poeksperymentuj z rodzajami gradientów o różnych kierunkach i pozycjach oraz włącz lub wyłącz opcję powtarzania, aby zobaczyć, co możesz stworzyć.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.
Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
