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

Wilt u uw afbeeldingen vormgeven met behulp van de verloopgenerator? Divi ?

Afbeeldingsmaskers worden vaak gebruikt om interessante vormen aan afbeeldingen toe te voegen. Ze laten de afbeelding door de vorm kijken, waardoor de pagina een uniek ontwerpelement krijgt.

Met Verloop bouwer de Divi, hoeft u niet per se maskers te gebruiken om vormen te maken. In plaats daarvan kunt u de Verloop stopt en de parameters om ze te maken!

In dit artikel zullen we zien hoe u uw afbeeldingen kunt verfraaien met de Gradient Builder van Divi om u te helpen unieke ontwerpen aan uw afbeeldingen toe te voegen.

Laten we beginnen.

overzicht

Laten we eerst eens kijken wat we in deze tutorial gaan maken op verschillende schermformaten.

Eerste voorbeeld – Ronde afbeeldingsvorm

Desktopcomputer

geef vormen aan uw afbeeldingen met behulp van Divi's gradiëntgenerator

tablet

Telefoon

Tweede voorbeeld – Lineaire beeldvorm

Bureau

tablet

Telefoon

Derde voorbeeld – Elliptische beeldvorm

Desktopcomputer

tablet

Telefoon

Vierde voorbeeld – Conische beeldvorm

Desktopcomputer

tablet

Telefoon

Lay-outontwerp met Divi

Laten we beginnen met het maken van de lay-out die we in alle voorbeelden zullen gebruiken. Deze lay-out kan worden gebruikt als een heldensectie.

Het bevat een titel en beschrijving aan de ene kant en de afbeelding aan de andere kant. Deze lay-out en afbeelding gebruiken we dan voor de voorbeelden.

Pas de sectie aan

Maak eerst een nieuwe Divi-pagina en pas de sectie aan. Open de sectie-instellingen en wijzig de couleur achtergrond naar #f0f3fb.

Achtergrond: #f0f3fb

Ga dan naar het tabblad Design en wijzig de afstandsinstellingen als volgt:.

Vulling (boven en onder): 10%

Lijn toevoegen

Voeg dan een toe lijn met onderstaande kolomstructuur.

Toegang tot de lijnparameters, in het tabblad Design, ga naar de optie Afmetingen en wijzig de maatparameters.

Gebruik aangepaste gootbreedte: JA
Maximale breedte: 1px

Instellingen eerste kolom

In het tabblad Content van de rij, open de instellingen van de eerste kolom van de rij, ga naar het tabblad Design. Wijzig de afstand als volgt.

Vulling (links en rechts): 9% links, rechts

Parameters van de eerste tekstmodule

Voeg dan een toe Tekstmodule naar de linkerkolom.

Selecteer Rubriek 4 voor de tekst van inhoud en voeg de inhoud van je lichaam.

Tekst: "Welkom bij BlogPasCher"

Ga dan naar tabblad Design en wijzig de titelinstellingen.

Lettertype: Montserrat
Lettergewicht: Vet
Stijl: TT
Tekstkleur: #1d4eff

Tekstgrootte: Desktop 16px, Tablet 14px, Telefoon 12px
Letterafstand: 0,3em
Lijnhoogte: 1,6 em

Scroll naar Spacing en verander de ondermarge.

Marge (onder): 0px

Parameters van de tweede tekstmodule

Voeg dan een toe Tekstmodule onder de eerste.

Stel het teksttype in op "Koptekst 1" en voeg de inhoud van je lichaam.

Inhoud: “Plan je financiële toekomst”

Selecteer vervolgens tabblad Design en wijzig de opties van de titel.

Lettertype: Montserrat
Lettergewicht: Vet
Tekstkleur: #0f1154

Grootte: 80px Desktop, 40px Tablet, 24px Telefoon
Rijhoogte: 110%

Parameters van de derde tekstmodule

Voeg dan een toe Tekstmodule onder de tweede.

Laat het teksttype bij "Alinea" staan en voeg je bodycontent toe.

Lichaam: inhoud

Ga dan naar tabblad Ontwerpfase en wijzig de tekstinstellingen.

Tekstlettertype: Roboto
Lettergewicht: gemiddeld
Tekstkleur: #000000

Tekstgrootte: 18px (desktop en tablet), 14px (telefoon)
Lijnhoogte: 180%

Scroll ten slotte naar beneden naar tussenruimte en stel de ondermarge in. Sluit de module-instellingen.

