Vil du kombinere baggrundsmaskerne og separatoren af Divi at have sublime og unikke baggrunde?
Kombinationen af baggrundsmasker med sektionsopdelere i Divi tilføjer endnu et lag af kreativitet til et allerede kraftfuldt arsenal af muligheder for baggrundsdesign.
Ud over baggrundsmuligheder giver sektionsopdelere også brugere mulighed for at forbedre deres baggrundsdesign.
I denne vejledning viser vi dig, hvordan du kombinerer baggrundsmasker med sektionsseparatorer i Divi. Vi vil give dig trin-for-trin instruktioner om, hvordan du laver et baggrundsdesign til en Divi-sektion ved hjælp af denne teknik.
Plus, vi vil endda forklare, hvordan man opretter alternative designs med blot nogle få enkle justeringer.
Lad os starte!
undersøgelse
Her er et eksempel på tegningerne i denne øvelse.
Konceptet
Det grundlæggende koncept i denne tutorial er at kombinere en baggrundsmaske og sektionsopdelere for at skabe endnu mere unikke maskeformer.
Først tilføjer vi en baggrundsmaske.
Dernæst tilføjer vi sektionsopdelere for kreativt at fuldende maskens form.
Opret en ny side med Divi Builder
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.
Kombiner baggrundsmasker og skillevægge i Divi
Tilføj sektionsstørrelse og mellemrum
Til at begynde med tilføjer vi størrelsen og afstanden til den eksisterende sektion i konstruktøren. Vi vil suspendere tilføjelsen af en linje eller det hele indhold så vi kan fokusere på at designe baggrunden for afsnittet.
Åbn sektionsindstillinger. Under fanen Design, opdater størrelsen og afstanden som følger:
- Min Højde: 50 vw
- Polstring (top og bund): 0px
Opret baggrundsgradienten
Når sektionen har en vis højde, er vi klar til at tilføje baggrundsgradienten til sektionen.
Under fanen Indhold, klik på fanen Baggrundsgradient under baggrundsindstillinger. Tilføj derefter en gradient som følger:
- Gradient stopper
- 20 %: #1a2a6c
- 60 %: #b21f1f
- 100 %: #fdbb2d
Opret baggrundsmasken
Nu hvor vi har en farvegradient, er vi klar til at lave en baggrundsmaske.
Under fanen Baggrundsmaske, opdater følgende:
- Maske: Sildeben
- Maskefarve: #000000
- Transform: Inverteret
- Mask Aspect Ratio: se skærmbillede
Tilføj sektionsadskillere (delere)
Med vores maske på plads kan vi yderligere ændre maskens form ved hjælp af sektionsopdelere.
I dette eksempel tilføjer vi en halvcirkelsektionsopdeler øverst og nederst. Dette vil komprimere baggrundsmasken til at ligne et fancy pildesign.
For at gøre dette skal du klikke på fanen Design og tilføj følgende separatorer:
Tilføj først en topseparator under fanen Top.
- Divider Style: Se skærmbillede
- Farve: #000
- Skillehøjde: 10 vw
Tilføj derefter en bundseparator under fanen Bund.
- Divider Style: Se skærmbillede
- Farve: #000
- Skillehøjde: 10 vw
- Divider Flip: Lodret Flip
Resultatet
Her er resultatet hidtil.
Juster baggrundsindstillinger og skillevægge for mere design
Nu hvor du har grundideen på plads, kan vi nemt lege med sektionsopdelerene for at skabe flere mønstre.
Se også: Divi: Sådan bruger du "Gradient Builder" til at forskønne dine billeder
Alternativt design #1
Til vores første alternative design roterer vi den eksisterende baggrundsmaske. Dernæst vil vi erstatte de halvcirkelformede sektionsdelere med trekanter.
For at gøre dette skal du åbne de eksisterende sektionsindstillinger, klikke på fanen Baggrundsmaske og opdatere følgende:
- Masketransformation: lodret vending, rotation
- Mask Aspect Ratio: se skærmbillede
Opdater derefter sektionsseparatorerne som følger:
Øverste skillevæg
- Divider Style: Se skærmbillede
- Skillehøjde: 13 vw
Nederste skillevæg
- Divider Style: Se skærmbillede
- Højde: 13 vw
- Divider Flip: désactiver
Resultatet
Her er resultatet.
Alternativt design #2
Til vores andet og sidste alternative design vil vi udskifte masken spær ved masken Diagonale stænger 2 og giv den også en ny topsektionsopdeler.
For at gøre dette skal du åbne de eksisterende sektionsindstillinger, klikke på fanen Baggrundsmaske og opdatere følgende:
- Maske: Diagonalstænger 2
- Masketransform: vandret vending
- Aspect Ratio: se skærmbillede
Opdater derefter sektionsseparatorerne som følger:
Øverste skillevæg
- Divider Style: Se skærmbillede
- Divider Flip: Horisontal Flip
Nederste skillevæg
- Divider Style: Ingen
Resultatet
Her er resultatet.
Endelige resultater
For at give dig en bedre idé om, hvordan disse baggrunde vil se ud med indhold, føjede vi en række til en kolonne med en titel.
Download DIVI nu!!!
Konklusion
Kombinationen af masker og sektionsopdelere til baggrundsdesign åbner flere muligheder for at skabe unikke former til disse indbyggede masker.
Du er velkommen til at udforske forskellige kombinationer på egen hånd.
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.
...
