Divi: maskers en achtergrondpatronen gebruiken voor een heldensectie

Wil je de maskers en patronen voor je Hero-sectie gebruiken in? Divi ?

Divi's nieuwe maskers en achtergrondpatronen zijn een van onze coolste nieuwe ontwerpkenmerken tot nu toe. Elk van de maskers en patronen kan worden gecombineerd met andere achtergrondelementen (zoals kleuren, afbeeldingen en verlopen) voor talloze unieke combinaties met slechts een paar klikken.

Vandaag laten we je zien hoe je Divi en de nieuwe maskers en achtergrondpatronen om een ​​heldensectie te ontwerpen. 

In deze zelfstudie bespreken we de belangrijke stappen die nodig zijn om maskers en achtergrondpatronen te maken. 

We laten zelfs zien hoe u achtergrondafbeeldingen kunt positioneren zodat ze passen bij een maskerontwerp. Dit zou je de moeten geven outils je moet binnen enkele minuten de perfecte Hero-sectie voor je site maken.

overzicht

Hier is een korte blik op het ontwerp dat we in deze zelfstudie gaan maken.

Lees ook: Divi: een responsief afbeeldingsraster maken met links en zweefeffecten

Voorbeeldsectie van Hero met een wit masker en patroon.

Hier is een donkere versie van dezelfde Hero-sectie met een zwart masker en patroon.

Met dit ontwerp kunt u eenvoudig maskers en maskerposities wijzigen met slechts een paar klikken!

Maak een nieuwe pagina met Divi Builder

Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een ​​nieuwe pagina te maken.

Geef het een titel die voor jou logisch is en klik op Te gebruiken Divi Bouwer

klik vervolgens op Begin met bouwen (Bouw vanaf het begin)

Daarna heb je een leeg canvas om in te ontwerpen Divi.

Divi's maskers en achtergrondpatronen gebruiken in je heldensectie

1. Creëer de lay-outstructuur

Voor deze heldensectie gaan we met een klassieke lay-outstructuur met de titel en call-to-action aan de linkerkant en een afbeelding (of visueel ontwerp) aan de rechterkant. 

Voor dit voorbeeld wordt ons visuele ontwerp gemaakt met behulp van Divi's achtergrondopties. Maar voordat we tot de kern van de zaak komen, moeten we een rij met twee kolommen maken om ruimte te besparen aan de rechterkant van de pagina om onze sectie-achtergrondmaskers en patroonontwerp te laten zien.

2. Voeg de titel en oproep tot actie toe

Voeg in de linkerkolom (kolom 1) een Tekstmodule toe voor uw hoofdtitel, een Tekstmodule voor uw ondertiteltekst en een Knopmodule voor uw knop.

3. Voeg verticale afstand toe aan de sectie

Om ons achtergrondontwerp er lang en mooi uit te laten zien, moeten we verticale hoogte aan de sectie toevoegen. Een eenvoudige manier om dit te doen, is door opvulling toe te voegen aan de boven- en onderkant van de sectie. Houd er rekening mee dat we de opvulling op het tablet- en telefoonscherm moeten aanpassen om ruimte te maken voor ons achtergrondontwerp zodra de kolommen verticaal zijn gestapeld.

Sectie-instellingen openen. Werk de opvulling als volgt bij op het tabblad Ontwerpen:

• Vulling:
  • Desktop: Top 20vw, Bottom 20vw
  • Tablet: Bovenste 8vw, Onderste 48vw
  • Telefoon: Boven 8vw, Onder 70vw

4. Achtergrondafbeelding en verloop toevoegen

Vervolgens kunnen we een achtergrondafbeelding en verloop aan de sectie toevoegen. Houd er rekening mee dat het belangrijkste brandpunt van de achtergrondafbeelding aan de rechterkant van de sectie wordt onthuld, dus gebruik een afbeelding met wat u aan de rechterkant wilt zien. 

Voor dit voorbeeld gebruiken we een afbeelding met een skyline van een stad. De rechterkant van de afbeelding heeft dichterbij en beter uitziende gebouwen, dus het werkt echt goed.

Onder het tabblad Achtergrond afbeelding, upload de afbeelding in de sectie-achtergrond.

In Divi voeg je eenvoudig een kleurverloop toe aan de achtergrondafbeelding. Onder het tabblad Achtergrond verloop, voeg het volgende verloop toe aan de achtergrond van de sectie:

• Gradiëntstops:
  • 0%: #3e22ff
  • 100%: duidelijk
• Vierkant verloop boven achtergrondafbeelding: JA

5. Maak een achtergrondpatroon voor de sectie

