Ønsker du at lave baggrundsovergange mellem elementer Divi ?
Skab sømløse baggrundsdesign overgange mellem elementer Divi er en fantastisk måde at forbedre designet af din Websted Divi.
Dette giver dig mulighed for problemfrit at skifte en gradient, et mønster og en baggrundsmaske mellem en linje og en sektion på en kreativ måde.
For eksempel kan du have et mønster eller en maskeovergang i forskellige farver uden at miste designets overordnede justering og symmetriske udseende.
I denne vejledning vil vi bruge Divis indbyggede baggrundsdesignmuligheder til at skabe en sømløs baggrundsdesignovergang mellem en Divi-sektion og en linje. Anvendelsen og alsidigheden af dette design er ubegrænset, og tager Divi's baggrundsdesignmuligheder til et helt nyt niveau!
Lad os starte.
undersøgelse
Her er et hurtigt kig på det design, vi bygger i denne øvelse.
Her er nogle andre eksempeldesigns, der er mulige med blot nogle få enkle ændringer af masker og baggrundsmønstre.
Opret en ny side med Divi Builder
For at komme i gang skal du gøre følgende:
Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.
Giv den en titel, der giver mening for dig, og klik Brug Divi Builder
klik derefter på Begynd at bygge (Byg fra skrammer)
Derefter har du et tomt lærred til at begynde at designe i Divi.
Oprettelse af en sømløs overgang i baggrunden mellem en Divi-sektion og en linje
Oprettelse af en header som pladsholderindhold
Læs også: Divi: Sådan opretter du faner med svæveeffekt fra linjer
Før vi hopper ind, skal vi tilføje en header som indhold fiktive. For at komme i gang skal du tilføje en række med én kolonne til standardafsnittet på siden.
Tilføj derefter et tekstmodul til linjen.
Tilføj H1 størrelse tekst.
Under fanen Design, opdater headertekstdesignet som ønsket.
- Skrifttype: Roboto Condensed
- Skrifttypevægt: Fed
- Stil: TT
- Tekstjustering: Centreret
- Tekstfarve: #000000
- Overskrift Tekststørrelse: 4vw
- Bogstavafstand: 0.1em
- Linjehøjde: 1.3 em
Sektionsbaggrundsdesign
Tilføjet polstring til afsnittet
Når den falske overskrift er på plads, skal du åbne sektionsindstillingerne og opdatere mellemrummet som følger:
- Polstring (top og bund): 15vw
Føjede baggrundsgradienten til sektionen
Nu hvor vi har mere plads at arbejde med, er vi klar til at tilføje vores baggrundsdesign til sektionen. Under fanen Baggrundsgradient, tilføj følgende gradientpunkter:
- Gradientstop:
- 0%: #4f0f75 (ved 0%)
- 25 %: #2843c9 (ved 25 %)
- 50 %: #4ae2e0 (ved 50 %)
- 75 %: #3881ff (ved 75 %)
- 100%: #4f0f75 (ved 100%)
Tilføjelse af et baggrundsmønster til afsnittet
Under fanen Baggrundsmønster, opdater følgende:
- Mønster: Diagonale striber
- Mønsterfarve: rgba(79,15,117,0.23)
- Transform: Roter
- Mønsterstørrelse: Brugerdefineret størrelse
- Bredde: 7vw
- Højde: 5vw
- Mønster Gentagelse Oprindelse: Center
Bemærk: Sørg for at bruge VW-længdeenheden til mønsterets bredde og højde. Og sørg også for at indstille den gentagne oprindelse til "center". Dette vil holde baggrundsmønsteret på samme sted som det baggrundsmønster, vi tilføjer til rækken senere.
Tilføjelse af en baggrundsmaske til afsnittet
Under fanen Baggrundsmaske, tilføj følgende:
- Baggrundsmaske: Layer Blob
- Maskefarve: rgba(0,0,0,0.7)
- Maskebredde: 100vw
- Stilling: Center
Bemærk: Ligesom med mønsteret skal vi dimensionere masken ved hjælp af VW-længdeenheden. Vi skal også give masken en central position.
Linje baggrundsdesign
Kopiér og indsæt sektionsbaggrund til rækkebaggrund
For at fremskynde designprocessen for linjebaggrunden skal du kopiere sektionens baggrundsindstillinger.
Indsæt derefter baggrunden på den eksisterende linje.
På dette tidspunkt kan du allerede se, hvordan baggrundsmønsteret og masken på linjen laver en problemfri overgang til sektionens baggrund.
Det ser ud til, at linjen har en gennemsigtig baggrund, men det er faktisk det samme mønster og maske, som bruges i afsnittet med samme størrelse og position.
Juster rækkestørrelse og polstring med VW
Dernæst skal vi give vores række en tilpasset bredde ved hjælp af VW-længdeenheden. Opdater følgende:
- Bredde: 75vw
- Max bredde: 75vw
- Polstring (top, bund, venstre og højre): 10vw
Juster gradientstop på linjen
Dernæst skal vi justere gradientstoppene på linjebaggrunden for en sømløs overgang til sektionsbaggrundsgradienten.
Under fanen Baggrundsgradient, beholder vi de tre midterste gradientpunkter, der er arvet fra sektionsbaggrunden) og fjerner det første og sidste gradientstop.
Indstil derefter det første stop til 0% og det tredje stop til 100%. Når du er færdig, skal du have følgende gradienter.
- Gradient stopper
- 0 %: #2843c9
- 50 %: #4ae2e0
- 100 %: #3881ff
Tilføj boksskygge til linjen
For at give designet et lille løft og understrege den sømløse overgang af baggrunden, kan vi tilføje en kasseskygge til rækken.
- Box Shadow: se skærmbillede
- Lodret position: 0px
- Box Shadow Blur Styrke: 4vw
- Skyggefarve: rgba(0,0,0,0.5)
Juster linjebaggrundsmønsterfarven
Nu hvor vi har alle baggrundselementerne på plads, kan vi begynde at justere farverne for et mere kreativt design.
Under indstillingen Baggrundsmønster række, skal du opdatere følgende:
- Mønsterfarve: rgba(255,255,255,0.23)
Juster linjebaggrundsmaskefarven
Vi kan også opdatere maskefarven for linjen for virkelig at få designet til at skille sig ud.
Under fanen Baggrundsmaske, opdater følgende:
- Maskefarve: #ffffff
- Masketransformation: omvendt
Endelig resultat
Lad os se det endelige resultat.
Download DIVI nu!!!
Flere muligheder
Her er nogle andre eksempeldesigns, der er mulige med blot nogle få enkle ændringer af masker og baggrundsmønstre.
Se også: Divi: Sådan bruger du "Gradient Builder" til at forskønne dine billeder
Download DIVI nu!!!
Konklusion
Nøglen til at skabe sømløse baggrundsdesignovergange i Divi er at bruge disse VW-længdeenheder klogt.
Først skal vi oprette et sektionsbaggrundsdesign, der passer til bredden af browserens visningsport (fra en centreret position på siden). Når det er gjort, kan vi bruge det samme en-linjes baggrundsdesign. Derefter har vi bare nogle gradient- og farvejusteringer for et fantastisk design.
Forhåbentlig vil denne teknik tilføje endnu en nyttig designfærdighed til fremtidige projekter.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
