Divi: 5 overlays van maskers en patronen die van toepassing zijn op een achtergrondafbeelding

Wilt u Divi's masker- en achtergrondpatroon-overlay gebruiken?

met de laatste versie van achtergrondmasker en achtergrondpatroonfunctie van Divi, kun je unieke Hero-secties voor je maken Site web. Een heldensectie is de eerste sectie van je Site web en dat is het eerste wat je doet bezoekers zie voordat u naar uw scrollt Site web, dus het is belangrijk om in het oog te springen!

Dit artikel laat je zien hoe je vijf unieke achtergrondmaskers en patroonoverlays kunt maken die je op een achtergrondafbeelding kunt toepassen om werkelijk verbluffende heldensecties te maken. 

Deze tutorial behandelt de essentiële stappen die nodig zijn om elke Hero-sectie te maken en geeft je de tools die je nodig hebt om binnen enkele minuten een opvallende Hero-sectie voor je website te maken.

Laten we beginnen!

overzicht

Hier is een kort overzicht van de vijf heldensecties die we vandaag in dit artikel gaan maken.

Download DIVI nu!!!

De ontwerpen zijn subtiel, eenvoudig en toch impactvol.

Lees ook: Divi: Hoe gebruik je de "Gradient Builder" om je afbeeldingen mooier te maken

Maak een nieuwe pagina met Divi Builder

Om te beginnen, moet u het volgende doen:

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 Gebruik Divi Builder

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

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

Vijf voorbeelden van achtergrondmaskers en patroonoverlays om op een achtergrondafbeelding toe te passen

Laten we eerst de sectie Held maken

Al onze voorbeeldontwerpen gebruiken dezelfde sectie-, rij- en kolomstructuur, dus laten we ze nu instellen.

1. Maak een lay-outstructuur

Voeg een rij toe aan uw pagina, klik vervolgens op het groene "+"-pictogram om de kolomstructuur weer te geven en selecteer de eerste kolom, de kolom over de volledige breedte.

2. Sectie-afstand toevoegen

Nu we onze rij en kolom hebben gedefinieerd, is het tijd om wat tussenruimte toe te voegen aan de sectie.

Werk op het tabblad Afstand het volgende bij:

• Bureaublad: 400 pixels (boven en onder)
• Tablet: 200 pixels (boven en onder); 25px (links en rechts)
• Telefoon: 50 pixels (boven en onder); 25px (links en rechts)

Hero Sectie Ontwerp #1

Laten we de eerste Hero-sectie ontwerpen.

Download DIVI nu!!!

1. Koptekst toevoegen

Klik op het grijze "+"-pictogram om de modulebibliotheek te openen. Scroll naar tekst en klik om te laden.

Voer de titeltekst in en vervolgens onder het tabblad Tekst aanvinken, configureer deze instellingen:

• Koplettertype: Work Sans
• Tekstkleur: Wit #ffffff
• Koptekstgrootte:
  • Bureaublad: 3 em
  • Tablet: 2,2 em
  • Telefoon: 1.4em

2. Knopmodule toevoegen

Voeg een knop toe en configureer deze instellingen:

• Onder het tabblad Inhouds: Meer weten
• Onder het tabblad Uitlijning, kies: Midden
• Klik op Aangepaste stijlen gebruiken voor knop configureer vervolgens:
  • Tekstgrootte knop:
    • Bureaublad: 20px
    • Tablet: 16px
    • Telefoon: 14px
  • Tekstkleur knop: #ffffff
  • Achtergrond: #1d1d1d
  • Breedte knoprand: 0
  • Grensstraal: 0
  • Letterafstand: 3 punten
  • Lettertype knop: Work Sans
  • Lettertype: TT

3. Voeg een achtergrondafbeelding toe

Nu dat onze inhoud is geconfigureerd, is het tijd om te beginnen met het ontwerpen van de achtergrond van de sectie.

• Ga naar de achtergrondschakelaar en klik op het 3e tabblad, het tabblad Afbeelding en klik vervolgens op "Achtergrondafbeelding toevoegen".
• Hierdoor wordt uw mediabibliotheek geopend, waar u een foto kunt selecteren of een nieuwe kunt uploaden.
• Nadat je je foto hebt geselecteerd, klik je op de knop 'Een afbeelding uploaden' in de rechterbenedenhoek.

4. Voeg een achtergrondpatroon toe

Nu we onze achtergrondafbeelding hebben ingesteld, gaan we een patroon toevoegen.

