Divi: Hvordan legge til en tilt-effekt når du svever over et element

pari Gaetan | Divi, Divi Tutorials

Vil du legge til en vippeeffekt med Divi på ethvert element på siden din?

Legge til hover-tilt-effekter til din nettstedet Web er en av de morsomme og engasjerende måtene å bringe din nettstedet Web Divi. Vanligvis krever denne typen design en plugin eller mer avansert kode. Men denne prosessen er mye enklere ved å bruke Tilt.js (en liten sveve-tilt-effekt for jQuery). Med Tilt.js kan du enkelt bruke hover-tilt-effekter på hva som helst i løpet av minutter.

I denne opplæringen vil vi vise deg hvordan du legger til hover-tilt-effekter til ethvert element av Divi. Ved å bruke en kombinasjon av jQuery tilt.js-snutter og Divi-byggeren viser vi deg hvordan du legger til fantastiske svevetilt-effekter til et bilde, en modulkolonne, rad osv. 

Vi vil til og med vise deg hvordan du legger til fantastiske 3D-parallakseeffekter.

La oss begynne!

undersøkelsen

Her er en rask oversikt over resultatet vi får i denne opplæringen.

Se også: Divi: Hvordan avsløre innhold ved å holde musepekeren over seksjonsdeleren

Hva du trenger for å komme i gang

Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.

Divi

Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder

deretter klikker du Begynn å bygge (Bygg fra bunnen av)

Etter det vil du ha et blankt lerret for å begynne å designe i Divi.

Legg til vippeeffekter ved sveving av ethvert element i Divi

Legg til en Tilt Hover-effekt til Divi-modulene

La oss starte med å legge til en rad med tre kolonner i standarddelen.

Legg til en bildemodul

I den første kolonnen legger du til en bildemodul.

Merk: Du kan bruke hvilken som helst modul du ønsker. Det trenger ikke å være en bildemodul i det hele tatt.

Last opp et bilde av ditt valg. 

Legg til en bildemodulklasse

Under fanen Avansert, legg til følgende CSS-klasse:

  • CSS-klasse: et-js-tilt

Denne klassen vil bli brukt som en velger for vippefunksjonen vår senere.

Kopier og lim inn forrige bildemodul

Deretter kopierer du bildemodulen og limer inn en i hver av de to gjenværende kolonnene.

Du kan erstatte dupliserte bilder med nye hvis du ønsker det. Bare sørg for at hver bildemodul tilhører CSS-klassen "et-js-tilt".

Legg til JQuery-biblioteket "tilt.js"

For å legge til biblioteket tilt.js og kodebiten som trengs for å skjeve bildene våre, bruker vi en kodemodul.

Først legger du til en ny rad én kolonne under den eksisterende raden.

Legg deretter til en kodemodul i den nye raden.

Da må vi få tilgang til tilt.js-biblioteket ved å legge til et skript som importerer tilt.js fra deres CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Lim inn følgende skript i kodeboksen.

Bruk følgende src-kode i en skriptkode for å importere biblioteket:

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

Det skal se slik ut:

Det er viktig å importere tilt.js før du legger til koden som skal bruke den. Så etter manuset peker på tilt.js, legg til de nødvendige skriptkodene for å pakke inn JQueryen vi må legge til. Deretter limer du inn følgende JQuery mellom skriptkodene.

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

Merk at tilt()-funksjonen er inne i en if-setning som vil kjøre når nettleserbredden er større enn 980px. Dette vil sikre at effekten bare oppstår på en stasjonær datamaskin.

Her er resultatet.

Lagt tilt hover-effekt til linjen

Som vi nevnte før, kan du legge til denne svevetilt-effekten til et hvilket som helst Divi-element. Dette inkluderer en hel linje. 

I tillegg kan du legge til en tilt-effekt på en rad mens du opprettholder tilt-effektene for hver av modulene i raden.

Slik gjør du det.

Dupliser linje og legg til unik CSS-klasse til linje

Dupliser den eksisterende raden med bilder, og åpne deretter innstillingene for dupliserte rader. Under fanen Avansert, gi linjen en unik CSS-klasse som følger:

  • CSS-klasse: et-row-js-tilt
#bildetittel

Legg til jQuery

Legg deretter til følgende jQuery under den forrige skjevfunksjonen for å bruke en separat skjevstillingsfunksjon på linjen.

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

Merk at for denne tilt-effekten har vi redusert skalaen til 1 og økt perspektivverdien slik at tilten blir mer subtil.

Her er resultatet.

Legg merke til hvordan raden har en vippefunksjon som aktiveres når du holder musepekeren over raden, og hver av bildemodulene har også den samme vippeeffekten som vi la til tidligere. Slik kan du bruke nestede tilt-effektforekomster.

Legg til en Tilt Hover-effekt til en kolonne med flere Divi-moduler

