Kunne du tænke dig at designe en unik baggrund ved hjælp af mønstermasker? Divi ?
Det nye baggrundsmønster masker fra Divi har åbnet op for mange designmuligheder for baggrunde. De fungerer godt med baggrundsfarver og mønstre for at skabe mange unikke designs.
I denne artikel vil vi se, hvordan du opretter subtile baggrundsmønstermasker med Divi . Vi vil også diskutere fordelene ved at bruge en subtil maske og lave tre eksempler.
Lad os starte.
Forhåndsvisning af baggrundsmønstermaske
Før vi begynder at designe, er her et eksempel på, hvad vi skal bygge i denne tutorial Divi.
Eksempel 1
Læs også: Divi: Sådan ændres gradienten af en baggrund ved svævning
Eksempel 2
Eksempel 3
Sådan opretter du en baggrundsmaske
Baggrundsmasken vil dække baggrundsmønsteret og afsløre dele af mønsteret. Det virker meget Godt med baggrundsfarver og mønstre. Du kan justere baggrunden, så den passer til indhold, juster indhold for at passe til baggrunden eller justere begge dele.
Se også: Divi: Sådan bruger du "Gradient Builder" til at forskønne dine billeder
Åbn først sektionsparametre hvor du vil tilføje baggrundsmasken.
Dernæst skal du vælge en baggrundsfarve til sektionen. Rul til Baggrund. Med fanen Baggrund valgt, vælg din farve baggrund i farvevælgeren.
Dernæst skal du vælge et baggrundsmønster og indstille dets størrelse og placering. Vælg faneblad Baggrundsmønster og klik Tilføj baggrundsmønster.
Dette åbner en liste over modelmuligheder. Vælg dit mønster på listen. Det vil fuldende afsnittet.
Dernæst skal du vælge en baggrundsmaske og justere dens farve og indstillinger, så de passer til dit design. Vælg faneblad Baggrundsmaske og klik Tilføj baggrundsmaske.
En anden modal åbnes med maskeindstillinger. Vælg din maske baggrund på listen. Masken vil være hvid, indtil du vælger en farve.
Juster dem indstillinger for baggrundsmaske for at opnå det ønskede udseende. Du kan ændre størrelse, position, retning af masken, rotation osv. At lege med disse indstillinger kan hjælpe dig med at skabe interessante designs.
Her er en forhåndsvisning af baggrunden, vi lige har oprettet uden nogen moduler. Farverne ligner hinanden, men de er forskellige nok til at skille sig lidt ud. Dette forhindrer det i at være for distraherende.
Eksempler på subtile baggrundsmønstermasker
Lad os nu se på tre eksempler på baggrundsmønstermasker.
Vi tilføjer en baggrundsmaske til Hero-sektionen gratis virksomhedslandingsside tilgængelig i Divi.
Her er en forhåndsvisning af den originale side, før du tilføjer baggrundsmønstermaskerne.
Vi vil også ændre baggrundsfarverne på knapperne. Ved at bruge de samme subtile designkoncepter får vi dem til at skille sig ud mere end i baggrunden.
Opdeleren er et andet element, som vi vil se skiftende farve, men dette element bruger gennemsigtighed til at få sin farve fra baggrunden, så vi behøver ikke at ændre dens farve.
Eksempel 1
Dette eksempel vil bruge den originale baggrund og knapfarver.
Baggrundsfarve
Til vores første eksempel bruger vi den originale baggrundsfarve til dette layout – #1d1d25. Vi beholder også den originale knapfarve – #4c594c
- Baggrundsfarve: #1d1d25
- Knapfarve: #4c594c
Baggrundsmønster
Vælg fanen Baggrundsmønster og vælg Diagonal Stripes 2. Skift mønsterfarven til #383838.
- Baggrundsmønster: Diagonale striber 2
- Mønsterfarve: #383838
- Størrelse: Faktisk størrelse
- Gentag oprindelse: Øverst til venstre
- Mønstergentagelse: Gentag
Baggrundsmaske
Vælg derefter fane Baggrundsmaske. Vælg Indskudstegn og sæt farven til #383838.
- Maske: Caret
- Maskefarve: #383838
Under maskefarven skal du vælge indstillingen til horisontal transformation og billedformat portræt. Luk sektionsindstillingerne og gem dit arbejde.
- Masketransformation: vandret
- Maskeformat: stor (portræt)
Eksempel 2
For vores andet eksempel ændrer vi baggrunds- og knapfarverne til lilla.
Baggrundsfarve
Åbn dem sektionsparametre . sørge for at at du er på fanen Baggrundsfarve og ændre det farve i #483c56.
- Baggrund: #483c56
Baggrundsmønster
Vælg derefter fane Rygmønster baggrund og vælg Tuftet som baggrundsmønster. Skift mønsterfarven til #635c84.
- Baggrundsmønster: Tuftet
- Mønsterfarve: #635c84
Vælg derefter Brugerdefineret størrelse . Dette åbner et andet sæt muligheder. Ændre det largeur i 10vw.
- Mønsterstørrelse: Brugerdefineret størrelse
- Mønsterbredde: 10vw
- Gentag oprindelse: øverst til venstre
- Mønstergentagelse: Gentag
Baggrundsmaske
Nu er det tid til at konfigurere vores baggrundsmaske.
Vælg faneblad Baggrundsmaske og vælg masken med navnet Arch. Skift dens farve til #67557a.
- Maske: bue
- Maskefarve: #67557a
Indstil derefter dens muligheder for transformation om vandret, lodret og rotation. For billedformat, vælg den brede eller liggende indstilling. Luk sektionsindstillingerne.
- Masketransformation: Horisontal, Lodret og Rotation
- Maskeformatforhold: Bred (landskab)
knap
Lad os endelig justere CTA-knappen i denne Hero-sektion. Vi ønsker, at det skal passe ind i designet, men vi vil også gerne have, at det skiller sig ud.
Åbn dem knapindstillinger. Vi skal kun ændre baggrundsfarven. Det kan være en farve, der ligner baggrunden, men anderledes nok til ikke at gå tabt på siden. Vi vælger en lysere farve til baggrunden. Vi vil efterlade den samme tekstfarve.
Vælg fanen Design , rul til Baggrund og ændre Knap baggrundsfarve i #8b4dc1. Det giver os den kontrast, vi ønsker, og det fungerer godt sammen med lilla baggrund. Luk knapindstillingerne og gem din side.
- Knap baggrund: #8b4dc1
Eksempel 3
I vores tredje eksempel ændrer vi baggrunds- og knapfarverne til grøn ved at bruge de samme koncepter som de foregående to eksempler.
Baggrundsfarve
Åbn først sektionsparametre . Med fane Baggrundsfarve.
- Baggrund: #497762
Baggrundsmønster
Vælg derefter fanen Baggrundsmønster, og ændre sumparametrene, der skal følges.
- Baggrundsmønster: Firkanter
- Mønsterfarve: #3a604e
- Størrelse: Faktisk størrelse
- Mønster Gentagelse Oprindelse: Øverst til venstre
- Mønstergentagelse: Gentag
Baggrundsmaske
Vælg derefter fanen Baggrundsmaske.
- Maske: Diagonale linjer
- Farve: #3a604e
Indstil derefter følgende parametre:
- Masketransformation: vandret
- Maskeformatforhold: Landskab
- Størrelse: Cover
- Maskeposition: Top Center
knap
Åbn endelig knapindstillinger og vælg fanen Design. Rul ned og skift knap baggrundsfarve i #61a380. Luk modulindstillingerne og gem dit arbejde.
- Knapbaggrund: #61a380
Endelige resultater
Se også: Divi: Sådan tilpasser du kurven og søgeikonerne i modulet "Fuldbreddemenu".
Sådan ser vores baggrundsmønstermasker ud i heltedelen af vores layout.
Eksempel 1
Eksempel 2
Eksempel 3
Download DIVI nu!!!
Konklusion
Dette er vores kig på, hvordan man skaber subtile baggrundsmønstermasker med Divi. En subtil maske skiller sig ud lige nok til at give baggrunden visuel tekstur. De ser godt ud uden at distrahere fra dine CTA'er og andre elementer.
Divis baggrundsmønstermasker er enkle at bruge, og deres indstillinger giver dig mulighed for at skabe noget unikt. Eksperimenter med indstillingerne for at skabe dine egne baggrundsmønstermasker.
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.
...
