Kunne du tænke dig at kombinere baggrundsmaskeindstillinger og muligheder for mønstertransformation Divi at skabe unikke baggrunde?
Baggrundsdesign er en fantastisk måde at give din Websted visuel flair og skiller sig ud fra mængden. De nye indstillinger for baggrundsmaske og mønstertransformation fra Divi kan kombineres på mange måder for at skabe disse baggrundsmønstre.
I denne artikel vil vi se, hvordan du bruger baggrundsmaske og mønstertransformationsindstillinger fra Divi at skabe interessante baggrunde til dine layouts Divi.
Lad os starte.
undersøgelse
Først, her er en forhåndsvisning af hvert eksempel på forskellige skærmstørrelser (telefon og desktop).
Læs også: Divi: Sådan bruger du skygge- og svæveeffekter til at skabe interaktivt indhold
Eksempel 1
Version 1 på skrivebordet
Version 1 på telefonen
Download DIVI nu!!!
Version 2 på skrivebordet
Version 2 på telefonen
Eksempel 2
Version 1 på skrivebordet
Version 1 på telefonen
Download DIVI nu!!!
Version 2 på skrivebordet
Version 2 på telefonen
Eksempel 3
Version 1 på skrivebordet
Version 1 på telefonen
Download DIVI nu!!!
Version 2 på skrivebordet
Version 2 på telefonen
Indstillinger for Divi-baggrundsmaske og mønstertransformation
Divis nye maske- og baggrundsmønsterfunktioner inkluderer flere muligheder for at justere dem. Justeringer omfatter vandret og lodret flip, rotation og inversion. For at se mulighederne skal du gå til baggrundsindstillingerne for en sektion eller linje og vælge fanerne Baggrundsmønster eller Baggrundsmaske.
Når du har tilføjet et mønster eller en maske, vises transformationsindstillingerne. Du skal blot klikke på de muligheder, du vil bruge. Vi kan bruge dem sammen og i enhver kombination, vi ønsker.
Sådan fungerer Divi's maske- og mønstertransformationsindstillinger
Mønsteret nedenfor er Zig Zag med standardindstillinger.
Vi tilføjer en Layer Blog-maske på billedet nedenfor. Lad os bruge dem til at demonstrere, hvordan indstillingerne for baggrundsmaske og mønstertransformation fungerer.
Horisontal vending
Det er den vandrette vending. Vi anvendte transformationsindstillingerne på både mønsteret og masken.
Lodret flip
Dette er den lodrette flip for mønsteret og masken.
Rotation
Denne viser Rotation for mønster og maske.
Baglæns
Dette eksempel viser Inverter for mønster og maske.
Baggrundsmaske og mønstertransformationskombinationer
Vi kan selvfølgelig også bruge transformationsparametre i forskellige kombinationer. Her er nogle eksempler.
Dette roterer mønsteret og inverterer masken.
Dette eksempel bruger lodret vending, rotation og inversion til baggrundsmønsteret. Baggrundsmasken bruger vandret vending, lodret vending og rotation.
I dette eksempel brugte vi vandret vending og rotation til baggrundsmønsteret og lodret vending og rotation til baggrundsmasken.
Eksempler på indstillinger for baggrundsmaske og mønstertransformation
Lad os derefter se, hvordan disse indstillinger kan bruges med Divi-layouts. Vi bruger et afsnit som udgangspunkt og laver tre eksempler. Vi tilpasser det og bruger derefter transformationsindstillingerne til at ændre det for hvert eksempel.
Til vores eksempler bruger vi en ændret version af Hero-sektionen på layoutets landingsside Ejendomsplanlægning tilgængelig i Divi.
Her er en oversigt over det pågældende afsnit. Den bruger baggrundsfarven: #92a5ab.
- Baggrund: #92a5ab
Baggrundsmaske og mønstertransformationsparametre Eksempel 1
Vores første eksempel giver os en bue, der sidder lodret i midten af skærmen. Den ene side af skærmen har et tuftet mønster. Dernæst opretter vi en alternativ version med buen vendt den anden vej.
baggrundsmønster
Åbn sektionsindstillingerne, rul ned til Baggrund og vælg fanen Baggrundsmønster. Vælg Tuftet for baggrundsmønsteret og Inverting for Pattern Transform.
- Baggrundsmønster: Tuftet
- Mønstertransformation: Omvendt
Baggrundsmaske
Vælg faneblad Baggrundsmaske og vælg Arch til baggrundsmasken. Skift maskefarven til #616d72 og indstil masketransformationen til Inverter. Dette fuldender vores første version af buen med totter.
- Baggrundsmaske: Arch
- Maskefarve: #616d72
- Masketransformation: Inverter
Eksempel 1 Version 2
Lad os derefter skabe en variation af vores design. Du skal bare ændre maske transformation til baggrundsmønster i horisontal flip og vertikal flip. Dette ændrer buen, så den vender mod den anden retning og forskyder mønsteret, så det ikke kun ligner et spejlbillede.
- Masketransform: vend vandret, vend lodret
Baggrundsmaske og mønstertransformationsparametre Eksempel 2
For vores andet eksempel skaber vi en oval i midten af skærmen med et mønster inde i ovalen. Dernæst ændrer vi placeringen af mønsteret. Vi vil også ændre denne til forskellige skærmstørrelser.
Baggrundsmønster
Vælg fanen i baggrundsindstillingerne Baggrundsmønster og vælg cloisonne for motivet. Indstil mønstertransformationen til Inverter.
- Mønsterbaggrund: Shippo
- Mønstertransformation: Omvendt
Baggrundsmaske
Vælg derefter fanen Baggrundsmaske og ændre følgende indstillinger.
- Baggrundsmaske: Ellipse
- Farve: #758489
- Masketransform: vandret vending, rotation
Tablet og telefon
Både tablet og telefon vil bruge de samme indstillinger, så vi skal kun ændre tabletindstillingerne. Vælg Tablet fane og ændre maske transformation i vandret vending.
- Masketransform: vandret vending, inversion
Eksempel 2 Version 2
Dernæst opretter vi variationen til vores andet eksempel. Vælg først fanen Baggrundsmønster og indstil mønsterfarven til rgba(0,0,0,0.06).
- Mønsterfarve: rgba(0,0,0,0.06)
Vælg derefter fanen Baggrundsmaske og vælg Vend vandret, Roter og Inverter for masketransformationen.
- Masketransformation: horisontal vending, rotation, inversion
Tablet og telefon
For tablet- og telefonindstillinger skal du vælge ikonet for Tablet. Rediger maske transformation i vandret vending og inversion. Den alternative version af eksempel to er nu færdig.
- Masketransform: vandret vending, inversion
Baggrundsmaske og mønstertransformationsparametre Eksempel 3
Til vores tredje eksempel på maske- og mønstertransformationsindstillinger bruger vi et honeycomb-mønster med en malingsmaske. Vi vil også lave en mobilversion til denne.
baggrundsmønster
Først skal du vælge fanen Enhedsindstillinger og vælge Enhedsikonet. kontor. Vælg faneblad Baggrundsmønster og vælg Honeycomb som baggrundsmønster. Skift farven til rgba(0,0,0,0.42). For denne vil vi forlade mulighederne Mønster transformation deaktiveret. Vi tilføjer dem til den alternative version.
- Baggrundsmønster: Honeycomb
- Mønsterfarve: rgba(0,0,0,0.42)
- Mønstertransformation: ingen
Baggrundsmaske
Vælg derefter fanen Baggrundsmaske. Vælg Paint til baggrundsmasken. Skift farven til #697b82. Vælg Vend lodret for masketransformationen.
- Baggrundsmaske: Maling
- Maskefarve: #697b82
- Masketransformation: lodret flip
Vælg derefter Cover (Beskytte) for størrelse. Dette åbner nogle flere muligheder. Vælge Nederst til højre for placering. Det er det for desktop-versionen. Dernæst vil vi oprette mobilversionen.
- Maskestørrelse: Dæksel
- Maskeposition: Nederst til højre
Tablet og telefon
Vælg derefter fane tablet og ændre transformationen af masque baggrund i lodret vending og rotation. Dette fuldender stilen til vores tredje eksempel. Dernæst opretter vi den alternative version.
- Masketransformation: lodret vending, rotation
Eksempel 3 Version 2
For den alternative version af dette eksempel justerer vi både baggrundsmønsteret og baggrundsmasken.
baggrundsmønster
For baggrundsmønsteret skal du ændre mønsterfarven til rgba(0,0,0,0.11). Skift mønstertransformationen til at vende vandret, vende lodret og rotere.
- Maskefarve: rgba(0,0,0,0.11)
- Masketransform: vandret vending, lodret vending, rotation
baggrundsmaske
Vælg derefter fane Baggrundsmaske. Skift farven til hvid og transformationen af masken til vandret vending, lodret vending og inversion.
- Maskefarve: #ffffff
- Masketransform: vandret vending, lodret vending, inversion
Skift derefter størrelsen på masken til at dække, og vælg derefter Center for maskens placering.
- Maskestørrelse: Dæksel
- Maskeposition: Center
Tablet og telefon
Til sidst skal du vælge Tab tablette for at oprette mobilversionen. Vælg fane baggrundsmaske og vælg de fire masketransformationsindstillinger. Dette fuldender den alternative version af det tredje eksempel.
- Masketransform: vandret vending, lodret vending, rotation, inversion
Endelige resultater
Her er en oversigt over hvert eksempel med forskellige skærmstørrelser (desktop og telefon)
Eksempel 1
Version 1 på skrivebordet
Version 1 på telefonen
Version 2 på skrivebordet
Version 2 på telefonen
Eksempel 2
Version 1 på skrivebordet
Version 1 på telefonen
Version 2 på skrivebordet
Version 2 på telefonen
Eksempel 3
Version 1 på skrivebordet
Version 1 på telefonen
Version 2 på skrivebordet
Version 2 på telefonen
Download DIVI nu!!!
Se også: Divi: Sådan opretter du en sektion for teammedlemmer som en karrusel
Konklusion
Dette er vores kig på, hvordan du bruger Divis baggrundsmaske og mønstertransformationsindstillinger til at skabe mange interessante baggrundsmønstre.
Da mønstre og masker kan bruges sammen, kan deres transformationsindstillinger også bruges sammen. Dette åbner op for mange designmuligheder, hvilket giver dig endnu flereOUTILS for at tilføje elegance til dine Divi-baggrunde.
Den bedste måde at lære at bruge dem på er at lege med justeringerne og se, hvad du kan lave.
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.
...
