Vil du gerne have en baggrundsgradient i Divi der ændrer sig, når du svæver?
At bygge hjemmesider handler om at sikre, at alle detaljer er korrekte. At være opmærksom på de små detaljer i dit design vil hurtigt øge kvaliteten af dit Websted.
Med de nye svævemuligheder af Divi, kan du nemt tilføje små interaktioner på din Websted. Hover muligheder gælder for næsten alle designparametre. Du kan for eksempel indirekte ændre en gradientbaggrund ved svævning for at skabe en flot overgang.
Det er præcis, hvad vi vil vise dig i denne tutorial. Udover at lave gradientovergangen, vil vi også skabe et fantastisk designeksempel fra bunden, som du frit kan bruge til enhver form for Websted som du skaber.
Lad os gå!
undersøgelse
Før vi dykker ned i selvstudiet, lad os tage et kig på slutresultatet.
Lad os begynde at designe med Divi
Tilføj sektion # 1
afstand
Den første ting du skal gøre er at oprette en ny side eller åbne en eksisterende og tilføje en ny almindelig sektion til den. Åbn indstillingerne og tilføj tilpassede top- og bundmargener.
- Polstring (top og bund): 100px
Tilføj linje 1
Struktur af søjlen
Fortsæt ved at tilføje en ny række ved hjælp af følgende kolonnestruktur:
Standard baggrundsfarve (Desktop) for kolonne 1
Uden at tilføje nogen moduler endnu, skal du åbne rækkeindstillinger og tilføje følgende standardbaggrundsfarve til kolonne 1:
- Baggrund (skrivebord): #e7ffa0
Kolonne 1 baggrundsfarve ved svæv
Skift denne baggrundsfarve, når du svæver.
- Baggrund: #00020c
Kolonne 1 baggrundsgradient
Tilføj også en gradient baggrundsfarve til kolonne 1. Bemærk, at vi bruger en fuldstændig gennemsigtig farve. Denne farve vil tillade baggrundsfarven at se igennem, som igen ændres ved svævning.
- Farve 1 (20%): rgba(255,255,255,0)
- Farve 2 (100%): rgba(16,0,201,0.8)
- Gradienttype: Lineær
- Gradientretning: 50 grader
Kolonne 2 baggrundsfarve
Tilføj også en baggrundsfarve til kolonne 2.
- Baggrund: #ffffff
dimensionering
Gå derefter til fanen Design og ændre størrelsesindstillingerne i indstillingen dimensionering.
- Brug tilpasset tagrendebredde: JA
- Rendebredde: 1
- Bredde: 2000px
afstand
Fortsæt ved at tilføje tilpassede udfyldningsværdier i afstandsindstillingerne.
- Polstring (top og bund): 0px
Mellemrum (kolonne 2)
- Polstring (top og bund): 6vw (desktop), 120px (tablet og telefon)
- Polstring (venstre og højre): 5vw (desktop), 80px (tablet), 50px (telefon)
Box Shadow
Og giv også rækken en subtil kasseskygge.
- Box Shadow Blur Styrke: 100px
- Box Shadow Spread Styrke: -10px
Overgange
Til sidst vil vi skabe en jævn overgang i baggrunden ved at øge overgangsvarigheden på fanen Avanceret.
- Overgangsvarighed: 1100ms
Tilføj et billedmodul til kolonne 1
Upload et billede
Det er tid til at begynde at tilføje moduler! Tilføj et billedmodul til den første kolonne.
Gradient baggrund
Gå til baggrundsindstillingerne for dette billedmodul og tilføj en gradientbaggrund. Vi bruger igen en helt gennemsigtig farve, så de andre farver kan se igennem.
- Farve 1(57%): rgba(50,217,255,0.66)
- Farve 2(100%): rgba(255,255,255,0)
- Gradienttype: Cirkulær
- Gradient Position: Top
afstand
Tilføj derefter brugerdefineret toppolstring til modulet.
- Polstring (øverst): 14vw
Tilføj tekstmodul til kolonne 2
Tilføj indhold
Lad os gå videre til anden kolonne! Det første modul, vi skal bruge, er et tekstmodul til titlen. Gå videre og tilføj en indhold valgtitel.
Indstillinger for sidehovedtekst
Gå derefter til indstillinger for overskriftstekst og foretag nogle ændringer.
- Skrifttype: Abril Fatface
- Tekstfarve: #000000
- Tekststørrelse: 4 vw (desktop), 60 px (tablet), 40 px (telefon)
Tilføj et andet tekstmodul til kolonne 2
Tilføj indhold
Det andet modul, vi skal bruge, er et andet tekstmodul. Tilføj nogle indhold efter valg.
Tekstindstillinger
Gå derefter til tekstindstillinger og skift tekstjusteringen.
- Tekstjustering: Begrundet
dimensionering
Juster også bredden i størrelsesindstillingerne.
- Bredde: 73 % (desktop), 100 % (tablet og telefon)
afstand
Til sidst skal du tilføje tilpassede top- og bundmargener til modulet for at skabe mellemrum.
- Margen (øverst og nederst): 2,5 vw (desktop), 50 px (tablet og telefon)
Tilføj knapmodul til kolonne 2
Tilføj en beskrivelse
Det tredje og sidste modul, vi skal bruge i den anden kolonne, er et knapmodul. Tilføj en kopi efter eget valg.
Knapindstillinger
Skift derefter knapindstillingerne.
- Brug brugerdefinerede stilarter til knap: JA
- Knaptekststørrelse: 1,2 vw (desktop), 14 px (tablet og telefon)
- Knap Tekstfarve: #ffffff
- Gradientstop 1 (0%): #9ea6ff
- Gradientstop 2 (100%): rgba(16,0,201,0.8)
- Styring: 78 grader
- Knapkantbredde: 0 pixels
- Kantradius: 30px
- Bogstavafstand: -1px
- Skrifttypevægt: Ultra fed
- Skrifttype: TT -(store bogstaver)
afstand
Tilføj også tilpassede udfyldningsværdier.
- Polstring (top og bund): 10px
- Polstring (venstre og højre): 40px
Box Shadow
Og påfør en subtil boksskygge på knappen.
- Box Shadow Blur Styrke: 40px
Læs også: Sådan tilpasser du "Countdown Timer"-modulet med en GIF
Tilføj sektion # 2
afstand
Nu hvor vi har afsluttet det første afsnit, går vi videre til det næste. Tilføj en ny almindelig sektion ved hjælp af følgende tilpassede udfyldningsværdier:
- Polstring (top og bund): 100px
Tilføj en række til to kolonner
Struktur af søjlen
Fortsæt med at tilføje en ny række til sektionen ved hjælp af følgende kolonnestruktur:
Kolonne 1 baggrund
Uden at tilføje nogen moduler endnu, skal du åbne rækkeindstillinger og tilføje følgende baggrundsfarve til kolonne 1:
- Baggrund: #ffffff
Kolonne 2 baggrund (skrivebord)
Tilføj følgende baggrundsfarve til kolonne 2.
- Baggrund (skrivebord): #ffffff
Kolonne 2-baggrundsfarve ved svæv
Og skift denne baggrundsfarve, når du svæver.
- Baggrund (Hover): #3d02ff
2 kolonne gradient baggrund
Tilføj også en gradientbaggrund til kolonnen.
- Gradientstop 1 (20%): rgba(255,255,255,0)
- Gradientstop 2 (100%): #ff7700
dimensionering
Gå derefter til størrelsesindstillinger og foretag nogle ændringer.
- Brug tilpasset tagrendebredde: JA
- Rendebredde: 1
- Bredde: 2000px
Mellemrum (linje)
Fortsæt ved at tilføje tilpassede udfyldningsværdier i afstandsindstillingerne.
- Polstring (top og bund): 0px
Mellemrum (kolonne 1)
Skift mellemrumsindstillinger for kolonne 1
- Polstring (top og bund): 6vw (desktop), 120px (tablet og telefon)
- Polstring (venstre og højre): 5vw (desktop), 80px (tablet), 50px (telefon)
Box Shadow
Og føj også en subtil boksskygge til denne række.
- Box Shadow Blur Styrke: 100px
- Box Shadow Spread Styrke: -10px
Overgange
Til sidst skal du skabe en glidende overgang ved at øge overgangsvarigheden i fanen Avanceret.
- Overgangsvarighed: 1100 ms
Dublet linje 1 moduler
Da vi allerede har alle de moduler, vi har brug for i det foregående afsnit, sparer vi tid ved at klone dem.
Placer dubletter i række 2 kolonner
Og placer dubletterne i den nye linje som følger:
Rediger indhold
Sørg for at ændre indhold af dine moduler.
Skift knap gradient baggrund
Skift også knappens baggrundsgradient.
- Gradientstop 0%: #ff653f
- Gradient stopper 100 %: #0066ff
- Styring: 39 grader
Skift billede
Udskift billedet.
Skift baggrundsgradient
Til sidst skal du ændre baggrundsgradienten for billedmodulet.
- Gradientstop 0 %: rgba(0,2,12,0.66)
- Gradientstop 57 %: rgba(255,255,255,0)
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på slutresultatet.
Download DIVI nu!!!
Konklusion
I denne artikel viste vi dig, hvordan du ændrer en gradientbaggrund, når du svæver Divi. Vi har også skabt et godt eksempel fra bunden, der bruger denne tilgang.
Du kan frit bruge designet og kunstværket til enhver type hjemmeside, du opretter.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
