Divi: Hur man lägger till en lutningseffekt när man håller muspekaren över ett element

Vill du lägga till en lutningseffekt med Divi på något element på din sida?

Lägga till svävningslutningseffekter till din webbplats är ett av de roliga och engagerande sätten att ta med din webbplats Divi. Vanligtvis kräver denna typ av design ett plugin eller mer avancerad kod. Men den här processen är mycket enklare med Tilt.js (en liten svävlutningseffekt för jQuery). Med Tilt.js kan du enkelt applicera svävningslutningseffekter på vad som helst på några minuter.

I den här handledningen kommer vi att visa dig hur du lägger till svävningslutningseffekter till alla delar av Divi. Med hjälp av en kombination av jQuery tilt.js-snuttar och Divi-byggaren visar vi dig hur du lägger till fantastiska hover-tilt-effekter till en bild, modulkolumn, rad, etc. 

Vi kommer till och med att visa dig hur du lägger till fantastiska 3D-parallaxeffekter.

Låt oss börja!

undersökningen

Här är en snabb översikt över resultatet vi kommer att få i denna handledning.

Se även: Divi: Så avslöjar du innehåll när du håller muspekaren över avsnittsavdelaren

Vad du behöver för att komma igång

Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.

Ge den en titel som är vettig för dig och klicka Använd Divi Builder

klicka sedan på Börja bygga (Bygg från grunden)

Efter det har du en tom duk för att börja designa i Divi.

Lägg till lutningseffekter när du svävar över ett element i Divi

Lägg till en Tilt Hover-effekt till Divi-modulerna

Låt oss börja med att lägga till en rad med tre kolumner i standardavsnittet.

Lägg till en bildmodul

Lägg till en bildmodul i den första kolumnen.

Obs: Du kan använda vilken modul du vill. Det behöver inte alls vara en bildmodul.

Ladda upp en bild som du väljer. 

Lägg till en bildmodulklass

Under fliken Advanced Open water, lägg till följande CSS-klass:

• CSS-klass: et-js-tilt

Denna klass kommer att användas som väljare för vår tiltfunktion senare.

Kopiera och klistra in föregående bildmodul

Kopiera sedan bildmodulen och klistra in en i var och en av de två återstående kolumnerna.

Du kan ersätta dubbletter av bilder med nya om du vill. Se bara till att varje bildmodul tillhör CSS-klassen "et-js-tilt".

Lägg till JQuery-biblioteket "tilt.js"

För att lägga till biblioteket tilt.js och kodavsnittet som behövs för att skeva våra bilder kommer vi att använda en kodmodul.

Lägg först till en ny rad en kolumn under den befintliga raden.

Lägg sedan till en kodmodul i den nya raden.

Då måste vi komma åt tilt.js-biblioteket genom att lägga till ett skript som importerar tilt.js från deras CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Klistra in följande skript i kodrutan.

Använd följande src-kod i en skripttagg för att importera biblioteket:

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

Det ska se ut så här:

Det är viktigt att importera tilt.js innan du lägger till koden som ska använda den. Så efter manuset pekar på tilt.js, lägg till de nödvändiga skripttaggarna för att omsluta den JQuery vi behöver lägga till. Klistra sedan in följande JQuery mellan skripttaggarna.

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {
 
    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });
 
  }
});

Observera att tilt()-funktionen finns i en if-sats som körs när webbläsarens bredd är större än 980px. Detta säkerställer att effekten endast inträffar på en stationär dator.

Här är resultatet.

Tilt svävningseffekt på linjen

Som vi nämnde tidigare kan du lägga till den här svävningslutningseffekten till alla Divi-element. Detta inkluderar en hel linje. 

Dessutom kan du lägga till en lutningseffekt på en rad samtidigt som du behåller lutningseffekterna för var och en av modulerna i raden.

Så här.

Duplicera rad och lägg till unik CSS-klass till rad

Duplicera den befintliga raden med bilder och öppna sedan inställningarna för duplicerade rader. Under fliken Advanced Open water, ge raden en unik CSS-klass enligt följande:

• CSS-klass: et-row-js-tilt

Lägg till jQuery

Lägg sedan till följande jQuery under den föregående skevningsfunktionen för att tillämpa en separat skevningsfunktion på linjen.

$(".et-row-js-tilt").tilt({
  scale: 1,
  perspective: 1200,
});

Observera att för denna lutningseffekt har vi minskat skalan till 1 och ökat perspektivvärdet så att lutningen blir mer subtil.

Här är resultatet.

Lägg märke till hur raden har en lutningsfunktion som aktiveras när du håller muspekaren över raden och var och en av bildmodulerna har också samma lutningseffekt som vi lade till tidigare. Så här kan du använda kapslade tilteffektinstanser.

Lägg till en Tilt Hover-effekt till en kolumn med flera Divi-moduler