• In het tabblad Achtergrond, navigeer naar het 5e tabblad, het tabblad Achtergrondpatroonen klik vervolgens op 'Achtergrondpatroon toevoegen'.
• Selecteer Getuft uit het vervolgkeuzemenu en configureer deze instellingen:
  • Patroonkleur - rgba (255,255,255,0.31)
  • Patroontransformatie: geen
  • Maat: Ware grootte
  • Herhaling patroon Oorsprong: Boven Onder
  • Patroon herhalen: herhalen
  • Mengmodus: Normaal

5. Achtergrondmasker toevoegen

Nu we onze achtergrondafbeelding en -patroon hebben ingesteld, gaan we een achtergrondmasker toevoegen.

• In het tabblad Achtergrond, navigeer naar het 6e tabblad, het tabblad Achtergrondmaskeren klik vervolgens op 'Achtergrondmasker toevoegen'.
• Selecteer Boon uit het vervolgkeuzemenu en configureer deze instellingen:
  • Maskerkleur: rgba (0,0,0,0.36)
  • Maskerbeeldverhouding: horizontale rechthoek
  • Maat: Uitrekken om te vullen

Alstublieft ! Je hebt nu een prachtig ontworpen Hero-sectie.

Sectie Held #2 ontwerp

Laten we nu het tweede heldengedeelte ontwerpen.

1. Voeg een achtergrondafbeelding toe en stel de overvloeimodus in op Overlay

Selecteer je achtergrondafbeelding, stel de overvloeimodus in op Overlay en voeg een overlay-kleur van rgba (10,10,10,0.64) toe.

2. Voeg een achtergrondpatroon toe

Nu we de achtergrondafbeelding hebben ingesteld, gaan we een achtergrondpatroon toevoegen.

• Ga op het tabblad Achtergrond naar het 5e tabblad, het tabblad Achtergrondpatroonen klik vervolgens op 'Achtergrondpatroon toevoegen'.
• Selecteer Getuft uit het vervolgkeuzemenu en configureer deze instellingen:
  • Patroonkleur - rgba (255,255,255,0.09)
  • Patroontransformatie: geen
  • Maat: Hoes:
  • Patroonherhaling Oorsprong: Linksboven
  • Patroon herhalen: herhalen
  • Mengmodus: Normaal

3. Achtergrondmasker toevoegen

Nu we onze achtergrondafbeelding en -patroon hebben ingesteld, gaan we een achtergrondmasker toevoegen.

• In het tabblad Achtergrond, navigeer naar het 6e tabblad, het tabblad Achtergrondmaskeren klik vervolgens op 'Achtergrondmasker toevoegen'.
• Selecteer Caret uit het vervolgkeuzemenu en configureer deze instellingen:
  • Maskerkleur: rgba (0,0,0,0.36)
  • Maskertransformatie: Geen
  • Beeldverhouding: horizontale rechthoek
  • Maskergrootte: uitrekken om te vullen
  • Maskermengmodus: Normaal

Sectie Held #3 ontwerp

Laten we nu de derde Hero-sectie ontwerpen.

1. Voeg een achtergrondafbeelding toe en stel de overvloeimodus in op Overlay

Selecteer je achtergrondafbeelding, stel de overvloeimodus in op Overlay en voeg een overlay-kleur van rgba (10,10,10,0.39) toe.

2. Voeg een achtergrondpatroon toe

Nu we onze achtergrondafbeelding hebben ingesteld, gaan we een achtergrondpatroon toevoegen.

• In het tabblad Achtergrond, navigeer naar het 5e tabblad, het tabblad Achtergrondpatroonen klik vervolgens op 'Achtergrondpatroon toevoegen'.
• Selecteer Diagonale strepen 2 uit het vervolgkeuzemenu en configureer deze instellingen:
  • Patroonkleur - rgba (0,0,0,0.06)
  • Patroontransformatie: geen
  • Maat: Ware grootte
  • Patroonherhaling Oorsprong: Linksboven
  • Patroon herhalen: herhalen
  • Mengmodus: Normaal

3. Achtergrondmasker toevoegen

Nu we een achtergrondafbeelding en een patroon hebben toegevoegd, gaan we een achtergrondmasker toevoegen.

• In het tabblad Achtergrond, navigeer naar het 6e tabblad, het tabblad Achtergrondmaskeren klik vervolgens op 'Achtergrondmasker toevoegen'.
• Selecteer Driehoeken uit het vervolgkeuzemenu en configureer deze instellingen:
  • Maskerkleur: rgba (10, 10, 10, 0,61)
  • Maskertransformatie: geen
  • Beeldverhouding: horizontale rechthoek
  • Maskergrootte: uitrekken om te vullen
  • Maskermengmodus: Normaal

Sectie Held #4 ontwerp

Laten we nu het vierde deel van Hero ontwerpen.

1. Voeg een achtergrondafbeelding toe

