Slik legger du enkelt til CSS-animasjoner i WordPress

Har du sett de vakre CSS-animasjonene på populære nettsteder? Animerte effekter som glidebrytende innhold, fade i funksjonsbokser, hoppende bilder, etc. I denne artikkelen vil vi vise deg hvordan du enkelt legger til CSS-animasjoner i WordPress uten å skrive noen kode.

Når og hvorfor du bør bruke CSS-animasjoner?

CSS animasjoner lar deg gripe brukerens oppmerksomhet på ulike deler av siden.

Du kan bruke dem til å animere produktfunksjoner eller en ring til handlingsknapp.

Mange nettsteder bruker CSS animasjoner som brukere ruller ned en side. Dette legger til et fortellingselement på siden med elementer som utvikler seg når brukere ruller ned.

CSS-animasjoner er også raskere enn 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 barntemaets stilark. De fleste nybegynnere vil imidlertid ikke redigere temafilene eller bruke tid på å lære CSS.

Når det er sagt, la oss se hvordan du enkelt kan legge til CSS-animasjoner på ditt WordPress-nettsted.

Sette opp CSS Animere! Plugg inn

Vi bruker et plugin for denne opplæringen. Det lar deg lage CSS animasjoner ved hjelp av en WYSIWYG editor.

Første du trenger å gjøre er å installere og aktivere animasjonen! plugg inn. Pluggen virker ut av esken, og det er ingen innstillinger for deg å konfigurere.

Bare opprett et nytt innlegg, og du vil legge merke til en ny knapp i WordPress visuell rediger som er merket med "Animate it!".

Ved å klikke på knappen vil du få frem en popup der du kan designe CSS-animasjonen. Pluggen støtter mange CSS-animasjoner som du kan velge mellom.

Først må du velge en animasjonsstil. Deretter må du velge animasjonsforsinkelsen og varighetstiden. Til slutt må du velge når du vil at animasjonen skal vises.

Pluggen inneholder tre valg. Du kan kjøre animasjonen på klikk, svever eller bla forskyvning.

Når du er fornøyd med innstillingene, kan du klikke på animeringsknappen for å se en forhåndsvisning av animasjonen.

Deretter klikker du på innsatsknappen for å legge til animasjonen i WordPress-innlegget eller -siden. Du vil legge merke til at plugin vil legge til en shortcode med noe dummy innhold inne i innlegget editor.

Du må slette dummy-innholdet i kortnummeret, og erstatte det med ditt eget innhold, bilder eller noe annet du vil animere.

Nå som du er nede, klikk for å lagre eller publisere innlegget, og klikk deretter på forhåndsvisningsknappen. Du vil se innholdet ditt vakkert animert.

Vi håper denne artikkelen hjalp deg med å lære hvordan du enkelt legger til CSS-animasjoner i WordPress. Du vil kanskje også se vår sammenligning av de 5 beste dra og slippe WordPress-sidebyggerne.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.