I vissa fall är det användbart att lägga till en skevningseffekt i en kolumn med moduler. Detta gör att du kan designa flera moduler i en kolumn med Divi och sedan ha alla dessa element vinklade som en enda enhet. 

För att ge dig ett exempel på hur du gör detta kommer vi att lägga till en lutning vid svävningseffekt till en kolumn som innehåller en bildmodul, en textmodul och en knappmodul.

Lägg till en ny rad

För att börja skapa en ny rad med följande kolumnstruktur:

Lägg till en bildmodul

Inuti kolumn 2 (mittkolumnen), lägg till en ny bildmodul.

Ladda upp en bild till modulen.

Ställ in justeringen av bilden till mitten.

Lägg till en textmodul

Lägg till en textmodul under bildmodulen med följande H2-rubrik:

<h2>Local Organic</h2>

Uppdatera sedan H2-rubrikstilarna enligt följande:

• Typsnitt: Berkshire Swash
• Textjustering: Centrerad
• Textfärg: #000000
• Storlek: 60px
• Linjehöjd: 1,2 em

Lägg till knappmodul

Lägg till en knappmodul under textmodulen.

Uppdatera knapptexten för att läsa "Läs mer..."

Uppdatera anpassningsinställningarna enligt följande:

• Knappinställning: Center

• Använd anpassade stilar för knapp
• Knapptextstorlek: 18px
• Textfärg: #fff
• Knappbakgrund: #000

• Knappkantsbredd: 0 pixlar
• Kantradie: 100px
• Knapptypsnitt: Quicksand
• Teckensnittsvikt: Fet

• Utfyllnad (topp och botten): 16px
• Utfyllnad (vänster och höger): 30px

• Box Shadow: se skärmdump

Kolumnparametrar

När alla tre modulerna är klara öppnar du inställningarna för den överordnade kolumnen för dessa moduler (kolumn 2) och uppdaterar följande:

• Bakgrund: #f5cee6

• Utfyllnad (topp och botten): 50px
• Utfyllnad (vänster och höger): 20px

Lägger till CSS-klass till kolumn

Lägg till följande CSS-klass under fliken Avancerat:

• CSS-klass: et-column-js-tilt

Lade till jQuery för att tillämpa tilteffekt på kolumn

För att lägga till skevningseffekten i kolumnen kan vi lägga till ett annat liknande jQuery-utdrag som riktar sig till CSS-klasskolumnen. 

Klistra in följande kodavsnitt under det föregående kodavsnittet som är inriktat på raden.

$(".et-column-js-tilt").tilt({
  scale: 1.1,
  perspective: 1000,
});

Här är det slutliga resultatet.

Lade till 3D-parallaxeffekt till interna delar

För en mer avancerad svävlutningseffekt kan vi lägga till en 3D-parallaxeffekt till de interna kolumnmodulerna. 

Genom att använda en kombination av perspektiv och transform:translateZ() , kan vi få var och en av kolumnens moduler att visas i 3D-rymden när tilt-on-hover-effekten är aktiv.

Så här.

Duplicera föregående rad

Duplicera först föregående rad med skevningseffekten tillagd i mittkolumnen.

Lägg till en enda kolumnklass

Uppdatera sedan mittkolumnen (kolumn 2) med en unik CSS-klass enligt följande:

• CSS-klass: et-column-js-tilt-3d

Anpassad CSS

För att säkerställa att de interna modulerna bevarar 3D-effekten, lägg till följande anpassade CSS till huvudkolumnelementet:

transform-style: preserve-3d;

Lägg till jQuery och CSS

Lägg sedan till några fler jQuery-kodavsnitt under det föregående skevfunktionskodavsnittet som riktar in sig på kolumnen enligt följande:

const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
  scale: 1.1,
  perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
  $(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
  $(e.target).removeClass("tilt-active");
});

Denna jQuery lägger till ytterligare en grundläggande tiltfunktion till kolumnen, precis som i föregående exempel. 

.et-column-js-tilt-3d.tilt-active .et_pb_image {
  transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
  transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
  transform: translateZ(50px);
}

Se nu slutresultatet. Lägg märke till hur de tre modulerna visas i 3D-rymden när de roterar under lutningseffekten.

Läs också: Divi: Så avslöjar du innehåll när du håller muspekaren över avsnittsavdelaren

Slutresultat

Här är en annan titt på slutresultaten för våra exempel.

Ladda ner DIVI nu!!!

Slutsats

Hover tilt-effekterna som erbjuds av Tilt.js är riktigt roliga att experimentera med. 

Även om vi har använt några grundläggande exempel i denna handledning, kan du enkelt ha en fältdag genom att applicera dessa svävningslutningseffekter på en av våra förgjorda layouter eller på din egen webbplats.

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.

.