Nu we onze achtergrondafbeelding en gradiënt gereed hebben, kunnen we een achtergrondpatroon toevoegen om het ontwerp te voltooien. 

In dit voorbeeld gaan we een subtiel patroon gebruiken dat slechts een beetje textuur toevoegt om het een meer unieke uitstraling te geven.

Onder het tabblad Achtergrondpatronen, werk het volgende bij:

• Achtergrondpatroon: getuft

ASTUCE: Bij achtergrondpatronen is het meestal het beste om het subtiel te houden. Probeer aangepaste formaten te gebruiken voor kleinere ontwerpen en verlaag vervolgens de kleurdekking.

6. Maak een achtergrondmasker voor de sectie

Met ons achtergrondpatroon op zijn plaats, zijn we eindelijk klaar om een ​​gloednieuw achtergrondmasker voor ons ontwerp uit te testen. Er zijn een heleboel opties en variaties om uit te kiezen. Voor dit voorbeeld gebruiken we het honingraatmasker.

Onder het tabblad Achtergrondmasker, werk het volgende bij:

• Masker: Honingraat
• Maskerkleur: #ffffff
• Maat: Hoes:

7. Pas de positie van de achtergrondafbeelding aan

Omdat we een achtergrondmasker gebruiken, is een deel van onze achtergrondafbeelding gemaskeerd (of "gemaskeerd").

In dit voorbeeld zorgen we ervoor dat de rechterbenedenhoek van de afbeelding het meest zichtbaar is en verplaatsen we deze iets naar rechts om meer gebouwen weer te geven.

Werk het volgende bij op het tabblad Afbeelding:

• Positie achtergrondafbeelding: rechtsonder
• Horizontale offset achtergrondafbeelding: -4vw

8. Gebruik een overvloeimodus

Een manier om creatief met al deze achtergrondelementen om te gaan, is door een overvloeimodus toe te voegen. Overvloeimodi kunnen aan elk van de achtergrondopties worden toegevoegd en ze kunnen worden gebruikt om meerdere achtergrondlagen (afbeelding, verloop, masker, enz.) op creatieve manieren te mengen.

Voor dit voorbeeld mengen we de achtergrondafbeelding met de verloopkleur. Klik hiervoor op het tabblad Achtergrond afbeelding en voeg een overvloeimodus toe om de verloopkleur als volgt te mengen met de achtergrondafbeelding:

• Achtergrondafbeelding mengen: Vermenigvuldigen

9. Pas achtergrondmasker voor mobiel aan

Het is belangrijk om ervoor te zorgen dat het ontwerp van het achtergrondmasker er ook goed uitziet op mobiele apparaten. Gelukkig maken de ingebouwde opties dit proces gemakkelijker. 

Vergeet niet dat we de extra vulling op de tablet en telefoon al hebben toegevoegd om ruimte te maken voor ons achtergrondontwerp. 

Nu hoeven we alleen nog de opties voor achtergrondtransformatie en beeldverhouding te gebruiken om het masker voor mobiel aan te passen.

Onder het tabblad Achtergrondmasker, schakel responsieve opties in en werk het volgende bij:

Tablet-versie

• Maskertransformatie: verticaal spiegelen, horizontaal spiegelen, roteren
• Beeldverhouding masker: vierkant

Telefoon versie

• Maskertransformatie: verticaal spiegelen, horizontaal spiegelen, roteren
• Beeldverhouding masker: Portret

Het resultaat

Bekijk het ontwerp dat we tot nu toe hebben gemaakt.

Desktopcomputer

Tabletversie

Telefoon editie

10. Maak een donkere versie

Als u een donkere versie van dit ontwerp wilt, verandert u enkel de kleur van het achtergrondmasker in een donkere kleur (zoals zwart).

Verander vervolgens de kleur van het patroon in zwart.

Verander vervolgens de titel en ondertiteltekst in wit. En misschien wilt u ook de knopkleur bijwerken.

Zo ziet de donkere versie eruit.

Definitieve resultaten

Zie ook: Divi: de link 'Meer lezen' van een blog aanpassen?

Hier is nog een blik op onze eindresultaten.

Download DIVI nu!!!

Conclusie

Ontwerp een Hero-sectie voor je Site web is erg leuk met maskers en achtergrondpatronen door Divi. Achtergrondopties zijn eenvoudig te wijzigen om het perfecte ontwerp te krijgen. En er zijn tal van andere opties die u kunt gebruiken (zoals overvloeimodi) om nog meer unieke achtergronden te creëren. 

Bovendien kunt u maskers en patronen toevoegen aan elk Divi-element, niet alleen aan secties. Dus veel plezier met experimenteren!

We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.

U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...