De innebygde transformasjonsalternativene til Divi har vist seg å være et ekstremt nyttig designverktøy, som lar deg endre størrelse, rotere, skjeve eller plassere et hvilket som helst element på en side med letthet. Og du kan til og med velge å gjøre objekter til svevetilstand for fantastiske sveveeffekter. Så i dag skal vi vise deg hvordan du distribuerer disse animasjonene med ett klikk.
Denne metoden krever bruk av jQuery. Det flotte med denne teknikken er at du kan bruke de innebygde designparametrene til Divi for å style transformasjonsegenskaper, aktiver (eller deaktiver) deretter disse transformasjonsegenskapene med et museklikk. Dette vil åpne for massevis av unike muligheter for å avsløre innhold skjult ved å flytte elementer på klikk i stedet for å holde musepekeren. Og det bidrar også til å redusere behovet for å kunne mye CSS.
La oss begynne.
Hva du trenger for å komme i gang
For denne opplæringen er alt du trenger Divi. For å komme i gang, gå til WordPress-dashbordet. Opprett en ny side, gi siden din en tittel og fortsett å designe på Divi-byggeren i forgrunnen. Velg alternativet "Bygg fra bunnen av". Nå er du klar til å gå!
Grunnideen forklart
Før jeg kommer i detalj for mye i denne opplæringen, vil jeg gå gjennom hvordan denne teknikken fungerer med noen få ord.
Hver gang du tilpasser et element (seksjon, linje eller modul) i Divi, legger du til tilpasset CSS til dette elementet i bakgrunnen. For eksempel, ved å bruke Divis innebygde innstillinger, kan du legge til en transformasjonsrotasjonsegenskap til en uskarphetmodul slik at den roterer modulen langs Z-aksen med 20 grader.
Men bak kulissene lager du en tilpasset CSS som legges til i denne tekstmodulen og ser slik ut:
.et_pb_text_0 {transform: rotateZ (20deg); }
Enkelt nok. Og la oss si at du ønsket å legge til det samme alternativet for hovertransformasjon. Du trenger bare å bruke transformasjonsegenskapen for svevertilstanden i innstillingene til Divi Builder.
Og koden vil se noe slik ut bak kulissene:
.et_pb_text_0: svever {transform: rotateZ (20deg); }
Men hvis du vil distribuere transform-eiendommen ved klikk, må ting fungere litt annerledes. Du må oppgi noe javascript-kode for å utløse en klikkhendelse på elementet (eller tekstmodulen).
Med vårt nåværende eksempel er vårt hovedmål i utgangspunktet å slå transformasjonsegenskapen "transform: rotateZ (20deg)" av og på ved klikk. En enkel måte å gjøre dette på er å lage en tilpasset CSS-klasse med eiendommen "transformator: none!" Viktig ”i innstillingene for side (eller eksternt stilark). Det ville se ut som dette.
.toggle-transform-animasjon {transform: ingen! viktig; }
Med den CSS på plass. Vi kan legge til CSS-klassen "toggle-transform-animation" i blurb-modulelementet som har vår transform-egenskap.
Dette vil deaktivere (overstyre) transformeringsegenskapen og forhindre den i å aktiveres først, selv om transformegenskapens stil allerede er lagt til den.
Nå er alt du trenger å gjøre å aktivere (legge til og fjerne) denne egendefinerte CSS-klassen når du klikker på elementet. Så hver gang vi klikker på elementet, vil klassen bli slettet og transformasjonsegenskapene (de du la til med Divi) vil bli distribuert.
Her er et enkelt eksempel på hvordan du gjør dette. Først legger du til en annen CSS-klasse i blurb-modulen som heter "transform_target".
Deretter går du til Divi > Temaalternativer > Integrasjon og legger til følgende jQuery-skript til hodet på bloggen din:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Det er alt ! Nå, hver gang du klikker på presentasjonsmodulen, vil transformasjonsegenskapen du la til presentasjonen i Divi bli aktivert eller deaktivert.
La oss nå bygge et eksempel slik at du kan se hvordan dette kan være nyttig for dine egne prosjekter.
Slik bytter du transformasjonsegenskaper på Klikk for å vise innhold i Divi
For dette eksemplet holder vi oss til et enkelt blurb-eksempel brukt ovenfor. Deretter kommer vi til å legge til ekstra blurb bak denne, slik at hver gang du klikker på den øverste blurb, vil den bevege seg ut av veien for å avsløre innhold ekstra blurb som sitter bak dokumentet.
Opprette Blurb-moduler foran og bak
Legg deretter til en presentasjonsmodul i 1-kolonnen.
Oppdater innhold blurb-tekst for å inkludere bare en tittel (fjern standard hovedinnhold), og legg deretter til et blurb-ikon.
Oppdater deretter designparametrene som følger:
Bakgrunnsfarge: #4c5866
Ikonfarge: #ffffff
Orientering av tekst: senter
Tekstfarge
: Lett tilpasset margin: 0px nederst
Tilpasset polstring: 15% øverst, 15% nederst, 10% til venstre, 10% til høyre
Vi kommer tilbake til denne modulen senere, men foreløpig må vi lage vår andre Blurb-modul som vil fungere som en "retur" -modul med tilleggsinnhold.
For å gjøre dette, dupliser presentasjonsmodulen du nettopp opprettet.
Fjern deretter presentasjonsikonet (og standardbildet) på den andre modulen og legg til kroppsinnhold tilbake til modulen. Oppdater deretter designparametrene som følger:
Bakgrunnsfarge: rgba (76,88,102,0.3)
Tekstfarge: Svart
Tilpasset polstring: 20% topp
Plasser modulen før sammendrag
Nå som de to uskarphetene våre er utformet, må vi gå tilbake til den fremre (øverste) uskarpheten og plassere den over den bakre (nederste) uskarpheten. For å gjøre dette vil vi gi den en absolutt posisjon med en høyde på 100% og en bredde på 100%.
Først åpner du innstillingene for topp / front presentasjonsmodul og oppdater følgende:
høyde: 100%;
bredde: 100%;
Deretter legger du til følgende tilpassede CSS-kode i hovedelementet:
posisjon: absolutt! viktig; overgang: alle .5s;
Oppdater deretter z-indeksen som følger:
Z-indeks: 2000
Den absolutte posisjonen, kombinert med 100% høyde og bredde og z-indeksen, sørger for at blurb-modulen holder seg på toppen av blurb-modulen bak den. Overgangsegenskapen er faktisk varigheten av overgangen til transformasjonsalternativene vi vil distribuere ved neste klikk. Og "markøren: pekeren" er å endre markøren slik at elementet virker klikkbart for brukeren.
Legge til transformasjonsalternativer og tilpassede klasser foran
Nå er det på tide å legge til våre transformasjonsegenskaper i front-blurb. Vi vil da legge til de tilpassede CSS-klassene som er nødvendige for at jQuery kan bytte disse egenskapene ved å klikke.
Legg til følgende transformasjonsegenskaper under designparametrene foran.
X- og y-transformasjonsskala: 20%
Transformer opprinnelse: topp sentrum
Husk at transformasjonsdesignet du ser på dette punktet vil være det som utløses ved klikk. Vi utnytter ganske enkelt Divi-byggmesteren for å oppnå ønsket design. I dette tilfellet trekker den fremre blurken seg sammen og blir sentrert på toppen av den som et klikkbart ikon.
Når du er ferdig, legger du til de to CSS-klassene som trengs for å målrette fronten med jQuery som følger:
CSS klasse: bytt-transform-animasjon transform_target
(husk å skille hvert klassens navn med et mellomrom)
Legg deretter til følgende tilpassede CSS-kodebit som skal brukes til å aktivere og deaktivere transformasjonsegenskaper med jQuery.
.toggle-transform-animation {transform: none! important; }
Du vil legge merke til at de tidligere lagt til uskarpe transformasjonsegenskapene har blitt deaktivert fordi denne klassen er brukt på den.
Gå nå til Divi> Temaalternativer> Integrering og legg til følgende jQuery-skript til bloggens hode:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
La oss se det endelige resultatet.
Du kan bruke dette eksemplet til å lage enda mer imponerende design. Ikke nøl med å dele din mening i kommentarfeltet.
