April 10, 2020

Divi theme eCommerce tutorial – Logo and Slider Setup


hi guys and welcome to this Divi theme
ecommerce site build in this series of videos we’re going to be building an
online e-commerce store or an online store or a web store whatever you want
to call it this is Jamie from system 22 and web designer tech tips comm well in
the last video we just installed WordPress installed the Divi theme here
and installed the WooCommerce which will enable us to add products and also our
Divi builder plugin so let’s continue on let’s start customizing our site now
because at the moment as you can see just now their site doesn’t look like
much at all not very interesting so the first thing I’m gonna do is I’m gonna
add a logo and here’s a folder where I’d out downloaded my plugins I’ve just
added a few images summer I’m gonna use for a slider then 1920 by 800 so that
we’re for fullscreen there and I’ve got a little logo I’ve got a blue one and
I’ve got a white one there so I’m gonna go ahead and add my logo so if we go down to DV theme options here’s we’re on the general tab here and
all we need to do is add our little logo at the top here so I’ve got to upload it
at the moment there’s nothing in my media library and all I’m gonna do left
click on it and drag it across there I’m gonna put a little keyword in here I’m
just going to put sale you can put anything that pertains your site really
the old text should be describing what you’ve got there but logo hit that sell
it logo and there it is there now if we save our changes little green checkmark go back to the
site there we are we’ve now got our little
logo in there that will appear at the top on every page there so let’s go
ahead and create our first page let’s go down the pages and quite
surprisingly you may see that we’ve got a whole bunch of pages here WooCommerce
has created the cart the checkout the my account and the shop page by default
sample page that comes with WordPress when you install it so we’ll be dealing
with these later on but like I say these are auto generated by WooCommerce so
let’s go ahead and add a new page by clicking the add new button course we’re
gonna give it a really exciting name like homepage and again if you want to
you can start you can call your pages put keywords up here if you want to help
yourself in that in the search engine and down below you’ll see the Divi
builder that we installed last time we’ll go ahead and click on that and
straight out-of-the-box Divis got a whole bunch of layouts that you can use
if we get a load layout here it’s got a whole bunch of themes that you can
actually use and if you click on one of these
it’ll just install a theme with this all these styles here which is pretty
awesome but we’re not going to be using any of these
for what I’m doing here we’re going to build it from scratch but like I say if you’re building more
than one site if you build sites regularly this is why Divi is so awesome
it’s got just some awesome themes that you can just one click download you’ve
got it all you need to do is fill in the details and you’ve got a nicely styled
site up and running but like I say we’re gonna build this one from scratch so I’m
not going to use these right here so I’ll go back and I’m gonna use the Divi
builder here first thing I’m going to put in is a full width slider at the top
and it’s just gonna have a few pictures sliding across with some information
perhaps linking through our sale pages at a later date so I’m gonna add new
section full width section because I want it to go the full width of the page
I’m gonna go ahead and insert a module insert module and I want a full width
slider which is right here and again this is this is awesome it’ll let you
put video backgrounds in all kind of stuff here let’s add our first slide the
headings what’s going to appear I’m gonna put it Trillian cellulite
fashion actually there’s probably this arrival
this is what’s gonna appear in the button you don’t have to have a button latest arrivals
this is what’s going to be the large text at the top this is going to be
what’s in the button and later on I’m gonna link that to one of our pages
perhaps with sale items on it or something like that this is what we want to appear inside
our gold slider that I’m gonna use some dummy text so I’m gonna go to a site
called lorem ipsum what’s actually called Epsom comm that generates dummy
text and it’s great for web designers that want to show text somewhere but
don’t have anything to actually say at the moment which is me at this moment in
time and I’m just going to copy a little bit of this dummy text obviously if
you’re building a site you’re gonna have some content to put in there so let’s
just copy a little bit of that go back to our thing and add the text here now
this is what I was talking about before this is actually the actual button where
where it’s gonna go and at the moment I’m just going to leave it with a
hashtag which means it would just jump up to the top of the page and I’ll put
in a URL when I decide where it wants to wants to go
slide image of slide video you can add a little little image it’ll be beside your
Tex or a little video if you want to and here’s the background where I want to
add my image so you can either have it as a color it’s a gradient and the image
which is what I want or you can have a full full width background video so I’m
gonna use an image for this particular one so we just click on the plus button
and that opens our media library here and here’s my little folder the one that
we need downloaded the plugins and theme to I’ve got some prepared images in here
that’s where my logo was I’m just gonna upload some that I prepared for the
slider here they’re 1920 by 800 if you’re interested it seems to work
pretty well that’s what size you want unfairly big because they’re gonna be
full screen so I’ve just let left clicked on the first one I’m gonna hold
the shift key down and left click on the last one it’ll select them all and I’m
just gonna go ahead and upload them now once they’re uploaded let’s decide which
one we want to put there let’s start with that one
again you can put in an old text with some keywords or something descriptive
about your your image and I’m not going to do that just for this expediency and
I’m gonna say set as background so now we should have that image as our
background parallax effect probably not going to
use that I’ll put it on I’m gonna put it to CSS parallax well in fact I’ll leave
it off for the moment we’ll go over that later on when we’ve got something below
it you’ll be able to see it better so let’s just save what we’ve got there and
take a look so I’m going to want to color that text I imagine yeah here’s
that text that’s gonna be over the top of it and you can barely see it so if we
go to our design let’s just get out of there for a moment we’ll go out to the
design tab here text orientation I’m gonna have my text orientated to the
left text shadow not sure about that for the time being here’s our h2 which is
our heading you can choose a specific font I’m probably gonna leave on the
default for the moment but there’s a huge list of fonts that you can use here
include it with Divi which is another awesome feature font weight I’ll leave
that as it is for those that don’t know font weight makes it well like the word
says weight makes it fatter or thinner we’ve got regular at the moment you can
have bold which is fatter ultra ultra Bowl which is as far as it gets or light
CSS terms it sort of ranges from 100 to I think 800 something like that but
again I’m gonna leave that as is for the moment we can always change this later
styles you’ve got italic you got caps you’ve got small caps you’ve got and the
line line through again I don’t want here that I’m gonna leave the alignment
as is because I’ve got it all going to the left at the moment you can change
these individually which is nice now the text color I’m gonna make my blue color
that I’ve used for my site here which I know is
and CJ and moving on down take sighs I’ll leave it default for a minute and
letter spacing in line height let it’s facing obviously is a space between the
letters line height is the space between lines if you have two lines it’s gonna
the space between one and two take shadow I’m gonna go ahead and put it on
I think on this now let’s just have a something like that I don’t like it I’ll
take it off you can adjust it here I’ll leave it is the default color I might
want to make it a blue or a color but we’ll see now here’s our body text again
I’m gonna leave all this default I just want to change that color to my blue
color there we are and it was ten CJ CJ okay sounds good now I am gonna want to use custom stars
for the button let’s just see what we’ve got at the moment
buttons gonna be on the left this is padding for the actual slide itself hue
saturation brightness contrast play with these if you wish and you can get some
great effects going so let’s just save that and see what we’ve got so far if I
hit this little eyeball icon here that’s okay it’s not bad button like I
say I’m gonna want to change that but the rest of it’s pretty much a little
too much text there and of course this is on a pretty small desktop so it’ll
look slightly different but shadow behind that text is making my eyes go
funny so I think I’m gonna take that off my eyes are pretty funny anyway they
don’t need any help so let’s go back in and take that shadow off that was on the
title here’s a heading there’s the one we’ve
got there it’s blue highlighted so let’s just hit that stop for that again and
for that button I couldn’t really see it very well I’m gonna make it the blue
color perhaps with a white outline let’s have a look so I’m gonna use custom
stars for the button I think everything was pretty good let’s take a little
leave as is which is white just make sure I put that in there button
background color I’m going to use the same color might clash with that little
color drop that I’ve got going on there so let’s and I can write that in there or you can
just click on here and select the color you want and find it if you want but I
have to know mine is 10 ca ca just to keep everything in line that’s the background girl you can have
a different border here and you can add an icon to it I’m not gonna have that
I’m not going to have an icon this particular button and then you can make
it different color on on hover so let’s make it a slightly different let’s go to
where we were 10 sigue sigue this is for when you hover
over it well let’s say I could bring the opacity down or I could just make it
darker I suppose let’s take the opacity down or pasty down
I don’t think I think if I do that the text isn’t gonna stand up so much let’s
just make it a little darker by dragging this down again we can always change
this save that now let’s take a look at see what we got here
and I want to get this first slide right because I’m just gonna pretty much copy
see that button stands out fine and I think that overlay covers all right or
the hover cover ice hover color I should say is okay so I’m pretty happy with that let’s go
ahead and save that and what I’m gonna do is I’m gonna clone this one and just
change the image on it and perhaps change the title obviously you’re gonna
want to put a bit more thought in it than I do here so let’s hit the clone I’ve got four images you can have as few
or as many as you want just change those titles I really haven’t got anything in
mind for this so excuse this excuse me if this is I’ll take a little bit I
think actually yeah I want to take that off first one because there’s too much
text there but that’s okay again we’ll make links to the different pages with
what we want now let’s just change this image to perhaps the second one so if
you click on here there’s a little trash can right there it’s hard to see because
I’ve got a white background but it’s right on the right-hand side here so if
I hit that it’s gone hit the plus it’ll take us to our media that’s out there
next one so this one again I’m not gonna change anything else
just gonna save that and third one I guess you better make
those capitals keep it in line I’m doing this rather quickly you know I’m gonna
take that one off there and change that background image there’s a little trash
can hard to see right there and we’ll just add that one and say I’ve got to go
bother with a fourth one right now I think you get the idea obviously you put
in as many as you want let’s just edit this one and take that text off there okay and let’s make this auto scroll so
we want to go over to our design tab again right down at the bottom I believe is automatic animation let’s go ahead
and put that on 7,000 milliseconds so that’s seven seconds continue automatic
slide on hover we won’t do that so that if their mouse is on the slide that
means it won’t continue to slide in fact let’s turn that off or turn it on so it
does continue even if their mass is on it because there’s not much information
on those slides and seven seconds is plenty to be able to read what’s on
there but again that’s up to you it’s just another option I know that moment
I’ve got that default as none you can have it to fade slide bounce as you flip
fold roll let’s just try one let’s see what we’ve got with nothing of course
we’ll have to wait for seven seconds for it to roll roll around there we go that’s quite general I quite
like that but let’s just change it let’s see fold see what the difference is yeah it’s kind of folding in there okay
I’m gonna have to wait seven seconds I don’t see an awful lot of difference
there okay well I’m quite happy with the
default one which is none so let’s save that exit let’s put it at the top of our
page here we’ll go ahead and publish this page and let’s set it as our front page so we
want to go down to Divi to our theme customizer once we’re in the customizer by default
it’s going to show the post page which is pretty uninteresting so let’s roll
down to the home page settings here hit a static page now choose the page we
just built which is home there it is right there okay that’s kind of shaping up that’s
almost like like I want our slides are working okay I’ve got no color up here
at the top which is what I wanted but that’s not usually the default setting I
think usually header and navigation and be the primary menu I think usually
there’s a color here yeah background color so it has to put a
color in yours you you make it that’s if you want to color the background like
that which is kind of nice and clean looking
yours may come out that like that by default and if you want to get rid of it
like I did so the slides go all the way up to the top just go the background
color drag the opacity all the way down and there we are now your slides are
going all the way up to the top there now I’m good with that but the buttons
fine images are fine but there can’t we do our menu items here well from I’m
gonna have not so many menu items anyway but let’s make it so we can read them so
here’s a text color right above what we’ve been doing there and I’m going to
make that my default color I’ve been using which is that 10 I think a CA okay that’s better I can read that text
now now I don’t want it going all the way across there but I’m not going to
have that many pages here what I’m gonna do is put it another little menu below
the slider here and just have a few menu items up at the top but we’ll cover that
in another video so let’s just publish this which is effectively saving it go
back to the site and now let’s take a look at the site there we go that’s starting to shape up
now there we go that starting the Sheep up
now we’ve got our logo and our slider in place I may have to adjust the slider a
little bit but we’ll continue building this in the next video so I hope you’ve
enjoyed that if you have please like and share the video and subscribe to our
Channel and 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 and there’s also some great free courses down there 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 *