Ønsker du å kombinere bakgrunnsmaskene og separatoren til Divi å ha en sublim og unik bakgrunn?
Kombinasjonen av bakgrunnsmasker med seksjonsdelere inn Divi legger til enda et lag med kreativitet til et allerede kraftig arsenal av bakgrunnsdesignalternativer.
I tillegg til bakgrunnsalternativer, lar seksjonsdelere også brukere forbedre bakgrunnsdesignene sine.
I denne opplæringen vil vi vise deg hvordan du kombinerer bakgrunnsmasker med seksjonsdelere i Divi. Vi vil gi deg trinnvise instruksjoner om hvordan du lager et bakgrunnsdesign for en Divi-seksjon ved hjelp av denne teknikken.
I tillegg vil vi til og med forklare hvordan du lager alternative design med bare noen få enkle justeringer.
La oss starte!
undersøkelsen
Her er en forhåndsvisning av tegningene i denne opplæringen.
Konseptet
Det grunnleggende konseptet i denne opplæringen er å kombinere en bakgrunnsmaske og seksjonsdelere for å lage enda mer unike maskeformer.
Først legger vi til en bakgrunnsmaske.
Deretter legger vi til seksjonsdelere for å kreativt fullføre formen på masken.
Opprett en ny side med Divi Builder
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.
Kombiner bakgrunnsmasker og skillelinjer i Divi
Legg til seksjonsstørrelse og mellomrom
Til å begynne med legger vi til størrelsen og avstanden til den eksisterende delen i konstruktøren. Vi stopper å legge til en linje eller alle innhold slik at vi kan fokusere på å designe bakgrunnen til delen.
Åpne seksjonsinnstillinger. Under fanen utforming, oppdater størrelsen og avstanden som følger:
- Min Høyde: 50 vw
- Polstring (øverst og bunn): 0px
Lag bakgrunnsgradienten
Når seksjonen har en viss høyde, er vi klare til å legge til bakgrunnsgradienten til seksjonen.
Under fanen Innhold, klikk på fanen Bakgrunnsgradient under bakgrunnsalternativer. Legg deretter til en gradient som følger:
- Gradient stopper
- 20 %: #1a2a6c
- 60 %: #b21f1f
- 100 %: #fdbb2d
Lag bakgrunnsmasken
Nå som vi har en fargegradient, er vi klare til å lage en bakgrunnsmaske.
Under fanen Bakgrunnsmaske, oppdater følgende:
- Maske: fiskebein
- Maskefarge: #000000
- Transform: Invertert
- Mask Aspect Ratio: se skjermbilde
Legg til seksjonsskillere (delere)
Med masken vår på plass kan vi endre formen på masken ytterligere ved å bruke seksjonsdelere.
I dette eksemplet legger vi til en halvsirkelseksjonsdeler øverst og nederst. Dette vil komprimere bakgrunnsmasken for å se mer ut som en fancy pildesign.
For å gjøre dette, klikk på fanen utforming og legg til følgende skilletegn:
Først legger du til en toppskiller under fanen God.
- Divider Style: Se skjermbilde
- Farge: #000
- Skillehøyde: 10 vw
Deretter legger du til en bunnskilletegn under fanen Bunn.
- Divider Style: Se skjermbilde
- Farge: #000
- Skillehøyde: 10 vw
- Divider Flip: Vertikal Flip
Resultatet
Her er resultatet så langt.
Juster bakgrunnsalternativer og skillelinjer for mer design
Nå som du har den grunnleggende ideen på plass, kan vi enkelt leke med seksjonsdelerene for å lage flere mønstre.
Se også: Divi: Hvordan bruke "Gradient Builder" for å forskjønne bildene dine
Alternativ design #1
For vår første alternative design, vil vi rotere den eksisterende bakgrunnsmasken. Deretter vil vi erstatte de halvsirkelformede seksjonsdelere med trekanter.
For å gjøre dette, åpne de eksisterende seksjonsinnstillingene, klikk på fanen Bakgrunnsmaske og oppdater følgende:
- Mask Transform: vertikal flip, rotasjon
- Mask Aspect Ratio: se skjermbilde
Deretter oppdaterer du seksjonsseparatorene som følger:
Øvre skillevegg
- Divider Style: Se skjermbilde
- Skillehøyde: 13 vw
Bunndeler
- Divider Style: Se skjermbilde
- Høyde: 13 vw
- Divider Flip: désactiver
Resultatet
Her er resultatet.
Alternativ design #2
For vårt andre og siste alternative design, skal vi bytte ut masken sperrene ved masken Diagonalstenger 2 og gi den også en ny toppdeler.
For å gjøre dette, åpne de eksisterende seksjonsinnstillingene, klikk på fanen Bakgrunnsmaske og oppdater følgende:
- Maske: diagonale stolper 2
- Mask Transform: horisontal flip
- Aspect Ratio: se skjermbilde
Deretter oppdaterer du seksjonsseparatorene som følger:
Øvre skillevegg
- Divider Style: Se skjermbilde
- Divider Flip: Horisontal Flip
Bunndeler
- Divider Style: Ingen
Resultatet
Her er resultatet.
Endelige resultater
For å gi deg en bedre ide om hvordan disse bakgrunnene vil se ut med innhold, la vi til en rad i en kolonne med en tittel.
Last ned DIVI nå!!!
konklusjonen
Å kombinere masker og seksjonsdelere for bakgrunnsdesign åpner for flere muligheter for å lage unike former for disse innebygde maskene.
Utforsk gjerne ulike kombinasjoner på egen hånd.
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.
...
