Så här lägger du enkelt till CSS-animationer i WordPress

Vill du add to CSS-animationer i WordPress?

Du kan använda animationer för att fånga en besökares uppmärksamhet och lyfta fram det viktigaste innehållet på en page. Detta kan också uppmuntra kunderna att klicka på dina call-to-action-knappar och links.

I denna tutorial visar vi dig hur du enkelt kan add to CSS-animationer i WordPress.

Varför lägga till CSS-animationer i WordPress?

Du kan använda CSS-animationer för att rikta besökarens uppmärksamhet mot olika delar av en page. Om du till exempel har en butik på nätet kan animationer lyfta fram en produkts viktigaste funktioner eller största försäljningsargument. Detta kan förbättra upplevelsen för användaren och öka försäljningen.

Animationer gör också att dina CTA:er sticker ut, vilket kan hjälpa you att nå ett specifikt mål, till exempel att få fler att prenumerera på ditt email-nyhetsbrev.

You can add CSS animations to your WordPress theme or child theme’s stylesheet. Detta tar dock mycket tid och ansträngning, och om du gör ett misstag kan det förstöra din websites design och till och med funktion.

Med det sagt, låt oss se hur du enkelt kan add to CSS animationer till din WordPress webbplats. Om du föredrar att hoppa direkt till en viss metod, kan du använda länkarna under:

Metod 1: Hur man enkelt animerar alla WordPress Block (snabbt och enkelt)

Det enklaste sättet att add to en enkel CSS-animation är att använda Blocks Animation.

Detta gratis animation plugin allow you to add an entrance animation to any block without having to write a single line of CSS. Det har också en skrivanimation och en ticker-stil effekt som du kan add to text och siffror.

Först måste du installera och aktivera det gratis pluginet. Om du behöver hjälp kan du vänligen läsa vår guide för nybörjare om hur du installerar ett plugin för WordPress.

Efter aktivering öppnar du en page eller post i WordPress block editor. Sedan klickar du bara på det block som du vill animera och väljer tabben ”Block” i menyn till höger.

Du kommer att se att den här menyn har en new ”Animations” section.

Klicka bara för att förstora ”Animations” section, och du kommer att se tre olika alternativ: Animationer, Räkneanimationer och Skrivanimationer.

”Animationer” är korta effekter som spelas upp en gång när page hämtar. För att add to den här typen av entréanimation till din WordPress blogg, clickar du bara på dropdown bredvid ”Animation”.

Detta öppnar en meny där du kan välja den animation du vill använda.

WordPress Editor visar en preview av animationen, så att du kan prova olika alternativ för att se vad som ser bäst ut.

Som standard spelas entréanimationen upp så snart sidan hämtas, men du kan add to en fördröjning om du vill. Om du använder flera animationer på samma page kan du till och med använda fördröjningar för att förskjuta dem så att de ej blir överväldigande.

Öppna bara dropdown ’Fördröjning’ och välj en tid från listan.

Du kan också göra animationen snabbare eller långsammare med hjälp av ”Speed” dropdown.

När du testar olika Settings kan du när som helst göra en Preview av animationen genom att clicka på ”Replay Animation”.

Tillägget har också ”Count Animations” och ”Typing Animations”.

Typing Animations allow you to animate text, medan Count Animations add to en ticker-liknande effekt till siffror. Dessa animationer fungerar med alla block i Gutenberg som har stöd för text eller siffror, så du kan använda dem för att animera knappar, captions till images, headings och mycket mer.

För att add to någon av dessa effekter börjar du med att markera den text eller de siffror som du vill animera. Klicka sedan på den nedåtriktade pilen i den lilla toolbaren.

You can now choose ”Count Animations” or ”Typing Animations” from the dropdown menu.

Om dessa alternativ är gråtonade måste du se till att du har markerat rätt content. Du kan t.ex. inte selecta ”Count Animation” om du bara har markerat text.

När du har lagt till animationen kan du använda dropdown-menyerna i den lilla popupen för att ändra hastigheten och lägga till en valfri fördröjning.

I Följer image använder vi till exempel en fördröjning på en sekund.

När du är redo att göra CSS-animationen live klickar du antingen på knappen ”Publicera” eller ”Updated” för att tillämpa animationer på din site. Om du nu besöker din WordPress website kommer du att se animationen live.

Metod 2: Hur man lägger till CSS-animationer till Customize Pages (rekommenderas)

Om du vill add to enkla animationer till de built-in WordPress blocks är Blocks Animation ett bra val. Men om du verkligen vill fånga besökarens uppmärksamhet, hålla kvar folk på din website och få fler konverteringar, rekommenderar vi att du använder SeedProd.

SeedProd är det bästa page builder-pluginet som gör att du kan skapa beautiful landing pages, försäljningssidor, en home page och mer med hjälp av en enkel drag-and-drop editor.

Det kommer också med ett ”Animated Headline” block som du kan använda för att skapa roterande och markerade animerade headlines.

Trots namnet kan du använda blocket Animated Headline för att animera vilken text som helst, inklusive en call-to-action, subheading eller någon annan text som du vill betona.

SeedProd kommer också med över 40 entréanimationer som du kan add to alla block, inklusive images, text, knappar, videoklipp och mer.

Du kan till och med animera hela sections och columns med bara några clicks. På så sätt kan du skapa engagerande animerade pages på bara några minuter.

Om du använder animationer för att få fler konverteringar och försäljning, så integrerar SeedProd med WooCommerce. Det stöder också många av de bästa tjänsterna för e-postmarknadsföring som du kanske redan använder för att främja din website.

Så här ställer du in SeedProd Page Builder

Det första du behöver göra är att installera och aktivera SeedProd. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Vid aktivering måste du enter din license key.

