Želite li stvoriti pozadinske prijelaze između elemenata Divi ?
Stvorite besprijekorne prijelaze dizajna pozadine između elemenata Divi je sjajan način da poboljšate dizajn vašeg web stranica Divi.
To vam omogućuje neprimjetan prijelaz gradijenta, uzorka i maske pozadine između linije i odjeljka na kreativan način.
Na primjer, možete imati prijelaz uzorka ili maske u različitim bojama bez gubitka cjelokupnog poravnanja i simetričnog izgleda dizajna.
U ovom vodiču koristit ćemo Divi ugrađene mogućnosti dizajna pozadine za stvaranje besprijekornog prijelaza dizajna pozadine između Divi odjeljka i linije. Primjena i svestranost ovog dizajna je neograničena, podižući Divi mogućnosti dizajna pozadine na potpuno novu razinu!
Počnimo.
pregled
Evo kratkog pregleda dizajna koji ćemo izraditi u ovom vodiču.
Evo nekih drugih uzoraka dizajna koji su mogući uz samo nekoliko jednostavnih promjena maski i pozadinskih uzoraka.
Stvorite novu stranicu s Divi Builderom
Da biste započeli, morat ćete učiniti sljedeće:
S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder
zatim kliknite Počnite graditi (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.
Stvaranje besprijekornog prijelaza u pozadini između Divi odjeljka i linije
Stvaranje zaglavlja kao sadržaja rezerviranog mjesta
Pročitajte također: Divi: Kako stvoriti kartice s efektom lebdenja od linija
Prije nego što uskočimo, moramo dodati zaglavlje kao sadržaj fiktivna. Za početak dodajte redak s jednim stupcem u zadani odjeljak stranice.
Zatim retku dodajte tekstualni modul.
Dodajte tekst veličine H1.
Ispod kartice dizajn, ažurirajte dizajn teksta zaglavlja po želji.
- Font: Roboto Condensed
- Težina fonta: Podebljano
- Stil: TT
- Poravnanje teksta: centrirano
- Boja teksta: #000000
- Veličina teksta naslova: 4vw
- Razmak između slova: 0.1em
- Visina linije: 1.3 em
Dizajn pozadine odjeljka
Dodana ispuna u odjeljak
Nakon što je lažno zaglavlje postavljeno, otvorite postavke odjeljka i ažurirajte razmak na sljedeći način:
- Podstava (gornji i donji dio): 15vw
Odjeljku je dodan pozadinski gradijent
Sada kada imamo više prostora za rad, spremni smo dodati naš dizajn pozadine u odjeljak. Ispod kartice Gradijent pozadine, dodajte sljedeće točke gradijenta:
- Gradijent zaustavljanja:
- 0%: #4f0f75 (na 0%)
- 25%: #2843c9 (na 25%)
- 50%: #4ae2e0 (na 50%)
- 75%: #3881ff (na 75%)
- 100%: #4f0f75 (na 100%)
Dodavanje pozadinskog uzorka u odjeljak
Ispod kartice Pozadinski uzorakažurirajte sljedeće:
- Uzorak: dijagonalne pruge
- Boja uzorka: rgba(79,15,117,0.23)
- Transformacija: Zakreni
- Veličina uzorka: prilagođena veličina
- Širina: 7vw
- Visina: 5vw
- Početak ponavljanja uzorka: centar
Napomena: Obavezno koristite VW jedinicu duljine za širinu i visinu uzorka. Također, svakako postavite ponovljeno ishodište na "centar". Ovo će zadržati pozadinski uzorak na istom mjestu kao pozadinski uzorak koji ćemo kasnije dodati u red.
Dodavanje pozadinske maske u odjeljak
Ispod kartice Maska za pozadinu, dodajte sljedeće:
- Pozadinska maska: Layer Blob
- Boja maske: rgba(0,0,0,0.7)
- Širina maske: 100vw
- Pozicija: Centar
Napomena: Baš kao i kod uzorka, moramo odrediti veličinu maske koristeći VW jedinicu duljine. Maski također moramo dati središnji položaj.
Linijski dizajn pozadine
Kopirajte i zalijepite pozadinu odjeljka u pozadinu retka
Da biste ubrzali proces dizajna pozadine linije, kopirajte postavke pozadine odjeljka.
Zatim zalijepite pozadinu na postojeću liniju.
U ovom trenutku već možete vidjeti kako pozadinski uzorak i maska na liniji čine besprijekoran prijelaz na pozadinu odjeljka.
Čini se da linija ima prozirnu pozadinu, ali zapravo je isti uzorak i maska korištena u odjeljku s istom veličinom i položajem.
Podesite veličinu retka i ispunu pomoću VW-a
Zatim moramo našem redu dati prilagođenu širinu koristeći VW jedinicu duljine. Ažurirajte sljedeće:
- Širina: 75vw
- Maksimalna širina: 75vw
- Podstava (gore, dolje, lijevo i desno): 10vw
Podesite granice gradijenta na liniji
Zatim moramo prilagoditi graničnike gradijenta na pozadini linije za neprimjetan prijelaz u gradijent pozadine odjeljka.
Ispod kartice Gradijent pozadine, zadržat ćemo tri srednje točke gradijenta naslijeđene iz pozadine odjeljka) i ukloniti prvu i posljednju granicu gradijenta.
Zatim postavite prvu stopu na 0%, a treću stopu na 100%. Kada završite, trebali biste imati sljedeće gradijente.
- Gradijent zaustavljanja
- 0%: #2843c9
- 50%: #4ae2e0
- 100%: #3881ff
Dodajte sjenu okvira na liniju
Kako bismo malo podigli dizajn i naglasili besprijekoran prijelaz pozadine, možemo dodati sjenu okvira u red.
- Box Shadow: pogledajte snimak zaslona
- Okomiti položaj: 0px
- Box Shadow Blur Strength: 4vw
- Boja sjene: rgba(0,0,0,0.5)
Podesite boju pozadinskog uzorka linije
Sada kada imamo sve pozadinske elemente na mjestu, možemo početi prilagođavati boje za kreativniji dizajn.
Pod opcijom Pozadinski uzorak redak, ažurirajte sljedeće:
- Boja uzorka: rgba(255,255,255,0.23)
Podesite boju pozadinske maske linije
Također možemo ažurirati boju maske za liniju kako bi se dizajn zaista istaknuo.
Ispod kartice Maska za pozadinuažurirajte sljedeće:
- Boja maske: #ffffff
- Transformacija maske: obrnuto
Konačni rezultat
Da vidimo konačni rezultat.
Preuzmite DIVI sada!!!
Više mogućnosti
Evo nekih drugih uzoraka dizajna koji su mogući uz samo nekoliko jednostavnih promjena maski i pozadinskih uzoraka.
Vidi također: Divi: Kako koristiti "Gradient Builder" za uljepšavanje vaših slika
Preuzmite DIVI sada!!!
Zaključak
Ključ za stvaranje besprijekornih prijelaza dizajna pozadine u Diviju je mudra upotreba ovih VW jedinica duljine.
Prvo moramo izraditi dizajn pozadine odjeljka koji odgovara širini okvira preglednika (od središnjeg položaja na stranici). Nakon što završimo, možemo koristiti isti jednolinijski dizajn pozadine. Nakon toga, imamo samo neke izmjene na prijelazu i bojama za nevjerojatan dizajn.
Nadamo se da će ova tehnika dodati još jednu korisnu dizajnersku vještinu za buduće projekte.
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 je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se također konzultirati naš vodič o 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.
...
