April 8, 2020

Divi theme eCommerce tutorial Remove Bottom Bar

hi guys and welcome to another Divi
theme ecommerce site bill this is Jamie from system 22 and web designer tech
tips calm well we’ve been building this little
ecommerce site here using the Divi theme from elegant themes if you don’t have it
I suggest you take a look below and there’s a link there
it’s my affiliate link you can get it from there or you can go to elegant
themes calm and get it directly from there Divi is a premium theme so you do
have to pay for it but it’s just got so many awesome features if you make any
kind of sites with WordPress I suggest you take a good look at it and it just
keeps getting better and better so this is where we left off last time we made
these little circle counters and this little signup bar for our MailChimp or
Aweber account whatever you use for your mail outs
in this video we’re going to remove this bottom bar by default this bottom bar is
always there on the Divi theme elegant themes like to
do that bit of advertising which is fair enough and you’ve got some social media
icons down the bottom here you can use but really no offense to elegant themes
I don’t want to advertise them on my website so we’ll be getting rid of this
and before we do that I just want to tidy up this little green section here I
just want to add a quick divider so it flows from this section to this section
a little bit easier so let’s go ahead and enable the visual builder once enabled let’s go down to that green
section actually I’m gonna go to the section just above it will be this
section right here and I’m going to add a divider on the
bottom of this section right here so let’s hit the COG
go to design /
now on the bottom let’s see probably want something similar to this see what
we’ve got here yeah that curly one right there
go down there see what it’s done first look at that even match the color
straightaway on this do I want to make it any larger why I don’t know this
thing that’s probably fine pretty good curl guy
you can make more curls or curls by just doing this get some crazy effects going but I think that’s actually gonna do it
let’s just save that and let’s just take this padding down a
little bit here so we’ve not got quite so much care well no I think we’ll we’ll leave that
as ear okay so I’m happy with that let’s our changes and exit the visual builder you
you you there we go let’s just add it a little
bit bit of more interest to that section right there all right let’s get rid of
this bottom bar I need think you’d just be able to go in and remove it but if we
go to our edit page at the end of the bottom
there’s our circle counters and our email opt-in
and there’s nothing below it there’s no fritter there’s no anything like that
hey let’s go to the theme customizer you and if we look here we’ve got a photo
section we can go in if we want to get rid of
this elegant themes and power by WordPress stuff we can put in our own
credits by this edit photo credits thing here now our text appears here which is
okay but I kind of like to have my logo in
there so I’m probably just gonna get rid of this this bottom bar here because you
can edit it a little bit but not as much as I really like to so I’m just gonna go ahead and create my
own so I’m gonna cancel out of this let’s go back to the site itself I’m going to go ahead and view the page you so how do we get rid of this
that’s pretty easy actually I’m using Google Chrome here if you’ve been
following along with my videos you’ll know that I like to use Google Chrome
very often so I’m gonna right click and hit inspect and I’ll actually right
clicking on that bottom bar itself just select it that’s for let’s see that’s
further bottom but that’s inside so that’s the main folder that’s the whole
thing so let’s just tell it to display:none
I’ll put it right here in the main footer we’re having a bit of CSS now you
see it’s gone which is what I wanted that’s great so all I’m gonna do is I’m
gonna copy this main footer code from the hash tag because it’s an ID hash tag
all the way to that closing curly bracket right there
I’ve selected it I’m going to hit ctrl C let’s go back here let’s go down to Divi
theme options I’m going to put this in our custom on the general tab and go down we’re
gonna put this in our custom CSS box here and here’s the stuff we’ve gone before
I’m gonna put it at the bottom because it’s removing the bottom bar
which is kind of at the end says make comment forward slash star star forward
slash and in between this way anybody that comes behind this will be able to
find this easier I’m going to drop down one the hit ctrl + V
I’m gonna get rid of that background color because we don’t need it so I just
left clicked after that semicolon there and dragged with a left button pushed
down to the end of the next semicolon there which has selected it it’s kind of
hard to see I’m just going to hit delete now I’m going to save my changes and let’s go back to our page get rid of
the inspector do refresh and nothing should change we should still have no
bottom bother there we go it’s gone so that’s how to
remove the bottom bar from the elegant themes Divi theme here it’s very quick
and short video there I hope you found it useful if you have please like the
video and share it and subscribe to our YouTube channel if you’re interested in
web development we’ve got some great web development courses down below with some
huge discounts for our YouTube subscribers so please take a look once
again this has been jamie from system 22 and web design and tech tips comm thanks
for watching have a great day

Leave a Reply

Your email address will not be published. Required fields are marked *