Czy chcesz utworzyć niestandardowe wzory tła za pomocą opcji Gradient Repeat w Divi ?
Opcje tła Divi oferują wiele sposobów tworzenia wzorów tła. Możesz nawet tworzyć wzory tła, używając tylko gradientów. Opcja Gradient Repeat sprawia, że jest to proste i łatwe.
W tym artykule zobaczymy, jak korzystać z opcji Powtarzanie gradientu Divi do tworzenia niestandardowych wzorów tła.
Zacznijmy.
Zobacz też: Divi: Jak utworzyć formularz kontaktowy, który pojawia się po kliknięciu przycisku
Co to jest powtarzanie gradientu
Opcja Gradient Repeat tworzy wzór oparty na Gradient Stops. Przystanki gradientu to pomiary określające, gdzie kolory pojawiają się i zatrzymują w gradiencie. Divi a jego Konstruktor Gradientu używa tych przystanków do tworzenia wzoru.
Ostatni kolor informuje gradient, w którym miejscu znajduje się punkt przerwania. Możesz mieć tyle kolorów, ile chcesz przed tym punktem przerwania.
Le Konstruktor gradientów następnie powtórzy to, aby wypełnić ekran, który tworzy wzór. Opcję można dodać do dowolnej sekcji, wiersza, kolumny lub modułu i można ich używać razem.
Aktywuj opcję „Gradient tła”
Aby aktywować opcję Powtarzanie gradientu, otwórz ustawienia sekcji, klikając ikonę koła zębatego. Działa również z wierszami, kolumnami i Moduły.
Przewiń do Tło . Wybierz kartę Gradientowe Tło i kliknij przycisk Dodaj gradient tła.
Poniżej gradientowego paska zatrzymania znajduje się ustawienie o nazwie Powtarzanie gradientu . Domyślnie jest to wyłączone. Po prostu kliknij, aby go aktywować.
Gradient będzie się teraz powtarzał, tworząc wzór na podstawie punktów zatrzymania gradientu i innych ustawień gradientu, takich jak jednostka gradientu.
Jednostki gradientu
Jednostka gradientu jest jednostką miary. Określa to, co oznaczają liczby punktów gradientu na pasku gradientu, co określa sposób mierzenia punktów gradientu. Ma to wpływ na wzór utworzony przez opcję powtarzania.
Generator gradientu tła Divi oferuje 15 jednostek. Spójrzmy na przykład czterech najpopularniejszych opcji. Jak zobaczymy w naszych przykładach, wynik będzie się zmieniał w zależności od liczby przystanków gradientu i ustawień.
Procent (procent)
Procent mierzy stopnie gradientu w procentach. Oblicza to punkty gradientu na podstawie elementu nadrzędnego. Im mniejszy ostatni ścieg gradientowy, tym mocniejszy utworzony wzór. Podczas dostosowywania położenia jednego z kolorów ten kolor porusza się, podczas gdy pozostałe pozostają na swoim miejscu.
Piksele (piks.)
Piksele mierzą liczbę pikseli dla każdego punktu gradientu. Daje to gradientowi mniejszy wzór niż większość innych typów jednostek. Przesunięcie pozycji pierwszego lub ostatniego koloru zmienia pozycję każdego koloru.
Wysokość okna (vh)
Widoczny obszar to widoczny obszar okna przeglądarki. Mierzy się go osobno na wysokość i szerokość. Wysokość okna wykorzystuje stopnie gradientu, aby zmierzyć procent wysokości okna. Dostosowanie pozycji pierwszego lub ostatniego koloru wpływa na wszystkie kolory.
Szerokość okna (vw)
Szerokość okna wykorzystuje stopnie gradientu, aby zmierzyć procent szerokości okna (lub szerokości przeglądarki). Korekty zmieniają się w zależności od szerokości. W miarę zwiększania lub zmniejszania liczby ten konkretny kolor zmienia położenie, podczas gdy pozostałe pozostają takie same.
Przykłady użycia opcji „Powtórzenie gradientu”
Czytaj także: Divi: Jak stworzyć tablet z przewijaną zawartością zwiastuna
W naszych przykładach korzystamy z sekcji Wezwanie do działania na stronie głównej serwisu darmowy pakiet układu akupunktury dostępne w Divi.
Będziemy musieli dokonać korekty w pierwszej kolumnie sekcji. Otwórz je parametry linii klikając jego ikonę koła zębatego.
Następnie wybierz Ikona zębatki dla pierwszej kolumny.
kolumna jeden gradient
Pierwsza kolumna ma swój własny gradient tła. To część układu. Nie zmienimy tego. Użyjemy tego samego gradientu w naszych czterech przykładach. Oto ustawienia na wypadek, gdybyś ich potrzebował.
- Gradient zatrzymuje się:
- 0px: #f4d5b8
- 100px: rgba (244,213,184,0)
Ustawienia gradientu
- Typ gradientu: liniowy
- Pozycja gradientu: 180 stopni
- Powtórz gradient: NIE
- Jednostka gradientu: procent
- Kwadratowy gradient nad obrazem tła: NIE
rozstaw
Dodamy odstępy z lewej strony kolumny. Uzyskaj dostęp do zakładki Wnętrze, przewiń do Rozstaw i wybierz ikona tabletu aby otworzyć opcje urządzenia.
Dodaj 5% lewego wypełnienia dla kart pulpitu i tabletu. Wybierz zakładkę telefonu i usuń lewe dopełnienie. Pozostaw górne i prawe ustawienia przy bieżących ustawieniach.
- Wyściółka
- Góra: 180px
- Pozostało: 5%
- Po lewej: 80px
przykład pierwszy
Nasz pierwszy przykład tworzy ukośny powtarzający się wzór z cienkimi liniami.
Ten ma trzy stopnie nachylenia.
- Gradient zatrzymuje się:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Użyj następujących ustawień.
- Typ gradientu: liniowy
- Kierunek gradientu: 156 stopni
- Powtarzaj gradient: TAK
- Jednostka gradientu: piksele
- Kwadratowy gradient nad obrazem tła: Nie
Drugi przykład
Nasz drugi przykład tworzy ukośny powtarzający się wzór z większymi liniami.
Ten ma trzy stopnie nachylenia.
- Gradient zatrzymuje się:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
W przypadku ustawień gradientu
- Typ gradientu: liniowy
- Kierunek gradientu: 156 stopni
- Powtarzaj gradient: TAK
- Jednostka gradientu: piksele
- Kwadratowy gradient nad obrazem tła: NIE
Przykład trzeci
Nasz trzeci przykład tworzy powtarzający się okrągły wzór ze średniej wielkości okręgami.
Ten ma trzy stopnie nachylenia.
- Gradient zatrzymuje się
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Zastosuj następujące ustawienia gradientu
- Typ gradientu: Okrągły
- Pozycja gradientu: dół
- Powtarzaj gradient: TAK
- Jednostka gradientu: procent
- Kwadratowy gradient nad obrazem tła: NIE
Przykład 4
Nasz czwarty przykład tworzy okrągły wzór z dużymi okręgami.
Ten ma trzy stopnie nachylenia.
- Gradient zatrzymuje się:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
W przypadku ustawień gradientu zmień w następujący sposób:
- Typ gradientu: Okrągły
- Pozycja gradientu: Środek
- Powtarzaj gradient: TAK
- Jednostka gradientu: procent
- Kwadratowy gradient nad obrazem tła: Nie
Pobierz DIVI teraz !!!
Wnioski
Oto nasze spojrzenie na to, jak korzystać z opcji, aby Powtarzanie gradientu z Divi, aby tworzyć niestandardowe tła. Wiele zmian w ustawieniach gradientu wpływa na projekt gradientu.
Gradient Repeat działa dobrze ze wszystkimi tymi poprawkami, aby łatwo tworzyć ciekawe niestandardowe wzory tła.
Zalecamy wypróbowanie podanych tutaj przykładów i wprowadzenie zmian, aby zobaczyć, jak wpływają na gradienty, i tworzenie własnych niestandardowych gradientów tła.
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 projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie 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.
...
