Kunne du tænke dig at bruge maskerne og mønstrene til din Hero-sektion i Divi ?
Divis nye masker og baggrundsmønstre er en af vores fedeste nye designfunktioner endnu. Hver af maskerne og mønstrene kan kombineres med andre baggrundselementer (som farver, billeder og gradienter) til utallige unikke kombinationer med blot et par klik.
I dag skal vi vise dig, hvordan du bruger Divi og dens nye masker og baggrundsmønstre til at designe en heltesektion.
I denne tutorial dækker vi de vigtige trin, der er nødvendige for at skabe masker og baggrundsmønstre.
Vi viser endda, hvordan man placerer baggrundsbilleder, så de passer til et maskedesign. Dette burde give dig OUTILS du skal oprette den perfekte Hero-sektion til dit websted på få minutter.
undersøgelse
Her er et hurtigt kig på det design, vi vil skabe i denne tutorial.
Læs også: Divi: Sådan opretter du et responsivt billedgitter med links og svæveeffekter
Eksempelsektion af Hero med hvid maske og mønster.
Her er en mørk version af den samme Hero-sektion med en sort maske og mønster.
Med dette design på plads kan du nemt ændre masker og maskepositioner med blot et par klik!
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 vil du have et tomt lærred at begynde at designe i Divi.
Sådan bruger du Divi's masker og baggrundsmønstre på din heltesektion
1. Opret layoutstrukturen
Til denne heltesektion vil vi bruge en klassisk layoutstruktur med titlen og call-to-action til venstre og et billede (eller visuelt design) til højre.
Til dette eksempel vil vores visuelle design blive skabt ved hjælp af Divis baggrundsmuligheder. Men før vi kommer til det små, skal vi oprette en række med to kolonner for at spare plads på højre side af siden for at vise vores sektionsbaggrundsmasker og mønsterdesign.
2. Tilføj titlen og opfordring til handling
I venstre kolonne (kolonne 1) skal du tilføje et tekstmodul til din hovedtitel, et tekstmodul til din underteksttekst og et knapmodul til din knap.
3. Tilføj lodret mellemrum til sektionen
For at få vores baggrundsdesign til at se højt og smukt ud, skal vi tilføje lodret højde til sektionen. En enkel måde at gøre dette på er at tilføje polstring til toppen og bunden af sektionen. Husk, at vi skal justere polstringen på tablet- og telefonskærmen for at give plads til vores baggrundsdesign, når søjlerne er stablet lodret.
Åbn sektionsindstillinger. Under designfanen skal du opdatere polstringen som følger:
- Polstring:
- Desktop: Top 20vw, nederst 20vw
- Tablet: Top 8vw, Bund 48vw
- Telefon: Top 8vw, Bund 70vw
4. Tilføj baggrundsbillede og gradient
Dernæst kan vi tilføje et baggrundsbillede og gradient til sektionen. Husk på, at baggrundsbilledets hovedfokus vil blive afsløret i højre side af sektionen, så brug et billede, der har det, du vil se på højre side.
Til dette eksempel bruger vi et billede med en byskyline. Højre side af billedet har tættere og flottere bygninger, så det fungerer rigtig godt.
Under fanen Baggrundsbillede, upload billedet i sektionens baggrund.
I Divi kan du nemt tilføje en farvegradient på baggrundsbilledet. Under fanen Baggrundsgradient, tilføj følgende gradient til baggrunden for afsnittet:
- Gradientstop:
- 0 %: #3e22ff
- 100 %: Klart
- Firkantet gradient over baggrundsbillede : JA
5. Lav et baggrundsmønster for afsnittet
Nu hvor vi har vores baggrundsbillede og gradient klar, kan vi tilføje et baggrundsmønster for at fuldende designet.
I dette eksempel vil vi bruge et subtilt mønster, der blot tilføjer en smule tekstur for at give det et mere unikt udseende.
Under fanen Baggrundsmønstre, opdater følgende:
- Baggrundsmønster: Tuftet
TRICK: Med baggrundsmønstre er det normalt bedst at holde det subtilt. Prøv at bruge tilpassede størrelser til mindre designs, og sænk derefter farveopaciteten.
6. Opret en baggrundsmaske til afsnittet
Med vores baggrundsmønster på plads, er vi endelig klar til at teste en helt ny baggrundsmaske til vores design. Der er en masse muligheder og variationer at vælge imellem. Til dette eksempel vil vi bruge honeycomb-masken.
Under fanen Baggrundsmaske, opdater følgende:
- Maske: Honeycomb
- Maskefarve: #ffffff
- Størrelse: Cover
7. Juster baggrundsbilledets position
Da vi bruger en baggrundsmaske, er en del af vores baggrundsbillede maskeret (eller "masket").
I dette eksempel sørger vi for, at nederst til højre i billedet er mest synligt, og vi flytter det lidt til højre for at vise flere bygninger.
Under fanen Billede skal du opdatere følgende:
- Baggrundsbillede Position: Nederst til højre
- Baggrundsbillede vandret offset: -4vw
8. Brug en blandingstilstand
En måde at blive kreativ med alle disse baggrundselementer på er at tilføje en blandingstilstand. Blandingstilstande kan føjes til enhver af baggrundsindstillingerne, og de kan bruges til at blande flere baggrundslag (billede, gradient, maske osv.) på kreative måder.
I dette eksempel blander vi baggrundsbilledet med gradientfarven. For at gøre dette skal du klikke på fanen Baggrundsbillede og tilføj en blandingstilstand for at blande gradientfarven med baggrundsbilledet som følger:
- Baggrundsbilledblanding: Multiplicer
9. Juster baggrundsmaske til mobil
Det er vigtigt at sikre, at baggrundsmaskedesignet også ser godt ud på mobile enheder. Heldigvis gør de indbyggede muligheder denne proces nemmere.
Husk, at vi allerede har tilføjet den ekstra polstring på tablet og telefon for at gøre plads til vores baggrundsdesign.
Nu skal vi bare bruge indstillingerne for baggrundstransformation og billedformat til at justere masken til mobil.
Under fanen Baggrundsmaske, aktiver responsive muligheder og opdater følgende:
Tablet-version
- Masketransformation: Vend lodret, vend vandret, roter
- Maskeformat: firkantet
Telefon version
- Masketransformation: Vend lodret, vend vandret, roter
- Maskeformatforhold: Portræt
Resultatet
Tjek det design, vi har lavet indtil videre.
Stationær computer
Tablet-version
Telefonudgave
10. Opret en mørk version
Hvis du vil have en mørk version af dette design, skal du bare ændre baggrundsmaskens farve til en mørk farve (som sort).
Skift derefter farven på mønsteret til sort.
Skift derefter titlen og undertekstteksten til hvid. Og du vil måske også opdatere knapfarven.
Sådan ser den mørke version ud.
Endelige resultater
Se også: Divi: Sådan tilpasser du "Læs mere"-linket på en blog
Her er endnu et kig på vores endelige resultater.
Download DIVI nu!!!
Konklusion
Design en heltesektion til din Websted er rigtig sjovt med masker og baggrundsmønstre fra Divi. Baggrundsindstillinger er nemme at ændre for at få det perfekte design. Og der er masser af andre muligheder, du kan bruge (såsom blandingstilstande) til at skabe endnu mere unikke baggrunde.
Derudover kan du tilføje masker og mønstre til ethvert Divi-element, ikke kun sektioner. Så god fornøjelse med at eksperimentere!
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 udføre dine projekter med oprettelse af internetsider ved 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.
...
