Wil je een unieke en verbluffende achtergrond maken met maskers en achtergrondpatronen van Divi ?
De nieuwe functie voor achtergrondmaskers en patronen van Divi wordt meestal gebruikt voor secties van een pagina. Maar we kunnen ze ook aan headers toevoegen!
In deze zelfstudie laten we u zien hoe u maskers en achtergrondpatronen aan een koptekstsjabloon toevoegt Divi met behulp van de constructeur thema's.
Het is een geweldige manier om volledig unieke koptekstontwerpen te maken voor uw Site web.
Laten we beginnen.
overzicht
Hier is een korte blik op het ontwerp dat we in deze zelfstudie gaan maken.
Ga naar Divi's themabouwer en begin met het maken van een globale header
Ga vanuit het WordPress-dashboard naar Divi > Themabouwer
Klik op "Globale koptekst toevoegen"
Selecteer “Bouw globale kop”.
Daarna kunt u beginnen met het ontwerpen van een nieuwe header met behulp van de Divi Builder.
Achtergrondmaskers en -patronen toevoegen aan een Divi-koptekst
De sectie-achtergrond maken met een achtergrondkleur en patroon
Lees ook: Divi: Hoe maak je een Testimonials-sectie in de vorm van een raster
Open om te beginnen de instellingen van de bestaande sectie.
Onder het tabblad Content, werk de achtergrondopties bij met de volgende instellingen:
Achtergrond kleur:
- Achtergrond: #262d3f
Achtergrondpatroon:
- Model: Pillen
- Patroonkleur: rgba (255,255,255,0.1)
- Patroongrootte: aangepast formaat.
- Patroonbreedte: 1px
Vulling
Onder het tabblad Design, werk de sectieopvulling als volgt bij:
- Opvulling (boven en onder): 0px
Dit zal de verticale ruimte van de kop iets verkleinen.
Voeg een rij toe met de volgende kolomindeling
Tijdelijke koptekstinhoud toegevoegd (een menu en een knop)
Voeg in de linkerkolom van de rij een nieuw menu toe.
Selecteer een menu.
Voeg vervolgens een logo toe en gebruik de instellingen om het menu en logo naar wens aan te passen.
Voeg in de rechterkolom een knopmodule toe en pas deze ook naar wens aan.
De lijnachtergrond maken met verloop, masker en patroon
het verloop
Open de rij-instellingen met uw menu en knop. Werk vervolgens de achtergrondopties bij met de volgende achtergrondinstellingen:
Achtergrondverloop:
- Gradiëntstops 1 (50%): Wissen
- Verloopstops 2 (75%): #ff4c00
- Besturing: 90 graden
Patronen
- Model: Pillen
- Patroonkleur: rgba (38,45,63,0.48)
- Patroongrootte: 1 pixel
- Verticale verschuiving: 20px
Opmerking: de verticale verschuiving van het patroon is ingesteld op 20px omdat er een topvulling van 20px is op het gedeelte boven de lijn. Dit zorgt ervoor dat het doorsnedepatroon uitgelijnd is met het rijpatroon.
Achtergrondmasker
- Masker: Visgraat
- Maskerkleur: #262d3f
OPMERKING: Voor kopteksten is het het beste om de maskergrootte ingesteld te houden op "Uitbreiden om te vullen", zodat deze de horizontale ruimte bedekt zonder afbreuk te doen aan het ontwerp van het masker.
Laatste hand aan de lijn
Zie ook: Divi: Hoe gebruik je de "Gradient Builder" om je afbeeldingen mooier te maken
Om het ontwerp te voltooien, voegen we een randradius en nog een paar bewerkingen toe aan de lijn.
De straal, rand en randafstand
Onder het tabblad Design, werk de opvulling als volgt bij:
- Opvulling (boven en onder): 5px
Geef de rij dan een mooie afgeronde hoek voor een extra design element.
- Afgeronde hoeken: 50px
- Breedte linkerrand: 50px
- Kleur linkerrand: #262d3f
We moeten een rand aan de linkerkant van de rij geven omdat de vierkante rand van het masker de rij zal overlopen ondanks de afgeronde hoeken.
Eindresultaat
Laten we het eindresultaat bekijken.
Het verloop is een beetje subtiel, dus hier is een blik op hoe het eruit ziet.
En hier is het ontwerp van de desktop en mobiele header.
Download DIVI nu!!!
Conclusie
Het achtergrondontwerp van de koptekst is slechts het topje van de ijsberg. Er is veel onderzoek te doen met de achtergrondopties die beschikbaar zijn in Divi.
We hopen dat deze tutorial je heeft geholpen te begrijpen hoe Divi's achtergrondmaskers en patronen kunnen samenwerken om een uniek achtergrondontwerp voor je headers te creëren.
Voel je vrij om te experimenteren met meer achtergrondontwerpcombinaties om bij je eigen ontwerp te passen. Site web of uw aanstaande project.
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.
...