You can find this information in your account on the SeedProd website. När du har lagt till license key klickar du bara på ”Verify Key”.

Skapa en custom page-design

För att komma igång, gå till SeedProd ” Landing Pages och klicka på ’Add New Landing Page’.

På nästa vy ombeds du att välja en template.

SeedProd levereras med över 350 beautiful templates som är organiserade i olika kategorier, till exempel 404-sidmallar och custom WooCommerce ”thank you” pages.

I den här guiden visar vi dig hur du skapar en försäljningssida med animerad text och entréanimationer, men stegen kommer att vara liknande oavsett vilken typ av page du skapar.

Klicka bara på en tabs för att se de olika templates som finns inom den kategorin.

När du hittar en template som du vill använda, hoverar du bara musen över den och klickar sedan på ikonen med bocken.

Vi använder mallen ”Zen Sales Page” i alla våra images, men du kan använda vilken template som helst.

Därefter måste du ge sidan en rubrik.

SeedProd skapar automatiskt en URL baserat på sidans rubrik, men du kan ändra detta till vad du vill. Att lägga till relevanta keywords i en URL kan till exempel ofta förbättra din WordPress sökmotorsoptimering och hjälpa sidan att visas i relevanta sökresultat.

Om du vill veta mer kan du vänligen läsa vår guide om hur du söker efter keywords för din WordPress blogg.

När du är nöjd med rubriken och URL:en klickar du på ”Save and Start Editing the Page”.

Detta kommer att hämta SeedProd drag and drop page editor.

Till höger ser du en live preview av page-designen, med några inställningar till vänster.

SeedProd levereras med massor av block som du kan lägga till i din design, inklusive block som tillåter dig att lägga till sociala delningsknappar, videoklipp, kontaktformulär och mer.

För mer information, vänligen se vår guide om hur du skapar en custom page i WordPress.

Så här addar du animerad text till WordPress

För att add to lite animerad text till sidan, hitta blocket Animated Headline och dra det till din page design.

Det finns två sätt att animera din headline. First, the ”Highlighted” style adds a shape animation to your text, such as a circle or a underlined zigzag.

Du kan använda den här animationen för att dra uppmärksamheten till ett visst ord eller en viss fras i headlinen. Detta kan göra din headline lättare att läsa och förstå genom att markera det viktigaste innehållet. Det är också ett bra sätt att dra uppmärksamhet till en call-to-action.

Stilen Highlighted har också några genomstrukna former.

You can use strikethroughs to create interesting and eye-catching effects, or it can simply add to some fun to your design.

För att skapa en Highlighted-animation öppnar du bara dropdown-menyn ”Styling” och väljer ”Highlighted”.

Öppna sedan dropdown ’Shape’ och välj en form. När du klickar på en form kommer SeedProd att visa en preview av den animationen så att du kan prova olika former för att se vilken du gillar mest.

SeedProd har också en ”Rotating” animationsstil, som add to en övergångseffekt till texten.

Ofta är animerad text det första som besökarna klär på när en page hämtar, så det är ett bra sätt att lyfta fram den viktigaste delen av texten.

För att skapa en övergångsanimation öppnar du dropdown-menyn ”Styling” och klickar på ”Rotating”.

Du kan sedan öppna dropdown ’Animation’ och välja vilken typ av övergång du vill använda, till exempel fade, zoom eller roll. Återigen kommer SeedProd att spela animationen i page editor, så att du kan prova olika effekter för att se vilken du föredrar.

Oavsett om du skapar en ”Highlighted”- eller ”Rotating”-animation kan du add to text före och efter den animerade texten.

Skriv bara in i fälten ”Before Headline” och ”After Headline”. I fältet ”Text” add to det ord eller den fras som du vill animera.

Om du vill animera hela headlinen lämnar du helt enkelt fälten ”Before Headline” och ”After Headline” tomma.

Som standard kommer SeedProd att spela animationen på en slinga, vilket vissa besökare kan tycka är irriterande.

För att bara spela animationen en gång, click för att deactivate ’Infinite Loop’ switch.

Som standard spelas animationen upp i 1200 millisekunder efter en fördröjning på 8000 millisekunder.

Om du vill använda olika värden skriver du in dem i fälten ”Duration” och ”Delay”. Du kan t.ex. göra animationen snabbare genom att använda en kortare varaktighet.

Du kanske också vill styla texten. Du kan till exempel ändra storleken på fonten och justeringen.

När du är nöjd med hur den animerade headlinen ser ut, fortsätt och klicka på knappen ”Save” för att lagra dina ändringar.

Add Entrance Animations i WordPress

Entréanimationer spelas upp när sidan först hämmas, så de är ett bra sätt att fånga besökarens uppmärksamhet.

Du kan också använda dem för att lyfta fram det content som besökarna bör klämma på först. Om du till exempel har en marknadsplats online kan du animera produktens hero image eller bannern som gör reklam för din Black Friday-rea.

I SeedProd Editor klickar du helt enkelt på det content du vill animera och väljer sedan tabben ”Advanced” i menyn till vänster.

You can then go ahead and click to expand the ’Animation Effects’ section.

Därefter väljer du helt enkelt en animation från dropdown ’Entrance Animation’.

Du kan nu add to entréanimationer till alla block, sections eller Column genom att följa samma process som beskrivs ovan.

Publicera dina CSS-animationer i WordPress

När du är nöjd med hur sidan är konfigurerad klickar du på dropdown-menyn på knappen ”Save” och väljer ”Publicera”.

You can now visit this page to see the CSS animations live.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar CSS-animationer i WordPress. Du kanske också vill se vår guide om hur man skapar en custom landing page i WordPress eller våra expertval för de bästa pluginsen för dynamiskt innehåll i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.