I noen tilfeller er det nyttig å legge til en skjeveffekt til en kolonne med moduler. Dette vil tillate deg å designe flere moduler i en kolonne med Divi og deretter ha alle disse elementene vinklet som en enkelt enhet. 

For å gi deg et eksempel på hvordan du gjør dette, skal vi legge til en tilt-on-hover-effekt til en kolonne som inneholder en bildemodul, en tekstmodul og en knappemodul.

Legg til en ny linje

For å starte, lag en ny rad med følgende kolonnestruktur:

Legg til en bildemodul

Inne i kolonne 2 (den midterste kolonnen), legg til en ny bildemodul.

Last opp et bilde til modulen.

#bildetittel

Still inn justeringen av bildet til midten.

Legg til en tekstmodul

Under bildemodulen legger du til en tekstmodul med følgende H2-overskrift:

<h2>Local Organic</h2>
#bildetittel

Deretter oppdaterer du H2-overskriftsstilene som følger:

  • Font: Berkshire Swash
  • Tekstjustering: Sentrert
  • Tekstfarge: #000000
  • Størrelse: 60px
  • Linjehøyde: 1,2 em
#bildetittel

Legg til knappmodul

Legg til en knappmodul under tekstmodulen.

Oppdater knappeteksten for å lese «Les mer...»

#bildetittel

Oppdater personaliseringsinnstillingene som følger:

  • Knappjustering: Senter
  • Bruk egendefinerte stiler for knappen
  • Knappens tekststørrelse: 18px
  • Tekstfarge: #fff
  • Knappebakgrunn: #000
#bildetittel
  • Knappekantbredde: 0 piksler
  • Kanteradius: 100px
  • Knappeskrift: Quicksand
  • Skriftvekt: Fet
#bildetittel
  • Polstring (øverst og bunn): 16px
  • Polstring (venstre og høyre): 30px
#bildetittel
  • Box Shadow: se skjermbilde
#bildetittel

Kolonneparametere

Når alle tre modulene er fullført, åpner du innstillingene for den overordnede kolonnen til disse modulene (kolonne 2) og oppdaterer følgende:

  • Bakgrunn: #f5cee6
#bildetittel
  • Polstring (øverst og bunn): 50px
  • Polstring (venstre og høyre): 20px
#bildetittel

Legger til CSS-klasse i kolonnen

Under Avansert-fanen legger du til følgende CSS-klasse:

  • CSS-klasse: et-column-js-tilt
#bildetittel

Lagt til jQuery for å bruke tilt-effekt på kolonne

For å legge til skjeveffekten til kolonnen, kan vi legge til en annen lignende jQuery-kodebit som er målrettet mot CSS Class-kolonnen. 

Lim inn følgende kodebit under den forrige kodebiten som er målrettet mot linjen.

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

Her er det endelige resultatet.

Lagt til 3D-parallakseeffekt til innvendige deler

For en mer avansert svevetilt-effekt kan vi legge til en 3D-parallakseeffekt til de interne kolonnemodulene. 

Ved å bruke en kombinasjon av perspektiv og transform:translateZ() , kan vi få hver av kolonnens moduler til å vises i 3D-rom når tilt-on-hover-effekten er aktiv.

Slik gjør du det.

Dupliser forrige linje

Dupliser først den forrige raden med skjeveffekten lagt til midtkolonnen.

#bildetittel

Legg til en enkelt kolonneklasse

Deretter oppdaterer den midterste kolonnen (kolonne 2) med en unik CSS-klasse som følger:

  • CSS-klasse: et-column-js-tilt-3d
#bildetittel

Tilpasset CSS

For å sikre at de interne modulene bevarer 3D-effekten, legg til følgende tilpassede CSS til hovedkolonneelementet:

transform-style: preserve-3d;
Tilt-effekt med Divi

Legg til jQuery og CSS

Deretter legger du til noen flere jQuery-kodebiter under forrige skjevfunksjonskodebit som målretter mot kolonnen som følger:

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");
});

Denne jQuery legger til en annen grunnleggende tilt-funksjon til kolonnen, akkurat som i forrige eksempel. 

.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);
}
Tilt-effekt med Divi

Se nå sluttresultatet. Legg merke til hvordan de tre modulene vises i 3D-rom når de roterer under tilt-effekten.

Les også: Divi: Hvordan avsløre innhold ved å holde musepekeren over seksjonsdeleren

Endelige resultater

Her er en ny titt på sluttresultatene for eksemplene våre.

Last ned DIVI nå!!!

konklusjonen

Hover-tilt-effektene som tilbys av Tilt.js er veldig morsomme å eksperimentere med. 

Selv om vi har brukt noen få grunnleggende eksempler i denne opplæringen, kan du enkelt ha en feltdag ved å bruke disse hover-tilt-effektene på en av våre forhåndslagde layouter eller ditt eget nettsted.

Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.

Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...

Legg inn kommentaren

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket *

Dette nettstedet bruker Akismet for å redusere uønsket. Lær mer om hvordan dine kommentarer data blir brukt.