Hi Guys this is Jamie from http://www.system22.net and http://www.great-webdesign.com/ welcome to this video so here we are continuing with our
Divi scene in this video we’re going to add some
CSS hover effects to some of our modules we created these modules last time in a
video and what we’re going to do is we’re going to add some
CSS horror effects the middle make them more interesting to look at
okay so first thing perhaps we want to do this let’s just open our inspector
and decide what we want to do with these when when we hover on them so I’m going
to hit the f12 button or you can right click and hit inspect and I’m going to select one of these
modules here and as you can see it’s highlighted it
so I’m now working on the right area I’m going to go down to my inspector
panel just try out a few things what I want to find out first is what this
color is because I’m kind of been using this color for the theme so I’ll
continue on with some of my effects with this color now it is o C sub 1 C 3 so if
I just make a copy of that and I’ll paste it into a notepad I’ve got over
here and we’ll go back to our blurb section
that we’re editing here okay so perhaps the first thing you’d like to see we’ll
put a board around that if a few pics with that nice blue color make it solid two pixels wide and give
it the color that we just copied just now which is that blue color and you remember you must remember when
we’re working with this inspector here anything we do here is non-destructive
what I mean by that is when I hit the refresh button at the top of my browser
there all this will disappear you know any changes we’ve made but what it’s
great for is trying our ideas before you actually paste your CSS code into your
room TV theme options so yeah that’ll work
let’s just do that so I’m going to copy this little bit of code I just written
here I’m going to paste it into a little
notepad so I’ve got it I’ll shut that out what I do is I’ll go
to my Demi theme options so in your dashboard you just go down to DV and
theme options click on that it’ll open up this page if we scroll down we’re on
the general tab here right at the bottom you’ll see a little
custom CSS title there it’s got a field over here that you can expand if you
need to and this is where we put our custom CSS now what I want to do is I
want to go to our page so if I go to the page I’ve got my page open here and
these are the sections that we’re working on this is that blurb that we
were just editing just now in the inspector
I go in there hit the little three bars and I want to go to custom CSS tap and I
want to give it a CSS class what’s that going to what that’s going to do is
enable us to add CSS to this particular module or anything with this class we’re
going to give it so I’m going to give it a class of hop HMV the matter what you
call it as long as you remember it if you have other classes already in
there that’s fine you can have multiple classes just separate them with a space
and that’s absolutely fine so we put that class in their HOF HOV I want to
save and exit now if I go back to our options theme options custom.css what I want to
do I’m going to give it a title when you’re having custom CSS it’s a good
idea to just give your little sections a title that way if you go back you’ve
done a lot of CSS you don’t have to scroll through and look for stuff you
can just go down to whatever title you’ve given it so I’m going to give
this a title of hover CSS and to do that you use a forward slash
star star forward slash then go back in between the two stars give it a little
space and put your title in okay now underneath there if you
remember we gave that block a little class or that modular class of holes I’m
going to do dot or period of then I’m going to open curly brackets
closed curly brackets go back in between just give them a little space this is
where we actually paste our new CSS line so if I go over to my notepad where I
copied my CSS I’ll just copy what we put in there and paste it there now what
that’s going to do that’s actually going to add a border to the hover class which
is that first module there now that’s okay it’s not what we want though if I
show you I just saved the changes save change button go back to our page now
you can see on our page it’s added that border which is all well and good
but it’s not what I want I don’t want that border here all the time I just
want it when we put our little mouse cursor over there I just want it to
appear so if we go back to our custom CSS in the seam op theme options what
I’m going to do is just after Haas there I’m going to put the colon and no space
I’m just going to right hover hov ER and it’s important you don’t put a space in
there now if we save those changes and we go back to the page and do a quick
refresh all right you see it’s gone now when I move my mouse over that module it
should the border should now appear there we go that’s kind of the effect I
want it just makes it a little more interesting when people are mounting
around we can take it a little bit further we
can make that sort of glowing effect if you like like a glowing neon button by
just adding some box-shadow using the same color and I’ll
show you how to do that for anybody that doesn’t know about CSS it’s an awesome
thing to learn and pretty much any effect that you want to achieve if you
just google it there’ll be somewhere out there too that will have done it and if
you can cheat leave that code too pretty and I’ll do an example I’ll put in box
shadow CSS you
and then we are w3schools that’s always a great one because they let you play
with it and here’s an example so that would be a
hole right there box shadow and if you want to try it yourself just hit the try
yourself button and here’s their example and PC actual box shadows CSS so you can
change it around you can say Oh perhaps I don’t want any anything there man I
want 20 there and I won’t say 25 there all you’ve done
it hit little run button and it’ll change the effect for you let’s just put
in our color that we’ve been using I’m just using that color because it keeps
everything similar throughout the theme or gives the theme a theme if you will
I’ll just paste that color in there hit run and there we are there’s this
sort of blue light effect it’s probably a little more than I want there just try
just give me a little I want it offset slightly but not too much so it’s good
five pics so appears more of a shining light than
an actual shadow yeah that’s alright that’s gonna much
get met a little bit more even course it’s got that yellow background but
let’s change that background color it’s very easy white you need a right white
in a white is hashtag FFF it’s a two 6s but if you’ve got six of all the same
you only have to put three in so that’s more like what it’s going to look like
I’m just going to make that spread a little bit more yeah but that’s probably going to work
because remember we’re on a dark background as well we’re looking at a
white background here so I’m just going to go ahead and copy that and we’ll go back to our team options
and our custom CSS and I’ll add this line underneath one thing you want to remember just
enlarge that a little bit G always going to have a semicolon after any line of
code you put in if you’re putting in multiple lines of code so if you don’t
put it in there it won’t recognize it won’t work so make sure you’ve got that
semicolon in there and also when you’re putting in CSS check your spelling if
you’ve got HUD spelling mistake there things aren’t gonna work correctly so
we’ve put that in there let’s save those changes and go back to the site and do a quick refresh on the page now
when we mouse over it should have a sort of glowing effect behind that border as
well so it’s roll our mouse over there we have it kind of looks like a little
neon button going on there which is finalized of course you know left is
sometimes more with CSS you don’t want to go too crazy but I encourage you this
play around CSS is a wonderful tool for just making making sites interesting and
it’s really essential if you’re going to customize sites the way you want them so
I’m kind of pleased with that we can take it a step further how about
if we press when we may so where we get that to bounce up a little bit so it’s
stand out even more not but it’s not standing out there we can do that by
changing the margin at the top I’ll just show you if we go in there and
I put this in there back to our things our customs CSS and again like I say if you don’t know
how to do this just google it and there’s plenty of source out there
to find plenty of good-looking CSS and it’s a great thing to learn so if I put
in bit of code here margin top I’ll give it – 20 pics that should make that
little box jump up by 20 pics I hope no it will as long as I spelled it right
put a little similar crayon after it will do the job so back to our site
refresh you know the drill now when I mouse over it we should have those other
effects plus that little box should jump up a little bit there you have it okay if you want to get crazy with it
why not crazy we can use a bit of what they call ease-in and ease-out effect
and to do that we’ve actually got to assign some transition CSS to our whole
element there I’ll show you exactly how to do that go back into our theme
options and US custom CSS EI what I’m going to do is add a little hole so
that’s pointing to our little module that we gave the hog CSS class to open
and close curly brackets and I’m going to put in some transition
things so I’m going to put in a margin top of
zero that’s just telling it that when it starts off before we mouse over there’s
there’s no margin at the top so picked so it knows that it stays where
it is when we’re not hovering over it then I want to put in some transition
CSS so we’re going to put a couple of classes in to make it compatible with
few different browsers so if we put that WebKit and – transition and then we’ll
do a codon now we need to point it about margin because that would be affect that
we were doing there okay so we put in margin and the timing
is think of it half a second or five seconds and we’ll use a class called
ease which is easy and ease out please Google these terms if you don’t know
what there are now just make it a little smoother in and a smoother out when we
do it and of course semicolon afterwards and we can add we copy this a little bit
right here at the end of the semicolon there we’ve got to add something from
Mozilla as well for Firefox until we write – Moz and then we can just paste
that in there I’m missing
a – there we are if you miss a – it won’t work or at least it won’t work on
Mozilla so okay so we’ve we told that whole element what we wanted to do here
so let’s do a quick save back to our site refresh you see now it has it a little slower
it’s not so interested it’s got a bit of a if we go back to demonstrate that better
let’s give it to 1.5 seconds which I I won’t leave it at but he’ll just show it
show the effect off a little bit more because it’ll be slower and refresh now
when we mouse over which you’d do that slower it takes about a second hour half
to go up second 1/2 to come down so that’s how you can add these easy an
hour effects it just makes it slightly it’s just another little bell and
whistle you can add another take you don’t know how to do it Google is your
friend and it will show you the answers all right
of course you can take it a lot further let’s do something really stupid here
let’s go back to our hover effect and let’s give it a border radius radius of
50% now I wonder if you can guess what its
gonna do I’m sure there’s plenty of you know what’s gonna be okay and what I’ll do is I’ll give it a
transition effect just on that border-radius so transition cooler I just want to point
it at the board and I’m doing this on the hover not on the natto my hogs there
because I only wanted to do it after it’s after it’s done its thing on the
hover effect and so I’m going to point it at the border radius and I’m going to
give it a timing something stupid like four and a half seconds and again I’ll
give it the ease in either effect so much very long okay and brace yourselves I’m sure
there’s a lawyer you know what that’s going to do it’s going to be quite
traumatic actually now of course go back to our site and refresh
now when I mouse over it should still get it hop after it’s done it’s hot it’s
going to implement those border-radius effects okay let’s so look there you go
I mean it’s a little out of order but it’s just another being do CSS
border-radius 50% makes it into a circle basically border-radius and for five
pics just gives it rounded corners and then when I let go it will pop back to
where it was because I’m not got it in the hot section now okay
and of course you can just go on adding stuff you can change the background
color it when you’re hovering we need you so I’ll just say read I mean
not a color we’re going to hear there’s just an example here say changes like to
reside refresh now it should change the background color as well as all the
other things that go on but it didn’t put a wonder why we can force it to you
by adding the class of important and that’s exclamation mark ym party 8 and T
well and also look look now I’ve left addy off background color you know what
I was saying before about check your spelling so let’s see if it works that
time I’m coming important off you don’t want to use it unless you have to so
let’s just say that may have to we’ll see back to the side and a rift refresh now let’s your hands still not changing
that background color well I think we’ll have to force it so if I put that
important back there so exclamation mark important I will
probably get back to the site refresh yeah there it’s done at that time so
that’ll get their attention but anyway I’m not going to use that it’s just an
example so if you don’t want to use it just delete it always think I might want
to use it later you can just comment comment it out
so to comment it out it’s the same as putting a comment like we did at the top
here so all you do is put forward slash star and at the end of the lines that
you don’t want star forward slash and save our changes back to the site
you know the drill refresh should just gone back to that whole occult cover
there that’s fine just take that to affect them
timing back down to what it was half a second I believe on that I was just
doing that for demo it’s a little little slow but that is entirely up to you it’s more like it now of course you think well I want to
load on the boxes to do it as well I don’t wanna write well at CSS again you
know it just takes too long I guess I could copy and paste it well you don’t
have to because we’ve given that the class of have HOV all we need to do is
go back into the page once we’re in the page go to the other sections there this
is the other two sections custom CSS give it the same class HOV there’s no
dock when you’re when you’re giving it the class that’s only when you’re in
your custom CSS tell it to point of that quick save next one custom CSS o or
whatever you decide to call it it really doesn’t matter as long as you remember
what it is save our draft or update it you’ve got
your page published where the preview to get to the page now hopefully this
time all of those will have it gathered shit damn damn damn maybe I make them
dance around all day long of a chorus line going on there okay
so that’s how you add some CSS effects to your modules in Divi so you don’t
have to just add those to these internal modules here you can add them to any
module or section or row you want they’ve had one too this here and see
what happens okay custom.css and see draft preview now if we scroll down and see what
happens here there we go I mean it’s done the same thing I mean that looks
pretty stupid bouncing all the way to the side there but that’s easily fixed
let’s just go back to the page this is our module we’re working on right here
and go advanced design settings scroll down to find padding here we are padding
to give it 25 pics that seems to work for us on most things you not assayed and hit our preview button now when we go in and let us see what
happens this time yeah that looks a little better it’s giving it a bit more
space for padding top bottom and side to side 25 picks just gives it a little
more coarse just go through your site for that CSS class on any module or any
row or any section you wanna have that effect on it says rewriting it you know you can
build other classes and do the same for different sections but it does give your
site some extra dynamics and it makes it look a little more interesting for your
viewers okay so we put one on that little middle blue section there
there we go you think well I can’t see the border and I can’t see the globe
which is quite cool actually and the reason today is obvious I’m sure you
know it’s because we’re using this same background color for for the board and
for the glow so it just makes that hop up a little bit right like that
and you can use it on these sections here if you feel like it and we need to
put a little different kind of shadow effect or make a different shadow effect
I’ll just show you let’s put it on and put it on that blue section there just
go to a three little bars there up the custom.css CSS class in there and save it always
update or say draft before we preview so it refreshes it and if we go down to
that blue section now once we hover over that it should have a little blue grow
glow on it so let’s go ahead and do that there you go you see that little blue
group below and it’s hopping up a bit to the section above all right so there is
how to add CSS hover effects to any section or module in your Divi theme it
does make life boy adjusting for your customers or your viewers and it’s a
great thing to know and for those of you that don’t know anything about CSS why
not start learning it now it really is awesome if you’re building sites you can
do so much with it so I hope that’s been useful to you once again this has been
Jamie at system 22 and great web design comm thanks for watching have a great