Divi: instellingen voor achtergrondmaskers en opties voor patroontransformatie gebruiken

Wilt u achtergrondmaskerinstellingen en patroontransformatieopties combineren? Divi unieke achtergronden creëren?

Achtergrondontwerpen zijn een geweldige manier om uw Site web visuele flair en onderscheiden van de massa. De nieuwe instellingen voor Achtergrondmasker en Patroontransformatie van Divi kan op vele manieren worden gecombineerd om deze achtergrondpatronen te creëren.

In dit artikel zullen we zien hoe u de instellingen voor achtergrondmasker en patroontransformatie van Divi om interessante achtergronden voor uw lay-outs te creëren Divi.

Laten we beginnen.

overzicht

Ten eerste is hier een voorbeeld van elk voorbeeld op verschillende schermformaten (telefoon en desktop).

Lees ook: Divi: schaduw- en zweefeffecten gebruiken om interactieve inhoud te maken

Voorbeeld 1

Versie 1 op desktop

Versie 1 op telefoon

Download DIVI nu!!!

Versie 2 op desktop

Versie 2 op telefoon

Voorbeeld 2

Versie 1 op desktop

Versie 1 op telefoon

Download DIVI nu!!!

Versie 2 op desktop

Versie 2 op telefoon

Voorbeeld 3

Versie 1 op desktop

Versie 1 op telefoon

Download DIVI nu!!!

Versie 2 op desktop

Versie 2 op telefoon

Divi-opties voor achtergrondmasker en patroontransformatie

Divi's nieuwe masker- en achtergrondpatroonfuncties bevatten verschillende opties om ze aan te passen. Aanpassingen omvatten horizontale en verticale flip, rotatie en inversie. Om de opties te zien, gaat u naar de achtergrondinstellingen van een sectie of lijn en selecteert u de tabbladen Achtergrondpatroon of Achtergrondmasker.

Nadat u een patroon of masker heeft toegevoegd, verschijnen de transformatie-instellingen. Klik eenvoudig op de opties die u wilt gebruiken. We kunnen ze samen gebruiken en in elke gewenste combinatie.

Hoe Divi's masker- en patroontransformatie-instellingen werken

Het patroon hieronder is Zig Zag met standaard instellingen.

Divi-opties voor achtergrondmasker en patroontransformatie

We voegen een Layer Blog-masker toe in de onderstaande afbeelding. Laten we ze gebruiken om te demonstreren hoe de instellingen Achtergrondmasker en Patroontransformatie werken.

Horizontale omkering

Het is de horizontale omkering. We hebben de transformatie-instellingen toegepast op zowel het patroon als het masker.

Verticale omslag

Dit is de verticale omslag voor het patroon en het masker.

Rotatie

Deze toont Rotatie voor patroon en masker.

Omgekeerde

Dit voorbeeld toont Omkeren voor patroon en masker.

Combinaties van achtergrondmasker en patroontransformatie

Natuurlijk kunnen we transformatieparameters ook in verschillende combinaties gebruiken. Hier zijn enkele voorbeelden.

Dit roteert het patroon en keert het masker om.

Combinaties van achtergrondmasker en patroontransformatie

In dit voorbeeld wordt verticaal spiegelen, roteren en omkeren gebruikt voor het achtergrondpatroon. Het achtergrondmasker maakt gebruik van horizontale spiegeling, verticale spiegeling en rotatie.

Voor dit voorbeeld hebben we horizontaal omdraaien en roteren gebruikt voor het achtergrondpatroon, en verticaal omdraaien en roteren voor het achtergrondmasker.

Voorbeelden van instellingen voor achtergrondmasker en patroontransformatie

Laten we vervolgens kijken hoe deze instellingen kunnen worden gebruikt met Divi-lay-outs. We gebruiken één sectie als uitgangspunt en maken drie voorbeelden. We zullen het aanpassen en vervolgens de transformatie-instellingen gebruiken om het voor elk voorbeeld aan te passen.

Voor onze voorbeelden gebruiken we een aangepaste versie van het gedeelte Held van de landingspagina van de lay-out Vastgoed planning verkrijgbaar in Divi.

Hier is een overzicht van het betreffende onderdeel. Het gebruikt de achtergrondkleur: #92a5ab.

Achtergrond: #92a5ab

Voorbeelden van instellingen voor achtergrondmasker en patroontransformatie

Achtergrondmasker en patroontransformatieparameters Voorbeeld 1

Ons eerste voorbeeld geeft ons een boog die verticaal in het midden van het scherm zit. Een kant van het scherm heeft een getuft patroon. Vervolgens maken we een alternatieve versie met de boog naar de andere kant gericht.

achtergrondpatroon

Open de sectie-instellingen, scrol omlaag naar Achtergrond en selecteer het tabblad Achtergrondpatroon. Kies Tufted voor het achtergrondpatroon en Inverting voor Pattern Transform.

Achtergrondpatroon: getuft
Patroontransformatie: omgekeerd

Achtergrondmasker

Selecteer tabblad Achtergrondmasker en kies boog voor het achtergrondmasker. Verander de maskerkleur in #616d72 en stel de maskertransformatie in op Omkeren. Dit voltooit onze eerste versie van de boog met tufts.

Achtergrondmasker: Arch
Maskerkleur: #616d72
Maskertransformatie: omkeren

Voorbeeld 1 Versie 2

