De indbyggede transformationsmuligheder af Divi har vist sig at være et ekstremt nyttigt designværktøj, der giver dig mulighed for nemt at ændre størrelse, rotere, skæve eller placere ethvert element på en side. Og du kan endda vælge at omdanne elementer til svævetilstand for fantastiske svæveeffekter. Så i dag skal vi vise dig, hvordan du implementerer disse animationer med et enkelt klik.
Denne metode kræver brug af jQuery. Det fantastiske ved denne teknik er, at du kan bruge de indbyggede designparametre af Divi for at style transformationsegenskaber, aktiver (eller deaktiver) derefter disse transformationsegenskaber med et museklik. Dette vil åbne op for et væld af unikke muligheder for at afsløre indhold skjult ved at flytte elementer på klik i stedet for at svæve. Og det hjælper også med at reducere behovet for at kende en masse CSS.
Lad os starte.
Hvad du behøver for at komme i gang
Til denne tutorial er alt hvad du behøver Divi. For at komme i gang skal du gå til dit WordPress-dashboard. Opret en ny side, giv din side en titel og fortsæt med at designe på Divi-byggeren i forgrunden. Vælg muligheden "Byg fra bunden". Nu er du klar til at gå!
Grundideen forklaret
Før jeg kommer for detaljeret i denne vejledning, vil jeg gennemgå, hvordan denne teknik fungerer med et par ord.
Hver gang du tilpasser et element (sektion, linje eller modul) i Divi, tilføjer du brugerdefineret CSS til dette element i baggrunden. For eksempel ved hjælp af Divis indbyggede indstillinger kan du tilføje en transformationsrotationsegenskab til et blurb-modul, så det roterer modulet langs Z-aksen med 20 grader.
Men bag kulisserne opretter du en brugerdefineret CSS, der føjes til dette tekstmodul og ser sådan ud:
.et_pb_text_0 {transform: rotateZ (20deg); }
Enkelt nok. Og lad os sige, at du ville tilføje den samme svævtransformationsmulighed. Du skal bare anvende transformejendommen til svævetilstanden i indstillingerne for Divi Builder.
Og koden vil se sådan ud bag kulisserne:
.et_pb_text_0: svæver {transform: rotateZ (20deg); }
Men hvis du vil implementere transform-ejendommen ved klik, skal tingene fungere lidt anderledes. Du skal indtaste en javascript-kode for at udløse en klikhændelse på elementet (eller tekstmodulet).
Med vores nuværende eksempel er vores primære mål dybest set at slå transformegenskaben "transform: rotateZ (20deg)" til og fra ved klik. En nem måde at gøre dette på er at oprette en brugerdefineret CSS-klasse med egenskaben "transformer: ingen!" Vigtigt ”i indstillingerne for side (eller eksternt stilark). Det ville se sådan ud.
.toggle-transform animation {transform: none! important; }
Med den CSS på plads. Vi kan tilføje CSS-klassen "toggle-transform-animation" til det blurb-modulelement, der har vores transform-egenskab.
Dette vil deaktivere (tilsidesætte) transformegenskaben og forhindre den i at blive aktiveret fra starten, selvom transformegenskabens stil allerede er blevet tilføjet til den.
Nu skal du bare aktivere (tilføje og fjerne) denne tilpassede CSS-klasse, når du klikker på elementet. Så hver gang vi klikker på elementet, vil klassen blive slettet, og transformationsegenskaberne (dem, du tilføjede med Divi), vil blive implementeret.
Her er et simpelt eksempel på, hvordan du gør dette. Først skal du tilføje en anden CSS-klasse til blurb-modulet med navnet "transform_target".
Gå derefter til Divi > Temaindstillinger > Integration og tilføj følgende jQuery-script til hovedet af din blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Det er alt ! Nu, hver gang du klikker på præsentationsmodulet, aktiveres eller deaktiveres den transformationsegenskab, som du tilføjede til præsentationen i Divi.
Lad os nu opbygge et eksempel, så du kan se, hvordan dette kan være nyttigt til dine egne projekter.
Sådan skiftes transformationsegenskaber på Klik for at få vist indhold i Divi
For dette eksempel holder vi os til et simpelt blurb-eksempel, der er brugt ovenfor. Dernæst vil vi tilføje yderligere blurb bag dette, så hver gang du klikker på den øverste blurb, vil den flytte sig ud af vejen for at afsløre indhold ekstra blurb bag dokumentet.
Oprettelse af Blurb-moduler foran og bagpå
Føj derefter et præsentationsmodul til 1-kolonnen.
Opdater indhold blurb for kun at inkludere en titel (fjern standardindholdet), og tilføj derefter et blurb-ikon.
Opdater derefter designparametrene som følger:
Baggrundsfarve: #4c5866
Ikonfarve: #ffffff
Orientering af tekst: center
Tekstfarve
: Letvægts tilpasset margen: 0px i bunden
Tilpasset polstring: 15% øverst, 15% i bunden, 10% til venstre, 10% til højre
Vi vil vende tilbage til dette modul senere, men for nu skal vi oprette vores andet Blurb-modul, der fungerer som et "return" -modul med yderligere indhold.
For at gøre dette skal du kopiere det præsentationsmodul, du lige har oprettet.
Fjern derefter præsentationsikonet (og standardbilledet) på det andet modul og tilføj kropsindhold tilbage til modulet. Opdater derefter designparametrene som følger:
Baggrundsfarve: rgba (76,88,102,0.3)
Tekstfarve: Sort
Tilpasset polstring: 20% top
Placer modulet inden resume
Nu hvor vores to sløringer er stylet, er vi nødt til at gå tilbage til vores forreste (øverste) slør og placere den over den bageste (nederste) slør. For at gøre dette giver vi det en absolut position med en højde på 100% og en bredde på 100%.
Åbn først indstillingerne for top / front præsentationsmodul, og opdater følgende:
højde: 100%;
bredde: 100%;
Føj derefter følgende tilpassede CSS-kode til hovedelementet:
position: absolut! vigtigt; overgang: alle .5s;
Opdater derefter z-indekset som følger:
Z indeks: 2000
Den absolutte position kombineret med 100% højde og bredde og z-indekset sikrer, at blurb-modulet forbliver oven på blurb-modulet bag det. Overgangsegenskaben er faktisk varigheden af overgangen til de transformationsindstillinger, som vi vil implementere ved næste klik. Og "cursor: pointer" er at ændre markøren, så elementet vises klikbart for brugeren.
Tilføjelse af transformationsindstillinger og brugerdefinerede klasser til forsiden
Nu er det tid til at tilføje vores transformeringsegenskaber til den forreste slør. Vi tilføjer derefter de tilpassede CSS-klasser, der er nødvendige for, at vores jQuery skifter disse egenskaber ved klik.
Tilføj følgende transformeringsegenskaber under de forreste designdesignparametre:
X- og y-transformationsskala: 20%
Transformer oprindelse: øverste center
Husk, at det transformationsdesign, du ser på dette tidspunkt, er det, der udløses ved klik. Vi drager simpelthen fordel af Divi-bygherren for at opnå det ønskede design. I dette tilfælde trækker den forreste slør sig sammen og bliver centreret øverst på den som et klikbart ikon.
Når du er færdig, tilføj de to CSS-klasser, der er nødvendige for at målrette den forreste blurb med jQuery som følger:
CSS klasse: skifte-transformation animation transform_target
(husk at adskille hvert klassens navn med et mellemrum)
Tilføj derefter følgende tilpassede CSS-kodestykker, der vil blive brugt til at aktivere og deaktivere transformationsegenskaber med jQuery.
.toggle-transform-animation {transform: ingen! vigtig; }
Du vil bemærke, at de tidligere tilføjede blurb-transformationegenskaber er blevet deaktiveret, fordi denne klasse er anvendt på den.
Gå nu til Divi> Temaindstillinger> Integration, og tilføj følgende jQuery-script til bloghovedet:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Lad os se det endelige resultat.
Du kan bruge dette eksempel til at skabe endnu mere imponerende design. Tøv ikke med at dele din mening i kommentarfeltet.
