Želite li izraditi prilagođene pozadinske uzorke pomoću opcije ponavljanja gradijenta Divi ?
Opcije pozadine Divi nude mnogo načina za stvaranje pozadinskih uzoraka. Možete čak izraditi pozadinske uzorke koristeći samo gradijente. Opcija ponavljanja gradijenta čini ovo jednostavnim i lakim.
U ovom ćemo članku vidjeti kako koristiti opciju ponavljanja gradijenta Divi za stvaranje prilagođenih uzoraka pozadine.
Počnimo.
Vidi također: Divi: Kako kreirati obrazac za kontakt koji se pojavljuje nakon klika na gumb
Što je ponavljanje gradijenta
Opcija ponavljanja gradijenta stvara uzorak na temelju zaustavljanja gradijenta. Granice gradijenta su mjere koje određuju gdje se boje pojavljuju i zaustavljaju u gradijentu. Divi i njegov Gradient Builder koriste ove graničnike za stvaranje uzorka.
Posljednja boja govori gradijentu gdje je prijelomna točka u gradijentu. Prije ove prijelomne točke možete imati onoliko boja koliko želite.
Le Gradijent graditelj zatim će to ponoviti da ispuni zaslon koji stvara uzorak. Opcija se može dodati u bilo koji odjeljak, redak, stupac ili modul te se mogu koristiti zajedno.
Aktivirajte opciju "Background Gradient".
Za aktiviranje opcije Ponavljanje gradijenta, otvorite postavke odjeljka klikom na njegovu ikonu zupčanika. Također radi s redovima, stupcima i moduli.
Pomaknite se do pozadina . Odaberite karticu Pozadina gradijenta i kliknite na Dodajte pozadinski gradijent.
Ispod trake za zaustavljanje gradijenta nalazi se postavka tzv Ponavljanje gradijenta . Ovo je prema zadanim postavkama onemogućeno. Samo kliknite na njega da biste ga aktivirali.
Gradijent će se sada ponoviti, stvarajući uzorak na temelju vaših graničnika gradijenta i drugih postavki gradijenta, kao što je jedinica gradijenta.
Jedinice gradijenta
Jedinica gradijenta je mjerna jedinica. Ovo određuje što označavaju brojevi graničnih gradijenata na traci gradijenta, što određuje kako se mjere granične gradijentne granice. To utječe na uzorak koji stvara opcija ponavljanja.
Generator pozadinskog gradijenta Divi nudi 15 jedinica. Pogledajmo primjer četiri najpopularnije opcije. Kao što ćemo vidjeti u našim primjerima, rezultat će se mijenjati ovisno o vašem broju stupnjeva gradijenta i vašim postavkama.
postotak (postotak)
Postotak mjeri zaustavljanja gradijenta u postocima. Time se izračunavaju točke gradijenta na temelju nadređenog elementa. Što je zadnji gradijent bod manji, to je stvoreni uzorak čvršći. Prilikom podešavanja položaja jedne od boja, ta se boja pomiče dok ostale ostaju na mjestu.
Pikseli (px)
Pikseli mjere broj piksela za svaku granicu gradijenta. To gradijentu daje manji uzorak od većine drugih vrsta jedinica. Pomicanjem položaja prve ili zadnje boje mijenja se položaj svake boje.
Visina prozora (vh)
Okvir za prikaz je područje prozora preglednika koje je vidljivo. Mjeri se zasebno po visini i širini. Visina prozora koristi granice gradijenta za mjerenje postotka visine veličine prozora. Podešavanje položaja prve ili zadnje boje utječe na sve boje.
Širina prozora (vw)
Širina prozora koristi granice gradijenta za mjerenje postotka širine veličine prozora (ili širine preglednika). Prilagodbe se mijenjaju ovisno o širini. Kako povećavate ili smanjujete broj, ta određena boja mijenja položaj dok ostale ostaju iste.
Primjeri korištenja opcije "Ponavljanje gradijenta".
Pročitajte također: Divi: Kako izraditi tablet s pomičnim sadržajem najave
Za naše primjere koristimo odjeljak Poziv na radnju na početnoj stranici besplatni paket rasporeda za akupunkturu dostupan u Divi.
Morat ćemo prilagoditi prvi stupac odjeljka. Otvori ih parametri linije klikom na njegovu ikonu zupčanika.
Zatim odaberite ikona zupčanika za prvi stupac.
stupac jedan gradijent
Prvi stupac ima vlastiti pozadinski gradijent. To je dio rasporeda. Nećemo to promijeniti. Koristit ćemo isti gradijent u naša četiri primjera. Ovdje su postavke u slučaju da vam zatrebaju.
- Gradijent zaustavljanja:
- 0px: #f4d5b8
- 100 px: rgba(244,213,184,0)
Postavke gradijenta
- Vrsta gradijenta: linearni
- Položaj gradijenta: 180 stupnjeva
- Ponavljanje gradijenta: NE
- Jedinica gradijenta: postotak
- Kvadratni gradijent iznad pozadinske slike: BR
razmak
Dodat ćemo razmak s lijeve strane stupca. Pristup kartici dizajn, pomaknite se do Razmještanje i odaberite ikona tableta za otvaranje opcija uređaja.
Dodajte 5% lijevog ruba za kartice stolnog računala i tableta. Odaberite karticu telefona i izbrišite lijevi ispun. Ostavite Gore i Desno na trenutnim postavkama.
- punjenje
- Vrh: 180 px
- Lijevo: 5%
- Lijevo: 80 px
primjer jedan
Naš prvi primjer stvara dijagonalni ponavljajući uzorak s tankim linijama.
Ovaj ima tri gradijenta.
- Gradijent zaustavljanja:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Koristite sljedeće postavke.
- Vrsta gradijenta: linearni
- Smjer gradijenta: 156 stupnjeva
- Ponovi gradijent: DA
- Jedinica gradijenta: pikseli
- Kvadratni gradijent iznad pozadinske slike: br
Drugi primjer
Naš drugi primjer stvara dijagonalni ponavljajući uzorak s većim linijama.
Ovaj ima tri gradijenta.
- Gradijent zaustavljanja:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
Za postavke gradijenta,
- Vrsta gradijenta: linearni
- Smjer gradijenta: 156 stupnjeva
- Ponovi gradijent: DA
- Jedinica gradijenta: pikseli
- Kvadratni gradijent iznad pozadinske slike: BR
Primjer tri
Naš treći primjer stvara ponavljajući kružni uzorak s krugovima srednje veličine.
Ovaj ima tri gradijenta.
- Gradijent zaustavljanja
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Primijenite sljedeće postavke gradijenta
- Vrsta gradijenta: Kružni
- Položaj gradijenta: dolje
- Ponovi gradijent: DA
- Jedinica gradijenta: postotak
- Kvadratni gradijent iznad pozadinske slike: BR
Primjer 4
Naš četvrti primjer stvara kružni uzorak s velikim krugovima.
Ovaj ima tri gradijenta.
- Gradijent zaustavljanja:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
Za postavke gradijenta promijenite na sljedeći način:
- Vrsta gradijenta: Kružni
- Položaj gradijenta: središte
- Ponovi gradijent: DA
- Jedinica gradijenta: postotak
- Kvadratni gradijent iznad pozadinske slike: br
Preuzmite DIVI odmah!!!
Zaključak
Ovo je naš pogled na to kako koristiti opciju za Ponavljanje gradijenta iz Divi za izradu prilagođenih pozadina. Mnoge prilagodbe u postavkama gradijenta utječu na dizajn gradijenta.
Ponavljanje gradijenta dobro funkcionira sa svim ovim podešavanjima za jednostavno stvaranje zanimljivih prilagođenih uzoraka pozadine.
Preporučamo da isprobate primjere koje smo ovdje naveli i izvršite promjene kako biste vidjeli kako to utječe na gradijente i stvorite vlastite prilagođene pozadinske gradijente.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
