Har du sett disse vakre CSS-animasjonene på populære nettsteder? Animasjonseffekter som innhold som glir, som forsvinner, sprettbilder, osv ... ? Vil du også legge til CSS-animasjoner på WordPress?

I denne artikkelen viser vi deg hvordan du enkelt kan legge til CSS-animasjoner til WordPress uten å skrive noen kode.

Når og hvorfor skal du bruke CSS-animasjoner?

CSS-animasjoner lar deg trekke brukerens oppmerksomhet til forskjellige deler av siden. Du kan bruke dem til å animere produktfunksjoner eller en oppfordringsknapp. Mange nettsteder bruker CSS-animasjoner når brukeren ruller nedover siden. Det gir litt personlighet til siden og understreker de viktigste elementene.

CSS-animasjoner er også raskere enn å bruke flash eller videoer. De lastes raskt og støttes av de fleste moderne nettlesere. Du kan legge til CSS-animasjoner manuelt til WordPress-temaet eller stilarket ditt. barnet tema. De fleste nybegynnere ønsker imidlertid ikke å redigere temafiler eller lære CSS.

Når det er sagt, i denne opplæringen får vi se hvordan du enkelt kan legge til CSS-animasjoner til ditt WordPress-nettsted.

Men før, hvis du aldri har installert WordPress Discover Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din 

Så tilbake til hvorfor vi er her.

Hvordan sette opp CSS-animasjoner

Vi bruker en plugin for denne opplæringen. Det lar deg lage CSS-animasjoner ved hjelp av WYSIWYG visuell redaktør. Det første du trenger å gjøre er å installere og aktivere pluginet Animere det!. Plugin fungerer uten konfigurasjon, og det er ikke noe kontrollpanel.

Oppdag Hvordan installere en plugin i WordPress hvis du aldri har gjort det.

Bare lag et nytt innlegg, så ser du en ny knapp på verktøylinjen for visuell editor.

Ved å klikke på knappen ser du et nytt vindu der du kan designe CSS-animasjoner. Plugin støtter mange CSS-animasjoner som alle er å velge mellom.

Først må du velge animasjonsstil. Etter det må du velge ventetid før animasjonen og varigheten av animasjonen. Til slutt kan du spesifisere når animasjonen skal starte.

Gå videre ved å oppdage Hvordan legge til imponerende animasjoner til bloggen din

Plugin tilbyr tre valg. Du kan kjøre animasjonen ved å klikke, sveve eller mens du blar.

Når du er fornøyd med innstillingene, kan du klikke på knappen " det animerer For å se forhåndsvisning av animasjonen.

Deretter klikker du på knappen innfelt for å legge til animasjon i innlegget eller siden din. Du vil legge merke til at pluginet vil legge til en kortkode med dummyinnhold i den visuelle redigereren.

Du må fjerne dummyinnholdet i kortkoden og erstatte det med ditt eget innhold, bilder eller hva du ellers vil animere.

Oppdag også Slik legger du til interaktive kart til ditt WordPress-nettsted

Alt du trenger å gjøre nå er å publisere innholdet ditt og forhåndsvise det.

Oppdag også noen premium WordPress-plugins  

Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.

Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.

1. ChimpMate Pro

Sjimpansekamerat er WordPress Plugin MailChimps premium Pop-up, som vil hjelpe deg å konvertere leserne dine til abonnenter. Den ble designet for å utvide e-postlisten din uten å irritere besøkende med irriterende popup-vinduer.

Den er fullstendig tilpassbar, og du vil mestre når og hvor du vil vise popup-vinduer. De andre funksjonene er: støtte av flere nettlesere og har pflere planleggingsalternativer, en fullstendig tilpassbar layout, aresponsiv kundeopport, jegperfekt integrasjon med WooCommerce, en excellente cache management, perfekt integrering med mange WordPress-temaer, flerspråklig støtte takket være til WPML-plugin, eikke mye lenger.

Last ned | dEMO | Webhotell

2. WooCommerce Cardstream Payment Gateway

CardStream er den eneste uavhengige leverandøren av betalingsgateway. Dette WordPress Plugin premium lar deg akseptere betalinger direkte på din WooCommerce nettbutikk gjennom Cardstream.

Det gir deg også muligheten til å godta betalinger ved hjelp av Cardstream-hostet-løsningen.

Last ned | dEMO | Webhotell

3. Datakilde

DataSource er en WordPress Plugin premium fokusert på den visuelle presentasjonen av dataene dine på hvilken som helst side på nettstedet ditt. Den lar deg presentere data fra CSV-filer, XML, Excel, Google Spreadsheets, MySQL-databaser eller egendefinerte posttyper som sorterbar og filtrerbar tabell, forskjellige grafer, kart og mer.

Blant funksjonene finner du blant annet: en iintuitivt grensesnitt, tableaux basert på modellen til dataene dine, tsorterbare, filtrerbare og responsive ables,opport av Google Maps og flerspråklig, aresponsiv kundesupport, en mbrukerhåndbok, en irask installasjon, et mer

Last ned | dEMO | Webhotell

Anbefalte ressurser

Finn ut om andre anbefalte ressurser for å hjelpe deg med å bygge og administrere nettstedet ditt.

• Hvordan komprimere og endre størrelsen på bilder på WordPress
• Hvordan legge til en widget til overskriften på din WordPress blog
• Slik legger du til interaktive kart til ditt WordPress-nettsted
• Hvordan fikse 413-feil på WordPress

konklusjonen

Her! Det er det for denne opplæringen, vi håper det hjalp deg å lære hvordan du integrerer CSS-animasjoner i WordPress. Ikke nøl med å del med vennene dine på dine favoritt sosiale nettverk. 

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.

Hvis du har forslag eller kommentarer, kan du la dem ligge i seksjonen vår commentaires.

...