Vill du ha en bakgrundsgradient i Divi som ändras när man svävar?
Att bygga webbplatser handlar om att se till att varje detalj är korrekt. Att uppmärksamma de små detaljerna i din design kommer snabbt att öka kvaliteten på din webbplats.
Med de nya svävningsalternativen för Divi, kan du enkelt lägga till små interaktioner på din webbplats. Hover-alternativ gäller nästan alla designparametrar. Du kan till exempel indirekt ändra en gradientbakgrund vid hovring för att skapa en snygg övergång.
Det är precis vad vi kommer att visa dig i den här handledningen. Förutom att göra gradientövergången kommer vi också att skapa ett fantastiskt designexempel från grunden som du är fri att använda för alla typer av webbplats som du skapar.
Låt oss gå!
undersökningen
Innan vi dyker in i handledningen, låt oss ta en titt på slutresultatet.
Låt oss börja designa med Divi
Lägg till avsnitt 1
avstånd
Det första du behöver göra är att skapa en ny sida eller öppna en befintlig och lägga till en ny vanlig sektion till den. Öppna inställningarna och lägg till anpassade övre och nedre marginaler.
- Utfyllnad (topp och botten): 100px
Lägg till rad 1
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad med följande kolumnstruktur:
Standardbakgrundsfärg (skrivbord) för kolumn 1
Utan att lägga till några moduler ännu, öppna radinställningar och lägg till följande standardbakgrundsfärg till kolumn 1:
- Bakgrund (Skrivbord): #e7ffa0
Kolumn 1 bakgrundsfärg vid hovring
Ändra denna bakgrundsfärg när du svävar.
- Bakgrund: #00020c
Kolumn 1 bakgrundsgradient
Lägg även till en gradientbakgrundsfärg i kolumn 1. Lägg märke till att vi använder en helt transparent färg. Den här färgen låter bakgrundsfärgen synas igenom, som i sin tur ändras vid hovring.
- Färg 1 (20%): rgba(255,255,255,0)
- Färg 2 (100%): rgba(16,0,201,0.8)
- Gradienttyp: Linjär
- Lutningsriktning: 50 grader
Kolumn 2 bakgrundsfärg
Lägg även till en bakgrundsfärg i kolumn 2.
- Bakgrund: #ffffff
dimensionering
Gå sedan till fliken Designa och ändra storleksinställningarna i alternativet Storlek.
- Använd anpassad rännbredd: JA
- Rännans bredd: 1
- Bredd: 2000px
avstånd
Fortsätt genom att lägga till anpassade utfyllnadsvärden i avståndsinställningarna.
- Utfyllnad (topp och botten): 0px
Avstånd (kolumn 2)
- Utfyllnad (överst och neder): 6vw (dator), 120px (surfplatta och telefon)
- Utfyllnad (vänster och höger): 5vw (dator), 80px (surfplatta), 50px (telefon)
Box skugga
Och ge även raden en subtil boxskugga.
- Box Shadow Blur Styrka: 100px
- Box Shadow Spridningsstyrka: -10px
övergångar
Slutligen skapar vi en mjuk övergång i bakgrunden genom att öka övergångslängden på fliken Advanced Open water.
- Övergångslängd: 1100ms
Lägg till en bildmodul i kolumn 1
Ladda upp en bild
Det är dags att börja lägga till moduler! Lägg till en bildmodul i den första kolumnen.
Lutningbakgrund
Gå till bakgrundsinställningarna för denna bildmodul och lägg till en gradientbakgrund. Vi använder återigen en helt transparent färg för att låta de andra färgerna synas igenom.
- Färg 1(57%): rgba(50,217,255,0.66)
- Färg 2(100%): rgba(255,255,255,0)
- Gradienttyp: Cirkulär
- Gradient Position: Topp
avstånd
Lägg sedan till anpassad toppstoppning i modulen.
- Vaddering (överst): 14vw
Lägg till textmodul i kolumn 2
Lägg till innehåll
Låt oss gå vidare till den andra kolumnen! Den första modulen vi behöver är en textmodul för titeln. Varsågod och lägg till en innehåll valfri titel.
Inställningar för rubriktext
Gå sedan till rubriktextinställningar och gör några ändringar.
- Typsnitt: Abril Fatface
- Textfärg: #000000
- Textstorlek: 4 vw (dator), 60 px (surfplatta), 40 px (telefon)
Lägg till en andra textmodul till kolumn 2
Lägg till innehåll
Den andra modulen vi behöver är en annan textmodul. Lägg till några innehåll av val.
Textinställningar
Gå sedan till textinställningar och ändra textjusteringen.
- Textjustering: Berättigad
dimensionering
Justera även bredden i storleksinställningarna.
- Bredd: 73 % (Skrivbord), 100 % (Surfplatta och telefon)
avstånd
Lägg slutligen till anpassade topp- och bottenmarginaler i modulen för att skapa utrymmen.
- Marginal (överst och neder): 2,5 vw (dator), 50 px (surfplatta och telefon)
Lägg till knappmodul i kolumn 2
Lägg till en beskrivning
Den tredje och sista modulen vi behöver i den andra kolumnen är en knappmodul. Lägg till en kopia av ditt val.
Knappinställningar
Ändra sedan knappinställningarna.
- Använd anpassade stilar för knapp: JA
- Knapptextstorlek: 1,2 vw (dator), 14 px (surfplatta och telefon)
- Knappens textfärg: #ffffff
- Gradientstopp 1 (0%): #9ea6ff
- Gradientstopp 2 (100%): rgba(16,0,201,0.8)
- Styrning: 78 grader
- Knappkantsbredd: 0 pixlar
- Kantradie: 30px
- Bokstavsavstånd: -1px
- Teckensnittsvikt: Ultra fet
- Teckensnitt: TT -(versaler)
avstånd
Lägg också till anpassade fyllningsvärden.
- Utfyllnad (topp och botten): 10px
- Utfyllnad (vänster och höger): 40px
Box skugga
Och applicera en subtil boxskugga på knappen.
- Box Shadow Blur Styrka: 40px
Läs också: Hur man anpassar modulen "Countdown Timer" med en GIF
Lägg till avsnitt 2
avstånd
Nu när vi har slutfört det första avsnittet går vi vidare till nästa. Lägg till en ny vanlig sektion med hjälp av följande anpassade utfyllnadsvärden:
- Utfyllnad (topp och botten): 100px
Lägg till en rad i två kolumner
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad i sektionen med följande kolumnstruktur:
Kolumn 1 bakgrund
Utan att lägga till några moduler ännu, öppna radinställningar och lägg till följande bakgrundsfärg i kolumn 1:
- Bakgrund: #ffffff
Kolumn 2 Bakgrund (Skrivbord)
Lägg till följande bakgrundsfärg i kolumn 2.
- Bakgrund (Skrivbord): #ffffff
Kolumn 2 bakgrundsfärg på svävaren
Och ändra denna bakgrundsfärg när du svävar.
- Bakgrund (Hover): #3d02ff
2 kolumn gradient bakgrund
Lägg också till en gradientbakgrund till kolumnen.
- Gradientstopp 1 (20%): rgba(255,255,255,0)
- Gradientstopp 2 (100%): #ff7700
dimensionering
Gå sedan till storleksinställningar och gör några ändringar.
- Använd anpassad rännbredd: JA
- Rännans bredd: 1
- Bredd: 2000px
Avstånd (linje)
Fortsätt genom att lägga till anpassade utfyllnadsvärden i avståndsinställningarna.
- Utfyllnad (topp och botten): 0px
Avstånd (kolumn 1)
Ändra avståndsinställningar för kolumn 1
- Utfyllnad (överst och neder): 6vw (dator), 120px (surfplatta och telefon)
- Utfyllnad (vänster och höger): 5vw (dator), 80px (surfplatta), 50px (telefon)
Box skugga
Och lägg även till en subtil boxskugga till den här raden.
- Box Shadow Blur Styrka: 100px
- Box Shadow Spridningsstyrka: -10px
övergångar
Slutligen, skapa en smidig övergång genom att öka övergångslängden på fliken Advanced Open water.
- Övergångslängd: 1100 ms
Duplicera rad 1-moduler
Eftersom vi redan har alla moduler vi behöver i föregående avsnitt, sparar vi tid genom att klona dem.
Placera dubbletter i rad 2 kolumner
Och placera dubbletterna i den nya raden enligt följande:
Redigera innehåll
Se till att ändra innehåll av dina moduler.
Ändra bakgrund för knappgradient
Ändra även knappens bakgrundsgradient.
- Gradientstopp 0%: #ff653f
- Gradienten stannar 100 %: #0066ff
- Styrning: 39 grader
Ändra bild
Byt ut bilden.
Ändra bakgrundsgradient
Ändra slutligen bakgrundsgradienten för bildmodulen.
- Gradientstopp 0%: rgba(0,2,12,0.66)
- Gradientstopp 57%: rgba(255,255,255,0)
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på slutresultatet.
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln visade vi dig hur du ändrar en gradientbakgrund när du svävar Divi. Vi har också skapat ett bra exempel från grunden som använder detta tillvägagångssätt.
Du är fri att använda designen och konstverken för vilken typ av webbplats du skapar.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
