Har du sett dessa vackra CSS-animationer på populära webbplatser? Animeringseffekter som innehåll som glider, som försvinner, dess studsande bilder osv .... ? Vill du också lägga till CSS-animationer till WordPress?

I den här artikeln visar vi hur du enkelt kan lägga till CSS-animationer till WordPress utan att skriva någon kod.

När och varför ska du använda CSS animationer?

CSS-animationer gör att du kan fästa användarens uppmärksamhet på olika delar av sidan. Du kan använda dem för att animera produktfunktioner eller en uppmaningsknapp. Många webbplatser använder CSS-animationer när användaren rullar ner på sidan. Det lägger till en viss personlighet på sidan och betonar de viktigaste elementen.

CSS-animationer är också snabbare än att använda flash eller videor. De laddas snabbt och stöds av de flesta moderna webbläsare. Du kan lägga till CSS-animationer manuellt till ditt WordPress-tema eller till ditt formatmall. barn tema. De flesta nybörjare vill dock inte redigera sina temafiler eller lära sig CSS.

Som sagt, i den här tutorialen ska vi se hur du enkelt kan lägga till CSS-animationer till din WordPress-webbplats.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Tillbaka till varför vi är här.

Hur man ställer in CSS animationer

Vi kommer att använda ett plugin för den här tutorialen. Det låter dig skapa CSS-animationer med WYSIWYG visuell redaktör. Det första du behöver göra är att installera och aktivera plugin Animera det!. Plugin fungerar utan konfiguration och det finns ingen kontrollpanel.

Upptäck Hur man installerar en plugin i Wordpress om du aldrig har gjort det.

Skapa bara ett nytt inlägg så ser du en ny knapp i verktygsfältet för visuell redigerare.

Genom att klicka på knappen ser du ett nytt fönster där du kan designa dina CSS-animationer. Plugin stöder många CSS-animationer som alla är att välja mellan.

Först måste du välja animeringsstil. Därefter måste du välja väntetiden före animeringen och animationens varaktighet. Slutligen kan du ange när animeringen ska starta.

Gå också längre genom att upptäcka Hur man lägger imponerande animationer till din blogg

Plugin erbjuder tre val. Du kan köra animationen genom att klicka, peka på musen eller medan du rullar.

När du är nöjd med inställningarna kan du klicka på knappen " det animerar För att se förhandsgranskningen av animationen.

Klicka sedan på knappen Insert för att lägga till animering i ditt inlägg eller sida. Du kommer att märka att plugin kommer att lägga till en kortkod med dummyinnehåll i den visuella redigeraren.

Du måste ta bort dummyinnehållet i kortkoden och ersätta det med ditt eget innehåll, bilder eller vad du än vill animera.

Upptäck också Hur du lägger till interaktiva kartor på din WordPress-webbplats

Allt du behöver göra nu är att publicera ditt innehåll och förhandsgranska det.

Upptäck också några premium WordPress-plugins  

Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera hanteringen av din blogg eller hemsida.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. ChimpMate Pro

Schimpanskompis är den Wordpress plugin MailChimps premium Pop-up, som hjälper dig att omvandla dina läsare till prenumeranter. Den designades för att utöka din e-postlista utan att irritera besökare med irriterande popup-fönster.

Det är helt anpassningsbart och du kommer att behärska när och var du vill visa popup-fönster. Dess andra funktioner är: support av flera webbläsare och har sidflera schemaläggningsalternativ, en helt anpassningsbar layout, alyhörd kundupport, jagperfekt integration med WooCommerce, en excellente cacheshantering, perfekt integration med många WordPress-teman, flerspråkig support tack vare till WPML-plugin, einte mycket längre.

Ladda ner | demo | webbhotell

2. WooCommerce Cardstream Payment Gateway

CardStream är den enda oberoende leverantören av betalningsgateway. Detta Wordpress plugin premium gör att du kan acceptera betalningar direkt i din WooCommerce onlinebutik genom Cardstream.

Det ger dig också möjlighet att acceptera betalningar med Cardstream-värdlösningen.

Ladda ner | demo | webbhotell

3. Datakälla

DataSource är en Wordpress plugin premium fokuserat på den visuella presentationen av dina data på vilken sida som helst på din webbplats. Det låter dig presentera data från CSV-filer, XML, Excel, Google Spreadsheets, MySQL-databaser eller anpassade inläggstyper som sorterbar och filtrerbar tabell, olika grafer, kartor och mer.

Bland dess funktioner hittar du bland annat: en iintuitivt gränssnitt, tableaux baserat på modellen för dina data, tsorterbara, filtrerbara och responsiva ables,upport av Google Maps och flerspråkig, alyhörd kundsupport, en manvändarhandbok, en isnabb installation, et mer

Ladda ner | demo | webbhotell

Rekommenderade resurser

Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.

• Hur komprimera och ändra storlek på bilder på Wordpress
• Hur man lägger till en widget på rubriken på din Wordpress blogg
• Hur du lägger till interaktiva kartor på din WordPress-webbplats
• Hur man fixar 413-fel på WordPress

Slutsats

Här! Det är det för denna handledning, vi hoppas att det hjälpte dig att lära dig att integrera CSS-animationer i WordPress. Tveka inte att dela med dina vänner på dina favorit sociala nätverk. 

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.

Om du har förslag eller kommentarer, lämna dem i vårt avsnitt commentaires.

.