Vil du bruke maskene og mønstrene for din Hero-seksjon i Divi ?
Divis nye masker og bakgrunnsmønstre er en av våre kuleste nye designfunksjoner ennå. Hver av maskene og mønstrene kan kombineres med andre bakgrunnselementer (som farger, bilder og gradienter) for utallige unike kombinasjoner med bare noen få klikk.
I dag skal vi vise deg hvordan du bruker Divi og dens nye masker og bakgrunnsmønstre for å designe en helteseksjon.
I denne opplæringen vil vi dekke de viktige trinnene som trengs for å lage masker og bakgrunnsmønstre.
Vi vil til og med vise hvordan du plasserer bakgrunnsbilder for å passe til et maskedesign. Dette bør gi deg outils du må lage den perfekte Hero-delen for nettstedet ditt på få minutter.
undersøkelsen
Her er en rask titt på designet vi skal lage i denne opplæringen.
Les også: Divi: Hvordan lage et responsivt bilderutenett med lenker og sveveeffekter
Eksempeldel av Hero med hvit maske og mønster.
Her er en mørk versjon av samme Hero-seksjon med svart maske og mønster.
Med dette designet på plass kan du enkelt endre masker og maskeposisjoner med bare noen få klikk!
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 tomt lerret å begynne å designe i Divi.
Slik bruker du Divis masker og bakgrunnsmønstre på heltedelen din
1. Lag layoutstrukturen
For denne heltedelen går vi med en klassisk layoutstruktur med tittelen og handlingsfremmende uttrykk til venstre og et bilde (eller visuelt design) til høyre.
For dette eksemplet vil vårt visuelle design bli laget ved å bruke Divis bakgrunnsalternativer. Men før vi kommer til det nitty-gritty, må vi lage en to-kolonne rad for å spare plass på høyre side av siden for å vise frem seksjonens bakgrunnsmasker og mønsterdesign.
2. Legg til tittelen og oppfordringen til handling
I venstre kolonne (kolonne 1), legg til en tekstmodul for hovedtittelen din, en tekstmodul for undertekstteksten din og en knappmodul for knappen din.
3. Legg til vertikal avstand til seksjonen
For å få bakgrunnsdesignet vårt til å se høyt og vakkert ut, må vi legge til vertikal høyde på seksjonen. En enkel måte å gjøre dette på er å legge til polstring på toppen og bunnen av delen. Husk at vi må justere polstringen på nettbrettet og telefonskjermen for å gi plass til bakgrunnsdesignet vårt når kolonnene er stablet vertikalt.
Åpne seksjonsinnstillinger. Under designfanen oppdaterer du polstringen som følger:
- Polstring:
- Desktop: Topp 20vw, Nederst 20vw
- Nettbrett: Topp 8vw, Bunn 48vw
- Telefon: Topp 8vw, Bunn 70vw
4. Legg til bakgrunnsbilde og gradient
Deretter kan vi legge til et bakgrunnsbilde og gradient til delen. Husk at hovedfokuspunktet til bakgrunnsbildet vil bli avslørt på høyre side av seksjonen, så bruk et bilde som har det du vil se på høyre side.
For dette eksempelet bruker vi et bilde med en byhorisont. Høyre side av bildet har tettere og flottere bygninger, så det fungerer veldig bra.
Under fanen Bakgrunnsbilde, last opp bildet i seksjonsbakgrunnen.
I Divi kan du enkelt legge til en fargegradient på bakgrunnsbildet. Under fanen Bakgrunnsgradient, legg til følgende gradient i bakgrunnen av delen:
- Gradientstopp:
- 0 %: #3e22ff
- 100 %: klar
- Firkantet gradient over bakgrunnsbilde: JA
5. Lag et bakgrunnsmønster for seksjonen
Nå som vi har bakgrunnsbildet og gradienten klar, kan vi legge til et bakgrunnsmønster for å fullføre designet.
I dette eksemplet skal vi bruke et subtilt mønster som bare legger til litt tekstur for å gi det et mer unikt utseende.
Under fanen Bakgrunnsmønstre, oppdater følgende:
- Bakgrunnsmønster: Tuftet
TRICK: Med bakgrunnsmønstre er det vanligvis best å holde det subtilt. Prøv å bruke egendefinerte størrelser for mindre design, og reduser deretter fargeopasiteten.
6. Lag en bakgrunnsmaske for delen
Med bakgrunnsmønsteret vårt på plass, er vi endelig klare til å teste ut en helt ny bakgrunnsmaske for designet vårt. Det er en haug med alternativer og varianter å velge mellom. For dette eksempelet bruker vi honeycomb-masken.
Under fanen Bakgrunnsmaske, oppdater følgende:
- Maske: Honeycomb
- Maskefarge: #ffffff
- Størrelse: Deksel
7. Juster bakgrunnsbildets posisjon
Siden vi bruker en bakgrunnsmaske, er en del av bakgrunnsbildet vårt maskert (eller "masket").
I dette eksemplet sørger vi for at nederst til høyre i bildet er mest synlig, og vi flytter det litt til høyre for å vise flere bygninger.
Under Bilde-fanen oppdaterer du følgende:
- Bakgrunnsbilde Posisjon: Nederst til høyre
- Bakgrunnsbilde Horisontal forskyvning: -4vw
8. Bruk en blandingsmodus
En måte å bli kreativ med alle disse bakgrunnselementene på er å legge til en blandingsmodus. Blandingsmoduser kan legges til alle bakgrunnsalternativene, og de kan brukes til å blande flere bakgrunnslag (bilde, gradient, maske, etc.) på kreative måter.
For dette eksemplet blander vi bakgrunnsbildet med gradientfargen. For å gjøre dette, klikk på fanen Bakgrunnsbilde og legg til en blandingsmodus for å blande gradientfargen med bakgrunnsbildet som følger:
- Bakgrunnsbildeblanding: Multipliser
9. Juster bakgrunnsmaske for mobil
Det er viktig å sørge for at bakgrunnsmaskedesignet også ser bra ut på mobile enheter. Heldigvis gjør de innebygde alternativene denne prosessen enklere.
Husk at vi allerede har lagt til den ekstra polstringen på nettbrettet og telefonen for å gi plass til bakgrunnsdesignet vårt.
Nå er alt vi trenger å gjøre å bruke alternativene for bakgrunnstransformasjon og sideforhold for å justere masken for mobil.
Under fanen Bakgrunnsmaske, aktiver responsive alternativer og oppdater følgende:
Nettbrettversjon
- Masketransformasjon: Vend vertikalt, Vend horisontalt, Roter
- Maske sideforhold: firkantet
Telefonversjon
- Masketransformasjon: Vend vertikalt, Vend horisontalt, Roter
- Maskeformat: Portrett
Resultatet
Sjekk ut designet vi har laget så langt.
Stasjonær datamaskin
Nettbrettversjon
Telefonutgave
10. Lag en mørk versjon
Hvis du vil ha en mørk versjon av dette designet, endrer du bare bakgrunnsmaskefargen til en mørk farge (som svart).
Endre deretter fargen på mønsteret til svart.
Endre deretter tittelen og undertekstteksten til hvit. Og det kan være lurt å oppdatere knappefargen også.
Slik ser den mørke versjonen ut.
Endelige resultater
Se også: Divi: Hvordan tilpasse "Les mer"-lenken til en blogg
Her er en ny titt på de endelige resultatene våre.
Last ned DIVI nå!!!
konklusjonen
Design en helteseksjon for din nettstedet Web er kjempegøy med masker og bakgrunnsmønstre av Divi. Bakgrunnsalternativer er enkle å endre for å få det perfekte designet. Og det er mange andre alternativer du kan bruke (som blandingsmoduser) for å lage enda mer unike bakgrunner.
I tillegg kan du legge til masker og mønstre til alle Divi-elementer, ikke bare seksjoner. Så ha det gøy å eksperimentere!
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, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