Marge (onder): 0px

Instellingen afbeeldingsmodule

Voeg nu een . toe Fotomodule naar de rechterkolom.

eerste, verwijder dummy afbeelding door op de prullenbak of het reset-pictogram boven de afbeelding te klikken.

Scroll dan naar beneden bakgrond , selecteer het tabblad Afbeelding en voeg uw afbeelding toe. Laat alle afbeeldingsinstellingen op hun standaardwaarden staan. De afbeelding zal in eerste instantie niet veel laten zien. We zullen dit regelen als we gaan.

Selecteer vervolgens tabblad Style en scroll naar Spacing.

Marge (bureaublad): -10% (boven), -30% (links), 10% (rechts)
Opvulling (boven en onder): 300px

Marge (tablet/telefoon): 0% (boven), 0% (links en rechts)

Opvulling (telefoon): 150px (boven en onder)

Voorbeelden van afbeeldingen gevormd met Divi's Gradient Builder

Eerste voorbeeld – Ronde vorm

Ons eerste voorbeeld geeft de afbeelding een cirkelvorm met een gat in het midden.

Open de instellingen van de Afbeeldingsmodule en scrol omlaag naar Achtergrond . Selecteer de Tabblad Achtergrondverloop en stel 6 gradiëntstops in:

Eerste stop: 0%, #f0f3fb
Ten tweede: 45%, #f0f3fb
Derde (boven de tweede): 45%, rgba (41,196,169,0)
Ten vierde: 69%, rgba (250,255,214,0)
Vijfde (boven de vierde): 69%, #f0f3fb
Zesde: 100%, #f0f3fb

Type: Rond
Positie: Midden
Eenheid: Procent
Vierkant verloop boven achtergrondafbeelding: JA

Tweede voorbeeld – Lineaire vorm

Hier is een voorbeeld van het tweede voorbeeld van de afbeeldingsvorm. In dit voorbeeld worden diagonale lijnen over de afbeelding geplaatst.

Open instellingen, scrol omlaag naar Achtergrond en selecteer deTabblad Achtergrondverloop. Voeg vier gradiëntstops toe:

Eerste stop: 0%, #f0f3fb
Ten tweede: 5%, #f0f3fb
Derde (boven de tweede): 5%, rgba (175,175,175,0)
Ten vierde: 13%, rgba (41,196,169,0)

Type: Lineair
Besturing: 150 graden
Verloop herhalen: JA
Gradiënteenheid: Percentage
Vierkant verloop boven achtergrondafbeelding: JA

Derde voorbeeld – Elliptische vorm

Dit is ons derde voorbeeld van een afbeeldingsvorm. Hierbij wordt gebruik gemaakt van een elliptische vorm.

Open de instellingen van de Afbeeldingsmodule en scrol omlaag naar Achtergrond . Selecteer tabblad Achtergrond verloop en maak vier gradiëntstops:

Eerste stop: 0%, #f0f3fb
Ten tweede: 9%, #f0f3fb
Derde (boven de tweede): 9%, rgba (175,175,175,0)
Ten vierde: 21%, rgba (41,196,169,0)

Type: Elliptisch
Gradiëntpositie: Linksboven
Verloop herhalen: JA
Gradiënteenheid: Percentage
Vierkant verloop Boven achtergrond Afbeelding: JA

Vierde voorbeeld – Conische vorm

Ons vierde voorbeeld gebruikt "Conisch" om een enkele afbeeldingsvorm te maken.

Open Afbeeldingsmodule-instellingen, scrol omlaag naar Achtergrond en selecteer het tabblad Achtergrondafbeelding. Deze heeft 5 gradiëntstops:

Eerste stop: 23%, #f0f3fb
Ten tweede: 35%, #f0f3fb
Derde (boven de tweede): 35%, rgba (41,196,169,0)
Ten vierde: 65%, rgba (250,255,214,0)
Vijfde (boven de vierde): 65%, #f0f3fb

Type: taps toelopend
Gradiëntrichting: 180 graden
Gradiëntpositie: Bodem
Eenheid: Percentage
Vierkant verloop boven achtergrondafbeelding: JA

Definitieve resultaten

Alle lay-outs zijn goed verlopen. Beeldvormen vallen op en afbeeldingen zijn altijd gemakkelijk te begrijpen. Ze zijn allemaal responsief, dus ze zien er geweldig uit op elk apparaat.