WordPress Animation Effects

welcome to the press avenue youtube
0:02
channel
0:03
my name is john and i like to talk about
0:05
wordpress tutorials that everyone can
0:08
use whether you're a developer or just
0:11
jumping into wordpress we have tutorials
0:13
just for you
0:15
today we're going to be talking about
0:16
adding animations to your website
0:18
easily just dropping in some code while
0:21
using beaver builder additionally this
0:24
can be used with gutenberg or the
0:26
regular wordpress block editor which
0:28
will also show down below in the video
0:31
description and on the video
0:33
itself you'll see chapters where you can
0:35
jump ahead between beaver builder and
0:37
the block editor so let's jump into it
0:40
first we're going to head on over to a
0:43
site called
0:45
lottiefiles.com now this allows you to
0:47
drop in svg animations
0:51
which are very small and load very
0:54
quickly on your site typically in the
0:56
past people would put either videos
0:58
which are humongous
1:00
and other options which don't quite load
1:03
smoothly or quickly and we all need
1:06
stuff to load quickly
1:08
so this is
1:09
lottiefiles.com
1:11
you do need an account to edit these
1:13
files or use them and it's free so i've
1:16
already logged in there
1:18
so let's jump over to discover
1:20
and then we'll just grab something that
1:22
is free and i'll kind of walk you
1:24
through different things
1:25
so this is featured you see at the top
1:27
here it says featured recent popular
1:29
animations etc
1:31
these ones are featured now there are
1:33
kind of random we have loading screens
1:36
we have a coming soon what is that a
1:38
ballerina
1:40
uh we got the guy from big hero 6 just
1:42
kind of random stuff
1:45
we will choose this one right here
1:48
so what i've done so far is on a website
1:52
that i just turned on for beaver builder
1:55
i dropped in a template
1:57
that allows me to
2:00
basically build out this page in two
2:02
seconds so i can show you how to do this
2:05
so we're going to go ahead and edit this
2:07
beaver builder site
2:09
and we'll go to plus
2:12
html and i'll drag it in here
2:15
now we need the html to actually drop in
2:18
here so i'll come back to the lottie
2:20
file that i chose
2:22
and it's this guy
2:24
doing something on the computer so it's
2:26
you know email calendar
2:28
i don't work 24 7 but i guess this guy
2:30
does and then some gears and we have
2:33
some options here
2:35
now there's the url
2:38
the speed the background etc
2:41
if you click wordpress it brings you to
2:43
tutorial
2:44
on how to do this and i'm showing you
2:46
the same thing i'm just going to click
2:48
html
2:50
when you're logged in it'll bring you to
2:52
the generate code area if you're not
2:54
logged in it'll ask you to do so
2:56
so i'm going to come down here to
2:57
generate code so here's the asset file
3:00
here dot json
3:03
play mode normal is as it plays through
3:06
as you can see here on the play bar
3:08
and then it keeps looping it forever
3:11
um there is one called bounce where it
3:13
goes to the end and then comes back as
3:15
you'll see by the play bar here
3:17
some animations this doesn't make sense
3:19
this one just changes
3:21
you only really notice it on the gears i
3:23
typically leave this on normal
3:26
next direction uh pretty straightforward
3:29
you wanted to go forward
3:30
forward or backwards background color i
3:33
typically leave it as transparent and
3:34
then i change the background color on
3:36
the side itself
3:38
if you don't want that then you just
3:40
come in here and pick a color to match
3:42
your brand or whatever
3:44
block you're putting it into
3:46
width height i usually leave that and i
3:48
adjust it as needed and then finally
3:50
controls that's this control bar down
3:52
here i typically turn this off every
3:55
time i don't see a reason to have that
3:57
on there
3:58
autoplay a leave on loop obviously i'll
4:00
leave on and then
4:02
hover is if the mouse goes over the top
4:04
of the animation does it play or not
4:07
um
4:09
so i don't know so it doesn't show on
4:11
here but it'll show on the site now when
4:13
you're done it has the code right here
4:16
and i click copy code
4:17
now when i go back to beaver builder i
4:20
paste the code in here
4:22
and i hit save
4:24
and then there it is
4:25
so in this instance it's probably a
4:27
little small so i'll come back to the
4:29
editor
4:30
where am i
4:32
let's try let's do 500 by 500.
4:35
again nothing changes over here
4:38
but you can see here it says 500 by 500
4:41
or i can just simply do it
4:43
within the code itself
4:46
five and five that looks a lot better
4:50
save done publish
4:53
now we're done that's easy now on
4:57
gutenberg or the block editor or just
4:59
the wordpress editor the many names that
5:02
it has
5:03
we'll go to new page
5:06
and we'll say this is the other way to
5:07
do it
5:08
i'll use the standard editor
5:11
and
5:11
you could use the html way or you can
5:14
also do the ombed way
5:17
so here i am on the original animation
5:19
where it says o embed url i'll copy that
5:23
come to the block paste
5:25
it embeds
5:27
come on there we are and we're done
5:31
pretty cool
5:32
but you don't get a lot of options
5:34
because it's just straight pulling this
5:35
embed file
5:37
or maybe it lets us edit it let's see
5:39
nope
5:40
so if you want to edit it you go to edit
5:42
as html
5:44
and we'll come back here to where it was
5:46
for beaver builder
5:48
copy this code
5:49
come back here and paste it whoops if
5:52
you don't want to edit it of course you
5:53
don't need to do this step
5:56
attempt block oh it didn't work hold on
6:00
remove
6:03
i'll do
6:04
html paste
6:06
preview okay i must have deleted a spot
6:10
that it didn't like
6:12
again i can go to html and i can change
6:14
the size here
6:15
based on what i want this is just a
6:17
totally blank page
6:19
so go to publish
6:22
view and there we go we have an
6:24
animation on the wordpress editor and
6:26
then as well i showed you on beaver
6:28
builder as well
6:30
now taking this a step further
6:31
[Music]
6:32
say you want to edit this file
6:36
uh let's see maybe you don't want the
6:38
cloud
6:40
behind it
6:41
so i'll go back here to the original
6:43
file area
6:45
and it gives me the option to edit the
6:47
layer colors
6:48
so click edit the layer colors it pops
6:51
up a new window it seems to on all of it
6:53
and you see over here on the left side
6:55
we have
6:57
the properties and this is all the
7:00
layers
7:01
and if i look
7:03
it's in another language that i can't
7:04
read
7:06
this is the cloud in the background
7:10
and i want to change it to
7:13
orange and now it's orange and then say
7:17
maybe his headphones
7:19
outlines outlines outlines i'm guessing
7:24
let's see of course i can't read this
7:27
come on headphones we'll do another
7:29
we'll change the leaf
7:32
so let's do green
7:33
update
7:34
oh that's just the stem
7:38
i'll show you get one next time in
7:39
english
7:41
update that's the leaf down there so you
7:43
can kind of see how you can very easily
7:46
change this without having you know an
7:48
adobe program or a vector program so
7:51
then when i'm done um i can go to
7:55
i can export it as a json which means
7:58
you would have to then upload it or i
8:01
can go upload to my previews
8:04
uploading
8:05
[Music]
8:06
and there it is and then here is my new
8:08
asset link
8:11
which is actually fantastic
8:13
so that is the run through of lottie
8:15
images
8:16
if you have any questions about how to
8:18
edit lottie files how to edit gutenberg
8:21
lottie images or how to edit beaver
8:24
builder lottie stuff please do let me
8:26
know in the comments below again if you
8:28
have any other wordpress questions
8:29
you're welcome to leave them below and i
8:31
will answer them and thank you so much
8:33
for watching