April 6, 2020
Divi theme eCommerce tutorial Custom Footer Creation

Divi theme eCommerce tutorial Custom Footer Creation

hi guys and welcome to another Divi
theme ecommerce site bill this is Jamie from system 22 and web designer tech
tips comm in this series of videos we’ve been putting together this little
ecommerce store here with the awesome Divi theme from elegant themes if you
build with WordPress I suggest you take a look at the Divi
theme because it’s absolutely awesome it’s not free it’s a premium theme but
its features are just absurd I mean it’s crazy what you get with this theme and I
do this for a living and I’ve built well over a hundred sites
with Divi it’s just absolutely awesome if you’re building with WordPress take a
look you can get it from my affiliate link below or you can go straight to
elegant themes calm and download it from there ok so this is where we left off
last time we got rid of the the default bottom bar there what I want to do is
add my own footer so I’m gonna do this could do it with
the visual builder but I’m gonna actually do it the old-fashioned way
with the actual Divi builder plugin you now let’s go down to where we left off and add a standard section and inside our section let’s think what
we want I want a logo on the left-hand side then I probably want some credits in the
middle or copyright notice in the middle
and maybe a site built by on the right hand side so let’s use thirds okay here we are now first one
let’s give it a blue background color that we’ve been using which is 10
ca ca okay now this first one I want a logo
let’s do an image I need to find my logo because I’ve used
my original logo if we go down here is that blue color so I can’t use that
because you won’t be able to see it so let’s see if we can find a light-colored
one here we go so I’ve created a a white version of the logo here I’m just gonna
drag it well I’ll show you here’s my folder with my images in it all I’m
gonna do just left click on it and drag it and drop it
and if I go back up to the top oops can’t go back up stop there it is
right there and just make sure it’s got you
checkmark give it some alt text if you want to logo or some keyword for your
site and I’m going to set that as the image
and don’t want it to open in lightbox do you want it to link
but I wanted to link index URL
which is basically gonna be the index of our site
I just put a hashtag at the minute that’ll take it up to the top to the
site we wanted to open in the same window
don’t want any background on there so let’s just save that all right
now for the second one I want to put a copyright notice in there so let’s just
use a bit of text and for the copyright old code its hold
down the Alt key and it’s zero one six nine as you can see that’s put in our
copyright symbol right there so after a time you’re right you you that’ll do
copyright 2018 to present so it means when we built this site – whenever you
have to be looking at it design-wise I really don’t want to do
too much to this but I want to make it light Cal oh that’s for sure tech scallop light so we’ll save that
and the third one this just and do another little text box
slide down to our taxi obviously you can put in anything you want to put in there
you and I’m just gonna right side by yeah sweet
and I’ll make this a link to my website it’s all I need to do is just select it
well let’s make the whole thing a link hit the link button
get my website URL I just bring my website up here hopefully it should come up there we are
well I need to do is left click up here right click and copy or hit ctrl C back
to our edit page and paste that URL in there now I do want this to open in a
separate page so it doesn’t leave this site so let’s hit this little cog right
here and hit that open link in a new tab that’s it job done
and again I want this to be light-colored text and I also want it to be aligned Center which i didn’t do in that last while I
want that to be a line syndra as well so let’s save that and it’s belonging this Center text well it’s the center our line at this
last bit of text and we’ve got that light as well okay so they say image
text text which isn’t descriptive when you’re coming back here in here and
editing it’s not going to help much it’s really easy to change that that’s right
down the bottom admin label so if we just changed up the
logo we can change this one just copyright just keeping up you’re building for somebody
and they’re gonna be editing it it’s a good idea to do this sort of stuff it
will save a lot of phone calls to you saying how do I do this and how do I do
that and I can’t find this make it as easy as possible so there we go it’s not
going to look like much but what I’m gonna save I’m gonna save this as a
global item because we’re gonna use it on the bottom of every single page
now you can build one of these with widgets but I just thought it’d be fun
to do our own customer one so let’s hit this the outer one
three little bars there you
and we’ll hit the safe and add to library will pull it further I want to make it a global item because
if we change we decide later we want to change some stuff we will don’t want to
have to go to every page and change it we just want to have to change it once
and it’ll change it on all the pages for us so let’s have a look at this it’s
gonna be a little too wide I’m sure and we can tweak it with our visual builder
so hit the Update you now let’s preview our changes and scroll down at the bottom now it’s
loaded and we should have a blue bar at the bottom
there it is there’s our footer and like I say that’s way too large
and also can’t see this little tag here so let’s enable our visual builder go back down to where we were let’s firstly adjust the padding so we
got a decent height on this thing so I’m gonna make it a lot smaller well there we go that’s kind of the size
that I want now for the second element right here okay so we’ve sorted out our padding
it’s kind of difficult to grab this one so I’m gonna actually hit the COG on it
I’m gonna go to spacing and padding we won’t padding-top let’s say Troy 50
picks and see what happens they’re a little bit too much just take it down a
little bit little bit more maybe what Kanye in the
middle right there think that’s about right or at 38 Pixar I’m gonna copy that I
just left clicked and selected it control C and say that I want to do the
same thing to this little gizmo right here
we’ll get a design spacing padding-top I’m just gonna hit control V
and paste in the scene why what I’m gonna do cuz at the moment all
our links alright active links are gonna be this color right here so I’m gonna
customize this I’m gonna give this little box a class and I’m gonna call it
s 22 just so I know what it is you say that
let’s now save our changes we’ve got our footer pretty much done now and let’s exit the visual builder now we can go back in if I go down on
the bottom here we can go back into our customizer and just change that to white
or something like that but I’m not sure I’ll show you two ways let’s do that
first let’s go into our theme customizer you you free I’m in the tight let’s backtrack a
little bit I do that a little bit fast general settings typography
and if you see here got body link color I’ve got it set to this blue color now I
don’t know if I want to change them all to white because we’re using some white
backgrounds here and may not be a good idea let’s just do it do it to show you
so select color and just hit the white there now that
link down at the bottom should appear white there it is
so that’s one way of doing it but that’s going to affect every link on your site
which is fine if that’s what you want to do but I’m not gonna say that I’ll show you
different way of doing it now remember we gave this element a CSS class of s22 let’s go let’s get
out of here it’s telling us we haven’t got changes I
didn’t want to save them let’s go back into our Divi theme options where we are
right now general tab down to our custom CSS
and again is at the bottom so I’m going to put it kind of at the bottom you just gonna call it s 22 link and we gave that finger class of s22
pretty sure it was lowercase women if I’m wrong this won’t work so I’m gonna
say s22 a which is a link and anchor tag open and close some curly brackets give
it a bit of space no I’m gonna write is color and FFF which is white well white
is actually ffffff 6s but if it’s with css3
if it’s six of the same you just need to write three put a semicolon after that
just in case I want to write some more now let’s save that now as long as I use that right class
name when i refresh when i refresh this should turn white there we go there’s an active link as
you can see then there’s our little foot I just want
to make sure that that’s position sensually well I’ll do that later on
just because when we wrote juice down if I reduce this in size once it collapses let’s get to there we go and see a photo once it
collapses into three different sections there and we were on down so we still go
that’s okay as you can see the logo is still in the middle and those are still
in the middle because I made them central so that that’s gonna work fine
so there you go that’s how to add your custom footer to your Divi elegant
themes and like I say this is a global item so we can put it on every site I’ll
take this up to the top there very easy to do so that’s how to add
your custom footer to your Divi theme by elegant themes I hope you found that
useful if you have please subscribe to our channel and like the video if you’re
interested in web development take one of our web development courses below
we’ve got some huge discounts for our YouTube subscribers there’s also some
great free courses down there so check it out once again this has been jamie
from system 22 and web designer tech tips comm thanks for watching have a
great day

2 thoughts on “Divi theme eCommerce tutorial Custom Footer Creation

  1. add footer by this way will not effect other pages i see another way to add a shortcode in footer.php
    i know for you provide a custom by builder only with some custom css

Leave a Reply

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