Marketing Masterminds

Animated Gif With Canva Pro For WordPress Website Microanimation

Animated Gif With Canva Pro

Animated Gif With Canva Pro

Websites with animation are one of the latest trends in small business website designs. You don’t need Photoshop or video editors to create an animated gif online. In this video, I show you how to make animated Gif with Canva Pro to put on your WordPress website. I also include tips on troubleshooting your gif if it’s not working when you add it to your WordPress website.

Get Canva Pro

Article5 Trends Changing Small Business Website Design

Subscribe To Marketing Masterminds

Rough Transcript Of Animated Gif With Canva Pro Video

did you ever see animations or micro animations in a social post in an email, on a website and wished that you could make that too well now you actually can today I’m gonna walk you through how to make a micro animation or even a bigger one inside of Canva.

 i’m Audrey Kerchner I am the chief marketing strategist at Inkyma main content author for Marketing Masterminds, so in today’s video, I’m going to show you how to make small micro animations and then put them into a WordPress post and then also walk you through a little bit of how to troubleshoot it if it’s not working for you so let’s get into this

 all right so we’re going to start in Canva with creating the animated gif with canva pro so these are going to be small when i’m creating you can make them as big as you want so i’m going to do a custom design

i want to do 100 by 100 pixels on a custom Canva design you’ll see why when we get to putting them into the WordPress site on where i want to put them so i hit create new design and i have an existing article that i want to add them to into a section that talks about industries where micro expressions or micro animations would work well so

so the first one i’m going to show you is a simple one page one and then the second one is going to be a little bit more involved but it’s a different type of technique so i’m going to go to elements and i’m going to search pets and it comes up with different things and i like the paw print so i’m going to bring in the paw print i’m going to make it fill my square and then i’m going to center it

 and i want to change the color because black’s a little not eye-catching i’m going to use my orange and then i just want this to be subtle so now i’m going to click on animate and because i have this element opened i can actually animate the element and not the page so i want to do a little bit of a breathe i like that make it scale just a little more there we go

 all right and so when that’s done once i click out of it then i can set the time this one i’m going to set for 10 seconds and i’ll show you why okay so now when i come in to preview it it’s going to do its breathing in the beginning and then it’s going to stop this when we get to the page this is where this is important because you don’t want constant motion because it’s going to annoy people so i always set it a little bit longer it’s going to run in a loop

so it’s going to breathe for a moment it’s going to sit and rest and then it’s going to loop back and do it rather than doing it every one or two seconds which is a little bit much this is slightly off center so i’m going to pull this this way a little bit okay there now i’m happy all right 

so now i’m going to click share and i’m going to click download not an mp4 we’re doing a gif or a gif and then i’m going to download that now i’m going to come into my files and make sure it’s okay i’m seeing movement

it’s a little fuzzy on screen remember this is small and then the other thing you want to do is test it in the chrome browser before you add it anywhere so i’m going to take this open it with chrome it’s going to open a little window for me and i see the movement so i know that it’s working correctly

then what i’m going to do is i already have WordPress open and i have where i want it to be open as well so this is my article micro-interactions and animations industries where this this type of movement works best is where i’m adding this

so i come down here i open a new block you’re going to add an image because gifs are considered images so now i’m going to upload this there’s my file i’m going to open it

and you can see it’s actually nice and small so i’m going to take it and i’m going to justify it to the right which pushes it there and then i’m going to move it up so that it’s sitting here and 

then when i click update and preview in a new tab i’m going to scroll down and there it is and now you can see it’s doing its thing it’s catching the eye which is really cool and then you’ll notice it’s pausing now and then it’s starting over again so it’s not overwhelming which i think is really important 

alrighty so now let’s go back to canva and i’m going to show you the second type which is a little more involved but has a different cool feel to it so you can do either one whatever you’re more comfortable with if you feel like you want to take on the advanced method which isn’t hard let’s go for it 

all right so another one by one design again keeping this small so i’m at a blank canvas this time i’m going to come to text i’m going to add again this is really small it’s a one by one so i’m going to add header text body text and it still looks pretty big

i’m going to put in my text and size it so it sits on one line i’m going to bold this out and i’m going to change the color i like the orange i think it catches the eye really well and i’m going to take and i’m going to center this perfect and

now i’m going to also add the animation to this one so i’m going to click on animate i want to text animate and for this one i’m going to do a little bit of a bounce perfect and then we’ll come out of that and i’m going to set this to two seconds alrighty now now that 

this is all set i’m going to come up here and there’s a duplicate page so i’m going to duplicate that page and i’m going to change the text i’m going to leave it at two seconds duplicate it again but this time the last one i’m actually gonna move it to five seconds

okay so what that does is the first two or two seconds the last one is five seconds my total animation is nine seconds and what that does is it gives me that buffer at the end that i was telling you about in the last one so that it’s not constantly scrolling if you wanted to constantly scroll then keep them all the same 

and this is what it looks like and then you’ll see that it pauses and then it’ll start again okay so i’m happy with that i’m going to now export this one as well same parameters we want it to be a gif and then just double check and make sure it’s bringing in all three pages

i’m gonna download it i’m gonna give it a little check make sure it’s running and then one more check inside of my chrome browser just to make sure that something didn’t happen to the file looking good okay

so now let’s come into my post and i’m going to put it in the same spot i’m just going to replace it again add it as an image not a video me i’m going to right justify this and pop it up right next to this you can make it a little bigger if you want to i wouldn’t go too big

otherwise i’d make the whole entire file big and now you can see um that it’s that it’s there it’s working and doing what i want it to do for sure um so i’m really happy with that and it catches the eye gets them to stop and read especially if they’re in one of those key trades that i mentioned

now let’s talk about troubleshooting if when you’re in WordPress and your gif is not working right it’s just kind of sitting there now because this one is small it is using what they call full screen or full size automatically in WordPress

i’m going to go down here and show you the setting you need to check if yours is bigger so let’s say you do one that’s this size and in the block panel on the right you’ll see image size now because this image was much larger when we uploaded it WordPress tries to be efficient and so what you would have to do is come here and change that to full size and then you’ll start seeing the gif work because when it’s either thumbnail medium or large the animation gets cut out and so the rule of thumb that

 i’ve seen is that when you’re in WordPress if the gif is working it’s going to work on the screen um and that’s why i have you check it before you get here because the other issue could be that the way the gif was created or how it was done there’s a problem with the actual file and it’s never going to run regardless of the size in WordPress so make sure you check it first and then check it here if you don’t see it running while you’re implementing it okay go have fun making micro animations

Share This Blog Post

More Posts