Wilt u unieke achtergrondafbeeldingen maken met de patroonovervloeimodus van Divi ?
De ingebouwde achtergrondpatrooninstellingen van Divi kunt u opvallende ontwerpen maken en stijl toevoegen aan de achtergrondafbeeldingen van uw Site web. U kunt de instellingen voor de overvloeimodus gebruiken om de manier waarop het patroon opgaat in de achtergrondafbeelding nauwkeurig af te stemmen.
In deze zelfstudie laten we u enkele voorbeelden zien van het toevoegen van een patroonovervloeimodus aan de achtergrondafbeeldingen van uw pagina. Volg ze om deze looks zelf te creëren of gebruik ze als inspiratie om je eigen aangepaste ontwerpen te maken.
Laten we beginnen!
overzicht
Hier is een voorbeeld van wat we in deze zelfstudie gaan ontwerpen.
Eerste lay-out
Tweede lay-out
derde lay-out
Hoe u patroonovervloeimodi gebruikt op uw Divi-achtergrondafbeeldingen
Een nieuwe pagina maken met een vooraf gedefinieerde lay-out
We beginnen met het gebruik van een vooraf gedefinieerde lay-out uit de bibliotheek Divi. Voor dit ontwerp gebruiken we de « Marina-bestemmingspagina 'Van Marina-indelingspakket .
Voeg een nieuwe pagina toe aan je Site web en geef het een titel en selecteer vervolgens de optie Divi Builder gebruiken.
We gebruiken voor dit voorbeeld een vooraf gemaakte lay-out uit de Divi-bibliotheek, dus selecteer Door lay-outs bladeren.
Zoek en selecteer de lay-out Marina-bestemmingspagina.
Selecteer Gebruik deze lay-out om de lay-out aan uw pagina toe te voegen.
We zijn nu klaar om te ontwerpen.
Eerste lay-out
Voor ons eerste ontwerp voegen we een chevronpatroon toe aan de eerste kopafbeelding. Dit voegt wat visuele interesse toe aan de koptekst.
Lees ook: Divi: de module "Countdown Timer" aanpassen met een GIF
Vanwege de overvloeimodus die we zullen toepassen, wordt het patroon subtieler en blijft de achtergrondafbeelding zichtbaar.
Open eerst de sectie-instellingen en ga naar de sectie Achtergrond. Klik op het tabblad Achtergrondpatroon en selecteer Achtergrondpatroon toevoegen.
Selecteer vervolgens het patroontype. Zoals je kunt zien, zijn er veel verschillende sjablonen om uit te kiezen, en ze kunnen allemaal verder worden aangepast door de sjablooninstellingen hieronder.
- Patroontype: omgekeerde visgraat 2
Modus "Patroonmenging" toegevoegd
Stel ten slotte de overvloeimodus van het patroon in. We zullen de overvloeimodus gebruiken Zacht licht voor dit voorbeeld. Deze overvloeimodus maakt het patroon subtieler zodat het niet afleidt van de achtergrondafbeelding.
- Patroonmengmodus: Zacht licht
Resultaat
Hier is het definitieve ontwerp van ons eerste voorbeeld.
Hier is de mobiele versie.
Tweede lay-out
Voor de tweede lay-out gebruiken we een golfpatroon over de achtergrondafbeelding en het verloop, wat goed past bij het nautische thema van de pagina.
Navigeer eerst naar de sectie "Hoe het werkt" en open de sectie-instellingen.
Open instellingen Achtergronden selecteer vervolgens het tabblad Achtergrondpatroon, en klik vervolgens op Achtergrondpatroon toevoegen.
Voor dit ontwerp gebruiken we het patroontype Waves.
- Patroontype: golven
Verander vervolgens de patroonkleur in wit.
- Patroonkleur: #FFFFFF
Overvloeimodus voor patronen toegevoegd
We kunnen nu de overvloeimodus aan ons patroon toevoegen. Stel de patroonovervloeimodus in op Bedekking.
Ontdek ook: Divi: het winkelmandje en de zoekpictogrammen van de module "Fullwidth Menu" aanpassen
Deze overvloeimodus maakt donkere kleuren in de achtergrondafbeelding donkerder en lichtere kleuren.
- Overvloeimodus patroon: Overlay
Resultaat
Hier is het eindresultaat van het tweede voorbeeld toegepast op de sectie: "Hoe het werkt".
En hier is de mobiele versie.
derde lay-out
Laten we beginnen met onze derde lay-out.
Voor deze lay-out voegen we ondoorzichtige diagonale strepen toe aan de achtergrond van de " Oproep tot actie".
Begin met het openen van de sectie-instellingen en ga naar de sectie Achtergrond. Klik op het tabblad Achtergrondpatroonen selecteer vervolgens Achtergrondpatroon toevoegen.
Selecteer patroon Diagonale strepen.
Stel vervolgens de patroonkleur in.
- Patroonkleur: rgba (255,255,255,0.25)
Draai het patroon horizontaal om met behulp van de Transform Pattern-instellingen. Dit is een andere parameter die u kan helpen het patroon naar wens af te stemmen.
- Patroontransformatie: horizontaal
Overvloeimodus voor patronen toegevoegd
Stel ten slotte de overvloeimodus van het patroon in. Voor dit ontwerp gebruiken we de overvloeimodus Helderheid.
Lees ook onze gids over: Divi: Hoe gebruik je de "Gradient Builder" om je afbeeldingen mooier te maken
Dit, gecombineerd met onze patroonkleur, voegt een helder scherm toe aan de afbeelding terwijl de foto doorschijnt. Met dit ontwerp valt het beeld van de boot meer op van de achtergrond omdat het patroon een onderscheidend contrast toevoegt.
- Patroonmengmodus: helderheid
Resultaat
Hier is het definitieve ontwerp voor deze sectie.
En hier is de mobiele versie.
Eindresultaat
Laten we nu eens kijken naar het volledige pagina-ontwerp met patroonovervloeimodi.
Download DIVI nu!!!
Conclusie
Het toevoegen van een patroon kan een geweldige manier zijn om uw achtergrondafbeelding visueel interessanter te maken, maar soms kan het patroon de achtergrondafbeelding overweldigen. Gelukkig wordt Divi geleverd met tal van overvloeimodi, zodat je de patronen zo veel kunt aanpassen als je wilt.
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.
...
