Ønsker du å lage bakgrunnsoverganger mellom elementer Divi ?
Lag sømløse bakgrunnsdesignoverganger mellom elementer Divi er en fin måte å forbedre designen til din nettstedet Web Divi.
Dette lar deg sømløst overføre en gradient, et mønster og en bakgrunnsmaske mellom en linje og en seksjon på en kreativ måte.
For eksempel kan du ha et mønster eller maskeovergang i forskjellige farger uten å miste den generelle justeringen og symmetriske utseendet til designet.
I denne opplæringen vil vi bruke Divis innebygde bakgrunnsdesignalternativer for å lage en sømløs bakgrunnsdesignovergang mellom en Divi-seksjon og en linje. Bruken og allsidigheten til dette designet er ubegrenset, og tar Divis bakgrunnsdesignalternativer til et helt nytt nivå!
La oss begynne.
undersøkelsen
Her er en rask titt på designet vi skal bygge i denne opplæringen.
Her er noen andre eksempeldesign som er mulig med bare noen få enkle endringer i masker og bakgrunnsmønstre.
Opprett en ny side med Divi Builder
For å komme i gang må du gjøre følgende:
Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.
Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder
deretter klikker du Begynn å bygge (Bygg fra bunnen av)
Etter det vil du ha et blankt lerret for å begynne å designe i Divi.
Lage en sømløs overgang i bakgrunnen mellom en Divi-seksjon og en linje
Opprette en overskrift som plassholderinnhold
Les også: Divi: Hvordan lage faner med sveveeffekt fra linjer
Før vi hopper inn, må vi legge til en header som innhold fiktiv. For å komme i gang, legg til en rad med én kolonne til standarddelen av siden.
Legg deretter til en tekstmodul på linjen.
Legg til tekst i H1-størrelse.
Under fanen utforming, oppdater topptekstdesignet etter ønske.
- Font: Roboto Condensed
- Skriftvekt: Fet
- Stil: TT
- Tekstjustering: Sentrert
- Tekstfarge: #000000
- Overskrift Tekststørrelse: 4vw
- Bokstavavstand: 0.1em
- Linjehøyde: 1.3 em
Seksjonsbakgrunnsdesign
Lagt til polstring i seksjonen
Når den falske overskriften er på plass, åpner du seksjonsinnstillingene og oppdaterer avstanden som følger:
- Polstring (øverst og bunn): 15vw
Lagt til bakgrunnsgradienten til delen
Nå som vi har mer plass å jobbe med, er vi klare til å legge til bakgrunnsdesignet vårt i delen. Under fanen Bakgrunnsgradient, legg til følgende gradientpunkter:
- Gradientstopp:
- 0 %: #4f0f75 (ved 0 %)
- 25 %: #2843c9 (ved 25 %)
- 50 %: #4ae2e0 (ved 50 %)
- 75 %: #3881ff (ved 75 %)
- 100 %: #4f0f75 (ved 100 %)
Legge til et bakgrunnsmønster til seksjonen
Under fanen Bakgrunnsmønster, oppdater følgende:
- Mønster: Diagonale striper
- Mønsterfarge: rgba(79,15,117,0.23)
- Transform: Roter
- Mønsterstørrelse: Egendefinert størrelse
- Bredde: 7vw
- Høyde: 5vw
- Mønster Gjenta Opprinnelse: Senter
Merk: Sørg for å bruke VW-lengdeenheten for bredden og høyden på mønsteret. Og sørg også for å sette den gjentatte opprinnelsen til "senter". Dette vil holde bakgrunnsmønsteret på samme sted som bakgrunnsmønsteret vi legger til i raden senere.
Legge til en bakgrunnsmaske til delen
Under fanen Bakgrunnsmaske, legg til følgende:
- Bakgrunnsmaske: Layer Blob
- Maskefarge: rgba(0,0,0,0.7)
- Maskebredde: 100vw
- Stilling: Senter
Merk: Akkurat som med mønsteret, må vi dimensjonere masken ved å bruke VW-lengdeenheten. Vi må også gi masken en sentral posisjon.
Linje bakgrunnsdesign
Kopier og lim inn seksjonsbakgrunn til radbakgrunn
For å fremskynde designprosessen for linjebakgrunn, kopier seksjonsbakgrunnsinnstillingene.
Deretter limer du inn bakgrunnen på den eksisterende linjen.
På dette tidspunktet kan du allerede se hvordan bakgrunnsmønsteret og masken på linjen gjør en sømløs overgang til bakgrunnen til seksjonen.
Det ser ut som linjen har en gjennomsiktig bakgrunn, men det er faktisk det samme mønsteret og masken som brukes i seksjonen med samme størrelse og plassering.
Juster radstørrelse og polstring med VW
Deretter må vi gi raden vår en tilpasset bredde ved å bruke VW-lengdeenheten. Oppdater følgende:
- Bredde: 75vw
- Maks bredde: 75vw
- Polstring (øverst, bunn, venstre og høyre): 10vw
Juster gradientstopp på linjen
Deretter må vi justere gradientstoppene på linjebakgrunnen for en sømløs overgang til seksjonsbakgrunnsgradienten.
Under fanen Bakgrunnsgradient, beholder vi de tre midterste gradientpunktene som er arvet fra seksjonsbakgrunnen) og fjerner de første og siste gradientstoppene.
Sett deretter første stopp til 0 % og tredje stopp til 100 %. Når du er ferdig, bør du ha følgende gradienter.
- Gradient stopper
- 0 %: #2843c9
- 50 %: #4ae2e0
- 100 %: #3881ff
Legg til boksskygge på linjen
For å gi designet et lite løft og understreke den sømløse overgangen til bakgrunnen, kan vi legge til en boksskygge i raden.
- Box Shadow: se skjermbilde
- Vertikal posisjon: 0px
- Box Shadow Blur Styrke: 4vw
- Skyggefarge: rgba(0,0,0,0.5)
Juster linjebakgrunnsmønsterfargen
Nå som vi har alle bakgrunnselementene på plass, kan vi begynne å justere fargene for en mer kreativ design.
Under alternativet Bakgrunnsmønster rad, oppdater følgende:
- Mønsterfarge: rgba(255,255,255,0.23)
Juster fargen på linjebakgrunnsmaske
Vi kan også oppdatere maskefargen for linjen for å virkelig få designet til å skille seg ut.
Under fanen Bakgrunnsmaske, oppdater følgende:
- Maskefarge: #ffffff
- Masketransformasjon: invertert
Endelig resultat
La oss se det endelige resultatet.
Last ned DIVI nå!!!
Flere muligheter
Her er noen andre eksempeldesign som er mulig med bare noen få enkle endringer i masker og bakgrunnsmønstre.
Se også: Divi: Hvordan bruke "Gradient Builder" for å forskjønne bildene dine
Last ned DIVI nå!!!
konklusjonen
Nøkkelen til å lage sømløse bakgrunnsdesignoverganger i Divi er å bruke disse VW-lengdeenhetene med omhu.
Først må vi lage et seksjonsbakgrunnsdesign som passer til bredden på nettleserens visningsport (fra en sentrert posisjon på siden). Når det er gjort, kan vi bruke samme enlinjes bakgrunnsdesign. Etter det har vi bare noen gradient- og fargejusteringer for et fantastisk design.
Forhåpentligvis vil denne teknikken legge til en annen nyttig designferdighet for fremtidige prosjekter.
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.
Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
