Wil je de achtergrondmaskers en het scheidingsteken van combineren Divi sublieme en unieke achtergronden hebben?
De combinatie van achtergrondmaskers met sectieverdelers in Divi voegt een nieuwe laag creativiteit toe aan een toch al krachtig arsenaal aan achtergrondontwerpopties.
Naast achtergrondopties stellen sectieverdelers gebruikers ook in staat hun achtergrondontwerpen te verbeteren.
In deze zelfstudie laten we u zien hoe u achtergrondmaskers kunt combineren met sectiescheidingstekens Divi. Wij geven u stap voor stap instructies hoe u met deze techniek een achtergrondontwerp voor een Divi-sectie kunt maken.
Bovendien leggen we je zelfs uit hoe je met een paar simpele aanpassingen alternatieve ontwerpen kunt maken.
Laten we beginnen!
overzicht
Hier is een voorbeeld van de tekeningen in deze tutorial.
Het concept
Het basisconcept van deze tutorial is om een ​​achtergrondmasker en sectieverdelers te combineren om nog meer unieke maskervormen te creëren.
Eerst voegen we een achtergrondmasker toe.
Vervolgens voegen we sectieverdelers toe om de vorm van het masker creatief te voltooien.
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 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.
Combineer achtergrondmaskers en scheidingslijnen in Divi
Sectiegrootte en afstand toevoegen
Om te beginnen voegen we de grootte en afstand toe aan de bestaande sectie in de constructor. We zullen het toevoegen van een regel of alles opschorten inhoud zodat we ons kunnen concentreren op het ontwerpen van de achtergrond van de sectie.
Sectie-instellingen openen. Onder het tabblad Design, werk de grootte en afstand als volgt bij:
- Minimale hoogte: 50 vw
- Opvulling (boven en onder): 0px
Maak het achtergrondverloop
Zodra de sectie een bepaalde hoogte heeft, zijn we klaar om het achtergrondverloop aan de sectie toe te voegen.
Onder het tabblad Content, klik op het tabblad Achtergrond verloop onder achtergrondopties. Voeg vervolgens als volgt een verloop toe:
- Verloop stopt
- 20%: #1a2a6c
- 60%: #b21f1f
- 100%: #fdbb2d
Maak het achtergrondmasker
Nu we een kleurverloop hebben, zijn we klaar om een ​​achtergrondmasker te maken.
Onder het tabblad Achtergrondmasker, werk het volgende bij:
- Masker: Visgraat
- Maskerkleur: #000000
- Transformeren: omgekeerd
- Maskerbeeldverhouding: zie screenshot
Sectiescheidingstekens toevoegen (verdelers)
Met ons masker op zijn plaats, kunnen we de vorm van het masker verder wijzigen met behulp van sectieverdelers.
In dit voorbeeld voegen we bovenaan en onderaan een halfronde sectiescheiding toe. Hierdoor wordt het achtergrondmasker gecomprimeerd om er meer uit te zien als een fraai pijlontwerp.
Klik hiervoor op het tabblad Design en voeg de volgende scheidingstekens toe:
Voeg eerst een scheidingsteken bovenaan toe onder het tabblad Top.
- Scheidingsstijl: zie screenshot
- Kleur: #000
- Hoogte scheidingswand: 10 vw
Voeg vervolgens een onderste scheidingsteken toe onder het tabblad Onder.
- Scheidingsstijl: zie screenshot
- Kleur: #000
- Hoogte scheidingswand: 10 vw
- Divider Flip: Verticale Flip
Het resultaat
Hier is het resultaat tot nu toe.
Pas achtergrondopties en scheidingslijnen aan voor meer design
Nu u het basisidee op zijn plaats heeft, kunnen we gemakkelijk spelen met de sectieverdelers om meer patronen te creëren.
Zie ook: Divi: Hoe gebruik je de "Gradient Builder" om je afbeeldingen mooier te maken
Alternatief ontwerp #1
Voor ons eerste alternatieve ontwerp roteren we het bestaande achtergrondmasker. Vervolgens zullen we de halfronde sectieverdelers vervangen door driehoeken.
Open hiervoor de bestaande sectie-instellingen, klik op het tabblad Achtergrondmasker en update het volgende:
- Maskertransformatie: verticaal omdraaien, roteren
- Maskerbeeldverhouding: zie screenshot
Werk vervolgens de sectiescheidingstekens als volgt bij:
Bovenste verdeler
- Scheidingsstijl: zie screenshot
- Hoogte scheidingswand: 13 vw
Bodemverdeler
- Scheidingsstijl: zie screenshot
- Hoogte: 13 vw
- Scheidingswand omdraaien: désactiver
Het resultaat
Hier is het resultaat.
Alternatief ontwerp #2
Voor ons tweede en laatste alternatieve ontwerp gaan we het masker vervangen chevrons bij het masker Diagonale staven 2 en geef het ook een nieuwe scheidingswand voor het bovenste gedeelte.
Open hiervoor de bestaande sectie-instellingen, klik op het tabblad Achtergrondmasker en update het volgende:
- Masker: Diagonale staven 2
- Maskertransformatie: horizontaal omdraaien
- Beeldverhouding: zie screenshot
Werk vervolgens de sectiescheidingstekens als volgt bij:
Bovenste verdeler
- Scheidingsstijl: zie screenshot
- Divider Flip: Horizontale Flip
Bodemverdeler
- Scheidingsstijl: Geen
Het resultaat
Hier is het resultaat.
Definitieve resultaten
Om je een beter idee te geven hoe deze achtergronden er uit zullen zien inhoud, hebben we een rij aan een kolom met een titel toegevoegd.
Lees ook: Divi: Hoe maak je een plakkerig achtergrondmasker?
Download DIVI nu!!!
Conclusie
Het combineren van maskers en sectieverdelers voor achtergrondontwerpen opent meer mogelijkheden om unieke vormen te creëren voor deze ingebouwde maskers.
Voel je vrij om zelf verschillende combinaties te ontdekken.
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.
...