Selecteer je achtergrondafbeelding.

2. Voeg een achtergrondpatroon toe

Nu we onze achtergrondafbeelding hebben toegevoegd, gaan we een achtergrondpatroon toevoegen.

• In het tabblad Achtergrond, navigeer naar het 5e tabblad, het tabblad Achtergrondpatroonen klik vervolgens op 'Achtergrondpatroon toevoegen'.
• Selecteer Smiles uit het vervolgkeuzemenu en configureer deze instellingen:
  • Patroonkleur - rgba (0,0,0,0.2)
  • Patroontransformatie: geen
  • Maat: Hoes:
  • Herhalen Oorsprong: linksboven
  • Patroon herhalen: herhalen
  • Patroonmengmodus: Normaal

3. Achtergrondmasker toevoegen

Nu we onze achtergrondafbeelding en patroon hebben toegepast, gaan we een achtergrondmasker toevoegen.

• In het tabblad Achtergrond, navigeer naar het 6e tabblad, het tabblad Achtergrondmaskeren klik vervolgens op 'Achtergrondmasker toevoegen'.
• Selecteer Hoekmeer  uit het vervolgkeuzemenu en configureer deze instellingen:
  • Maskerkleur: rgba (10, 10, 10, 0,61)
  • Maskertransformatie: horizontaal
  • Beeldverhouding: Horizontale rechthoek
  • Maat: Hoes:
  • Maskerpositie: midden links
  • Maskerblendermodus: Normaal

3. Configureer lijnparameters

Voordat we gaan, heeft deze Hero-sectie unieke lijnstijlen. Laten we dit instellen.

• Maatvoering:
  • Breedte: 80%
  • Maximale breedte: 800px
• Rij-uitlijning:
  • Bureaublad: standaard
  • Tablet: Centrum
  • Telefoon: Centrum
• Marges:
  • Links: 20vw

Sectie Hero #5 ontwerp

Laten we nu de vijfde Hero-sectie ontwerpen.

Download DIVI nu!!!

1. Voeg een achtergrondafbeelding toe

Selecteer je achtergrondafbeelding.

2. Voeg een patroon toe

Nu we onze achtergrondafbeelding hebben ingesteld, gaan we een achtergrondpatroon toepassen.

• In het tabblad Achtergrond, navigeer naar het 5e tabblad, het tabblad Achtergrondpatroonen klik vervolgens op 'Achtergrondpatroon toevoegen'.
• Selecteer Kruisen uit het vervolgkeuzemenu en configureer deze instellingen:
  • Patroonkleur – #ffffff
  • Patroontransformatie: geen
  • Maat: Aangepast formaat
  • Patroonbreedte: 10px
  • Patroon Hoogte: 10px
  • Herhalen Oorsprong: Boven Onder
  • Patroon herhalen: herhalen
  • Patroonmengmodus: Normaal

3. Achtergrondmasker toevoegen

Nu we een achtergrondafbeelding en patroon hebben toegepast, gaan we een achtergrondmasker toevoegen.

• In het tabblad Achtergrond, navigeer naar het 6e tabblad, het tabblad Achtergrondmaskeren klik vervolgens op 'Achtergrondmasker toevoegen'.
• Selecteer Diagonale pillen  uit het vervolgkeuzemenu en configureer deze instellingen:
  • Maskerkleur: rgba (10, 10, 10, 0,61)
  • Maskertransformatie: horizontaal
  • Beeldverhouding: Horizontale rechthoek
  • Maat: Hoes:
  • Maskerpositie: midden links
  • Maskermengmodus: Normaal

3. Configureer lijnparameters

Voordat we gaan, heeft deze Hero-sectie ook unieke lijnstijlen. Laten we dit instellen.

• Maatvoering:
  • Breedte: 80%
  • Maximale breedte: 800px
• Rij-uitlijning:
  • Bureaublad: standaard
  • Tablet: Centrum
  • Telefoon: Centrum
• Spatiëring:
  • Marge (rechts): 18vw

Zie ook: Divi: Maskers en achtergrondpatronen aan een koptekst toevoegen

Conclusie

Het ontwerpen van een unieke en opvallende Hero-sectie voor uw website is eenvoudig met de nieuwe opties achtergrond- en patroonmasker door Divi. Elke functie heeft veel opties waarmee u echt creatieve achtergronden kunt maken. 

Bovendien kun je achtergrondpatronen en maskers toevoegen aan elk Divi Builder-item! De ontwerpmogelijkheden zijn eindeloos.

Hopelijk voegt deze techniek nog een nuttige ontwerpvaardigheid toe voor toekomstige projecten.

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.

Aarzel niet om ook onze gids te raadplegen over 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.

...