Laten we vervolgens een variatie op ons ontwerp maken. Pas de masker transformatie voor achtergrondpatroon in horizontale flip en verticale flip. Dit verandert de boog in de andere richting en compenseert het patroon, zodat het er niet alleen uitziet als een spiegelbeeld.

Maskertransformatie: horizontaal spiegelen, verticaal spiegelen

Achtergrondmasker en patroontransformatieparameters Voorbeeld 2

Voor ons tweede voorbeeld maken we een ovaal in het midden van het scherm met een patroon in het ovaal. Vervolgens veranderen we de plaatsing van het patroon. We zullen deze ook aanpassen voor verschillende schermformaten.

Achtergrondpatroon

Selecteer in de achtergrondinstellingen het tabblad Achtergrondpatroon en kies Shippo voor het motief. Stel de patroontransformatie in op Omkeren.

Patroonachtergrond: Shippo
Patroontransformatie: omgekeerd

Achtergrondmasker

Selecteer vervolgens het tabblad Achtergrondmasker en wijzig de volgende instellingen.

Achtergrondmasker: ellips
Kleur: #758489
Maskertransformatie: horizontaal omdraaien, roteren

Tablet en telefoon

Zowel de tablet als de telefoon zullen dezelfde instellingen gebruiken, dus we hoeven alleen de tabletinstellingen te wijzigen. Selecteer de Tabblad Tablet en wijzig de masker transformatie in horizontale omkering.

Maskertransformatie: horizontaal omdraaien, inversie

Voorbeeld 2 Versie 2

Vervolgens maken we de variatie voor ons tweede voorbeeld. Selecteer eerst het tabblad Achtergrondpatroon en stel de patroonkleur in op rgba (0,0,0,0.06).

Patroonkleur: rgba (0,0,0,0.06)

Selecteer vervolgens het tabblad Achtergrondmasker en kies Horizontaal spiegelen, Roteren en Omkeren voor de maskertransformatie.

Maskertransformatie: horizontaal omdraaien, roteren, inversie

Tablet en telefoon

Selecteer voor tablet- en telefoonopties het pictogram van de Tablet . Wijzig de masker transformatie in horizontale omkering en inversie. De alternatieve versie van voorbeeld twee is nu voltooid.

Maskertransformatie: horizontaal omdraaien, inversie

Achtergrondmasker en patroontransformatieparameters Voorbeeld 3

Voor ons derde voorbeeld van instellingen voor masker- en patroontransformatie gebruiken we een honingraatpatroon met een verfmasker. We zullen hier ook een mobiele versie voor maken.

achtergrondpatroon

Kies eerst het tabblad Apparaatinstellingen en selecteer het apparaatpictogram. kantoor. Selecteer tabblad Achtergrondpatroon en kies Honingraat voor het achtergrondpatroon. Verander de kleur in rgba(0,0,0,0.42). Voor deze laten we de opties staan Patroontransformatie gedeactiveerd. We zullen ze toevoegen voor de alternatieve versie.

Achtergrondpatroon: Honingraat
Patroonkleur: rgba (0,0,0,0.42)
Patroontransformatie: geen

Achtergrondmasker

Selecteer vervolgens het tabblad AchtergrondMasker. Kiezen Schilder voor het achtergrondmasker. Verander de kleur in #697b82. Kies Verticaal spiegelen voor de maskertransformatie.

Achtergrondmasker: verf
Maskerkleur: #697b82
Maskertransformatie: verticaal omdraaien

Selecteer vervolgens deksel voor maat. Dit opent nog een paar opties. Kiezen Rechts onder voor locatie. Dat is het voor de desktopversie. Vervolgens zullen we de mobiele versie maken.

Maskergrootte: dekking
Maskerpositie: rechtsonder

Tablet en telefoon

Selecteer vervolgens tabblad tablet en wijzig de transformatie van de maskeren achtergrond in verticale flip en rotatie. Dit voltooit de stijl voor ons derde voorbeeld. Vervolgens maken we de alternatieve versie.

Maskertransformatie: verticaal omdraaien, roteren

Voorbeeld 3 Versie 2

Voor de alternatieve versie van dit voorbeeld passen we zowel het achtergrondpatroon als het achtergrondmasker aan.

achtergrondpatroon

Verander voor het achtergrondpatroon de patroonkleur in rgba(0,0,0,0.11). Wijzig de patroontransformatie om horizontaal te spiegelen, verticaal te spiegelen en te roteren.

Maskerkleur: rgba(0,0,0,0.11)
Maskertransformatie: horizontaal omdraaien, verticaal omdraaien, roteren

achtergrond masker

Selecteer vervolgens tabblad AchtergrondMasker. Verander de kleur in wit en de transformatie van het masker in horizontale spiegeling, verticale spiegeling en inversie.

Maskerkleur: #ffffff
Maskertransformatie: horizontaal omdraaien, verticaal omdraaien, inversie

Wijzig vervolgens de grootte van het masker om te bedekken en kies vervolgens Center voor de positie van het masker.

Maskergrootte: dekking
Maskerpositie: midden

Tablet en telefoon

Kies ten slotte tabblad tablette om de mobiele versie te maken. Kies tabblad achtergrond masker en selecteer de vier opties voor maskertransformatie. Hiermee is de alternatieve versie van het derde voorbeeld voltooid.

Maskertransformatie: horizontaal omdraaien, verticaal omdraaien, roteren, inversie