Transcripts
1. Introduction: Websites are super important. We use them for
everything, don't we? We use them for
news, or for music, or to show off our creative
skills in our portfolios. If you want to build
a website tomorrow, well, where do you start? Which program do you use? In this class, I'm going
to show you how to build a website using the
Elementor Page Builder. It's a fantastic
program that is super easy and allows you
to be super creative. Hello, I'm John Wolfgang Miller. I've been a professional
designer now for 20 years, and I've worked for some
big clients such as Fox TV here in Australia. Now, if you want
to use Wordpress, it can get quite complex. Yes, you can just buy in a theme or something and use that. But then you're going to
end up with a website that looks exactly the same
as everyone else's. If you use elemental though, you get to be super creative. You get to build whatever
you want to build. It's a fantastic program. And in this class
I always show you just how to use the free
version of the program, so you can just use it to
build up all of your skills. In this class, I will guide you through the whole process. I will show you how
to set it up and then we will build
an entire website. We'll start off
with an impressive hero section and then
we'll move down into some animation parts
that will really impress the visitors
to your website. This class is perfect
for you if you're a beginner or even if you
have a lot of experience, what you will learn
here will massively improve all of your
website design skills. You will have a beautiful looking website
at the end of it. And if you're looking to take your career further
into website design, this is what you need to know. So let's go build a
website. Let's get started.
2. Class Project: The main project here is to create a full single
page website. Each lesson will
show you how to set up different website
parts in element, or all using different
widgets and different tools. The lessons will start with
your opening hero section, then you will make an
information section with an image slider. After this, you will
make two different about sections that both work in
very cool animated ways. Then you will finish off
the site with a footer and a header install elementor. And follow along
with each lesson and recreate what
you have learned. At the end of each one, you can either use
the exact same images I have and create
the exact same site. Or you can use your own images and give it your
own little style. If you want to use the
exact same images, they are kept here in
the resources section. Download this and add it
all to your media library. At the end of the
class, you will have a fully working website. You will have learned a
lot more about elementor, so you can take your website design the skills much further. For this class and
all of my classes, I will be talking through
a lot of different things. There's a lot to cover
in all of these classes. I highly recommend as you go through to play and to pause. If I say something big in one, go pause it and give
that a try yourself. If you need to do it
again, just run it back, 15 seconds rewind,
15 seconds rewind, and then you can watch
that whole part again. That will help you understand what I've said and try it out. If you are having
any problems with the quality of the
video you are watching, come over here to quality levels and change the settings in here. If it is set to auto, you may not see it as
sharp as you need, so change it to either
720 or 1080 pixels.
3. Elementor & Wordpress Set Up: Here we are at elementor.com
This is the first place you would normally come to
if you're trying to set up the Elementor
Page Builder. You may already
have this set up. If you do feel free
to move forward to the next lesson or just stick around for
a couple of minutes, make sure you have it
all set up correctly. Now we just want to use the free version of
Elementor for this class. However, the problem
is with any website, you always have to
pay for hosting. Hosting is the company that
stores your website for you. Elementor do all this
themselves, but there is a fee. However, as we just want to use the free
version of Elementor, I will show you a
way right now to set up a free hosting option. Here we are at Word.
Wordefi, offer a free version of
Wordpress hosting. If you come up here and you
go to compare products, you will see that they
have paid versions and they also have
a free version. This is for a free dev site. That's a free development site. Meaning if you just want
to play around with elementor to get used to
the program, choose this. There is a link for word down here in the about
section of this class. When you come here, click learn more then go sign up. It's free. Enter your first name,
last name, email, password, et cetera, in here, and then click Sign up. First thing you need to do, just verify your E mail address. Then come in here and
click Create New Site. Start with the site name
Gang Music Location. I am based here in
Australia, Temporary URL. Well, this is just for a
temporary reason anyway, so you can call
it what you want, but let's just put Ing. Music Then select the
type of site again, just choose the depth
version and go at site. You'll get a little
spinning wheel for a minute or so while
it sets it all up. When that's done, just come
over here and click on the W, the word press logo. It'll give you a pop
up showing you what the user for Wordpress
and the password. Just click on this
little icon here and that will copy
the password for you. And then continue to WP admin enter in word
fire and password, click to remember the password
and then click Log In. Here we are now in the
Wordpress dashboard. We can now start building
everything from here. If you've never used
Wordpress before. Well, I'll just quickly show you the menu for everything is over here on the left element. The Page Builder is a plug in, first of all, we need
to install that. Come over here to
plug ins and click Add New Search Plug ins. Here you are. Element or
website builder install now, then click Activate, not bring
you through to this page. This is where you do need to
set up an elemental account. But again, we're just going to do it with the free version. Create my account, then enter in your e mail
and your password. Then it will say, let's
connect your site. You are now an
elemental customer. To get started with
any Wordpress site, you always need to
start off with a theme. This is the back end
of your whole website. Creation elementor has its own main theme,
which is called Hello. Click on here and continue
with the Hello theme. Now let's give your site a name. We already have that because
we set it up earlier. Have a logo look, we can do that, but let's
just skip that one. For now, that's a wrap. Now skip this. We'll come back into
the element or editor. Before we start
building our website, we just need to
check a few settings inside the dashboard. We need to exit this page. First of all, to set this up, let's go over to the hamburger menu over
here on the left, and choose User Preferences. Down here it says Exit two, and you have a few options here. The one we want is this one. P Dashboard, select that. Then come back up to your
hamburger menu and choose Exit. Then it says Leave
Site. Just click Leave. Or if you do already have the latest version of
Elementor installed, this is where you
find those options. Just go up here to the Elementor
logo and click on this. Then choose User
Preferences here, make sure WP
dashboard is chosen. Click back on the Elementor logo and then click it to Wordpress. That will bring you back
here into your dashboard. Now we need to just check a few settings inside
the Elementor. Plug in, come over here
on the left to Elementor, hover, and choose Settings. The first one we want
to select is about the default colors
and default fonts. The way Elementor is set up is that it will
use the colors and fonts already set up in
the Hello Elementor theme. Because we want to
be super creative, we want to disable this simply, just check this box and check
this box and click Save. Now come up here to features. If you have the latest
version of elementor, you probably don't need to
change anything in here. But if you have an older
version or you just want to check the correct
elements are active, come in here to features. First of all,
scroll down to grid container, it says Default. Just change that to
active and click Activate Next editor, top bar. This is the latest editor
version of elementor. If you're using the
latest version, this probably is already set up. But come in here anyway
and choose Active. Then scroll down in this
section, stable features. Scroll down to
this one that says flex box container and just
make sure that is active. When you have those
three elements active, scroll down to the very bottom
and click Save Changes. Now everything is
set up and we are ready to start
building your website.
4. Elementor 101 - Menus: Now that is set up,
come over here to pages and select all pages. As you can see here, a couple of pages come automatically
with the theme. We do not need either
of these pages, but that one is live that has been published as
you can see over here. Let's just turn that
off because it's just an empty page that
doesn't need to exist. If we hover over
here on quick edit, you have a few options here, but the one we're
looking at is status. As you can see, it is published. You can change that to a draft. Now we're going to create
our own live page. That's very simple.
Click, Add New. You will come through to the
regular Wordpress editor. Scroll up here to add title and put in the
title of your website. Mine will be Wolf Gang. Music Then come over
here to summary. On the right hand side, click the drop down menu over here where
it says template. Click on Default Template. Then from this drop down menu, choose element or canvas. That's what we
need to do to have a clear page with nothing
else on it that we can work. Then go up here to save Draft. When that is saved, come over here to edit with Elementor. Welcome back to the
Elementor editor. As you can see we're using
the latest menu version. It's always good to just come in here and have a play
around with all of the settings in here just so you know where everything is. Before you get started, I'll quickly run through each part of the menu
bar at the top here. First of all, this
Elementor logo, that's a drop down menu. In here we have
the theme builder. Don't worry about just
a pro element we are not using today history. Well, obviously that if you make an error
you can go back to previous versions and
keyboard shortcuts. That's just telling you all of the shortcuts to speed up
the whole process. I guess. Then the plus icon add element, this is where you'll
see the elements, all of the widgets that we'll
be using on this website, this dropdown menu that's set up into different subsections, layout, container, and grid. That's what we used to start building all of the elements, each section of our website. You've got your basics, you've also got
your pro section. Obviously you can see a little padlock element on
top of all of these, but don't worry about that. We can't use any of these, but none of that is needed for anything we're
going to build to date. We're just completely
using the free version. We can close that part. And then you get all
the general settings, everything you're
going to need in here, Image carousels, testimonials, et cetera, that's the elements. Then we have site settings, this is where you can
change settings that will work across
the entire website. If you're building a website with multiple different pages, any setting in here
will be relevant. Every single page
that you build. Then if we close this one and then click on this
one that says Structure, you get this little
pop up window. This used to be
called the Navigator. If you're familiar with
older versions of element, it was called Navigator. It's now called Structure, but it does the
exact same thing. I'll talk through that as we
start building your website. Then next, this is the
responsive section. This is very, very
important and we'll come onto this later
on in the class. This is where we can
select different devices, desktop, tablet and mobile. This one here, Preview Changes. This is great because as you
are working on the website, you can click Preview Changes. And then you can see
how it would look for everybody else looking at your
website when it goes live. That's everything. Now we can start building your website.
5. Opening Hero: Okay, let's start
building your website. We are starting with
a very blank page. We need to start adding
our first few elements. This is the section
we're going to look at. There are two options here. First of all, we have
this one add template. Click on that and you'll
see what this means. This is where you can
bring in pre made pages, different blocks,
elements that element of themselves have created. However, you can always see the little pro icon on
top of all of these. These are only available
in the pro version. However, this isn't relevant to what we're trying
to do here anyway. We are trying to build
our own unique website. We don't want to
use anything that was already pre made
by someone else. Just close this one. The one that we're going to
use is the plus icon. Click on that. Which layout
would you like to use? These are the two options
that we have for element. I'll just show you the
difference of those first grid. As you can see in here, these are different structures. However, each structure has a set width for each
element inside it. This one's 50, 50 left to right, 50 50 top to bottom, and this is an equal
split of three thirds. Each section inside the grid is always the exact same
width and height. If we close this, we
click on Flex box, that's where we have a few more different
creative options. As you can see here, this
has five different sections, but they're not all the
same width and height. They are different width
and different heights. As you can see here, same width. However, the height here is double the height of
these two elements. Here in today's cluster, we'll be using both of
these different elements. We'll be using containers, the flex box and the grid. But for this section,
the hero section, we're going to use a
flex box container. We just want one that
is a single container. Hover up here to
the first one with the arrow pointing
down. And click that. That will drop in
your first container, which is in this pink
section at the top. I'll just show you a few
more of the elements. You can see here at the top
we have another plus symbol, a container that just means
you can do the same thing, but either above or below. Let's close that.
Then we have the x, that is to delete the container. If you make an error or you didn't mean to drop
in another container, you can just delete that one. Then we have the little dots up here where it says
Edit Container. If you click on that,
you'll see the options that come up automatically on
the left hand side here. We'll take a look at
that in a few minutes. Also, this allows you to drag
the container up and down. When we have multiple different containers here on the page, you may want to move
one above the other one or below the other, Drag
them around like that. The other option we have now that we have a container set up, is the right click. If I was to write
click down here, these are the
options that I get. But we want to write
click on the container itself and we have
all of these options. It's quite clear in here
what each one of these does. If you've made a
certain container and you want to
repeat the action, you can just duplicate it and it will do the exact
same thing again. Then you have the options
of copy and paste again. If you want to copy something
you've done elsewhere, you can paste it somewhere
else on the site. Or you can even style, let's just say you've got some
text set up a certain way and you want the next bit of text to work the exact same way. Copy the text and
paste the style. It won't change the
wording in the text, but it'll change the size of it. The main one I want
to look at here is structure. Let's
click on that. This is a very good tool because what it does
is it splits up your site and each page into different sections,
different containers. Then you have a drop down menu, so you can see what is
inside each container. We'll see how this
works when we keep building multiple
different elements on the page and drop different
widgets inside container. Now we're going to build the
hero section of our website. We call this section
the Hero because it's the most important
part of every page. Why? Because it's
the opening section. It's the first thing
people see when they visit your website and it's your
first chance to impress them. What we are going
to build here is a full page opening section that has a background image with
the company logo sat on top. This image will give
a good impression of what the site is about. Then the company logo also has the company name inside so people will know
where they have. When they turn up at the site. Let's have a play around
with this container. Now come over here to your
menu on the left hand side. And you will see
three subsections. There is layout
style and advanced. I will talk through
different parts of this throughout the entire
class just to give you a good overall idea of
how it all works and what is possible inside the
element or page builder. Let's start by
looking at layout. This is where we
decide on the width and the height of the
entire container, the entire hero section. The width is already set to a default size
1,140 pixels wide. Your other option here
is to go full width. If you have a look at
this section at the top, you will see the difference. If I choose full width, it is covering the entire page. This works for some containers on your site, but
not for others. For instance, if you have
one with text in it, you don't want that to be
right over on the edge of the page because the flow of the website
doesn't really work. You always need a little
bit of empty space, a little bit of white
space around text. Let's turn this back to boxed, and we'll leave it
at the default. You can change this to
any size that you want, but I highly recommend sticking
with the default width. Now we want to take
a look at height. As you can see at the moment, the container only has
a very small height, It only comes down to here, or you can see the
edge of the pink box. What we want to do is tell this container to
fill the entire page. Let's go over to Minimum height. If you click on the
drop down menu, you will see different
options here. The one we're looking for is VH, That stands for vertical
height as you can see here. To achieve full
height container, use 100 H. Let's choose
H and let's type in 100. This is a percentage. If you want it to only
fill half the page, obviously 50% but we want
this to fill the entire page. Let's choose 100. We now have a blank
empty container set up. What we want to do is set
up our background image, hover up here to style. In here you will see
background options. You have many different types. You can drop in here classic gradient or a gradient color. You can drop in a video or
you can drop in a slide show. For what we want, we just want a classic style click
on the brush here. First of all, you could
just pick a single color. If you click on this
empty box over here, this is where you can choose any color you would want
the background to be. We don't want it to be a color, we want it to be an image. What I'm going to do is click the clear button
at the top here. Then to use a background image, hover over this box and
click Choose Image. When I open up the
media library, I can see every single
image that I have uploaded. If you want to know a little bit more about uploading images, we'll go to my profile on skill share and look for
this video that will quickly talk you through what should be done when we upload
images to Wordpress. What matters is the
ratio of this image, the file size, and
the file name. Watch this short video, you'll understand
a little bit more. When you have all of your
images ready to upload, we'll click on here
and select Files. What is Wolfgang? Music Well, I'm obviously making up a
name for a music store, but it's going to be a more
old fashioned style music store the way they were
20 or 30 years ago. So what we're going
to sell here is a lot of vinyl records, more retro things
like cassette tapes. But we're also going to sell
a lot of instruments and musical gear for
people to use when they're recording
music or playing live. My main selling point
though is going to be the vinyl records
because I think that's the kind of thing that's going to get customers in. We all like to walk around those stores and have a look
at what music is available. So I'm going to pick this image here as my background image. Okay, and this is how the hero looks with this image
as the background. It looks like it's the
perfect for this background. However, if I scroll down, you will see there's a tiny
little problem down here. What's happening
is it doesn't fit the exact ratio of
the background, and therefore it is
repeating the image below. We need to change
that. Come over here to the menu on the left. This is where you can
make some changes. Let's go over here to position. As you can see by
this icon that is set to how it will
display on desktop. We'll look at this
later on in the class, but this is where you can
change the settings to see how it would look on
tablet or on mobile. Right now we're just
looking at desktop though. Keep it selected to Desktop. Over here it says
position is default. Let's change that
to Center Center, because I want it to sit in
the center of this container. It is still repeating
the image below. Let's go over here to repeat
and then say no repeat. That makes the second
version of it disappear. However, as you can see, it doesn't still quite
fill the container. And we have a tiny little white
space at the bottom here, in between the image and
the edge of the container. The pink line to change that, Come over here to display
size and choose cover. There we go. It's now stretching out slightly so that it fills that exact section.
So think about this. When you are choosing your
hero background image, you obviously want something
that has a landscape ratio. You may want to choose a square or one by one ratio image. But you've got to
remember that that will stretch it out
so what's at the top, at the bottom may not
display correctly. This all looks good
inside the editor. However, a cool way to check how it's going to
look when people view it without using the
preview changes button is to click on this
little arrow over here. This little arrow is saying
it will hide the panel. This is the whole panel
over here on the left. And obviously anybody who visits the live site
will not see that. Click on the little
arrow to hide the panel. It will also hide
the Structure menu over here on the right. Now what you see, which
is just a plain image, is exactly what people will see when they visit
the live site. That will help you make sure
you get the ratios correct. Your background is
working perfectly. Anything sat on top of it
is also working perfectly. We need to go back
to the editor. Click on the arrow again. Okay, If we scroll down
a little bit, well, we just see the
empty white space, but this is where the
next element will appear. However, I want to make one
change to the hero section. As I scroll up and
down like this, you'll see the image
moves with the scrolling. But what I actually want
to do here is to make the background image static
that stays in the same place. However, any elements on top of it such as the company logo, that is what moves to do that. It's another setting over
here on the left hand side, and it's this one
that says attachment. It's set to default and
you have two options, One is scroll and one is fixed. The default one is scroll. As I scroll, it moves. But I just want
that to be fixed. Let's change that to fixed then. As I scroll up and down, you'll see that
that stays static. It doesn't move. The
elements on top will move. And then we get to
the next container that will just scroll above it. Now we need to drop in the company logo on
top of this image. Let's scroll up so we can
see the full background. Let's go back over here to
the plus symbol add element. What we want to do
here is drop in image, an image widget on top of the background
of the container. However, the settings
that we have for the background container will be different to the settings
we want for the image. Therefore, what we need to do is drop a container
inside a container. Come over here and drag a container and literally just drop it on top of
the background. What you'll see over here
in the structure section is a main container and then a sub container that
is inside this container. What we want to do is drop in our logo inside this container. Come back over here
to add element. Choose the image,
widget and drop it inside the sub container. The first thing
that you always see here is just a gray box. That's because no
image has been chosen and this is like a
placement image for that. However, we want to change that. Come over here to choose Image, Click on this, then I want to choose the
white version of my logo. I have a couple of different
versions of my logo up here, but I want the one where
the icon is above the text, and I want the white version. I will click on this one. The main problem here
though, as you can see, the image is stupidly
large and you can't even view what it says
unless you scroll down. We just need to make it a
lot smaller to do that, come over here to the
left hand side and click on Style Here. You can play around with the
percentages of the image, the percentage of the width, or the percentage of the height. Let's just play around
with the width. If I click on this little
draggable element here, I can just play around with it until I get it to the
size that I want. I'd say maybe 15% That's good. I now want the logo to sit in the center of the hero section. If I click on the arrow here, this is how it would
look to visitors. I don't want it
to be at the top. I want it to be in the center. Let's just edit the
layout of the container. Come over here to your
structure section and click on the sub container that
has the image inside. The Part we're looking at here
is to justify the content. This is where we can
say that any content inside a container
can sit at the start, in the center, or at the end. What we're looking
for here is center. I'm going to click that one. That didn't make any change. Why? Because the
image is already in the center of
this sub container. It sat in the middle.
But what I need to tell elemental to do is for this sub container to also sit in the central part
of this container, go back to your
main hero container and then back over here
to justify content. And then click Center. There we go. The logo now sits
in the center of the page. As I scroll up and
down over here, the hero section now works
the way I wanted in. The background
image stays static, but the logo moves down
as a user scrolls. Now the only problem
I can see here is sometimes as a user
scrolls up and down, you can't really
read the logo on top of the background
image where it says Wolfgang Music As
I scroll up and that text is sat on top of
a lighter vinyl record, it's not as readable as
I would like it to be. What I'm actually going
to do here is add an overlay to the
background image. I'm going to add a color overlay that sits on top of the image, and therefore makes the whole
background a little bit darker and therefore makes
text easier to read on top. To do that, make sure
your main container is selected over here in
the structure section. And then come over here to
the left and click on Style. As you can see, the
background is set up how we set it up
before with the image, but we are looking at
the background overlay. Click on that again, you have different options here. You can choose the classic or you can choose the gradient. Play around with it,
see what works for you. But I just want the classic
color, one solid color. I'm going to click on Classic, then you can run an image on top of it, but
that won't work. That will just be a mess
to top of each other. So I'm going to choose a color. I'm going to click over here. You can play around with
color choices down here at the bottom if you're
looking for a red, orange or a green. But I like what it opened
with, with the red. I think a dark red. I think that sums up
roughly who we are. I think it gives it
a nice retro style grab this.in the middle
and then just spin it around and play around with it until you find
one that you like. I'm looking for
like a darkish red. I think that gives
it a retro style. I'm going somewhere in between black and
red, Quite like that. It's a little bit bright. This just go a
little bit darker. Yeah, that looks great. When you choose that,
you can see what appears here is the hex code. That is the exact code
for this exact color. If you want to use
that exact color elsewhere on the website, just make a note
of this hex code. However, later in the class, I will show you how to
set up primary colors. This basically makes a record of every color you've
used elsewhere. And you can just select
it from a drop down menu, but for now, I'm happy
with that color. Let's click back here, The Opacity, where you can
play around with that too. It's automatically set to 50% If I want it full red,
I can choose one, or hardly anything, I
can drop it down to 0.05 then I still
can't read the logo. I'm actually going to take
a back to where it was, which was 50% drag it up to
0.5 I think that's perfect. You have another option
here, Blend Mode. If you use a photo editing
tool such as Photoshop, you'll be familiar with
all of these options here. If you hover over them, you can see what
these options are. Multiply, screen overlay. It just means that the
back overlay color sits differently on
top of the image. So have a play around with these and find one you feel works for you that works best on
top of your background image. However, I think just
a normal one was good. I think that's what
I'm looking for. If I scroll over here, yes, this looks perfect. I'll click on the arrow here
and yes, that looks perfect. That is what I'm looking
for. I can read that logo. I really like that background, and I think the color
of this expresses who we are as a retro music store. Let's just go back and also
as I scroll up and down, you'll see how that now works. And yes, that's all readable now everyone can read
that at Wolfgang. Music Now our hero is set up and we are ready to move on to the next section. However, a little recommendation
for you over here. You have the option
to publish the page. We don't want to do that yet because it's not
ready to go live. If you click on this,
it'll drop down menu. You can see you
have save options. Click on that, just
click Save Draft. That just means the
draft has been saved. It just means that if your
computer crashes or something, you have the most
recent version of it. I'd recommend just
clicking on that every 5 minutes or every
time you do something new, you'd have to go
back and repeat it.
6. Information Section: Now your hero is set up. That's enough to get
everybody's attention when they see that they want to
scroll down and find out more. That's what we're
going to do now. Next you need to add an
introduction section. That's a brief text section that has some important
information about who you are and what you can do for all customers
visiting your website. Let's scroll down to the
next section below the hero, then let's click on the Plus. We're going to add another
flex box container. Inside this
container, I want you to add two different sections, one of which will be text and the other of
which will be image. You'll be adding the text on the left and the
image on the right. You need something with
two different columns. This one is 50, 50 even. Split this one here
where you have a smaller one on the left and a bigger one on the
right. Choose that one. Now you have a container with two subcontainers containers
inside the container. Again, come over here to the structure section,
you'll see what I mean. Click on the drop down menu
and you have a container with the first smaller
container inside and then the second larger
container inside. Now what we want to do is drop an image in here
and text in there. Let's go over to the
plus and add an element. First of all, let's just
get the image widget and drag that in to the larger container on
the right hand side. Obviously, it's just given
as the standard gray box. Again, we'll come back
to that one shortly. On the left hand side, this is where we want to, we're going to add two different
types of text over here. Come back to your
click Add Element. First of all, we're going to
start off with a heading. We'll drop that one in first. As you can see here,
it's gone with the standard default settings for typography and for colors. In the next part of this class, we'll take a look at global
colors and global fonts. And you'll see how to change
this one and therefore, change it across the whole site. But that's okay for now. Below that, we're going to
add a regular text box. Come back up here to
the click Add element. Then from this section
here, choose Text Editor. And again drag it in
below the heading. Next I want you to look
at spacing and alignment. As you can see, this new section sits directly below
the hero section. There's a tiny
little white space in between the two things. If I click on the arrow,
you'll see what I mean. That's not enough space. An important thing
to remember in web design is breathing space. This is the space
around each element. The rule here is quite simple. If you have too much going
on at once, it's too busy. If it's too busy, users don't really know where to look
and where to start reading. You need a simple A to B set up to make that clear
and easy to read. You need empty white space, breathing space
around each section. What I'm going to
do here is change the margins on the
main container. Let's go over here and click on that main container
over here on the left. This is when I need you to
click on the advanced section. In terms of the layout, you have two options you
can play around with. Here you have the margin
and you have the padding. The easiest way to
look at that is the margin is the space outside. The padding is the
space on the inside. We don't need any space on
the inside of this container, we just need space
above and below. Let's take a look at the margin. I'm going to click
on here to top. I'm going to add in a
pixel amount that will sit above and below
this container. Let's maybe try 100 pixels. As you can see, when I did this, it changed every single
section here to 100 pixels. Now there is a margin of 100
at the top and the bottom, but also on the
right and the left. I don't want them to be there. On Elementor automatically has this setting here where
it links values together. What you need to do
is turn that off. Simply click on it,
then go back to the two that you wanted
to go back to zero and right in
zero, left and right. Now I have a margin
of 100 pixels above this container and a margin of 100 pixels below this container. That means that when they
start on the next section, there will be an even space
between each section, 100 pixels up here
and 100 pixels below. Next up, we should take
a look at alignment. Side of design when you
need to make a decision of where everything sits in
relation to everything else. The moment the text is sat
at the top of the container. That's the default
setting from elementor. However, I don't think
that looks that neat. I feel it would be
a better set up if the text was in the middle
of the image on the right. We now need to select
this sub container, the first one that
has the text in it. And you can either click
on this little gray icon in the corner or you can use
your structure navigation. Obviously, we were inside the main container
and we just want to edit one of these
sub containers. Choose the one that
the text inside it. Then the set up here is very similar to what we
did previously. We just need to go
over here to justify content and tell it to be
in the center. There we go. In terms of breathing
space as well, what you want to avoid is things that are too
close together. For instance, here we have text. There's not a big space in between the text
and the image. They're too close to each other, which does make it more
difficult to read. What we want is a little bit
of white space over here on the right hand side
of this container. Again, let's make
sure we're inside this container and
let's go to Advanced. This is where we're going to use padding rather than the margin, because I want space
inside the container. On the right hand side, come down here to this
icon and turn off link values together that
changes everything to zero. Then what we want to say
is a space on the right. I don't want this space
to be anywhere else. I don't need padding at the top of the bottom or the left. Looking at that, I think maybe 50 pixels should be okay there. As you can see, that's moved
all of this text over to the left and it's got a much better space in between there. Maybe it just needs a
little bit more space. So this headline,
one is further away. Let's round it up to 75. There we go. That's perfect. Now let's take a look at the
heading that we have here. Again, to edit this, click
on the heading itself, or over here in your
structure section. Choose heading first up. Well, I want a different
title to be in here here. I'm just going to
write in the name of the company that
works very well, but I need to play around the typography and
the colors used here. First of all, however, look at this one down
here that says HTML tag. And click on the drop down menu. Here you have multiple
different options for a tag that goes behind the text. I'll explain a little more about that in the next
part of the class. However, I'm going to
change this one to H one. That means heading one. The reason I've chosen H
one is because you should always have one H
one on your page. That's the introduction
to your page and that helps people find your
website inside Google. A general rule to play
is make sure you never have more than one H one
for the next heading, make that H two. Now to change the look of this, let's go up to style. First of all, text color, it's automatically
dropped in this blue. But I don't really like that. I don't really think it
suits me as a company. I really like the dark
red that we've got going on up here for this one, I want another color
that sits well. With that, I'm
thinking maybe like a gold, dark bold, gold. What we're going to do is
click on this blue over here. Then I'm going to drag
this one to the left. We go into the more yellow,
goldy, orangey section. I think around there looks good. Then drag this one around. Just play around with this until you find a color that
you think works perfect. I got to remember, this is colored text on top of
a white background. So you don't want something too light because no
one can read it. If you just want straight
black, you can choose that. But again, I want this
gold color for mine. Pick the color that you
think works best for you and the product
you're trying to promote. Let's scroll up.
I like this one. I think that's dark
enough and bold enough. Bright enough. I go a little
bit bolder. There we go. I think that works better
on the white background. Again, they'll give you the
hex color here, say that one. Make a note of
that for later on. Now, typography, it's automatically
picked this font family to be used for all headings. That's a nice font. I think
it's good for the body copy, but it's not what I
want for the heading. I want a bigger bolder
Shouter font in here. Click on you drop down menu. What shows up is a list of all the typography you can
use across the whole website. There are hundreds on here. You can just go through each one and just
try them one by one, but that would take
a very long time. I would recommend finding typography that you
like that you've used elsewhere and that you feel works best with the service you're trying to promote here. I have, and I'm going to just type that in and make sure that it is one of the options here. I really like this
one that's called to. There we go, it's showing up. I will select that.
Yes, there we go. As you can see,
that's a lot bolder. And Shoelier just represents what we're trying to do
with this service here. Further options
you can make here, or you can play around
with the size of this. Again, this is set to pixels. Keep it at pixels,
Then just drag it back and forward just so you can see what's going
to work for you. I want it to be big
and quite bold, but not sit on two lines. Let's maybe go at 40
pixels, then the weight. As you can see here,
there are a lot of different options in sizes. Obviously, the
bigger the number, the bolder the font you choose, 100, that's the thinnest one. But I like what we just had
there with the semibold one. Think bold and
black is too bold, so let's go semi bold. Then you have a
few more options. You can choose upper
case or lower case. I really want upper case here. I think that's even bolder. And sheli, there we go, style. You can have it
normal or italic, But I don't like that
in that represents me. But that does look cool. It's got a bit of a
retro 80 Sl style, but I just going to keep it as normal decoration
under line over line. I don't need any of that, so I'm just going to leave
that as default, which is the non version. That's almost perfect. I
just feel like it needs a little bit of space
in between each letter. What I'm going to
do is go over here to letter spacing and
play around with this. If I just drag it
from left to right, you can see it makes that space a lot bigger and a lot smaller. I want it to just
be a bit bigger, so it's readable maybe
two pixels or 2.5 pixels, I think 2.5 I think that's enough space
in between each one. But when a user sees that, they can see, it says Wolfgang. Music That looks great. I'm going to click on my arrow and just see how that looks. Yes, I think that's a nice flow from the top to
this section here. Obviously we need a little
bit more information and image drop in here. I want to talk you through
how to set up global type and global colors across
the entire website so that if we were to
use this heading again, it would appear in
the exact same color, in the exact same font.
7. Elementor Global Settings: Next I want to take a
look at Global Colors and Typography that is used
across the entire website. To view that, come up here
to the menu and click on this icon here,
Site Settings. First one we're going to take
a look at is global colors. This is the page that you'll see when you open global colors. This is showing us a preview. This means that if you
make any changes here, they will display over here. The other option is off, meaning that if you
make a change in here, you will then see the changes
inside your live website. I would recommend using
that for this stage. From the design point of
view, it's very clear. Over here we have a primary
color and a secondary color. And the main text color. The accent color, well, that's like the extra color. If you don't want to use
the primary or secondary, you can use the accent color. We're probably not going to
need that in this website, but in a bigger website, you may want a third extra color that is used a
very small amount. Now, for the primary and
the secondary colors, I want to use the
two colors that we have used the site so far. The primary I want
to be this dark red, and the secondary this gold. If you remember, when we
set up these sections, we had a hex code. If you've made a record
of those brilliant. If not, come back into
the editor to do that, just click on the X up
here and it's saying, would you like to save
the changes you've made? We haven't made any changes yet. Just put this card now. Let's find those colors
that we set up earlier. The first one was in the
main Hero container. Click on that in the structure, go to Style, go to Background
overlay, and here it is. Click on the Color up here, and you'll see the hex code below Highlights, and copy that. Now let's go back into Site
Settings Global Colors, and go to Primary and
paste it in there. There as you can see,
the primary color has now changed
to this dark red. Click Save changes,
close this window again. Now let's go to
the headline here. Click on the color.
Copy the hex code back to Site Settings
Global Colors. Let's make that one
the secondary color. Now you can see how the
two colors sit together and you can see
that it is a good contrast between the two. The next one I want to
change is the color of text. That's a little bit gray as I
have live text on the page. Let's turn this
preview off again. As you can see, there is
text down here that is using that exact color, 777. It's a little bit too light, I want to make it a
little bit darker. Click on the color, then play around with this
color picker over here. If you want to go full black, drag it all the way down to the far corner and you'll
get the hex code of 0000. However I feel
that's a little bit too dark and a
little bit too bold. So I'm just going to move it up a bit so it's a
little bit lighter. So you go from one
extreme to the other. I think around there,
that looks great. Now, the accent color, again, I don't think I'm
going to use that one, but maybe if I wanted a
third color in there, well, I guess I have to
pick one that would work well with the
red and the gold. I don't know. Maybe
like a dark blue or something. Let's have a look. Purple, I think. Just like a dark blue. I'm probably not
going to use this, but that's quite
a neutral color. That does work well
with everything. I'm just going to leave it. If you need further
colors beyond your primary or secondary
text in your accent, you can add another one here. Call it whatever you want
and then choose your color. But I don't want any more. I'm happy with the four I have. I've pressed to delete it
because I'm not using it. I'm going to choose delete. Now that I have all my
global colors set up, I will save these changes. Now I'll just show you how
these global colors work to ensure consistency
across your whole site. Now that we've saved,
let's click on the X. Let's just choose
any Element Insight. Here I'll text. And then let's click on the little pencil here
to edit the heading. Now we have an extra option. We can choose in here
where it says Text Color. Anytime you need
to choose a color, click on this little globe
icon where it says Custom. That will show you the primary, secondary, the text
and the accent colors. Let's just say, actually I wish that was in
the primary color. I click on that and
it changes to that. It just means that
if I go through the entire website and I want to change the text everywhere, I'm always changing it
to the right color, to the primary or secondary. I don't have to do it
manually. It's automatically. For that. Now let's take a
look at typography. Come back up here to
the site settings and go to the
typography section. This is where we're
choosing the typography and the fonts to be used in
all parts of the website. Again, it just
ensures consistency, saying if this is the size and the weight of our H one heading, it will always be the same
whenever that is used. First up, let's take a
look at the body copy. This is just the main text. Whenever you do large
blocks of text, let's click on the pencil. It's just set it to
a default setting. If you wanted to change that to something else, click on here. Maybe you're like
aerial as a font, or maybe you want a Sera
font to go in there. Again, take a look
through other fonts. Check out Google fonts, places like that to see if
you can find one that you think works for you and the service you are
trying to provide. I'm going to choose one more
Google font that I have used elsewhere that is called Roboto. Roboto. Roboto. Now let's
take a look at H one. That's the heading that we
already set up over here. Let's just copy what
we did for that one, because I know that works there. And it just means I can use that across the entire website. Again, click on the pencil icon. Then rather than default, let's choose to then try to
remember what you did before. Obviously, you can
just go back and then check out the heading
that you put in here. But if my memory
serves me correctly, I think I set that to 45 pixels. Then the weight was semi
bold transforms upper case. And then the other one I changed was the
letter space in which I set 22.5 pixels. That's my one. Now you can play around with
this and you can set up 234. If you have a very
text based website, you do want multiple different
headings because then it's a heading with a subheading
and then sub subheading. However, for this site, I think I'm just
going to look at the H one and the H two. I know what I've set
up for the H one, and I'm going to do
the H two the same. However, I'm just going to
make it slightly smaller. Again, come into H two, click on your little pencil, choose the family and size. Well, the last one,
what do we have? We had 45. Let's just put this
one at, maybe at 30. But the weight, same transform, uppercase letter spacing,
2.5 Play around with this, see what works for you, and you'll find
this out later on. When you're playing around
with H one and H two, if you feel it's not
quite the right size, you need it a little bit bigger
or a little bit smaller. You can come in
here and change it. When you change it once here, it will change across
the entire website. So have a good play
around with this. Get your colors and
your typography working the way you want it
to work for your website. And then click Save Changes. One last thing to check is
your global fonts as well. Yes, we have set
up the body text, and we've set up the
H one and H two. But just make sure that your theme is aware
of which fonts, which typography
you are using here. Let's go back into the Site Settings and
go to Global Fonts. It's just this section
down here that we need to make sure is set up to work the same way as the text we've set up in
the typography section. Click on one of these or
in your menu over here, just click on the pencil. Just make sure
they are set up to the typography and
the fonts that we are using elsewhere
across the site. In this one, let's just
choose Anton for primary, On for secondary then text. Well, that's already set
up to Roboto as is Axon. It just means that the theme
is aware of the fact we are using these fonts
across the whole site. Let's save those changes then
head back to the editor.
8. Image Slider Gallery: Now that typography and
global colors are all set up, let's go and finish this
introduction section. First of all, obviously
we have a title here, but our body copyable, it's just laurum ipsum. We need to add our own
body copy in here. Hover over the text, click on that,
click on the icon, or use your structure over here. You know how to manage
all of this now. Then in the pop up
over here on the left, we are editing the content. Now the text that
has gone in here has automatically gone in
as paragraph text. You can change
that if you wanted to use different elements. So we could choose heading one, then it changes it to heading
one that we set up in typography section earlier
on or heading two. That's what we set
up there as well. However, we just want paragraph, because we just want regular body copy to be used in here. We've chosen the
typography to use for that and we've chosen
the color for that. Just come in here, delete the
text that is there already, and then just start
writing in your text. It is best to write it straight in because
then there'll be no other problems with texts that may have been
copied from elsewhere. But I'll show you
what I mean by that. Rather than writing it out, I've written all the text already and I'm going
to copy and paste it into this box that has
actually come out. Okay, looking at it, however, if you've written this inside a Word document or you've
taken it for an e mail, it may have actually picked up extra HTML code that
is not needed here. It could automatically
change it to different typography or put in different spaces where
they're not needed. If you do have that
problem or if you have any text and you want to clear it so it's safe to use in here. Well, just Google,
a site like this, anything that is
an HTML stripper, obviously there's
loads of ads on here. Close those. If
you just paste in a copy that you want to use on this website on the
left hand side, click strip HTML,
you'll find out that the output on the
right hand side has cleared any unneeded
HTML code in there. I said this one was
already fine anyway, But just in case
I'm going to copy the output and go back to
my site and paste that in. That all looks great. I'm really happy with this set up so far. Is going to click on my arrow. I think that does look great, but maybe I actually
want the image on the right hand side to
be a little bit bigger. To do that, I'm just going
to need to change the size of the two containers
that I have inside here. You remember when we set this up before we made the decision of a slightly smaller one on the left and a slightly
bigger one on the right. If you click on each
of these containers, you choose layout, you can
see the exact size of these. The smaller one is 33.3 then the bigger one is
66.6 it's a third and 23. If I would like to make the image container
a little bit bigger, just click on that
container in structure, come over to width and type
in a different number. Let's say 70, maybe even
bigger than that, maybe 75. I know it's not a
big difference, but I think that works
out a lot better. I like the way Wolfgang and Music are now sat on two lines. Text is a tiny bit
too small though. Just click on the
icon over here. Go on a typography,
Click on your pencil. That's why I actually
set that one as 40, and then in my typography
settings, I said it as 45. I think in my head it
should have been 45, so I'm just going to change
that one to 45. There we go. I think that works
really, really well. I think that's
making better use of the space when you start
creating your own site, just have a play
around with that. It will all come down to how
much text you have here, the length of your heading, the type of image that
you want to use, space. Let's go back to the editor then let's choose the
image that we want to use. Over here on the right, again, just click on the image
over here on the left. Go to Edit Image and then
go to Media Library. I'm looking for
something quirky to go in here that works with
my little introduction. I like this one with
the little LED light. You are what you listen
to. Let's try that one. Yes, I think that looks
great. Let's hide the panel. I think that's a nice flow from the top section to
this section because it's representing the black and the red that we
are using up here. One other thing to check when
you drop in image is over here on the left where it says Edit Image is the
image resolution. Click on this drop down menu and you'll see lots of
different options. The reason you want to play around with this is
you want to get it to the right sides not too
big and not too small. If it's too big, it will slow down the loading
of your website. If it's too small, well, it will just look bad.
Let me just show you. If I choose thumbnail,
it's gone tiny. That's way for this website. Then if I go to this one, the resolution is over 2000
pixels by 2000 pixels, it views absolutely fine. However, it's just too
big for this section, because as you can remember, the width of our website
was 1,140 pixels. It doesn't need to be that big. In fact, the default
setting that it had on was large 1024 by 1024. Just select that if you're
happy with that section. Always good to come up here
and let's save the draft. I think this works very
well as an introduction. However, I think it
needs a little bit more. I think it needs an extra layer. I just don't think
that one image is enough because we do lots of different things at
the music store. I want to show off
a little bit more. There are a few options here. One is to just include
multiple images, one on top of the other,
completely stacked. However I like the space that
is being filled by this. Now I don't want it to take up any more room than
the single image is. What we're going to do is change this single image to
an image carousel. That will be multiple
different images slide from one to the next. To do that, come up here
to your plus add element. Scroll down to the
general section and choose this one
that is image carousel. Then drag that over
to that container. Now when you drag all
these things over, you'll see these little lines that come up mean you can put it above or below something
in between something. Well, this one is to replace
the image that's there. Just make sure you see your
pink line above or below. Let's choose above. Want
this carousel to sit here? I don't actually want this
image to be there anymore. A quick, fast way of deleting this right click, choose Delete. We can do that up here
in the structure. Right click, delete. Now let's edit this carousel. Click on the carousel, or choose it over here
in your structure. That will bring up
the content menu over here on the left. First of all, well, we need to select some
images, don't we? Click on Add Images, It will show you the
media library again, the image that we had there. I did still love that image and I want that to be
my first image. I'm going to select that one. Then I want to include
a couple of images that show the two main things that
we do in this music store. First of all, instruments,
we sell guitars. The third one, I'm
going to choose this vinyl image because we sell music in the store as well. I think three is a
good number for this. Play around with this yourself. See how many you want
to include in there. You don't want too much.
You don't want 100 images. You want to keep it
short and brief. Click over here,
create a new gallery, and then click Insert Gallery. As you can see, the three images of the carousel have
appeared over here. Let's just scroll
down a little bit so we get a better view of this. Or if your structure is getting in the way,
you can move it up. Or if you want to get rid of it, you can close it over here, but maybe just move it over to a side where it's not
getting in the way. Maybe over on this side, but I think it's
actually okay there. I think I've got enough room. First up the image size, again, too small for
what we've got here. Thumbnail, Too small. Let's change that to
what we had before. The large version, 1024 by
104, they've all gone bigger. However, I don't want all three images to
show up at once, I just want one to show. And then I want it to
automatically slide to the next one over here, where it says slides to show. Make sure we're on desktop. Then instead of default,
let's choose one. I just want it to show one
single image at a time. As you can see here, it's automatically sliding
from one to the next. I think that's actually perfect in terms of the speed
and everything. Also as you can see, there
are little arrows here. That means that when a
user comes to the page, they can scroll through
it at their own speed. It gives them both options
automatically showing them there is something else and allowing them to scroll through. In terms of these arrows and these little
dots at the bottom. Well, have a play around
with navigation over here. It's set automatically
to arrows and dots. If you just want the
arrows, choose that one. And obviously the same with the dots, or you
can have nothing. But I like the arrows and dots. Let's just click on this arrow. Hide the panel. I think
that looks great. I think as I scroll
down from up here, I then see this animated
carousel showing me multiple different things that I can expect if I
headed to Wolfgang. Music I think I just want to add one
extra element in here. I just want to
show you how to do another cool little
thing to split up text basically as we have here. We have the header and then
we have the body copy. I just want to put a
line in between the two. I'm going to put in
what's called a divider. This is another element here. And element then choose from the basic section divider and then
just drag it over. And again, remember
the pink lines will show you where
it's going to drop. And I want it in between
the two bits of text. Drop it there, That's
how that looks. It just means there's
an extra split between the two
sections of text. But I don't know, I'm not that happy with
the size and the space. I just have a little play
around with that again, just click on your divider, Click on your pencil icon. Then the first thing you can
play around with here is the style element or has
multiple different styles, some of which are a little
bit crazier than others, that you can have a curly line, you can have curved, or you can go quite crazy
and have fir trees. I don't know what else, Zigzags, There's loads of
different options there. Pick one that you
feel is best to represent your service and your product that
you're selling. However, I think
just right here, I just want the regular one. Just a solid one is good width, I think it's just a bit too big. I don't want it to
go all the way to the edge of the body copy. So it's going to change
it to 50% That's better. A little bit smaller then style. Let's go up here. First
of all, it's a bit thin. I'm just going to up that it's on a single line At the moment, I could just play
around with this and put it up to something crazy, or the biggest is ten. But I think maybe
three is good there. 3.5 Now three, I like three. My first choice then
I just think there's just a little bit
too much space in between the two bits
of text and the line. I'm going to change the gap. That's just the space
around the line. Let's just change that to five. There we go. I like that. That looks a lot stronger now. Maybe it's just a little
bit too dark black. I want it to a
little bit lighter, not stronger than the text. Again, you can choose
a custom color. Choose your primary
color if you want. However, I do still
want a black. So I'm just going to click on the color picker and just
pull it over here to this. Yeah, I think that
was great. Love it. I think what we
need now though is some more information below
this initial introduction, further information about
what we do in the store. Let's go back to the editor. What I'm going to show
you guys how to do here is how grid. Remember in this
upper section we used a container and we had two containers inside
that main container. What it allowed was for different inconsistent widths
between the two containers. We started off with
a three and then 23, and then I was able to go in and edit the width of this one, which automatically edited
the width of this 12. However, for this next section, I want three columns that
are the exact same width. Therefore, rather than
choosing a container, we would choose a grid. Click on the plus
and choose grid. Now you have different
structure options here. The one I'm looking for is
three columns set up this way. However, if what you want can't be seen here, don't worry, you can just throw
in whichever size and then go and
edit it yourself. Later on, I'm just going
to choose three columns. There we go. Now what
we have here is a grid. Inside the grid are
three separate columns. What we want to do is add the same thing into
three of these. What I want it to be is
an image with text below. Let's go over to Add Elements. Again, let's start off with an now below that I
would like some text. Let's go to Add element. And then take your
regular text editor and drop that below the image. Now I want it to go below, but as you can see right now, it's not giving me that option. If I look at where
the pink lines are, it's only on the left and right. If I drop it anywhere, it will actually go
into the next column. That's because you can only have one element inside each
section of the grid. How do we have two things? Well, that's quite
simple. Quite easy. First of all, let's just
delete those two elements. What we need, similar
to what we had before, is basically a container Inside each one
of these columns, I've dropped a container. Because it is a container, it means I can drop
multiple different elements inside that container. This might seem a
little bit confusing, but let's just try that again, what we tried to do before, first of all, I clicked
on add element. Then I dropped in an image. What I'm doing here, as you can see over
here on the structure, is I have dropped
an image inside a container that is inside a
single column of the grid. Now below that image, I just want the
text editor again. Click on a element, then drop in Text Editor. There you go. Now you
can see that has worked. What we're going to do now is basically copy what
we've got in here. What I'm going to do is just
click on the container. I want this exact
container to appear three times because even though they'll have different
images and text, the set up of this is identical. Hover ovie you.
Container right click. Just choose duplicate. What it's done is it's dropped that container in the
next column of the grid. Duplicate again,
and there you go. Now all we need to do is just select image
you want to go on each one and update our text. Let's start off
with images again, these are individual
image boxes. Just click on your
image and then go over here on the
left to edit image. Again, my image choice
here is just to show the variety of services that
we offer at the music store. I'll try and get a different variety to what we had before. This one is very
good because this is more technical side
of music equipment. Let's select that one
for the first column, then for the next one. Let's see what else we can choose that's a
little bit different. I think this one over
here looks great. That's some headphones. That's another service that
we offer in the store. Let's select that then. For the last column, I think maybe this one, which is a live band image, we don't sell live
bands in there. But I think it's just a good representation
of what we can offer to customers to help them
out with their live shows. Let's select that one. There we go. All three images
are the exact same ratio, where they are three by two. So that's working perfectly. All I need to do now is
just add my text again. Click on Text, click
on the pencil icon, or come over here
to your structure. As you can see, we
have a grid with three individual
containers inside it. If you want to the text
inside one of them, drop down that container
and choose text editor. But I just think just
clicking on it on the page is probably
the easiest way. I've already written my text, and I have stripped
any HTML code from, it's going to paste each
bit of text into here. In this section, alignment
is very important. While we have the same
ratio on all three images, the text length is about
the same for each one. You don't want one, that's
just a couple of words. And the next one
being 100 words. Try and keep them roughly
around the same length and then it'll be nicely lined up
at the bottom of the text. Okay, let's take a
look at this one. Hide the panel. I think
that looks great. I think that's perfect
that we're going from this first opening hero section into the slider image down here with the initial
introduction. Then we go into the grid. Only one tiny little thing
that I can see here, this would be a
designer's eye that's picking up on this one if
you spot it. Well done. Just the space, the alignment of this image here and the
alignment of that text. There's an extra
little space there. I'm going to go
through and edit that. Let's go back to the editor. As you can see, when I
hover over the container, there is an extra little
space around here. That is a default setting
inside Elementor. It will always set
it up so that there is a small pixel gap
around everything. A small padding, if you will. What we're going to do
is edit this container. Just going to click
on the container, then go to Advanced. All I want to do
is make sure that the padding section
is all set to zero. There you go. I can go into each
one and manually set it up so it's the same
space around each one. Or a fast way to do it, hover over the container
that you know is correct. Right click copy. Then goes the container
you want to change. Right click there and
choose Paste Style. You can see that
automatically changed it because the style for this container was to
have a panning of zero. It has read that
inside this container, because I've copied styles, pasted the styles in here, it automatically changes
to the exact same thing. Play around with that. Sometimes
that will work for you, sometimes it won't just see
what you can get working. I'm just going to move this structure thing
over here as well. I remembered that I didn't do
that in this upper section. While this one is a lining up here on the left hand side,
this one has the space. So let's just go to edit container or paste
the style again. And there you go. It's just taken out that little
gap around there. And now you can see that
perfectly lines up there, that perfectly lines up there. Awesome. Let's
move the structure back over here and
save the draft.
9. Animated About Section: Okay, your website is
already looking cool. And that was a very good
introduction section. Now I think we need to go into more detail about your
company and your service. I'm going to start creating
a section that I'm going to call the About section. What we'll do here, we will
start adding a new container, Click the sign and
choose flex box. I'm going to two
columns here for this. Now the one thing we're going
to do slightly differently here is the width
of the container, the main holding container. Again, just click
on your little dots in the middle there
to edit container. Then come over here to
the menu on the left. Make sure you have
layouts selected. The one part that
we're going to change here is this part where
it says content width. It normally comes up
automatically as boxed and boxed at 1,140 pixels as
that's the default setting. What we're going to
do with this one, however, is full width. As you can see down here, these internal columns have stretched to the edge before
they were ending here. Now they go to the
very edge of the page. That's what we want
to do with the width. We want it to fill
the full page. Let's also just play
around with the height. Let's just try and make it fill the entire page
with height as well. The best way to do that is come into the drop
down menu over here at the minimum height and
choose VH vertical height. Type in one as that will be
100% The plan I have for this about section is to have another strong image on the right hand side and then
text on the left hand side. What we're going to
do here is change the background to both
internal columns. Let's bring back the structure
window. There we go. This is our main container and then the two smaller
internal containers. Let's choose the container
on the right first, click on that, or click
on the container itself, or the gray box left. Then over here on
the left hand side, choose style in background. Again, click on the classic
one and choose an image. The image that I want
to use here, well, I want this to be
about the customer. I want to show one of our customers inside the
store playing the guitar. Let's drop that one
in. There we go. Let's just move the
structure over there. Same issue that we had previously with how it
is filling the box. Again, these are the
default settings. Come over here to the left
to edit container style. Again, let's just
change the settings in here position,
let's say center, center, repeat, no repeat, and then display size cover. There we go. It's now
filling the entire box. It is quite a strange
crop on that though. I'm now thinking, I
don't need the height to be 100% That's probably too big for the amount of text that I want to run
on the left hand side, let's click on the Dots up
here to Edit Container, make sure layout is selected. And then maybe let's change
the vertical height to 75% There we go. I think that's a much
better display of the image I've
chosen to use here. Now let's move Structure
back over this side. Then let's choose
this container again. Choose it in your
Structure menu, or just click on the
container over here on the left hand side,
choose Style Classic. Now what I want in here is a colored background
because again, that will help the split between the section at
the top which will have a white background
and the section below which will also have a
white background order. With that selected, come
over here and click on this globe icon default. And choose the primary color. Choose whichever
color you want here, but I'm going to choose
the primary color. As I think that's
a nice split from the white above to
a colored section. Now as you can see from the top, we scroll down from this
colored background to a white section to this bold section with a colored background
and a full bleed image. Few things I do need
to change here though is the space between the
section above and this section. And also these weird
looking borders that are around here. If I click on the arrow, let's see how it would look in a live version of the page. Yes, as you can see,
there are still white borders around
each section here. Let's see if we can
take those out. Let's have a look at
the main container. A highlight the main container and choose your dots at the top, or choose it in the
Structure menu. Then over here on the left,
let's choose Advanced. Let's just set the margin
and the padding all to zero. It must have been the padding. The padding was automatically
set to maybe ten pixels. Now that I've set that to
zero, let's hide the panel. There we go. It's now
going to the edge. We've not got a white
space on the edge. If you ever see that
in any of your set up, just play around with
margin and padding in the container or in the
internal containers. What I need is space
above this section, and I'll also need space
below the section. Let's go over here
to margin Again, I'm editing the main container. Let's link the values then let's 100 at top
and 100 at bottom. Let's see how that looks now. Yeah, that's a much better space between this white
section at the top. It's also consistent in
terms of the spacing here, spacing here, and spacing here, that again runs at the bottom. My only concern
about this is that using our very bold
primary color in there, it does work and
it does look cool. But I think I want it to
be a little bit lighter. I still want to split between this section and the white
sections above and below, but I'm just going to play
around with the opacity color, primary color that
I've added in here. Again, let's edit
this container. Click over here on Structure. Click on the container itself. Let's go to Style. This is what we set up with the classic background type
with this primary color. Click on the color itself
over here, the red color. Then this little bar down here that will play around with
your opacity that is viewable. You can just drag it
from left to right. For that, you can
just play around up here with the color picker and choose a slightly
different color, but that's going off brand. We're changing the
opacity of this color. That's still the primary
color that we have set up. It's still the same hex code. It's just the numbers that
are changing next to it, They're essentially
referencing a percentage. Let's just keep
dragging it down. I think I'm looking around
the 20% Maybe this 121, 21% Let me see how
that looks now. I think that's a nice flow from the top down to this section, into the white section
and then into this one. It's enough of a split
between the two colors there, like a separate
section, but it's not too intense,
not too full on. Let's go back. What I would like to drop in here is two separate
text columns. The column on the left,
I'm going to have a number 01 in the next section, below this, we'll
have number two. Number three. Number four, We'll come on to that later. In here, I want
two text columns. One that has a big very bold 01, then another column next to that that has the word guitars, and then some brief information
about the guitar service. We're now going to go
up to an extra level of containers here. We have two containers
inside one container. I now want to put
another two containers inside this container
on the left. Let's go back to our plus
up here and add an element. Let's drop in a container inside this first red container that's
sat in at the top there. Let's add another
container below that here, we now have two containers
inside this container. This would work if you to
set up your text this way, the way it is stacked,
the way we have 01 at the top and then guitars
and the information below. But I don't want it like that. I would like them to be
aligned side by side. I'd like one column on the left and one column
on the right. What we need to do here is edit the container that
these two containers are in. Again, let's go over to our
Structure menu over here. This is the main container then. This, as you can
see, by the way, it is highlighted is
the text container. This is the one that I want to edit, I'm clicking on here. It will then go over to layout. I'm looking at this
section here, direction. This is saying that
anything that is inside that container either runs
horizontally or vertically, as they are stacked one
on top of the other. At the moment that is vertical, I'm going to change
that horizontal. There we go. You can see the change that has
happened there. The two columns are now sat
left and right of each other. Now, I will add 01 to
this column on the left, and then Guitars and the information to this
column on the right. Now we're going to
start adding text to the two columns
that we have here. Let's start with the column on the right. That's
the easiest one. We want to start off with
a heading of Guitars. I'll drop that in here. It's automatically
set it to H two, and that is what
we're looking for. Let's just write in
the word guitars in terms of the color there. Quite like the red,
but I think I just want it to be the
regular text color. I'm going to go
to Style and then click on this Primary button
and then choose Text. I like that. Now let's go to Add Element
again at the top here. And just drop in a
regular text editor. Again, that's just dropped in the standard lurum ipsen text. However, I have a copy of all of the text
I want to use here. The HML has been
stripped from this one, of course, I'm going
to paste that in here. Now what I want is the number one or 01 on the left hand side. We'll add that in
as another heading. Let's go up to add
element at the top here. And drop in another heading over here in the left hand side. Co again it is dropped in
a H two, which is fine. And I'm going to
change that to 01. In terms of the
display I want here, I want it to be sat closer to the text on
the right hand side. At the moment it automatically went in as left align text. But I can change that.
I can make this text, the 01, align to the other
side of this container. To do that, I'm going to scroll down here to where
it says alignment and choose the right hand
side for this perfect. Now in style here, I do want to edit this. I'm going to go up to style. First of all, the text color, I don't want that to
be solid red either. I'm going to click on
the color over here, choose the color picker. And I'm going to actually
select pure white there at that size. It's not particularly readable. Let's go to typography. Click on the pencil icon here. I'm happy with an, I'm
happy with the weight here. It's just the size. This
needs to be a lot bigger. So I'm just going to
drag this one way up. I'm going to get
pretty big on this, maybe even 200, it seems like 200 is the maximum
it will let you go to. It is in terms of using
this drag in bar. If you want to go much bigger, you can just highlight the text in here and write in a number. Let's write in 800. It will go 800, we don't
actually want it that size. 200 was fine, but that is how you can change the size of text to anything you want. Let's change that back to 200. That looks great. I
think it just needs a little bit more of space in
between the zero and the one. Let's play around with
letter spacing again here. Drag it out a little bit. I think I'll go to the end
of the bar here as well. Ten? Yes, I think
that looks great. Let's hide the panel.
I really like that. I like the way we've
got 01 sat here, and then that rolls into guitars and then
we see the image. However, the alignment and the spacing on this
isn't quite right. Let's go back to the editor. First of all, I don't
want the text to sit at the very of this container. I want it to sit in the center. Again, a very quick
way to sort this one out is to say that the whole red container
should be centralized, or all the content inside that container should
be centralized. Again, we can just click
on the red container, click on the gray box top left, or choose it over
here in Structure. Then quite simply, I want to go to this section
over here when we're in Edit Container
layout and say, Align items to the center. Simple as that. Let's
have a look at this. Yeah, I love how that sits
in the center of this box. The only issue we have
is just with how close the text is here to the
image on the right. Let's change the padding. Let's change the padding inside
this internal container. Again, I can go over
to this section, click on the gray box, or choose over
here in Structure. Then over here on the left edit container, go to Advanced. Let's link all of
these sections. Then on the right, let's say
we want maybe 50 pixels, maybe a little bit
more, maybe 100. Let's have a look at that. I think that's a good space in between the text and the image, and this all sits
really nicely together. I think that's a great
flow from up here where we have stacked
images with text below, over to this one where we
have the number on the left, guitars introduction
text image on the right. That looks great.
Just two more things I want to do on this section. One of these is
again, just a bit of verse of designer
headache thing. I just feel like there's too much space in between
the title guitars. And then the text below Open up this container
and we go to layout. That is because as a default, elementor adds a 20 pixel gap in between each column and row. Obviously these are in rows, you can see the space between the two elements
here is 20 pixels. I think that's a
little bit too much. I would prefer it to be ten
pixels. Let's type in ten. There we go. Doesn't look like a big change, but from a designer
point of view, these are the things
that bother us. Now the only other
thing I want to do with this is to animate the
text that we can see here, the 01 and the
guitars information. As people scroll down the page, I want each element to appear in a different way as we're on
the main text container here. Let's edit that one first. Let's go up here to Advanced, then let's go to motion effects. This is where you get to choose what the entrance animation is for this container
entrance animation, meaning when people first get
to that part of the page, this is how it appears. It's set to default
at the moment, which is basically nothing
in this dropdown menu. Well, you've got a lot of
different options here, some of them are a
little bit crazy. If we go down into this one, attention seekers banks,
that's not too crazy. Flash, but then you get
things like head shake, Jello, that is crazy. All I want for this one
is a simple fade in. Let's scroll up to the
top and say fade in. And that's all it will do is someone scrolls down the page, the text isn't there, and then it fades in. You can play around with the
speed at which this happens. In this section here,
animation duration. It's automatically
set to normal, but I felt that was a
little bit too fast. If I choose fast, well
that's super fast. I want it to be set to slow. I like that. I
think it just takes an extra second just to appear. That's the animation I would
like for that section, but I want something slightly
different for the 01. Let's select that container
over here in Structure again. Go up here to Advanced on the left hand side and
go to Motion Effects. I want for this one is I want it to appear from the
side of the page. As this one fades in from
a static point of view, I want it to slide
in and appear. Let's go to this drop
down menu. Here we go. We have other fade in options. We can say fade in down. Where it drops down like that. Left, right up. I think as this element is on the left hand side
of the main text, I want it to fade
in from the left. Yes, I like that. Again, a little bit too fast. Let's change it to slow. Now we have different fade
ins for each of these. Let's save this draft, then let's preview the changes just to see how that
would look for visitors. This is our main opening page. As a user scrolls down, they get to this section
and there we go. Let's just reload that one. Like that, guitars and
the text below appears. And then the 01 fades in. It's subtle, but it's
another way to get attention from your
visitors to your website. Really draw their attention
to what you do as a service.
10. Creative Animated Text: If you have followed all
of the lessons so far, you already have a very
cool looking website. We have this cool hero, then this great little introduction section
with the sliding images. Then the start of our About
section with 01 guitars. What I would like
to do now is set up 0,203.04 I'm going to do it in a slightly different
way to what we have here. I'm going to show you a
cool text animation tool that you may not have
seen used elsewhere, but will look really
cool on your website. Let's go back to the
editor. Scroll down here. Let's add a new
flex box container. Let's choose the 50, 50. Again, 50, 50 is great because it lines
up with the split here between text and image. However, for this one, I don't want to
make it full width, I want it to be boxed. We'll keep it over here in
the layout section as boxed. And 1,140 pixels. What we have inside this main container
is two subcontainers. For each of these,
I'm going to set up a minimum height in pixels. I would like it to be a
minimum of 500 pixels time. I'd like that to be
on both containers. I'll just right click
and copy this container. Go over to my other container, select the gray box, and right click paste style. That just means the
minimum height is automatically
change, 500 pixels. Now what I want here
for section two, section three and section four is similar to what we have here, where we have an
introduction image, a number, a title, and some text running below. Now to split up the
display here on this one, we have text on the left,
image on the right. I want to do the opposite here. Let's start off with
the image on the left. Let's click to Edit
Container again. Click on the container or choose it over here
in your structure. And then go over style back. We're going to use a
background image here, you'll see why in a bit when
I start adding the numbers. Let's choose classic,
choose image. I'm going to go for three
different sections. In this second about section, I'm going to talk
about the records that we sell, all the vinyls. I'm going to talk
about live shows and then I'm just
going to talk about our overall old school vibe that you get by
coming to our store. The first one I want to
look at is vinyl records. I'm going to add this image of the girl searching through
some vinyl records. Let's select that again, the usual settings
over here in style. On the left position, center, center, repeat, repeat,
and display size cover. Again, that just
automatically fits the image to the container regardless
of whatever the ratio is. If it's a square image, if it's three by 24 by three, it will still fit in here
and it is all centralized, which is great for this image as the girl is in the
center of the shot. For the column on the right, I'm going to add a
background color again. Choose a container over
here to style classic. And then I'm going to go color, I'm going to use our
secondary color, the gold. But I want to do similar
to what I did up here with the red and do it
at a lower opacity. Click on the color
itself over here, come to the color picker,
then drag this one down to a level that
you're happy with. I think quite light,
it's gone to one. I like that. I think
that looks cool. Now what I want to do is put the text over here on the right. And to ensure consistency, I'm going to go up
here and I'm going to copy what we have. I'll copy the title Guitars
and I'll paste that in here that ensures it is the exact same size
and it's H two again, I'm going to call
this one records. Then I'll do another
copy of the text here and paste that below
the Word Records. Once again, I have copied the text that I have
stripped the HML from, so I'll paste that in. Now, the display of this. Quite right, the way it's all
set up here in the corner. I want it to be centralized. Again, I'm going to centralize the content
of the container. Click on your container,
possibly over here in structure. Go to Layout, and then let's
center the content that way. And center the content that way. That has pushed everything to the center of the container. The only thing I need to still centralize is this text in here. I'm going to click on the
Text Edit Text Editor, go to Style, and then the
alignment of this text. I want that to be centralized.
That looks great. The only thing is, again, the text is a little bit
close to the edge here. I'm going to change the
padding on this container. Click on your container, choose Advanced. Go
to your padding. I think maybe a 50 pixel edge to everything should be fine. These have all been
linked, so let's put that in at the top and
the bottom as well. That's fine because we
have enough space here. It just means if someone is
viewing the screen bigger, there will still be an even
space of top, bottom, left, and right for the
number however. Well again, I'm going to go
up here and copy this one. What I want to do is paste it on top of the image
you can see here. That's why I've chosen a
background image for this one. Again, I'm just
going to click on the container or click
on the gray box up here. Then paste inside here that
is dropped in the number 01. Let's change that to 02, then let's just make sure
the text is centralized. Then inside the container, again, I want that to
all be centralized. Let's go layout,
send to the content, to the, everything is centered. Now, however, this text, well, two things I
want to change here. First of all, I can't really
see the girl behind it. Let's edit the text box. Click on your pencil icon here. Let's go to Style. Let's go to text Color. Click on the color
icon to the right. Again, let's just change
the opacity of this. I'm going to drop it down now. That looks really cool because
we're seeing a number, but we're seeing it
on top of the image. Something like that works
really well for a number. Number is very clear,
you wouldn't want to do a long part of text like that because it might
not be viewable. But for something like a number, that's just an indication
of what is coming next. I've dropped that down to 73
there. I think that's fine. The only other thing I want is I want it to fill more space. Let's go to typography. Click on your pencil icon here that's currently
set to 200. As I said earlier, that is the highest you can go
with the slider here. But let's put it up
to maybe 400 pixels. Yes, that looks great. I absolutely love that. I think that is a
very bold statement. It tells visitors they are intersection two of
the about section, but I can still see the girl below and see what she is doing. Now the only thing I want to
add here is animation for the title where it
says Records Again, let's just click on the heading. Choose it over
here in Structure, or click on the pink icon. Then let's go to Advanced, go to Motion Effects, then let's just do a fade in. Let's do a fade in down. I really like that. However, this is where I want to show you something
slightly different. There's a very cool, quirky way of making a
title animate in. As users scroll down to
that part of the page, what I want to do is separate the title
into separate letters. The letter, the letter
and the letter C, and make each one of them
animate in a different way. Let's edit this title
and change it just to R. I have chosen the heading, and I will go over here to
Content and change that to R. Then what I want to do
is duplicate that one. I will write the click
and I will duplicate. And I want that to be an, the only issue we have here
is inside this container. If I go to layout, you will see that direction
is a column that is vertical. But I need the letters are to sit next to each
other to run horizontal. If I was to change the direction of this container to horizontal, well, they do sit
next to each other, but now they sat to
the left of the text, and I want them to be on top of. Let's change it
back to vertical. And what we're going
to do here is add another subcontainer
inside this container. Click up here on a element, then drop it in here. When you see the pink line, drop it in above
the regular text. What I want for this container is the direction
to be horizontal. Then I've already
created these letters. Let's just drag them
into this container. Click on the icon and drag down in here till you
see the pink line. And then do the same with
the E. Or another faster way to do this is to use the
Structure menu over here. Because I know that
I want to take this heading into
this container, so you can drag it down there, then it's done it
in the wrong order. Let's move that one
below this one. It sits like that. That looks great. However, I still want it to be centralized. And also I need to
play around with the space that's in
between each element. Here, let's go the container. This subcontainer, again, make sure that everything
is centralized. Also. Let's just play
around with the gaps here. Again, the default is
to set them to 20. We changed it to ten
earlier, didn't we? I still think that's
too big a space. Let's just change it
to zero. There we go. Now let's just make sure we
have the whole word records. Another fast way to do this, come over here to
your structure. Choose your last letter
and then duplicate that. Then over here, write in the
letter you want it to be. Do that enough times
until we have spelled out the whole, that's
the wrong letter. Now that all says records. Now the reason I chose to make this into separate
letters is because I want slightly different
animation on each letter, or at least on
each other letter. If we have a look at
what we've got on the R, click on your R, Go to Advanced. The motion effects.
There was fading down. Now let's go to
the second letter, and then let's change
that to fade up. Then fading down,
D, fading up, down. D, up. Now let's save this
draft and then take a look at the preview again
to see how, how that works. As we scroll down, we
see the animation there, and then this is the
animation there. Let me just reload that
one for you and you'll see the way the word records
appears like that. I think that looks really cool. Now let's just go
back to the editor. Play around with the
size of everything here. Now that we have this
whole 02 section set up, we can duplicate that and do the exact same thing for
section three and section four. Now just a few designer edits. This is again the way
my designer brain works in terms of
spacing and sizes. The first thing I want to
change is just the space in between the title records
and the text below. Let's go to the
main container that this sits in, this one here. Then let's just change the
gaps in here again to ten. There we go. Now the only other thing I'd
like to do here is just make the word record a little bit bigger and a
little bit bolder. I'm going to change the
size of the typography. Let's just start
with the letter R, then let's go to
style and typography. The size again,
it's automatically picked up whatever we
set for the H two, but we can manually
change that in here. Let's maybe say 45. Yes, I think that's
a much better size. Now, the simple way
to change all of the letters here to the same
size would be to write, click, and to copy and
to paste the style. However we want to avoid doing
that on all the letters, because if we do
that, it will also past the style of the
entrance animation. As we have some that are fading up and some that
are fading down, we just need to do it
on every other one. Let's go from R to pay style, then from C to pay style, and from R to pay style. That actually looks quite cool, to be honest, if you like that. From a design point of
view, keep it that way. But I just want consistency
here and make the word records a little bit easier to read. Let's click on the E. And then go up here
to style typography. Make sure that is
45 pixels as well. Copy that one and paste that to the O and the D. There we go. Now I'm very happy
with this section. I think this works great
and works really well. Coming down 01-02 it's
doing the same thing. It's listing all the things
we do in the company, but it's done in a slightly
different, quirky, cool way. By doing that, we will keep everybody's attention
further down the page. But I feel we duplicate this exact style for number
three and number four. That's very easy and
very fast to do. If we just duplicate the main holding
container, there we go. I duplicated that down there. What I will do is make
this one number three and then change the title
and change the text below. Just one thing that's bothering
me here is let's hide. The panel is just this
little space in between each one as we're inside
the same section. I want no space. I want them
to be touching each other. That's again the
default settings that element or has in terms
of padding a margin. Let's edit this
container at top, click on your dots at the top. Come over here to Advanced
and change both to zero. Yes, there we go.
That's perfect. Now, there is no space
in between the two. The only thing I do
want to do here though, is play around with
the style here. The problem is because these are both using the same gold color, they merge into one
that you don't get the same separation as you
would get if there was a gap. What I'm going to do here, it's another cool design thing. I'm going to switch the
two containers around. Let's go to this container
and as you can see, inside the main
holding container, two subcontainers, I'm going to grab the second one and move
it up to be the first one. There we go. Now how this works is I go 02-03 and then 04 will follow the same way
as the one at the top. That would just be a real
nice split of image text, image text, image text. Let's update first 03. This one is going to
be about live shows. Choose your container and then change your
image for live shows. I guess this photo of the
dude with his guitar. Select that because we've
already set up the position, the repeat, and the display
size for the one before. We don't need to do that
again, that looks really cool. First of all, let's just add
in my copy text in here. It's about live performances. Then I need to change
this to say live shows. That all has to
be done manually. So let's go in here and write
out the word live shows. Now a couple of problems here. First of all, there's
not enough letters. Let's duplicate a few letters
here. I need two more. Let's duplicate these two, change them to W. And by duplicating that letter, it just meant that the
animation is now wrong on the W. Let's just
edit that heading. Come up here to Advanced, and change it to the opposite. That should be fade up. Now they all line up correctly. I guess the other thing is well, live shows could
be a single word, but I'm treating it here
as two separate words. I need a little space in
between the E and the S. Very simple to do that, let's select the Go to a. Unlink the values together, and then put a little
bit of padding on the right hand side of this
letter, maybe ten pixels. There we go. That works perfectly. Now let's just duplicate
the very top container. Right click duplicate. Obviously, that's dropped
it in above number three, but I'm going to select the dots here and drag it
down to go below it. There we go. You'll now see how the sections flow
from one to the next. By splitting them up like this, you're getting people's
attention a lot better. Let's edit this
last one down here. Let's make that 04 then. This is going to be the
old school section. Let's container go to
style choose image. I want this image
of cassette tapes. That's very old school. That looks great
with a 04 on top. I've copied my text. Let me paste that
into the text editor. Then I need to change
this one to say old school, same
as we did above. Manually change. Then again, let's just duplicate this last letter
and make that an L. And make sure we change the animation to be the
opposite direction. Fading down. Change that
to fade in up again. Old school. That could
be a single word, I'm not sure, but I want it
to be two separate words. Let's select the D again. Go to Advanced.
Unlink the values, and put in another ten pixels. Now that looks brilliant. Let's save the draft, and then let's preview the page. Let's scroll down. We go into the slider section, Then we have the
animation of 01 guitars, and then as we slide down here, two records, 03 live
shows, 04 Old School. That looks really cool. The best thing about it
is the animation doesn't start until a user scrolls
down into that section. Rather than records, live shows, and old school all
animating at once. They animate when a visitor gets to that part of the page. This is looking really good. Now if you have followed
all of these lessons, you now have your hero, your introduction, and your
full about section saying, we sell guitars,
we sell records. We're great for live shows
and we're very old school.
11. Customer Testimonials: I'm just going to
show you now how to add three more parts. First of all, the
last section of the page will be some
customer testimonials. Then we're going
to take a look at the footer and the header, both of which are important
for every website. Let's just start off
with the testimonials. That's very easy to thanks
to an element or widget. Let's set up a new
section as a grid. And I'd like that to
be three columns. Then let's just
make sure we have a margin around
this one up here. Edit grid, Advanced. Unlink the values, and let's just say 100
at top, 100 at bottom. Again, just same
space that we have between the sections elsewhere. Then let's go up to
add element type in testimonials and then drag
that in to the first column. This is all very easy to set up. I'll just show you
the first one, and then what we can just do is duplicate that for
the other two. Let's just start off
with the first one. Let's start with
the image first, I have images of the three musicians who have
rated our store very highly. Let's start off with this
guy, his name is Jimmy. I've copied his comment. Let's just past
that one in here. The experience is always great. The sales team is
always very helpful and always answering any
requests. Thank you Jimmy. Now we just need to add
his name in and maybe just change the style of what
we have around here. First of all, let's
go down to name. The text color here is red, but I think I just
want that to be the regular text color then title where it
says at the moment, designer, again, I just
like that to be black. I think that just
looks nice and clean. If you want to play around
with this yourself, try some different colors there. Try your primary secondary
colors. Feel free. Let's just go back to content. Let's add in his name,
Jimmy Hendricks title. Well, here's a guitar player. Isn't as simple as that really. Let's just duplicate
this one twice. That already looks really cool, but obviously we need testimony from two
different people. Let me just go to
the second one, edit that, Change the image. This guy here he is
called will drop him in. Copy his comment in change it to guns and roses. Thank you. And then for the last 11 of my favorite
musicians, this guy Wolfgang. Wolfgang Amadeus Mozart. What is Wolfgang said about? Let's paste that one in. Wolfgang has said we are
an excellent store with fast delivery and
very good service and attention to customers. Thank you Wolf. Let's just put in
Wolfgang here and he is under his title,
a classic musician. I think it just needs a
little bit more space in between each one. Let's just go and
edit the grid again. Let's go to layout again. The gaps have been set to an automatic amount
of 20 pixels. Let's change that to 40. That's just added a little
bit of extra space. Maybe 50. There we go. I think that's just better
space in between each one. Now they all line up
perfectly at the bottom. Yeah. As simple as that. It's that easy to
add in testimonials. I think that's a great
way to run through your page that you get
into the about section. This is what we do and these
are customers who loved us.
12. Website Footer: Now the main section of
the website is complete. We're going to look
at two last parts, and that is the footer
and the header. Now the way this would normally work inside elementor
is we would go up here to the icon and we would choose
the theme builder. This means that
we can go in here and we can make a
header and a foot. That means that
that will appear on every single page within our website and it
will be identical. However, we only have a single
one page website Anyway, the other problem is
this is a pro feature, so it can't be done
in the free version. Let's just close this one
and go back to the editor. Now we're just going
to create a foot the same way that we create
everything else on this page. Click the plus icon. Let's choose flex box, and I think double column. What I want here is a map of the location of the store
on the left hand side, and then just more
information, contact details, phone number, e mail address, that thing as this is
the end of the page, I want to finish it off
in a very bold way. I'm just going to make
the entire container, the background of the
entire container, a solid black edit container
style background type. Then in terms of our
colors, let's choose color. There you go. That's filled the entire
background of that. If I go back, you can see it sits down there. Obviously, there's
nothing in there now. But it's just a quite nice
way to finish off the page. First thing I want to
do is drop it in a map. In this section, let's
go up to add element. Again, type in map. Google Maps is what
we're going to use here. And just literally drag
that into your first box. It is automatically set
up to show this location. It's the London Eye,
which in London. However, we need to change that, because our music store
is here in Sydney, and it is on one of
the main streets in the center of Sydney
that's called George Street, and it is number 100. I'm just going to delete that. And then I will type in
100 George Street, Sydney. And let's see what happens. Help to I spell Sydney. Right there we are. Now it's showing the map
to 100 George Street. Users can come here and click directions if they want
to know how to get here. However, it's quite far out. The good thing about this
is you can play around with the zoom just to get an
idea of where it is. As you can see here,
we are very close to the water and very close to the Museum of Contemporary Art. You can also play around
with the height here, if you want 400 pixels,
I think that is great. Perfect. Now over here
on the right hand side, let's drop in the text. Let's start off with a header. Come up here to add
element heading. What I want to say
here, check us out. I think that should be white. Let's go to style color, drag the color picker
into white. That's great. Then let's go to add element and then add the
text editor below that. Again, I've just copied
all of my text to go in here that's displaying
the usual way, but most of the
text is in black. So let's go to style and use the color picture
to change that to white. Also because it is white
text on a black background. I think the topography just needs to be a
little bit older. It's picking up the
standard setting that we have set here which
is just the normal weight. Let's change it
maybe to semibold. Yes, that's much better. As you can see, the
E mail address that I put in here appears in red. That's because it is a link that may happen automatically when you write in
your e mail address. But if not, come back to content highlights the text that you
want to turn into a link. Let's just say I wanted to
do this address as a link, I highlight the text and
then I click Insert. Link. In here I could put
in any website address, Facebook.com and then apply. It just means that when
people click here, it will take them
through to Facebook.com But I do not want that undo. This is the one that
we're really looking at, This e mail address. As you can see, it has gone in automatically with
the e mail address. Before that it has the
words mail to colon, and then the e mail address. This is what you
need so that when users look at this and
they click on that, it will open up
their e mail app. That all looks great. Just one slight change
you want to make to this, which again is the
designer thing. I'm going to go into
style, go into typography. I think there's too much
space in between each line. Let's just drop the
line height to 16. That's better. Then just one last thing
here, or two last things. This container, I want
to be centralized. I also need a bit of space, a little bit of padding
to the left of this one. I will come in here to turn
off link values together, and then I'll add an extra
50 pixels to that side. That looks great. The only thing the
whole container needs is a little bit of space
at the top and the bottom. Let's click on here on
the main container. Let's go to Advanced, Then let's go to padding
and unlink the values. And then say at the top
100 and the bottom of 100. That's just added some
extra black padding around everything there. Let's just see how this looks. This is all looking
perfect so far. Scroll from the hero
into the introduction, into the multiple
about sections, testimonials and then the foot. That's great. Everyone has
read through the page. They're impressed by
what we're offering. They're loving all the
testimonials and now they know where we are located
so they can head over.
13. Website Header: Okay, now let's add the
header to our website. Header may be one
of those sections that you want to start off with. It may be one of the
first things that you do. I personally prefer to
leave this one til the end because then I've
already decided on the style and the structure of everything else on the site. I know exactly what typography I'm using and which
colors I'm using. To add this in, what we need to do is add another
section above the hero. Let's go up here, Click on this, then let's add in a
flex box container. What I want for this header
is a pretty standard set up the way I have the logo sat on the left hand side
and then the nav bar, all of the links and maybe my social media buttons
to the right. I'm going to choose one that is one small column on the left and a bigger
one on the right. First up, what I want to do with this whole container is
choose a minimum height. I'm going to go over
here to Edit Container, Make sure I'm in layout, and I'm going to add
a minimum height in pixels of 100 pixels. Also, I want to go to Advanced. I just want to change
all of these to zero. There's no empty space
around anything there. The height of that is good, but as you can see, it's in a white box that
just sits above the hero. I don't want that. What I want to do is use a white logo and white text
to sit on top of the hero. How do I do that?
Well, as you can see, we have set up this container with a height of 100 pixels. What I have to do is
choose the container below the hero container and
change the margin on that. Let's go over here to Advanced. Let's turn off the
linked values. Now normally what we
would do in this section, if we wanted to add 100 pixels
above it, is right 100. That's what would
happen. You'd have an empty space of 100 above it. But I want to do the
opposite of that. I want -100 You're
going to write that in. Put a minus sign next to
it. And there you go. Now the container above
it sits on top of it. Yes, you can see a little
bit of a white space, but let's just
click on this one. You'll see that disappears. That's just for our
editing purpose. You can't see anything yet. But now the extra
container that we've added in sits on top of
the container below. First thing I want
to do is work on the first container inside
the header container. Let's come over
here to structure. Choose your upper container,
choose subcontainern. First thing again, let's just go to Advanced and change
all of this to zero. There's no empty
space around it. What I want to do is
drop the logo in here. I all come up here to add
element, drop in an image. At first we get the gray box. Let's choose image. What I want to do in here
is add my logo again. Now we've already used this one, which is the more
vertical style. I want the horizontal
style the way I have the icon to the left and then Wolfgang Music
text to the right. Let's choose that. That has dropped
in. However, where did it go? Why can't I see it? The reason you can't see it is because the container below the hero container is actually sat on top of the
header container. All we need to do is tell elementor that the header
one should sit above it. Come over here to Structure. So container, come
over here to Edit, Container, click Advanced. The section we are looking
at here is called Z index. What we can do in here is
put in different numbers, meaning that the
higher the number, the higher up it will be
in the layering system, as we haven't numbered any of
the other containers below, A simple one will be enough in here that has brought all
of this to the front. Let's go back to this section. My logo, well, it's too big. I think the container that
it's in is taking up too much. I think I need a little bit more space for the container on the right, over
here in structure. Go to your second container, then come over here to width, then let's make it a
little bit bigger. Maybe 75% as you can see, that's made the logo
a little bit smaller. In fact, that's still
too big. Let's go to 80. What we're doing here
is we're just allowing a lot more space for a lot
more content in that section. However, I still feel the
logo is a little bit too big. What I'm going to do
is select the image either here in structure
or by clicking on it. Then I'm going to go
to Style over here. And then I'm going to change
the width of the logo. As you can see, I'm changing
the percentage sides of it. I think 50% is enough. The only issue is it's just sat in the middle
of this container, Now I want it to sit to the
left so everything aligns. Let's go back to content and then just align
that to the left. Also, I want it to sit more centralized to this 100
pixel height container. Let's just go to the
Subcontainer it is in. Click on that, go to Lay Out, and then center the content. Now if I press the
arrow, there you go. You can see how that is sitting. Now at the top of the
page, This is all perfect. No empty white spaces. A perfect size logo just sat
there on the left hand side. Now all I need to do
is put my links and my social media buttons
on the right hand side. Let's choose the container
over here on the right. Choose that in structure again, let's just in here. We don't always need to do
that, but as you can see, when I did that, it got rid of the white
space at the top. It just ensures that
in the back end there is no extra spacing that you didn't know
that was there. That may mess up the
view for your users. Next up, I want
to add a nav bar, that's a navigational bar to
the right hand side column. Now the way these things
normally work on websites when there are multiple pages is it will send you
to another page. But as we have a single page, the way these
buttons will work is they will take you down
to that part of the. You will have seen
this elsewhere on single page websites. What we need to
do is add buttons for each section of the website that we
want users to visit. We're going to choose guitars, records, live shows,
and old school. This is very simple to do. Let's go over here to
the plus add element. And we want a button. Let's just drop our
first button in here. It's come up as a
little blue box. Click here on it. Well, first of all, we want
this one to say guitars. Then what I want is basically no blue box or space
around the word guitars. Let's go to style, then let's go in here to normal and hover, obviously for buttons,
you always have a normal version
as people see it. Then when you hover over, it can often change the color
that you see at the top. What I want to do with the normal version is
take out that blue color. I'm going to click on the color, basically drag this one down to 0% Now it just says
guitars on its own. Then the other thing is just
the space that was around, which is what you need with
a solid colored button below was going to
change that padding to zero. There we go. The only thing I do want though, which I think works
very well on websites, is I want something different to happen when a user
hovers over it. At the moment it's
in white text. I'm going to say when a
user hovers over the text, it will change the text color. Let's choose one of
our global colors. Let's choose secondary. They go, as you can see now
just below the gray box, and I hover over the word
Guitars, it goes gold. What I want to do is just
duplicate this button three times for records
live shows old school. So let's go over here
to the structure. Right click on the button, Duplicate, Duplicate, Duplicate. Now obviously as you can see, they're all sat on
top of each other. Again, that's not
working perfectly. Let's go to contain the
subcontainer they are in. Go to layout and change the
direction to row horizontal. Now they all do say guitars. The other issues you
can see is they're all sat there at
the top of the box. What I want to do is
go down here to align items and make sure they
are aligned to the center. Then the other thing is they sat in the middle of the page. But to get balance, I want the logo to
be on the far left. I want these buttons to
be on the far right. Let's go to justify content between start, center and end. Let's choose. And you can
see if I move this down, they are all now sat there. And that looks perfect. That's your standard
display for a nav bar. Okay, now let's go back. Let's change the name of
each one of these buttons. The first one, the second
one should be records. Third one live shows the
last one should be odom. Only last thought there is, I think each button is a
little close to the next one. Let's go to the container again. Gaps and columns is
automatically set to 20. If I want to put that zero, the be right next to each other, I'm thinking maybe
30. 30 looks good. I think that just gives a
bit more breathing space in between each one. Now what I need to do is say where each button
goes on the page. If I click on the button
and go to content, as you can see at
the moment, the link is just a hash tag. What we need to do on this
page is set up an anchor link. The way that works, one
clicks on this button, it will take them down
to a certain part of the page to add an anchor link. Come up here to add
element, type in anchor. Then let's scroll down to the section where you would
like this anchor link to sit, so that when someone
clicks on guitars, it takes them to this section. What we will do is
pick this up and drag it so it sits
above the word Guitars that has dropped
in this little gray box. But don't worry
about the way that looks because that's
not actually there. That's hidden code so that on the arrow you'll
see it disappears. Users will not see that. What we need to do
is give this an ID. That means that we can
tell the button at the top to take
users to this ID. Let's just write in the word
guitars. Simple as that. Then let's scroll
back up to the top. Choose the guitars button, leave the hash tag there, Write in or paste
your word Guitars. Now let's save this, preview the page, and
you'll see how it works. When a user comes to our page, they hover over
these, they go gold. If they click on the
one they want to view, if that is guitars,
it will do that. It takes them down to
the guitar section. The only issue I see here though is it's literally taking
them to that word, guitars. The problem there is because that text is
centralized with here. When it took users down there, it cuts off this image and you
can't see the girl's face. So what I actually
want to do is say, can you take users to just above this box so they can see
everything in one go. Let's go back to the editor. Let's move the anchor. What I actually want is for
it to sit above this box. If I try and drag it up there, problem doesn't actually
have anywhere to go. Let's leave it
there for a second. What I'm going to do is create another empty space
above this container. So I'm going to
click Add Container. Click the plus O box and
just choose the single. Do your standard thing
inside this container. Go to Advanced, put zero
in here and zero in here. Then drag this anchor that you've already set up
into this section. Now you can see where that is sitting is above this section. If I'm to save this preview, the page, you'll see
what the difference is. I click on guitars,
it takes me there. It takes me to the little bit of space above this section, so I can see the whole
section in one go. Perfect. Now let's do the same for the three
other sections. Let's go back to the editor. As that anchor is
working perfectly, we can just come up here and
do a copy of this container. Then let's scroll down
to this point here. Click the plus and then
paste this container in. That has dropped in the
exact same container that we had for guitars with
no empty space around it. Then let's go into the menu Anchor and change
that one to Records. I want to sit above Records, want to sit above live shows, and want to sit
above Old School. Let's just duplicate the
one we have here twice. And then drag them down so they sit above each one
of these sections. Again, because we have set
up 0% margins and padding, so there will be no empty space in between each container. We had records. Let's go
and edit this one here. Live shows and make sure this is all one word, spell
it correctly. Same with the old
school one here. Let's go into this one
and change that to old school, all one word. Then we're going to go back
up to the top of the page, to the now far and make sure all of these buttons
are set up the same way. In the first one we want it
to say hashtag old school. This one Hashtag live shows this one hashtag records and therefore that one
is Hashtag Guitars. Let's save the draft, preview the changes now you'll see when I
click on any of these guitars, takes you there, Records, takes you
there live shows, takes you there an old
school takes you there. That is perfect.
And as you can see here, these two things, there is no empty space, Not a single pixel, not a single line of white
space in between each one. We have the logo set up, we have the nav bar set up. Now we just need to add
the social media icons. So let's go back to the editor. Okay, to add social media
buttons after than a bar. Let's go up here to the
plus to add element, type in social icons. That's what we want
and we want it to live after old school. Let's move structure
down a little bit. By default it drops
in these three icons. Facebook, Twitter, Youtube. They've come in in
this exact style. That's not how I want it
to look because I don't feel that represents
our website. I just want them
to be white logos. Also, I don't have a Twitter
page or Youtube page. I just have Facebook and I
just have Instagram first up. Let's delete the Twitter
one by pressing the X. Same with Youtube. Then add item, comes up
with a word press logo, I don't want that
hover over the icon. Click on that, then it
shows you the icon library. And these are the many
different options you can have for this one I
just on Instagram and there it is,
that click Insert. Now we just have buttons
for Facebook and Instagram. First up the shape
around what it says. Rounded, if you can
see that there. But it's like a rounded square. I just want it to be
a straight circle. Let's go shape and choose
circle much better. My only other issue here is that they're too big basically. Let's go to style, then let's go size and play around with the
drag bar here. I think 18. I think that's big
enough to be honest. The padding, that's
just the padding around the outside of the icon. Now let's go back to content, then let's click on Facebook. In terms of the color, well, I don't want it to
be the official color. I want it to be a custom color. Therefore, I can choose the primary color and
the secondary color. Primary color. Well,
let's make sure that that is white then. My secondary color, I want
it to be our text black. It looks like that. Very
same for Instagram. Click on Instagram color, custom primary color white. Secondary color black. Now we need to do is just type
in the link for Instagram. I'll just paste in my URL. The other thing we
want to do, click on Link Options and then make sure opening new window
is chosen because that will open up a separate
window for this one. Meaning people don't
really leave your website, they're looking at
two separate pages. Both are related
to your company. Then Facebook that in here ensure that it is opening in
a new window and that's it. Now, save the draft and preview. Here we are. The header
is working perfectly. We have the company logo, we have the Navvar with
all the anchor links, and we have links to our
two social media pages. The desktop version of your website is now
fully complete. You have your header.
You have your hero. You have your
introduction section with the sliding images. Then you have the two
different versions of the about section with two different versions of
animated text records, live shows, Old school. You have your three testimonials from the three biggest
musicians in the world. And then you have your
footer with the map and the information for people to find you or get in
touch with you. This all now looks perfect. The desktop version of your website is complete
and it's looking great. Now we just need to make it
work on tablet and mobile.
14. Responsive: Tablet: You now have a
website that looks perfect and works
perfectly on Desktop. However, we need to look
at how it's going to display on both tablet
and mobile devices. This is very easy to edit Elementor come up
here to the top bar. And you can choose
between Desktop, tablet, or mobile editors. It's very important to
do it in this order. Start with desktop,
then go on to tablet, and then onto mobile. Mobile inherits the
changes made in tablet, and tablet inherits the
ones made on desktop. You should always do
it in that order, otherwise it will
break your website. Now we have it
perfect on desktop. Let's take a look at tablet. When we come to
the Table Editor, you'll see that everything is still there in the
same position, but everything doesn't
quite line up correctly. If we scroll through, this hero looks good. It's just this navbar, the icons here and the logo there are too
close to the edge. Then as we scroll down
to this section, again, not enough padding around
the edges of this section, so it's a bit of a weird
display with the text running this far down and the
image being set in there. This one does look pretty good. Again, just needs a
little bit more padding. Obviously these things
that you can see, the anchors, they're
not really there. This one doesn't quite work. Again, with the alignment, it may be better if
the number was on top of the word guitars
in this display. The well, they're
actually very close. I think just the numbers
are too big there. That's probably the only
change we need on this one. But I think that works
well as double columns. Testimonials works
as three columns because it's a short
amount of text. Just need to work
on the padding. And same here, the padding. There's not a lot of
big changes to make, but I'll just show you
a good way to do this, a very fast way to do this. Let's to the top. The main problem we have here is just the padding either
side of this container, the nav bar, the header. Let's click on the dots here
and edit the container. All I want to look
at here is padding. Let's go to Advanced, and we go into padding. Padding here is set up at zero for top, right,
bottom, and left. What I want is an equal amount of padding on the
left and the right. The pixel size I choose
here should be used on every section below just
to ensure consistency. First of all, let's
unlink the values. I'm going to choose 30 pixels
to the left and right. You can see when I
click the arrow, that's enough space
between the two. Just gives it a bit
more breathing space then this section over
here, this does look good. I think the logo is just
a little bit too small. Let's click on the logo. Come over here to Edit
Image, go to style. Let's just increase
the size of it. The percentage,
let's put it up to maybe 75% See how that looks? Maybe a little bit
too big, maybe. I think that's a
good balance between logo navbar and
social media buttons. Cool, that hero section
that's working for me now. It still fills the entire
page as we selected the main hero container to be
at a 100% vertical height. So as you can see, it
goes directly from top to bottom this section. Okay, we have a bit of an issue here in
terms of alignment. The text goes all
the way down here, and then there's a big
empty space at the bottom. First up, let's just take
a look at the padding. Let's click on the dots here
again for edit container. Go to Advanced,
unlink the values, and let's go 30, right, 30 left. Again, that looks good. However, none of this is lining up quite
right, the wolf gang, that isn't really fitting, it's going over the image
and obviously we've got this big padding
space on the edge here. What I want to play around with here is changing
the size of each of the internal columns the way
we had it set up before. It works well as maybe a 20% on the left and
80% on the right. Let's try a 50, 50. Let's choose our first
internal container. Click on Edit Container, or you can choose this
in your structure. Then let's go over here
to where it says width. It's currently set at pixels, change that to percentage, then drag this over to 100% even though I only want it to fill
50% of the space, we still just need the width
on tablet to be 100% Then come over to the other container and do the same thing there, 100% Now that's a
lining up perfectly. There is just a little bit of extra empty space
at the bottom here. That's just because
of the padding that I have on the first column. Let's go back to the
first container. Go to Advanced,
take off this 75. There we go. Now that looks almost perfect, however, it's still too close
to the image on the side. Let's maybe add in 25 pixels
that added it everywhere. Let me just delete that,
unlink your values, and change that to 25 pixels. That almost looks perfect. I think there is just
one issue still. I don't think that
little line needs to be there on tablet. I think it would look better if the text was a little
bit higher up. Let's go back to
the editor then. I'm going to select the divider. Select it here in Structure, or click on it. Go to Advanced, then scroll
down to the word responsive. What we're doing is we're
hiding it on tablet. If I click that one, you can see it disappeared. We have the light lines there. But if I now go to hide, the panel disappeared. That looks perfect. Okay, let's move on
to the section below. Let's edit the container. Let's unlink the values and put 30 to the
right. 30 to the left. That does look great. I just think there's maybe
a bit too much space in between this top section
and the section below. I think it's fine at the
bottom here, just about. But I think these sections
should be a little bit closer. Maybe that's because on
the upper container, yes, I have a margin of 100 at the
top and 100 at the bottom. Let's unlink that now let's
just change it to zero. Let's just go back
to 100 at the top, and then I think maybe 50 at the bottom. Perfect.
There we go. That's a much better display. Now this all fits inside a single page and everything lines up
perfectly. Excellent. Okay, let's move on to
the guitars section. This looks great. I think
to keep it in two columns, it's just the text one over here that isn't
quite working. I think that's because
we have it set up in a horizontal direction. I want to change that to a vertical direction inside
this internal container. Let's highlight this container. Clicking on it. Then let's go over
here to direction. As you can see, this icon
is changed to tablet. If you want to edit any
particular version, you can click on there without having to click up
here at the top. But we're working on tablets, so let's leave it that way. As you can see, the
direction is horizontal. I want to change it to vertical. Let's just click
this. There we go. That actually now
fits in a lot better. A few other issues just in terms of the spacing,
the alignment. First of all, let's go up to this column and add
in some padding here. What I want here is the same padding that
I have on the left of all of the upper
elements, 30 pixels. I would do it on
this internal one, because if I do it on
the main container, it adds a white space. I don't want to do it there,
I want to do it here. But it's still a
consistent depth with all the sections above the. Let's go inside this container, the one that has the 01. Let's just take off any
padding that's there, then click on the text, the heading, and change
the alignment to the left. That is looking great. Think we need to change
the size of this. I think it needs to take up
a little bit less space. First up, let's get this
container. Go to Layout. Let's choose the main
overall container, and then go to Layout. This is what we
have. This was it, we set a minimum
height of 75% there, let's change that to 50. There we go. That's a
much better display. That's almost fitting perfectly. I think maybe a little
bit bigger, 60% yes. Now let's go back to this container and ensure that
everything is centralized. That looks great. Not
a big change there. It just means that
we can still see the full image of the
girl playing the guitar. All of the text is in. I'd maybe even just take out a bit of the padding
next to the text here. Let's go to this internal
container, go to Advanced. As you can see, we set that
up as 100 pixels link, change it to maybe 50. There we go. I think that's just given us a little
bit more space. Above, below, and to
the right of the text. That looks great. Okay, that will bring us
down to this section. As I said before,
I just think big, the number text on
top of the images. Let's just go edit heading
to style, go to typography. Oh yeah, we said it to 400. Let's maybe change that
to half the size, 200. A bit too small, 300. That looks great. I just want to copy
that style and paste it to the
remaining numbers. Right click. Copy style 03. Pay style 04. Now let's just have a look
at how it's all looking. This is looking great. I think that works really well. We still have this section in
the white bordered section, this one with the
red background. And then we go further
down into records, live shows Old school. That looks great.
Just a very fast one on this section here. Let's go to Edit container. This one, remember, is a grid. We set up the gaps in between each one to 50
pixels previously. However, I think
that's probably too big for what we've
got on tablets. Let's change that to 30. Just gives us a little bit
more space between each one. Then obviously go to
Advanced up here. Unlink your values, 30%
30 pixels to the right, 30 pixels to the left. That looks great.
And there's still 100 above and 100 below. Then down here, let's just
click on the container again, Just needs padding on the overall container,
another 30 pixels. All I've done there is I've just unlinked the values which
put it down to zero. To be honest, that actually
looks quite nice I think to have the map all
the way up to the edge, but let's just give
it a little bit of a border around it, maybe 30 pixels all around. Let's link that. Yeah, I think that just gives it a bit more breathing space around the map and
around the text. There we go. That was very fast
and very easy. What we've done
here is we've taken the desktop version
of the website and we've edited it so it
views perfectly on tablet. But there is one other
cool way to check this. Let's just close this.
Let's save our draft, then let's preview the changes. What I recommend doing here is if you're
using Google Chrome, go into the extension section of the Chrome web store
and find this one. The mobile simulator.
Just type that in. It should be the first
one that comes up. It's a responsive
testing tool. Find that. And then the button here
will say install into. It just means that
at the top here in this is where you
have your extensions. When you are viewing the page as it will be viewed
by your users, you can click on this one, then it will show you how it looks on many different devices. This is another tool that does have a Pro version that
you need to pay for. However, if you just want
to use the free version, it's great for that because it covers a whole bunch of mobiles, at least four or five tablets, and then a couple of
extra ones there as well. Even an Apple watch series six. The one we're looking at
here is the mobile one. We haven't edited that yet. Let's go over to the
tablet section and see how it looks on ipad Mini. Well, that looks perfect. Yeah, love it. Perfect.
That's still sliding in. The animation is working. Oh yeah, that looks great. That looks absolutely perfect. On tablet, that was great. Ipad Mini four. Ipad four
also perfect. Same thing. Ipad Pro 11 also perfect. Same thing. Then a
Galaxy, Tab seven. So that's an Android version, also looks perfect on that. It's great if you just
go into the editor, get it looking perfect there, but then play around with
this extension just to see it is working perfectly on a
number of different devices. If you look at something
like this, okay, I don't think I'm
seeing enough of the girl here on that device. You may just want to go in and play around with
the spacing here, because it looks different here as it does on that device. Just use the extension to have a little play around and make sure it works perfectly on all devices that you
can view inside here.
15. Responsive: Mobile: Now let's go back
into the editor and take a look at
the mobile version. Click up here. Now this nav bar, this one looks a little bit
more difficult to play with. Let's go to the container. Let's first of all play
around with the spacing. Now the padding
there is still set to 30 on the left
and 30 on the right. That's also good for mobile. Let's keep that the way it is. The main issue we have
is just the alignment of it will no longer
fit in a straight line. I think we need to stack it. Let's just say we have
the logo at the top, then the navbar below that, then the social media
buttons below that. This is what I'm going to do. First of all, I'm going
to take this container that has both navbar and
social media buttons in it, and I'm going to duplicate it. Then I'm going to go into the second version
and I'm going to delete all of the
buttons that we put in here because they
already exist above. Then I will go into
this container and I would like the
content to be centered. We have two, lots of
social media buttons. This first one is only
going to appear on mobile. Again, let's click
Edit Container, Go to Advanced, go to
Responsive, turn it off. Hide it on both
desktop and tablet. That just means when I
go here, it's not there. And if I click on this arrow, it goes back to how it was
previously same on tablet. See it there in the editor, but it's not really there. And you'll see that when
you preview the page. Also these social
media buttons should no longer appear on mobile. Click on the social
media buttons, go to Advanced and
hide on mobile. Now all we have is
the text in there. Obviously, it's difficult to see where everything
is at the moment. But let's just go in to
edit this container. Then we have a gap of 30 pixels in between
each of the buttons. Let's just quickly
change that to zero. Now you go. Now we can see everything together
at the same time. Obviously each of those is
too close to each other. Let's just say five
pixels, maybe ten pixels. I think that's enough
space in between each one. And again, just play
around with this when you look at it
on different devices. You may want to make the
text a little bit smaller. Let's just go into typography. Maybe set it to 14 pixels, that's a bit smaller. Do the same on all of this, will come down
to whatever content you have on your website. Just have a little
play around with that. And if you have a problem
getting everything to fit, just send me a message
and I'll let you know how to stack it on
two different levels. What I also want is all of this text in here
to be justified. Basically, I want the content
to stretch out to the edge. As you can see, old school, that goes to the edge of the box here, but Guitars does not. I can't left align it
or right align it. What I'm going to do is
go over to this section. I'm editing the container. Then in justify content, click this one that
says space between. Then it spreads it all out. Looks great. Now this is almost
looking perfect, that we have the
text here and then we have the two social
media buttons below. It's just that logo that's
just a bit too big. Quite big. In fact, let's click on the image either in structure or clicking
on the image. Let's just change the
size of much smaller, maybe like 35% maybe a
little big 40% then well, it should be centralized. So if I go to Content
Alignment Center, now if I click on the arrow, in terms of stacking, that all
works really, really well. I have the logo, then
I have the navbar, and then I have the icons. The only thing I think I
want to do here is make these social media icons
a little bit smaller. Maybe space them
out a little bit, then I just need to play around with the space around
everything here. Obviously, the logo is
too close to the top. There's not enough space
in between logo navbar. Social media icons. Let's go back into the editor. First of all, let's take a
look at these social icons. Let's go to style then. The size is 18, let's
just change that to 14 then All I want to play around with is
the spacing between each one. Probably this one spacing, yeah. I'll just drag it
out a little bit. I'll set that to also to 14. Let's see how that is looking. Yes, that's much better because
they're separate buttons, You need to press
them separately. Let's the container again. Let's go to Advanced. Let's just change all
of the padding to zero. Now what I want to do is
add extra padding on top. Maybe 30 all around,
to be honest. Let's say if that is at the top, on the right and on the left, let's see how that is looking. That's working a lot
better in terms of space. However, there is a white space at the top, we can work on that. Let's also take a look at the overall holding container and change these gaps
that is now set to zero. Let's put ten and
see how that looks. Yes, that's perfect.
We now have ten pixels in between the logo
and the nav bar, and in between the social
media buttons below, It's just this white
space at the top. Why is that happening?
It's happening because we've told the minimum height of this section to be 100 pixels. However, it's bigger than that. Now because we are
stacking everything, let's click on the
main container. Go to Edit Container, go to Layout, change
it to 150 pixels. Then let container below
the hero container. This one here. Let's change that in Advanced, 2,100.50 Make sure
they're not all linked. 150 and then let's -150
and see if that works. That does work. There we go. Now that is perfect, isn't it? We now have a nice empty space. At the top we see the logo, we see all of these Nav bars and we see the social media icon. That looks great.
Just two other things that I have noticed here. In this mobile view, isn't the problem in
the tablet view or in the desktop view is the position of these two customers and the position and
size of the logo. When I go to the
mobile one logo is too small and you can't
really see the people. Let's just play around
with those two things. That is, again, in the main
container for the hero, we are on the container, Let's go to style, let's go to background, and we are looking
at the image here. Now what we need
to do is position. We have the choice of center, center, which is what we had. We can choose center
left too far to left, center right way too far. Or the best one we can
choose here is custom. Because with that we
can play around with the X position and
the Y position. Let's play around with this X position and move
it a little bit. Obviously, I don't want to
move it too far to that side, I just need it to be over here. Let's just say even if
it's -200 minus 150. Sorry, 250. There we go.
I think that's great. So you can see there's
two people looking there and they are
looking at the records. So let's now make the
logo a little bit bigger. So click on the icon, click style, and here we go. Width, We have it set to
15% maybe go up to 25, 30. Let's see how that
looks. That looks great. Now we can see that
there are people looking at the
items in the store. Our navbar, our header
works perfectly. Everything's lined
up, and we can see the main company icon. Awesome, let's save this draft, then I've come into
the extension, and here I am looking
at Apple smartphones. So this is the iphone 13 Pro. Max looks great there. Regular Pro also looks good. Everything's lining up.
I can read everything, I can navigate everything. And it's filling
the full page for each one that looks perfectly. Any little changes like
that that make sure you come into the extension
and check it in there first. Okay, back to the editor. The top section is working. Let's see what
we've got here now. Okay, what's happened with this section is it
has changed it from the horizontal direction to a vertical one that is perfect. I think that works
absolutely perfect there. Rather than trying to squeeze in both things next
to each other. The title Wolfgang
Music and the text sits above the sliding image. Only thing I think
I want to change is just a little space on
this side of the box, just so the text runs
all the way to the edge. Let's click on this container over here on Edit container. Go to Advanced, take off
that 25 pixel space. There we go. Not a big change, just means that the text are lined up with the image below. That works perfectly. These ones below, actually,
they're already perfect. It's done them automatically
stacked anyway. Element or can read what
you might want to do on mobile and make that happen automatically.
That's great. No work needs to be done there. Now this one. Okay, that's
nearly there, but not quite. Stacking it again, as we've
done above, that's perfect. I think that works really well. However, the spacing
isn't quite right. I can't really see the image
below. We need to fix that. Let's go in here. Let's
click on the container. Go to Advanced. What we have here is
padding of 30 to the left. Let's link them all and
make them all 30 there. We just get a little
bit more space above the 01 and a little bit
of space below the text. Then the only thing I want to
do is on this subcontainer, take off the spacing
over here on the right. Click on this box Advanced, take off that 50 pixel too easy. That works great. The only thing that isn't working obviously, is I can't see that image. It is there and it is the
background of the container. The reason it works
before was because we had two columns that were
laid out horizontally. Therefore, the height
of one of the columns was also represented with the
height of the next column. That's not happening now
because they are stacked. Let's just change the minimum
height of this container. Click Edit container, come over here to lay
out minimum height. And let's just play
around the pixels here. Maybe 400 pixels, maybe 500, maybe somewhere in
the middle, 450. There we go. I'm
happy with that. It just means that people, when they come to
the guitar section, they'll scroll down,
they'll read about that, and then they'll see the
girl playing the guitar. Perfect. Now these ones, 02
records live shows 0304. Look, I think in terms of
the spacing of all of those, they're actually
working perfectly. There's just one obvious problem in here
because now that the, I want it to run from
02 into records, then I want to see
the 03 image in here. It's very easy to fix. What we have here is the overall main
container that has the text for live shows
and the image with the 03, they are organized
in the regular way. This is saying row horizontal and it's saying
from left to right. All I'm going to do is
go over to this arrow on the side that says
column reversed. And just click that.
Then there we go. Too easy. The 03 has
jumped to the top. However, the anchor
that's still above it, that hasn't moved because we didn't put that above the text. If someone clicks on the
anchor when they're on mobile, it will still go to this 03. Let's just see how that
section is looking yet. That flows nicely
from 02 into records. 03 live shows perfect. As I was saying,
that only changed the display or the layout of
that container on mobile. If I go to tablets, still the same way
it was before. Opposite, opposite.
Desktop, same way it was before.
Opposite, opposite. You'll notice as I go
back to check these ones, there have been no
changes at all. As I said, they are
inherent in this order. What's done on desktop
is taken into table. What is done on table
is taken into mobile. No changes that I make on mobile should have any effect on
anything on table or desktop. Make sure you do check them because something
may approach you. Let's go back to mobile.
Nearly done here. Let's see what we've got. Let me be honest, the
testimonials, perfect. I don't even want to
play around with that. And then this section
at the bottom, that's almost perfect, just
of the black space around. That is literally
just the spacing, the padding over this side and the spacing above checks out. Let's go to that container, click Edit Container,
go to Advance. You know how to do
all of this now take off the left padding, and then at the top,
let's just say 50 there. That was 65 and
they're all linked. Did a few things wrong there. Let's unlink those and let's
just say at the top was 50. There we go. If you look at that, that's
working perfectly. And that was quite easy to fix because we'd set
it up a good way in desktop that was
easy to edit and then we were able to edit that
on tablet nice and fast. Then make the changes
that we made, our tablet also appear
the same way on mobile. Again, just save it, then let's preview the changes. Let's just see how
that is looking. We're already in a
mobile version here. Top section, perfect. Scroll it down, Wolfgang. Music Even because this
is a thicker phone, it actually spread it out. The words Wolfgang. And Music
That looks great. Perfect. Perfect. Perfect. 01 guitars
image viewing perfectly. I can see her, I can see
the guitar 02 records. Still got the animation
on here as well. That has followed over from desktop two tablet to
mobile live shows, old school testimonials
and then the footer. You now have a complete website. Something that has each
section put together and something that
works perfectly on desktop, tablet and mobile. Let's make it live.
16. Make Your Site Ready to go Live: Okay, so now we are ready
to make your website live. As you can see at the top here, it still says that it is
a draft to change that. Just come over here to the
right and click Publish. When that has finished,
come over here to the left, click on the E and choose
Exit to Wordpress. Nothing you need to
look at on this page, just click on the
Wordpress logo. That will take you back
to the pages set up. The page that we're
using, Wolfgang Music you now will see is live. It does not have draft at
the end of it anymore. One little change we
need to make though. This is going to
be the home page. Click on Quick Edit, The Slug, that's the name
that comes after the URL. When you have multiple pages on your site, it would be a URL. Contact blog. This is the home. We just want to call it home. Let's go update. Then we need to say that this is going to be the home page. Click over here on
appearance and customize. Then choose Homepage Settings. You have the choice here of your latest posts
or a static page. We want a static page which is going to
be Wolfgang Music. That will automatically change. This is all now
set up and this is your home page that everyone will visit when they
come to your site. Once that's all done, click Publish, and you're ready to go.
17. Domain Name Set Up: So the test version of your
website is all set up. Now if you would like
to make it live, I'll show you how to
do that in Word of phi and how you can
change the domain name. So come back into Word of phi, make sure you're on sites. And then click on
the little pencil. I click here to upgrade. As you just have a single site, make sure you
choose this option. As we made it very
small website, you'll need the
small option here. Choose monthly, yearly,
whatever you'd like to do. And then choose to update. Then when you have added the credit card details, That's it. Your website is now live. And it's using the URL that
was set up when we set up our worried if I can't make you happy with that,
leave it that way. However, if you would
like to change it, come to hosting and domains. And in here you can
add a new domain, but this has to be
purchased elsewhere. And it can get a
little bit complex, a little bit confusing
to set that up. However word, if I
have great support. So click on this icon. They may have information on
what you need right here. If not, just send them a message and they will
talk you through it. Either way, if you want to use this URL or your own personal
domain name, that's it. You now have a live website. So click on this one. You will see your
full website fully live and you can show
everyone around the world.
18. Thank You: Thank you for taking the time
to watch this whole class. If you followed every lesson, you now have an amazing looking website
and you know what, I want to see this website, you can load it up here in
the project section below. If you pop it in
there, I will give you my full feedback as
soon as possible. If you have any questions about anything in any
of these lessons, post them in the discussion
section also below here. When you have
finished the class, it would be great if you
could leave me a review. Come in here to
the review section and click Review. This is great. As you can tell me what you
really liked about the class, but also what can be improved. And that will help
me edit any part of the class I think will be
better for my next customers. And make sure you
click on my name below to see my full
skill share profile. In here, you will see all of the other website classes
that I am running. We have one on building a portfolio, also
using elementor, and another one on what
to do with images, how to upload them and get
the most out of your website. You can go and watch all of those and make sure
you follow me. So you can see as soon
as I am uploading any new lessons and you can
learn a little bit more. Awesome. Have a great day.
Jon Wolfgang Miller, Digital Graphic Designer
