Vil du bruke Divis maske og bakgrunnsmønsteroverlegg?
Med den siste versjon av bakgrunnsmaske og bakgrunnsmønsterfunksjon av Divi, kan du lage unike helteseksjoner for din nettstedet Web. En helteseksjon er den første delen av din nettstedet Web og det er det første du har Besøkende se før du blar nettstedet Web, så det er viktig å være iøynefallende!
Denne artikkelen vil vise deg hvordan du lager fem unike bakgrunnsmasker og mønsteroverlegg som du kan bruke på et bakgrunnsbilde for å lage virkelig fantastiske helteseksjoner.
Denne opplæringen vil dekke de essensielle trinnene som trengs for å lage hver Hero-seksjon og gi deg verktøyene du trenger for å lage en slående Hero-seksjon for nettstedet ditt på få minutter.
La oss starte!
undersøkelsen
Her er en rask oversikt over de fem helteseksjonene vi skal lage i denne artikkelen i dag.
Last ned DIVI nå!!!
Designene er subtile, enkle og likevel virkningsfulle.
Les også: Divi: Hvordan bruke "Gradient Builder" for å forskjønne bildene dine
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.
Fem eksempler på bakgrunnsmaske og mønsteroverlegg som kan brukes på et bakgrunnsbilde
Først, la oss lage Hero-delen
Alle våre eksempeldesign bruker samme seksjons-, rad- og kolonnestruktur, så la oss sette dem opp nå.
1. Lag en layoutstruktur
Legg til en rad på siden din, klikk deretter på det grønne "+"-ikonet for å vise kolonnestrukturen og velg den første kolonnen, kolonnen i full bredde.
2. Legg til seksjonsavstand
Nå som vi har definert rad og kolonne, er det på tide å legge til litt mellomrom til delen.
På fanen Avstand oppdaterer du følgende:
- Desktop: 400 piksler (øverst og bunn)
- Nettbrett: 200 piksler (øverst og bunn); 25px (venstre og høyre)
- Telefon: 50 piksler (øverst og bunn); 25px (venstre og høyre)
Hero Section Design #1
La oss designe den første Hero-delen.
Last ned DIVI nå!!!
1. Legg til overskriftstekst
Klikk på det grå "+"-ikonet for å få opp modulbiblioteket. Rull til tekst og klikk for å laste.
Skriv inn tittelteksten og deretter under fanen Overskrift Tekst, konfigurer disse innstillingene:
- Heading Font: Work Sans
- Tekstfarge: Hvit #ffffff
- Overskriftstekststørrelse:
- Desktop: 3 em
- Nettbrett: 2,2 em
- Telefon: 1.4em
2. Legg til knappmodul
Legg til en knapp og konfigurer disse innstillingene:
- Under fanen Innholds: Finn ut mer
- Under fanen Justering, velg: Senter
- Klikk på Bruk egendefinerte stiler for knappen konfigurer deretter:
- Knappens tekststørrelse:
- Desktop: 20px
- Nettbrett: 16px
- Telefon: 14px
- Knapptekstfarge: #ffffff
- Bakgrunn: #1d1d1d
- Knappekantbredde: 0
- Kanteradius: 0
- Bokstavavstand: 3 poeng
- Button Font: Work Sans
- Skriftstil: TT
- Knappens tekststørrelse:
3. Legg til et bakgrunnsbilde
Nå som vår innhold er konfigurert, er det på tide å begynne å designe bakgrunnen til seksjonen.
- Gå til bakgrunnsbryteren og klikk på den tredje fanen, bildefanen, og klikk deretter på "Legg til bakgrunnsbilde".
- Dette vil få opp mediebiblioteket ditt, hvor du kan velge et bilde eller laste opp et nytt.
- Når du har valgt bildet ditt, klikker du på "Last opp et bilde"-knappen i nedre høyre hjørne.
4. Legg til et bakgrunnsmønster
Nå som vi har satt opp bakgrunnsbildet vårt, la oss legge til et mønster.
- I fanen Bakgrunn, naviger til den femte fanen, fanen Bakgrunnsmønster, og klikk deretter "Legg til bakgrunnsmønster".
- Velg tuftet fra rullegardinmenyen og konfigurer disse innstillingene:
- Mønsterfarge – rgba(255,255,255,0.31)
- Mønstertransformasjon: ingen
- Størrelse: Faktisk størrelse
- Opprinnelse til gjentakelse av mønster: Topp Nederst
- Gjenta mønster: Gjenta
- Blandingsmodus: Normal
5. Legg til bakgrunnsmaske
Nå som vi har satt opp bakgrunnsbildet og mønsteret vårt, la oss legge til en bakgrunnsmaske.
- I fanen Bakgrunn, naviger til den sjette fanen, fanen Bakgrunnsmaske, og klikk deretter "Legg til en bakgrunnsmaske".
- Velg Bønne fra rullegardinmenyen og konfigurer disse innstillingene:
- Maskefarge: rgba(0,0,0,0.36)
- Mask Aspect Ratio: horisontalt rektangel
- Størrelse: Strekk for å fylle
Så! Du har nå en vakkert designet Hero-seksjon.
Section Hero #2 design
La oss nå designe den andre helteseksjonen.
1. Legg til et bakgrunnsbilde og sett blandingsmodusen til Overlegg
Velg bakgrunnsbildet ditt, sett blandingsmodusen til Overlegg og legg til en overleggsfarge på rgba (10,10,10,0.64).
2. Legg til et bakgrunnsmønster
Nå som vi har satt opp bakgrunnsbildet, la oss legge til et bakgrunnsmønster.
- I Bakgrunn-fanen går du til den 5. fanen, fanen Bakgrunnsmønster, og klikk deretter "Legg til bakgrunnsmønster".
- Velg tuftet fra rullegardinmenyen og konfigurer disse innstillingene:
- Mønsterfarge – rgba(255,255,255,0.09)
- Mønstertransformasjon: ingen
- Størrelse: Deksel
- Opprinnelse til gjentakelse av mønster: Øverst til venstre
- Gjenta mønster: Gjenta
- Blandingsmodus: Normal
3. Legg til bakgrunnsmaske
Nå som vi har satt opp bakgrunnsbildet og mønsteret vårt, la oss legge til en bakgrunnsmaske.
- I fanen Bakgrunn, naviger til den sjette fanen, fanen Bakgrunnsmaske, og klikk deretter "Legg til bakgrunnsmaske".
- Velg cirkumflekstegnet fra rullegardinmenyen og konfigurer disse innstillingene:
- Maskefarge: rgba(0,0,0,0.36)
- Masketransformasjon: Ingen
- Aspektforhold: horisontalt rektangel
- Maskestørrelse: Strekk for å fylle
- Maskeblandingsmodus: Normal
Section Hero #3 design
La oss nå designe den tredje Hero-delen.
1. Legg til et bakgrunnsbilde og sett blandingsmodusen til Overlegg
Velg bakgrunnsbildet ditt, sett blandingsmodusen til Overlegg og legg til en overleggsfarge på rgba (10,10,10,0.39).
2. Legg til et bakgrunnsmønster
Nå som vi har satt opp bakgrunnsbildet vårt, la oss legge til et bakgrunnsmønster.
- I fanen Bakgrunn, naviger til den sjette fanen, fanen Bakgrunnsmønster, og klikk deretter "Legg til bakgrunnsmønster".
- Velg Diagonale striper 2 fra rullegardinmenyen og konfigurer disse innstillingene:
- Mønsterfarge – rgba(0,0,0,0.06)
- Mønstertransformasjon: ingen
- Størrelse: Faktisk størrelse
- Opprinnelse til gjentakelse av mønster: Øverst til venstre
- Gjenta mønster: Gjenta
- Blandingsmodus: Normal
3. Legg til bakgrunnsmaske
Nå som vi har lagt til et bakgrunnsbilde og et mønster, la oss legge til en bakgrunnsmaske.
- I fanen Bakgrunn, naviger til den sjette fanen, fanen Bakgrunnsmaske, og klikk deretter "Legg til bakgrunnsmaske".
- Velg Trekanter fra rullegardinmenyen og konfigurer disse innstillingene:
- Maskefarge: rgba(10, 10, 10, 0,61)
- Masketransformasjon: ingen
- Aspektforhold: horisontalt rektangel
- Maskestørrelse: Strekk for å fylle
- Maskeblandingsmodus: Normal
Section Hero #4 design
La oss nå designe den fjerde delen av Hero.
1. Legg til et bakgrunnsbilde
Velg bakgrunnsbildet ditt.
2. Legg til et bakgrunnsmønster
Nå som vi har lagt til bakgrunnsbildet vårt, la oss legge til et bakgrunnsmønster.
- I fanen Bakgrunn, naviger til den sjette fanen, fanen Bakgrunnsmønster, og klikk deretter "Legg til bakgrunnsmønster".
- Velg Smiler fra rullegardinmenyen og konfigurer disse innstillingene:
- Mønsterfarge – rgba(0,0,0,0.2)
- Mønstertransformasjon: ingen
- Størrelse: Deksel
- Gjenta opprinnelse: øverst til venstre
- Gjenta mønster: Gjenta
- Mønsterblandingsmodus: Normal
3. Legg til bakgrunnsmaske
Nå som vi har brukt bakgrunnsbilde og mønster, la oss legge til en bakgrunnsmaske.
- I fanen Bakgrunn, naviger til den sjette fanen, fanen Bakgrunnsmaske, og klikk deretter "Legg til bakgrunnsmaske".
- Velg Hjørnesjøen fra rullegardinmenyen og konfigurer disse innstillingene:
- Maskefarge: rgba(10, 10, 10, 0,61)
- Masketransformasjon: horisontal
- Aspektforhold: Horisontalt rektangel
- Størrelse: Deksel
- Maskeposisjon: Senter til venstre
- Maskeblendermodus: Normal
3. Konfigurer linjeparametere
Før vi går, har denne Hero-delen unike linjestiler. La oss sette opp dette.
- Størrelse:
- Bredde: 80 %
- Maks bredde: 800px
- Radjustering:
- Desktop: Standard
- Nettbrett: Senter
- Telefon: Senter
- Marginer:
- Venstre: 20vw
Section Hero #5 design
La oss nå designe den femte Hero-delen.
Last ned DIVI nå!!!
1. Legg til et bakgrunnsbilde
Velg bakgrunnsbildet ditt.
2. Legg til et mønster
Nå som vi har satt opp bakgrunnsbildet vårt, la oss bruke et bakgrunnsmønster.
- I fanen Bakgrunn, naviger til den sjette fanen, fanen Bakgrunnsmønster, og klikk deretter "Legg til bakgrunnsmønster".
- Velg Krysser fra rullegardinmenyen og konfigurer disse innstillingene:
- Mønsterfarge – #ffffff
- Mønstertransformasjon: ingen
- Størrelse: Egendefinert størrelse
- Mønsterbredde: 10px
- Mønsterhøyde: 10px
- Gjenta opprinnelse: Topp Nederst
- Gjenta mønster: Gjenta
- Mønsterblandingsmodus: Normal
3. Legg til bakgrunnsmaske
Nå som vi har et bakgrunnsbilde og mønster brukt, la oss legge til en bakgrunnsmaske.
- I fanen Bakgrunn, naviger til den sjette fanen, fanen Bakgrunnsmaske, og klikk deretter "Legg til bakgrunnsmaske".
- Velg Diagonale piller fra rullegardinmenyen og konfigurer disse innstillingene:
- Maskefarge: rgba(10, 10, 10, 0,61)
- Masketransformasjon: horisontal
- Aspektforhold: Horisontalt rektangel
- Størrelse: Deksel
- Maskeposisjon: midt til venstre
- Maskeblandingsmodus: Normal
3. Konfigurer linjeparametere
Før vi går, har denne Hero-delen også unike linjestiler. La oss sette opp dette.
- Størrelse:
- Bredde: 80 %
- Maks bredde: 800px
- Radjustering:
- Desktop: Standard
- Nettbrett: Senter
- Telefon: Senter
- Mellomrom:
- Marg (Høyre): 18vw
Se også: Divi: Slik legger du til masker og bakgrunnsmønstre i en overskrift
konklusjonen
Det er enkelt å designe en unik og iøynefallende Hero-seksjon for nettstedet ditt med de nye alternativene bakgrunn og mønster maske av Divi. Hver funksjon har mange alternativer som lar deg lage virkelig kreative bakgrunner.
I tillegg kan du legge til bakgrunnsmønstre og masker til alle Divi Builder-elementer! Designalternativene er uendelige.
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.
...
