Gå till innehållet

Hur man skapar animerade lutningar på Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Gradient bakgrundsanimering kan vara en bra designteknik för att leva upp bakgrundsfärger på din webbplats. Det är en perfekt lösning för dem som vill ha något mer realistiskt än en statisk bakgrundsfärg utan att behöva använda en långsam videobakgrund. Grundidén bakom gradientbakgrundsanimering är att använda CSS för att skapa förstoring och animera en tonad bakgrund för att skapa smidiga rörliga färgövergångar.

I den här handledningen visar vi dig hur du skapar bakgrundsanimationer med övertoningar på Divi. Denna metod kombinerar ett anpassat CSS-utdrag som animerar gradientfärgerna som valts i de integrerade Divi-inställningarna. Konfigurationen är faktiskt ganska enkel för ett så vackert resultat.

Låt oss börja!

Posisble resultat

Här är en översikt över de två sätten vi kan skapa en gradientbakgrundsanimation på Divi.

Uppenbarligen är förutsättningen för denna självstudie att du har ett Divi-tema installerat och uppdaterat.

Skapande av en gradient bakgrundsanimering med CSS-utdraget och bakgrundsalternativet för Divi

För att börja, lägg till en rad av en kolumn i standardavsnittet i Divi Builder.

Divi-layout

Avsnitt inställningar

Uppdatera sedan sektionsinställningarna med en bakgrundsbild. Vår tonad bakgrund läggs till i vår linje så att den överlappar den här bilden.

Uppdatera sedan fyllningen enligt följande:

  • Polstring: 0px hög, 0px låg
Lägg till en divi-bild

Rad- och kolumninställningar

Kolumnparametrar

Öppna radinställningarna och uppdatera sedan kolumnfyllningen på följande sätt:

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

  • Polstring: över 12vw

Lägg sedan till följande anpassade CSS till huvudkolumnelementet:

height: 40vw;

Divi-modulstil

Linjeinställningar

Lutningbakgrund

Nu kan vi lägga till lutningsbakgrunden till raden. Se till att göra lutningsfärgerna halvtransparenta om du vill se sektionens bakgrundsbild.

Uppdatera radparametrarna enligt följande:

  • Bakgrundsfärg på vänster lutning: rgba (12,113,195,0.8)
  • Lutningsbakgrundsfärg till höger: rgba (131,0,233,0.8 XNUMX)
  • Lutningstyp: linjär
  • Lutningsriktning: 45 grader
Divi färgkonfiguration
storlek

Uppdatera sedan radstorleken enligt följande:

  • Bredd: 100%
  • Max bredd: 100%
Divi-modulbreddskonfiguration
Anpassad CSS-klass

Nu när vår lutningsbakgrund är på plats måste vi lägga till animationen via anpassad CSS. Innan vi lägger till CSS-koden måste vi lägga till en anpassad CSS-klass för att rikta in den specifika raden.

Gå till fliken avancerad och lägg till följande CSS-klass:

  • CSS-klass: animerande gradient
Klass CSS divi-modulrad

Lägg till en kodmodul

När CSS-klassen har lagts till i raden, lägg till en kodmodul till raden.

Lägg till divi-kodmodul

Klistra in CSS i kodmodulen

Klistra sedan in följande CSS-kod i området Code Code Settings Module Module:

.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}

Se till att slå in koden i <style></style>taggar eftersom vi lägger till den i sidens HTML-kod.

Konfiguration av Divi-modulstil

Resultat

Här är resultatet hittills. Lutningsbakgrunden har förstorats till 400% av originalstorleken och animeras genom att flytta åt vänster och höger.

Divi bakgrundsanimering

Lägg till en uppmaning

För att slutföra designen, låt oss lägga till en uppmaningsmodul för att vara en del av innehållet.

Lägg till call to action divi

Inställningar för uppmaning till handling

Innehåll

Uppdatera innehållet enligt följande:

  • Lägg till en titel
  • Lägg till knapptext
  • Lägg till huvudtext
  • URL till knappens länk: #
  • Använd bakgrundsfärg: NEJ
Conception

Gå till fliken Design och uppdatera följande:

  • Titel typsnitt: Kaushan manus
  • Titeltextstorlek: 4vw (skrivbord), 30px (telefon)
  • Titelradshöjd: 1,4 em
  • Body Police: Roboto
  • Knapptextstorlek: 16px
  • Knappens textfärg: # 555555
  • Knappbakgrund: #ffffff
  • Knappens bredd: 0px
  • Knappens radie: 30 pixlar
  • Avstånd för knappbokstäver: 3px
  • Knappsnitt: Roboto kondenserad
  • Knappsnittets vikt: fetstil

Resultat

Kontrollera nu resultatet på livesidan med innehållet i uppmaningen till handling på plats. Det skulle vara en bra rubrik för din webbplats!

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Slutresultat bakgrundsanimering

Kom ihåg att du enkelt kan ändra bakgrundsfärgerna på din linje till vad du vill. Koden fortsätter att köras i bakgrunden för att animera bakgrunden åt dig.

Om du känner till lite CSS kan du justera hastigheten och riktningen för animeringen genom att ändra värdena för animationsegenskaperna.

Jag hoppas att du tyckte att den här handledningen var användbar. Tveka inte att dela dina åsikter om det.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer