- Hi there, my name is Simon, and in this video I will show you how to set up a WordPress
website using Hostinger. In the first part of this video, we will set up your Hostinger account and we'll make sure to
choose the right plan for your WordPress website. Then we will choose your domain name, which could be yourname.com
or your company name.com, whatever you want. And once we have that,
we will install WordPress and we will learn how to use WordPress to build and customize
your website step-by-step. We will only be using free tools to build and run our website. So the only cost we will have is hosting. And don't worry if you
have zero experience when it comes to building websites, I will take you through the
entire process step by step. So by the end of watching this video, you'll have all the tools and all the knowledge to build a beautiful and fully functional WordPress website. Let's get started. All right, so the first
step is going to be setting up your Hostinger account and to make sure you get the
best deal with Hostinger, or I recommend to click on
the first link down below in the video description. This is my personal referral link, which will enable you to
get an additional 10% off of the already discounted
sale price of Hostinger by using my promo code. So once you click on that link, you should get to this page right here. And once you're here,
just click on claim deal and this will take us to
the different hosting plans. Now, the plans that I would recommend is either the premium
plan or the business plan. Now the difference between
these two plans is mainly the CDN feature, which you
get with the business plan, which will mean that all
of the data of your website will be stored on multiple
servers across the globe, which will increase the average
low time of your website and therefore you're gonna
have a higher performance. So if you want to get
the best performance, I recommends to get the business plan, but if you have a bit of a lower budget, the premium plan is also a great choice. So for this video, I'm just gonna go ahead and choose the business plan
and click on add to cart. Then here on the next step, we're gonna have to
choose our payment period, which means how many months in advance we're gonna pay for our hosting. Now the more you're gonna pay upfront, the cheaper it's gonna be on average. So the cheapest option
is the 48 months option. By choosing this, you're gonna
pay for four years of hosting and you're gonna pay 3.99
per month on average. And after those four years, it's gonna renew at 8.99 per month, which is also lower compared
to the other options here. So for this one, you're gonna
pay for 24 months in advance for 4.49 per month, and then it's gonna
renew at 9.99 per month. So if you have the budget and you know that you're
gonna be using your website for multiple years, I recommend to go with
the 48 months option. But if you have a bit of a lower budget or you don't know how
long you're gonna be using your WordPress website, then you can also choose one
of these other options here. Just keep in mind that
for the one month option, you don't get the free
domain for the first year, and you also have a $5 setup fee. So I don't recommend to go
with the one month option. I would go with the 12 months option if you have a bit of a lower budget. Now I'm gonna be using
this Hostinger account just for this video, so I'll just choose the 12 months option and then move on to the next step, which is creating your account. Here just type in your email
address and choose a password, and then we can move on to the last step, which is choosing your payment method. But before we do that, let's
scroll down a bit further and click on have a coupon code. Here you can enter my coupon
code, which is MEDICSMEDIA, and once you click on apply, then you can see that
you get an additional 10% off of your hosting price. So once that's done, you can just choose your
payment method right here, enter your information if you want, you can also do that later and just leave these things empty. But then just enter your
payment information down here and click on Submit Secure Payment. Great, so now our hosting
account is created and after that we get to
this onboarding sequence of Hostinger. Now we can all do that
ourselves in the dashboard. So let's save some time and go straight to our Hostinger dashboard by clicking on the Hostinger
icon here at the top and then click on leave. And this takes us into
the Hostinger dashboard. Now here, there's a few things we wanna do to complete our setup. So the first thing is to
verify our email address, the one we have used to
sign up for Hostinger. So just head over to your email inbox and then you should see
an email from Hostinger called Verify your email address, just click on this email and
then click on verify email. And this takes us back into
our Hostinger dashboard so we can just close the
other two tabs up here because we don't need them anymore. And the next step is to
set up our domain name. So the domain name is just
the name of your website, like for Apple, it's called apple.com. For Facebook, it's facebook.com. And we also want to
have our own domain name for our website. And because we have chosen a hosting plan of 12 months or more, we can get a free domain
for the first year by clicking on claim domain right here. And then here we can look for the domain that we want to get. Now, for example, if you're
gonna create a personal website, it could just be your name.com or if creating a website for your company, it could be your company name.com. In general, I recommend
to keep it as short and as simple as possible. Maybe something that's easy to remember. Now sometimes it's gonna be hard to find the domain that you actually want and then you're gonna
have to be a bit creative. Something you could also do
is change the domain extension here at the end. Usually I recommend to
go with a .com domain. That's what people are familiar with. So this is something that I would prefer, but sometimes maybe when your
personal name's already taken, you can also choose a .nets domain. But like I said, I recommend
to go with a .com if you can. Now my personal website will probably be called medicsmeda.com, but I already have that domain, so I'm just gonna add a one and look if that domain is available. Now we can see this one
is domain is available, so we can actually purchase it here or we can get it for
free for the first year. And in general, I recommend not to use any numbers in your domain if that's not part of your brand name, but this is just for this video. I'm not gonna be using
this domain any further after this video, so I'm
just gonna be choosing this one right here and
click on claim domain. And then to finish up
the registration process for your new domain, you're gonna have to enter
some contact details of you if you're creating a website for yourself or of your company if
you're creating the website for your company. So just enter all of your details and move on to the next step. Once that's done, we should
get to this step right here. So let's click on continue, and then we can see an offer for hosting, but we already have hosting, so we can just ignore this and click on Skip, I don't need a website. So now we're back in
the Hostinger dashboard. And here under Domains
we can see the domain that we have just registered. Now to complete the registration process, we want to click on our domain, and then here we can see that there's a pending verification. This means that we also need
to verify our email address for the domain as well. So go to your email inbox, and here you should be able
to find an email that says, please confirm your contact
details for your domain. So let's click on it and then here we just click on this link. Then here we want to
confirm all the information by ticking all of these
boxes and click on submit. Once that's done, we can
close both of these tabs and go back to our dashboard. And here, let's reload the page. And now we can see that the
email verification status says verified. So now we have successfully
registered our domain and we can move on to the next step, which is installing WordPress. So to do that, we're gonna click
on hosting in the top menu, and then you should see our
hosting plan right here. Here we want to click on setup. And then here we can save some time and just skip all these questions. So let's click on Skip at the bottom. And here we can choose how
we want to build our website. So we can use WordPress with AI or we can use the
Hostinger Website Builder, which is their own product of Hostinger. And I've already created a video on how to use this Website Builder. So if you're interested in this one, I'll leave a link to this
video below in the description. But as this video is all
about using WordPress, we're gonna stick to WordPress with AI and click on select WordPress
at the bottom right. And now we have to create
our WordPress account. This is gonna be the
account that you'll use to log into the backend
of your WordPress website. So you can just use the same email that you've used for
your Hostinger account, choose a password and click on Next. And now hosting already wants to install a theme to our
new WordPress website, but for now we just
wanna install WordPress and we're gonna take care of
installing a theme later on once we have installed WordPress. So for now, we're gonna skip this by clicking on Skip here at the bottom. And then the same thing
here with the plugins. We don't wanna have
anything pre-installed, so we're gonna choose, no, I want to select plugins
manually and click on Next. And here, let's just
deselect all of these plugins that Hostinger wants to install
to our WordPress website and click on Skip. And here the same thing, we don't want any pre-generated content. So let's click on Skip. And here we can select the domain that we want to use for
our WordPress website, which again is just a website name. And here we can see this is the domain that we have registered before. So let's click on it and click on next. And here we can choose the server location of where our website files will be stored. Now in general, it's
best to keep the server as close to your website
visitors as possible because this will reduce the
loading speed of your website. So personally, I live in Switzerland, so the best place for me
would probably be France, but I've chosen the business hosting plan, which has multiple servers
anyway for my website. So probably doesn't make
that big of a difference. But if you've chosen the premium plan, then I recommend to just
choose the server location where you live or the
closest to where you live or where your website visitors will be. So if your website visitors
are mostly in Europe, then choose a server location in Europe. If it's in the United States, then choose one in the United States. So I'm gonna choose
France and click on Next. And now WordPress is being installed. So now WordPress has been installed and we are back in the Hostinger dashboard for our new website and before we move on and go to the actual WordPress
dashboard for our website, I wanna quickly check
if the SSL certificate is installed on our website. So let's go to the left side
menu and click on security. And then let's go to SSL. And here we can see
that the SSL certificate is installed on our website. This is basically the lock
icon next to your website, URL, making all the connections secure. So it's very important that this is installed on our website. So let's head back over
to the dashboard here and then to actually go to WordPress, let's click on admin
panel at the top right. And this takes us into
the WordPress dashboard for our website. Now this is the backend of your website, so you're gonna come here a lot
while building your website. And also in the future, whenever you wanna change something, you're gonna come here into
the WordPress dashboard. So while building and making
changes to your website, you'll be using your
WordPress dashboard a lot. So it's very important
that you have a very quick and easy way to actually get
to your WordPress dashboard. We've already looked at one way, which is just through your
Hostinger account right here. So when you log into Hostinger, you can just go to your websites and then here for your website, we can just click on admin panel. And this will take us to
the WordPress dashboard, but there's actually a quicker array, which is just to open up your browser, then type in your website URL for me, this is medicsmedia1.com,
and then at the end, after the forward slash type in wp-admin, and then hit enter. And this will take you directly
to your WordPress dashboard. Something that I recommend is to just create a
bookmark for your website or for your WordPress dashboard by just dragging this website's URL to your favorite bar here. And then you can just click on it and this will take it directly
to your WordPress dashboard. All right, so now let's take a quick look at what our website currently looks like. The easiest way to go to your website once you're in your dashboard is to come over here to your website name and then click on visit site. And this is what our website
currently looks like. There is just some default content on it that basically comes with
every new WordPress website, but in this video you're gonna learn how to change every part of your website and you'll be able to create something that looks much better than this. At the top of our website, we can see this WordPress
bar here with a few options. And this is only available
once we are logged into our WordPress admin account. We can log out right here and
then this bar will disappear and we will just be another
visitor of our website. But whenever we see this bar,
when we go to our website, we know that we are logged in and that we can make
changes to our website. We can also just go back to our dashboard by hovering over our website name and then clicking on dashboard. All right, so before
we're gonna get started building our website, we first want to go through some things in the WordPress dashboard and just delete some
things that we don't need because when you create
a new WordPress website, it usually comes with a
lot of pre-installed things like plugins, some default pages and posts and we don't really need them and they also kind of
slow down our website. So we first want to delete them and then start from complete scratch. I'd like to start here
in the dashboard area where I like to disable
all of these windows, which again just makes
things look less confusing. So let's click on screen
options here at the top right and then just uncheck all of these windows and make them disappear like this. Then let's go to posts. And here we can see a
default Hello World post on our website that we don't need. So we can just click on
bin to delete this post. And then to permanently delete
it, we have to go to our bin and then we can just click on Empty Bin. So now this post is permanently deleted. Next we're gonna go to pages. And here we have a default
page, a privacy policy page. We do the same thing here. Just click on bin and then go to our bin and click on empty bin to
permanently delete this page. Then let's go to plugins. So plugins are essentially just extensions to your website that allow
you to have more features. Just like for your smartphone, you can download different
apps for your website, you can install different plugins. So you want to avoid having too
many plugins on your website because it kind of
decreases your website speed and it makes things
overall a lot more complex. So later on we're gonna
install a few plugins that we need to build our website, but for now we're just gonna delete the ones that we don't need. And I'm gonna delete these
two Hostinger plugins. These were just installed because we are using Hostinger to host our WordPress website. While we don't actually need them, I'm gonna keep the LiteSpeed Cache plugin because this makes our website faster. So we first have to deactivate the plugins that we want to delete. So let's just take both of them here. Then go to Bulk Actions and
click on Deactivate and apply. And then you can see
the background changed from blue to white, which means that now these
two plugins are deactivated. And now to permanently delete them, we have to select them again,
then go to Bulk Actions, click on delete and apply, confirm. And now both of these plugins are deleted. And then while we are
building our website, I recommend to deactivate
the LiteSpeed Cache plugin just because when caching is enabled, it takes longer for us to see the changes that we are making and
this is kind of annoying, so we can just deactivate it and then activate it
again once we are done. So let's just click on deactivate. And now we're also gonna go through a few settings that I like to change whenever I create a new WordPress website. So let's go to settings and then here we can change
the site title and the tagline. This is what we'll see at the top of the browser on our website. So when we go to our website right here, we can see here at the top
there will be our site title and next with the tagline,
and we can change that here. So currently it's just our domain, but I'm just gonna type in Medics Media for this site title. And then the tagline, I don't know, I'll just say this is a WordPress website. And then when we scroll all the way down, we can click on save changes. And then when we go back to our
website and reload the page, we can see that the side title
and the tagline has changed. So let's close this tab again and then let's also go
to the discussion section of the settings. Here what I like to do
is disable this option, allow people to submit
comments on new posts because if this is enabled
then people will be able to just leave comments
when you create a new post. And usually that ends up
in a lot of spam comments, which is kind of annoying. So I just like to turn it off. Then let's scroll all the way down and click on Safe Changes. And next we're also gonna
go to our Permalinks. And here we want to change
the per link structure from this default structure right here, which looks really bad to
the post name structure. So whenever you create a
new post on your website, you're gonna have your domain
forward slash the post name. So we can just select it here. And then what I also like to do is just delete this
last forward slash here 'cause I think it looks
a bit better without it. So once that's done, we
can just scroll down again and click on Safe changes. And that's all for the basic settings. So let's head back to our dashboard. So now let's start setting up our website. The first thing we're gonna do
is install a WordPress theme. The theme is gonna allow
us to build our website using drag and drop so we
don't have to do any coding. So let's head over to
appearance on the left side. And then here we can see there are already some themes that came pre-installed. These are just the
default WordPress themes and we want to add a different one. So let's click on add theme at the top. And the theme that we're gonna use is one of the best and most popular ones, which is this one right
here, the Astra theme. And you should be able
to see it right here, but if you can, you can just
type it in right here, Astra, and then it should come up right here. Then let's click on install. And once it's installed,
let's click on Activate. Now let's close this window
right here and this one also. And now we can see we have four themes and we have already activated the new one, which is the Astra theme. So now we can actually delete
the ones that we don't need. So let's just click on
this, go to delete, confirm, and then do the same thing for the other two themes as well. Next we're gonna be installing a plugin that will make building
our website a lot easier. It will give us tons of professionally designed templates that we can use, and it will also install a
page builder called Elementor, which is the most popular
page builder on WordPress. So let's head over to plugins, then let's click on add new plugin. And here let's type in starter templates and it should come up right here. It's this one. So let's click
on install and activate, and this will automatically open up the interface for this plugin, but if it doesn't open up for you, you can also just go
here from your dashboard. So I'm gonna exit this
and go to my dashboard. Then I'm gonna go to plugins. And here we can see the
Star templates plugin we have just installed and we
can just click on see library, and this will take us to this interface. So once here, let's click
on build with templates. Now here we can choose
what kind of page builder we want to use. The page builder is gonna allow us to create our website using drag and drop, which makes things a lot easier. I recommend to use Elementor because it's the best
and most popular one. So we're gonna choose Elementor, and here we can now choose a
template for our new website. You might be a bit confused because we've already chosen a theme and now we also have to choose a template, but there is a bit of a difference. So the theme basically gives
our website the overall design and code behind the website. And these templates here, they just give our
website a starting point by adding a few pages to our website. So especially for people who are not professional
website designers, this is very helpful. So you can find a lot of
free themes in this library, but you can also find some premium themes. If it says premium here, then this theme actually costs something. So the best way to find a
good template for your website is to just browse these
categories right here. Or you can also come
over to the search bar and type in a keyword that is related to your kind of website. So for example, if you wanna
create a restaurant website, we can just type in restaurant and then look at the
templates that come up. So here we can see a
few premium templates, but when we scroll down, we can also find a few
templates that are free. For example, this one right here. Now if you want to further check out how this website would look like, we can just click on the template and this will open up a
preview of this website so we can just scroll down
and see how it is structured. We can also click on
different links on the website and see how it will look like. Now you can still change everything here, you can change the pictures, you can change the text and
everything about your website, but it makes sense to choose a template where you kind of already
like the structure because this means that
you'll have less to do to actually customize
it to your own website. So in this video I'm gonna
choose a different template. So I'm gonna go back by
hitting the X right here and then I'm gonna delete the filter. And what I'm gonna choose
is this one right here, the Planet Earth template. It's a very simple layout that you can use for any
type of basic website, and at the same time, it's a very good one to learn
how the page builder works. So this is the one that I'm
gonna choose for this video. So let's click on it and here we could already upload our logo, but we're gonna do that later. So I'm just gonna scroll down and click on skip and continue. Then here we can play around with some different color settings. So currently we are on the default colors, but we can also click on these
different pellets to kind of see how it would look
like with different colors. Now for now, I'm gonna
stick to the default colors. Later on we're gonna
see how you can change all the colors to whatever you want, but for now we're just
gonna leave it like this. Then the same thing with
the fonts right here. You can try out different
fonts, but for now, let's dig to the default
one and click on continue. Here, let's just leave everything as it is and click on submit and build my website. And now your website is being built, and once that's done, we can
click on view your website. So this is what our
website looks like now. We have changed everything
from the default design that we had in the beginning
when we installed WordPress to this template that we have chosen here. So this is the homepage. We can also go to the about
page, which looks like this. And we also have a services
page and a contact page. Now we can also see these
pages in the dashboard. So when we come over
here to our website name and then open up the
dashboard in your tab, then we can go to our pages and here we can see the same pages. So we have our homepage,
we have our about page, our conduct page, and the services page. We can also go to plugins. And here we can see that
there are two new plugins that were automatically installed when we've set up our website,
which is our page builder, which is Elementor. And then we also have
this WP form slide plugin, which allows us to have a
contact form on our contact page. So now we have installed
everything that we need and we are ready to customize our website, and we're gonna do that in
the Elementor page builder. So how do we get into the page builder? Now there's two ways. The first one is to just come over here and go to our website. And then here when you're logged into your WordPress account, you can see that bar here at the top. And now that we have installed Elementor, we can see this button that
says Edit with Elementor. So we can just click on it and this will take us to the
page builder for our homepage where we can start to make changes. Another way to go to the page builder is to go through your dashboard. So let's go to pages. And then here, let's say you
want to make some changes to the about page. We can just hover over it right here, and then you can see it
says edit with Elementor. We can just click here and that will take us
into the page builder for the about page, but we wanna just work on
one page at the same time. So we're gonna close this
tab of the about page and just go back to our homepage. Now the first thing that is
very important to understand is how our pages on our
website are structured, and we can nicely see that
here in the navigator. If you can see that navigator, you can come down here on the bottom left and click on the navigator
icon to make it appear. So every page on our website
is built using containers, and inside of those
containers we have elements. So here in the navigator, we can click on that first container and the magenta line here will show us where that container is. So here that first container is basically just the entire top section with this landscape background. When we click on this second container, which is inside of this first one, then we can see this gray line, which shows us that this part right here is the second container. And within that container we have elements which is the actual
content on your website. So here we have a spacer, which is this top part of the container. Then we have this heading saying Earth. We have another heading which is below this
saying endless potential. And then we have a button
right here at the bottom, and the rest of this page is
built in the exact same way. So when we scroll down, we come here to the second container, and then when we open it up, we can see three more containers, which just are these
three columns right here. We can open them up and then
we can see there's an image, which is this one. We have a heading, which
is this web design. And then we have the text editor, which is for this text right here. So this is how our pages are structured, and I like to use this navigator whenever I get confused
about the hierarchy of all of my containers and my elements. But whenever I am changing
something on the side, I don't really use it. So for now, we're just gonna
close the navigator right here. And whenever we want to take it back, we can just calm down here and
click on the navigator icon to make it appear. Again, whenever you wanna
move a container on your page, you can just hover over the
container you want to move, and then you wanna click
and hold on these six dots and then move the container
to wherever you want place it. Maybe we just put it right here and now the position has changed. Whenever we need to undo something and go back one step, all we have to do is press
Command+Z on our keyboard for Mac or Ctrl+Z for Windows. And as we can see, now the container is back in its original position. Whenever we want to add a
new section to our page, we have to first start
with a new container. So to add a new container, we can just hover over
an existing container and then click on the
plus icon here at the top. Then again, click on the plus icon, and then we can choose
between Flexbox and Grid. I'm gonna go more in depth about what the difference is here, but for now, let's just choose Flexbox. And then we have some different structures we can start with. Maybe we wanna just do
something with two columns. So let's choose this structure right here, and then we can also decrease or increase the width
of these columns here. And once this layout is looking good, we can start adding elements. So here on the nine dots, we can find all of the
elements we can add. For example, we can click
hold and drag in our heading. Then we can go back to our elements and maybe also drag in some
text below our heading. And then maybe we also
want to add a button below the text right here. And whenever we want to
delete one of these elements that we've just added,
we can simply right click and then click on delete. When we wanna delete the entire container we have just added, we
can just hover over it and then click on the X, which will delete the entire container. Something that's also very useful to know is that all of your changes are always saved here
on your page builder. So let's say we want to go
back to a previous version of our website. What we can do is come down over here and click on this history icon. Here we can see all the
changes that we have made, and we can always go back
to a previous version. So maybe want to go back to steps. We can just click on this
button added step here. And this will take us back to steps where we had this new
container right here, but I actually don't need this container, so I'm gonna delete it again by clicking on the X here at the top. And to save any changes we've made and make it go live on our actual website, we can come down here and click on update. Whenever we wanna see a
preview of our website, we can simply just close
down this Elementor sidebar by clicking on this arrow, and this will give us a full with view, or what I like to do is just
open it up in a new tab, so we can take back that sidebar by clicking on the arrow once again, and then we can calm down here and click on this I icon
that says preview changes. And this will just open up
our website here in a new tab. So let's close this tab again and go back to our page builder. So now you understand exactly
how your pages are structured with containers and elements. So now we have to learn
how to actually edit and customize all of the
elements on our page. So this would be the text
on the page, the buttons, the background images,
these images right here, and just everything we
can see on our website. So let's start with
this element right here we have a heading element saying Earth. If you wanna make changes to this element, all we have to do is click
on it here in the preview. And then on the left
side, all of the options for this element will open up. And with Elementor, we
always have three tabs. We have the content tab,
we have the style tab, and we have the advanced tab. In the content tab, like the name says, we
can change the content. So if you wanna change what it says here, we can just change it here under title. So let's say we just type in WordPress and then it will automatically
change right here. Alternatively, we can also
just click on the element right here and then highlight it and then just change it directly
here in the preview here. Under link, we can also add a link so that when people click on this heading, it will go to the link you put in here, and then we can also change the HTML tag. Then we can also go to the second tab, which is the style tab. Here at the top, we can
change the alignment. So currently this heading
is aligned in the center, but we can also align it here to the left or to the right of the page, but obviously it looks best in the center, so I'm gonna put it back to the center. Then under text color, we can mess around with the color of this text. So here by clicking into the color, we can basically change it
to any color that we like. Or when we click on this globe icon here, we can see all the default colors that are already set up based on the theme that we have chosen. So in general, I recommend to use these colors right here just to stay congruent
within your color theme. So I'm gonna put it back
into this green color. And then we also have typography. So when we click on this pen icon here, we can change everything
about the typography. So we can change the font family,
maybe want to use Verdana, or we want to change the
size of this text right here. We can also change the weight. So here we can make it bold or we can make it a bit less bold. We can also change the line
height, the letter spacing, and the word spacing. But to kind of illustrate that, let's go to a different part of the page. Let's just scroll down and go to this text element right here. So again, to edit this,
we just click on it and then we just go to the
style tab, go to typography, and then we're gonna scroll down to these options line height. So here we can just play
around with the line height and we can see when we increase it, the difference or the spacing between each of the lines will increase or decrease. Then we also have letter spacing, which just is the space
between the letters. And we have word spacing,
which is the space between each of the words. And once we're done with our changes, we can just close the
typography settings again by clicking on the pen icon once again. And then we also have the
advanced tab right here. But we're not gonna go too
much in depth here right now because this has mainly to do
with spacing and alignment. And we're gonna cover this at
a later part in this video. But for now, this is how
you can change everything about your text elements on your page. So next, let's learn how to edit and style the buttons on your website. Buttons are the places on your website where you want people to click
on to get to the next page. So for example, here we have
a button saying explore, but for now we're just
gonna delete this one and create a new button from scratch. So let's right click on
this and click on delete. And now to add a new button element, we're gonna go to the
nine dots right here. And then from here we're gonna
drag in the button element below this text right here. So now what we're gonna try
to do is to style this button to look exactly like
this button right here, which is on the official
wordpress.org website. So let's go back to our page builder and click on our button, and this will open up the options for this button again
here on the left side. And we can see the same tabs
as with the other elements. We have the content tab, the style tab, and the advanced tab. So let's start again with the content tab. First of all, for the type, we're just gonna leave it at default. And then for the text, we wanna
change it to get WordPress because that's what our
other button says here that we try to emulate. And then we always want to
add a link to our buttons so that when people click on it, it will actually go somewhere. So here under link, let's
say we want it to go to the contact page, so we
can just type in contact and then we can see the
contact page right here. So we click on it and
this will take the URL of our contact page to this field. Then we can also add icons to our button, but we don't have any icons here, so we're also not gonna
add it to our button. So now let's switch to the style tab. And here, let's start with the alignment. So we want to have the
button in the center, so I'm gonna click on center right here. Then let's look at the typography. So here it kind of looks
like this is some kind of Arial font, so we're
gonna add that as well. So let's go back here. Then under typography,
let's click on the pen icon, and then we're gonna
change the family to Arial. And I think that looks a
bit more like the button that we have on the other website. Then for the size, we can
change that right here. I think this looks good. Then I think the text
is a bit bolder here, so I'm gonna change the weight as well to let's say semi bold. Then we also wanna change the
spacing between the letters. So here the spacing is a bit too big, so we're gonna go to letter spacing and decrease it to something like this. And that's it for the typography. So let's click on the pen icon again to close the settings here. So now let's look at the
colors for this button, and we can see that the
text is already white, which is good, but we do wanna
change the background color of this button to a blue to make it look like this button here. So let's go to color, and then here, click on this icon, and then let's go to the
blue colors right here. And just try to find the color that looks like the one on the other page. I think this kind of
looks like this color. And then when we go back
here, we can also see that when we hover over this
button, then the color changes and gets a bit darker. And that's called the hover effect when you hover over the button. And that's something we can also add. So let's go back here and then click out of the color picker. Or actually let's go back in it and then just copy our
color code right here. This is defining the
exact color we have here. So let's just right click and copy this. And then let's change
from normal to hover, then go to the color settings again. Then we're gonna first paste
in the color we already have into this field down here,
just right click and paste. And then we just wanna
make it a bit darker. So we're just gonna drag this
into the darker area here. And now we can see that when
we hover over the button, the color changes and
gets a bit darker as well. So now we're done with the colors and we can move on to the
overall shape of the button. And when we go back here, we can see that this button
has a bit of a different shape than what we currently have. So we want to go back here and then play around with the padding. So let's scroll all the way
down here in this style tab. And again, go to padding. I'm first gonna unlink these values here so I can set individual
values for each of the sides. And first, we're gonna do
the left and the right side. So let's do the right side. Let's say let's try 20
pixels, or let's try 25, and then I'm gonna do the
same thing for the left side. And then maybe let's try
and add 20 to the top or maybe 15. And then the same thing for the bottom 15. Let's go back and see. Yeah, I think bit more maybe 17 would look more like this
other button 17 here as well. And I think that looks pretty good. Now we also wanna look at the
edges. So here we can see it. It has a bit rounded
edges here we can see it and we can also add that. So let's go back and then
here under border radius, we can just add the values here. And by adding this, we can see that the radius here increases. So we can make that really intense. So we can have kind of
this pill looking button, but we want to have it to look like exactly like the other button. So I think three pixels looks pretty good, and that's basically how
you can create any type of button on your page. So now let's take a look
at how to edit the images on our website. And first we need to make a distinction between the background images
and then just image elements. For example, here in the top section we have a background image. So here we can see the landscape. And then in front of the
landscape we have these elements. This means that this
is a background image, which just fills out the entire
section of this container. When we scroll down here, we can see that we have some image elements, and the background is just a white color. So here there's no background image. Then here when we scroll
down to the next container, we have a white background and then an image element
here in the right column. Then here we have another background image because here it fills
out the container area and we have some text in front of or inside of the container. So first we're gonna look at how to actually edit
the image elements, which we have here. So we have three images here, and then we have another
image element right here. Now, to change the images
here, we can just click on it and then we can see the same layout. Again, we have content style and advanced. Here under choose image, we
can just click on choose image, and then here we have three options. We can upload our own
image by just dragging and dropping it in here. Then we also have the media library. These are all the images that are already uploaded on your website. So here we can just see
the images that are used to make this template that we are using. And then we also have free images. These are just taken from
copyright free image sites, and you can just browse here. So we can just maybe type in nature and then we should be able to see different images about
nature that we can just use for free on our website. Now if you need some more
copyright free images, what you can do is just go to Google, type in copyright free images, and then you can look
at the first website. So we have Pixabay, we have Unsplash, we have Pexels, Freepik. You can check out all of these websites. I like these first three
right here, Pixabay, Unsplash, and Pexels. And then you can just simply
download these images for free and use them on your website. So for this example, I'm
gonna upload an image that I have prepared before. So I'm gonna click on upload files, and then I'm just gonna drag and drop the image into the canvas. And once it's uploaded,
I'm gonna click on select. And just like this, we have this new image inserted
into this right column. Once the image is inserted,
we can also make some changes by going over to the style tab. And here we can decrease
the size, for example, by playing around with
the width of the image. With this slider here, we
can also use the height to change the size. Then we can also play
around with the opacity, so we can decrease the opacity or increase it all the way up. And then we have also the border radius, which is just the radius
at the edges of the image. So if you want to have round edges, we can just increase the values right here to maybe let's say 20 pixels. And this gives us these
around edges right here. And we can also add a box shadow by clicking on the pen
icon next to box shadow. And this will add this nice
shadow around our image. We can also increase or decrease the blur,
change the the direction of the shadow to make it look exactly how we want it to look. And if you want to just
delete the shadow again, we can just click on this
back to default icon, and this will get rid of the shadow. So now we know how we can edit all of the image elements on our website. Next, let's take a look at how we can edit the container backgrounds. Again, here for the first container, we have an image as a background. Then for the second container, we just have a wide background, then again, a white background. And then here we have another image. Now let's make some
changes to the background of this top container. First, we have to select our container by clicking on the six dots right here. And then we want to go
directly to the style settings. And here we can see that the background type is
currently set to classic. This means that we can
either add a simple color as the background, or we can add an image, which is currently the
case for this container. Now, to change that image, all we have to do is click
on choose image right here. And then we, we can either choose an image from our media library, or
we can upload our own image. So that's what I'm gonna do. So I'm gonna go to upload files, and then I'm just gonna drag and drop in an image that I want to use. Once it's uploaded, I'm
gonna click on select, and now the image has
changed to the new one. And when we scroll down, we
can see that the position for this image is currently
set to center center, which means that when
the image doesn't fit the container perfectly, it will just center the
image into the container. But if the top part of the
image is more important, we can also show more of the top by changing this to top center. And then it will just show
always the top of the image, or we can set it to bottom center if you wanna show the
bottom of the image more. But I usually let leave
it at center, center. Then we have an attachment
effect right here. So currently it's set to scroll, which means that the image
will just scroll down with the page, but we can
also set it to a fixed, and then the image will
stay fixed in place. And as you can see here, this
will kind of give this effect where all the elements scroll up and the image will kind of stay
the same in the background. But for now, I'm gonna
set it back to scroll. Then usually you want to leave
the display size to cover to make sure the image
covers the entire screen. And here, under background overlay, we also get some useful options. For example, let's say we want to increase or decrease the brightness
of this background here what we can do is just
add an overlay color and then play around with the opacity. So to make this a bit darker, what we can do is just click
on the color option here and then just add a black color as a overlay over this image. And then here we can just
play around with the opacity and make it all the way dark, or we can make it a bit brighter
by decreasing the opacity of this black color overlay. If you wanna make the
background a bit brighter, instead we can just change
the color here to a white. And this will increase the
brightness of the background. So this is how we can edit and play around with the background image, but we can also just set
it to a simple color. So when we come back up
here in the style tab and go to background,
to add a simple color, we have to just delete the image
that is currently set here. So to delete the image, we
just click on the trash icon, and this gives us the default color. And we can change that right here. We can click on the color and then change it to any
type of color that we like for our new background color. Or we can also go to our default colors by clicking on this globe icon. And then just choose any
of the default colors. Now, we could also choose
a gradient as a background by changing the background
type to gradient. And then here we can
choose the first color. Maybe we're just gonna choose a white, and then for the second color, we can choose that Here we
can maybe just choose a gray, and now we have this nice
gradient as the background. And another very cool thing we can do here is add a video as a background. For this, we have to change
the background type to video. And then the easiest way is
to just upload your video to YouTube and paste in the video link to this field right here. I've just taken an example
video that I found, and by just pasting in this URL, the video will start playing
here as a background. Now, maybe you want to have the video start at a specific time then you can just enter
the start time right here. Maybe I'm just gonna have
it start at five seconds, and then we'll end the
video at 120 seconds. And then it will just play as a loop between five second and 122nd timestamp. Now, whenever you add a
video as a background, you definitely want to
add a fallback image. That's because sometimes the video doesn't play for some reason. And then you want to have
it display a specific image so that there's actually
content in the background. So to add a fallback image, we just click on the plus icon here, and then we can just add an image. So maybe we'll just add to the
cloud image that we've used before and click on select. And now if for some reason
the video doesn't play, maybe it gets deleted, we just have this image as a background. And then down here for background overlay, we have the same options as before. So we can add an overlay color, maybe we wanna add a wide color, and then we can change the opacity to kind of brighten this video up. Or we can also just decrease
the opacity right here. And then the last type of
background would be a slideshow. So to do that, let's go back
to the background tab here. And then let's switch the
background type to slideshow. And then here we can select our images by clicking on the plus icon here. I'm just gonna select some
of the images I already have in the media library. Let's just take these four and
click on create new gallery. Here we can also mess
around with the order of the slideshow and then
click on insert gallery. And now we have these images
that will be displayed as a background, and then it
will just change the images every few seconds. And here we can set all the
values for duration, transition, transition, duration, and so on. But for now, I'm gonna set the background back to its original one,
which was just an image. So I'm gonna go back to the
classic background type, and then I'm gonna choose my image here. I believe it was this one. Let's click on select, and then I can see there's a wide overlay. So let's just delete that by going down to background overlay. And then I'll just decrease
the opacity to zero. And there we go. We are back
with the original background. So now we've learned how to control all of the elements on our
page, the text, the buttons, the images, the backgrounds. And the next thing we need to know is how to control the spacing
between each of our elements. And to look at that,
we're actually gonna go to a different page on our website. So first, let's save our
changes by clicking on update. Then let's open up a new tab and go to our website. Then here we're gonna switch pages by clicking on the about page, and then we're gonna go
into the page builder for the about page by clicking
on edit with Elementor. And now we can just close the other tab. So there are a few ways how
we can control the spacing between our elements. The most frequently used
one is margin and padding. So let's see how that works. Let's scroll down on our about page and go to this quote right here. Now, let's select this container, and then to control the spacing, let's go to the advanced tab. And here we can see under layout, we have margin and we have padding. By changing these values,
it allows us to add space to the top right bottom
and left of our container. But what is the difference
between margin and padding to understand the difference, I have this illustration right here. Now, here in the center,
we have our content element in our case, this is our container. And then in green we have the
border around our element. Now when we add padding, it will add space between the content element and the border of our element,
so inside of the border. And if we add margin, it'll add
space outside of the border. So here for our container, we
can see that we have 90 pixels as padding for the top, which
is this area right here. And then we have a hundred
pixels here for the bottom. Now when we add more pixels
to the top, we can see that the area in on the top
of the text will increase. So we have more padding right
here inside of the border. Now let's put this back to 90 and let's see what happens
when we add margin instead. Now let's first unlink these values so we can control them individually. And then let's start
adding margin to the top of our container. And here we can see that
the spacing will be added outside of our border. Now let's put this back to zero, and then let's say we
want to decrease the space between this text element
and this button right here. So to do this, we could
either just decrease the space below this text or we could
decrease it above this button. It looks here like the space
has been added to the top of the button right here. So I'm gonna select the button element, and then to control the spacing, we're gonna go to the advanced tab again. And here we can see that
there are 25 pixels added to the top of this button. Now to put this button a
bit closer to this text, all you have to do is decrease
the margin value here. So I can just decrease it
maybe by let's say 10 pixels. And this will put the
button closer to this text. Something to keep in mind is that oftentimes you don't
really notice the difference between adding margin or adding padding because you don't really see the border on the actual website. For example, for this button right here, we could also just add padding
by unlinking these values and then adding padding
to the top right here. And as you can see, the effect is the same as if you were just to add more margin, and that's because we don't see the border on the actual website. Now, for the entire container, we do actually notice the difference, because the background image here is only inside of the
border, so if we add margin, then the margin will be added outside. So the white background gets larger here, but if we add the padding, then we can see that the background image
actually gets larger because we add spacing
inside of the border where the image is displayed. Now another very simple way
how we can control the spacing between elements is to
simply add a spacer element. So we go to the elements by
clicking on the nine dots here, and then we look for the
spacer, which is right here. We can just click hold and drag into the area
where we want to add space, for example, between the
heading and the text element. And then this element would
automatically add some space. Currently it's 50 pixels
as we can see here. And to increase the space, we can just drag the slider to the right or it can drag it to the
left to decrease the space in this spacer element. Then we have one more way
how we can control spacing. Let's scroll all the way
up to the top of the page and then select this top container. Then here we can see that
the space between the top and the bottom of this
container is actually defined by this minimum height slider. So here it sets to 600
pixels and we can decrease or increase the minimum height, which will also control
the spacing between the top and the bottom of this container. So now we know how to control
our containers, our elements, and the spacing between those
containers and elements. What we haven't looked at so far is how to control the
layout within a container. So to look at some different layouts, let's open up a new tab and
then just go to our website. And here for the first container, we can see that we have just
a simple one column container with some elements in the center. Then when we scroll down, we can see that we have
a three column layout. So we have three columns with
three images, three headlines, and then three text elements. Then when we scroll further down, we have a two column layout and then another one column layout. Now to learn how to set up
a layout within a container, what we're gonna do is try to manually replicate
this layout right here where we have three different columns. So let's go back to the other tab where we have our page builder
open for the about page. And here we wanna start
with a simple container. So let's scroll down and click on the plus icon
then again on the plus icon. And here we can start with
either a Flexbox or a Grid. Now the grid is something
they've recently introduced, which has certain advantages when it comes to building grid layouts, but we're not gonna go too much into this because it's a bit more advanced and we're gonna keep things simple. And just start with a simple flex box. And then we can see a few
structures we can start with. These are basically just
templates for your layout, but we're gonna start
from complete scratch. So we're gonna choose this one right here. And this gives us our first container. Next, we want to create our three columns inside of this container. And to do that, we have to
add three more containers. So let's click on the nine dots here and then just drag and
drop in a new container. Now to have space for three containers, we need to decrease the
width of this new container. So to do that, we first
gonna go and select it. And then here in the layout tab, we first wanna change the
content width from boxed to full width, so we're
able to decrease the width of the entire container. Then we wanna make sure that
the width is set to percentage, and then we're just gonna
decrease the percentage to 33.33, which is gonna allow us to have three of these containers next to each other, which is then gonna fill out
the entire width of the page. Once we have the first one,
we can simply duplicate it by right clicking and then
duplicate and then once more. And now we notice that our containers are actually aligned in a vertical manner, so
they're below each other, but we actually need to
have them next to each other to get our three columns. So to do that, we have to first
select our main container, again, the first one we've created, and then we want to
change the direction here from vertical to horizontal. And this will give us
our three column layout. Now, to make sure that our
layout is always centered, we also want to go to layout
and then to justify content and click on center. So now that we have our three columns, we are ready to start adding content. So let's click on the nine dots again, and then let's drag in an image and let's also add a heading. And then let's also add
a text editor element. Then let's go ahead and
choose an image here. So select the image element,
then go to choose image, and then I'm gonna choose this
one here and click on select. Then we can also change the text here. So we're just gonna select it and change this to web design. And then we're just gonna
leave this text as it is. And now I'm gonna show
you something very cool, which is how you can simply copy and paste the style of different
elements on your page. So let's say we want to change
the style of this heading to the style we have right here. All we have to do is right
click on this heading element and click copy, and then
go back to our heading. And then right click and paste style. And then it will be in
the exact same style as this heading right here. And then once we're done
with the first column, we can save some time by
simply copy and pasting it. So let's first delete
the other two columns by right clicking and
then clicking delete. And then right click on this
one and click duplicate. And then again, duplicate. And then we can just go ahead and change the content
of the other columns. So let's say here we wanna
change it to this image, and then maybe we also wanna
change the heading to content. And then one more thing we
could do is add some space to the top and bottom
of this new container. And we already know how to do that. So let's just select the
container here, go to a advanced, and then we're gonna add
some padding, so inside of this border, and let's
just unlink these values and then add 50 pixels to
the top of the container, and also 50 pixels to the
bottom of the container. So now you know how to create
your own layout from scratch. This usually takes a lot
of time in the beginning when you don't really
have a lot of experience creating your own website. So if you wanna save some time and make things a bit easier for you, one thing you can do
is work with templates. So let's see how we can
import a template to our page. Let's scroll up and click on
the plus icon here once again. And now we're not gonna start
from scratch by clicking here. We're actually gonna click on
this icon, which is visible because we have installed
the starter templates plugin. And then here we're gonna
switch from pages to blocks. And then here we have all
kinds of different layouts that we can simply import
with some placeholder content. So we can simply browse
these templates right here. And then once we find something that looks like what we wanna create, we can simply click on it and then click on import block. And this will automatically
import this design to our page. We can also change to position
by just clicking, holding and dragging it to wherever we want it to be placed, maybe right here. And then it will be put right here. And we can even import entire pages or parts of pages from other website templates we have available. So here when we come back to the plus icon and then click on the S
again here under pages, we can find all kinds of
different website templates that we can use for our website. So this is actually the template
that we are using right now as a starting point for our website. But maybe also wanna use
part of another template, so maybe this one right here. So we can click on it. And then here we can see all of the pages that are in this website template. Maybe we wanna use part
of this about page here. So let's click on it and then let's click on import template. And now when we scroll down, we can see that the entire page, so all of the containers in this page were imported to our page. So maybe we just want to use
a specific part of this page. Maybe we don't wanna use this part so we can just click
on the X to delete it. Maybe we also wanna get
rid of this one as well, this one as well. And maybe we just wanna
keep this part right here. So we'll leave it and then we
just delete everything else. Now we can also create our own templates that we can then simply reuse on different parts of our website. So let's say we wanna create a template out of this part here. All we have to do is right click and then click on save as template. Then we have to name the template. So let's just say design
one and then click save. And now we can close this window. And let's go to another
page of our website. Let's open up a new tab, go to our website and then open up the page
builder for our homepage. And then let's say we wanna
add this template right here. So we can just click on the plus icon, then click on the folder. And here we can go to my templates. And here we can see our templates. So we can just click on insert and apply. And now we can see that part
here on our homepage also. Next, let's take a look at how
to change the default fonts and colors on our website. Now we already know how to
change the fonts and colors for all of the elements
individually on our website. We can simply click on
it, then go to style, then go to text color or typography and change all the settings here. But because we are using a template, there are some default
settings in the background. And now I'm gonna show you how to actually change
those default settings. And we actually have to do that outside of the element or page builder. We have to do it on the WordPress level. So what we're gonna do is, first of all, we're gonna close the other tab here because we don't need it anymore. And then we're gonna go to our website. So we can simply click on
the preview button here at the bottom, this eye icon, and this will open up our website. And then we want to go to the customizer. So let's click on right here. And from here we want to
open up our global settings, which is where we can change
all of the default settings for typography, colors,
containers, buttons, and so on. Let's go to typography first. And here we have some
presets we can try out. So for example, we can
click on this one right here and it will automatically change all of the text here on our website. Or maybe we can try out this
one and see how that looks. But we can also just
change that individually to whatever font we like. We can just scroll down to base font. Then the body font is
basically the regular text elements here. So we can just click on the pen icon and maybe we change that to an Arial. Click that here, and this will automatically
change it on the entire website. And then the same thing for headings, maybe you wanna choose
Roboto for our headings, so we can just type that in, select it, and it will automatically
change on the entire website. Now let's also take a look
at the default colors. So let's scroll back
up and go back one step and then go to colors. And here we can also see
that we have some presets, so some different color palettes. Currently we are on style one, but we can also try out
style two or style three and see how that looks. But I'm just gonna go
back to style one for now. And we can also change all of the colors individually right here. So let's say we wanna
change all of the headings. We can just go to the heading color, and maybe we want to have
red headings for some reason. We could just change that here. And maybe we also wanna
change the text right here. We can maybe make that a bit darker to a dark ray like this. And this way we can basically
create our own color palette for our website. Lemme just quickly redo the heading color because that red looks terrible. And when we scroll a bit further down, we also have our site background color. So here it's currently set to white, but we could also change
it to any other color. And we can see the
default background color will also change. So now let's scroll back
up and go back one step. And then let's also go to buttons. Here you have the default
settings for the text color, for the buttons, the background
color, the border color, the font, the padding, the border width, and the border radius. So it can also change the default buttons for your website here. Now to make all the changes
public for your website, you can just click on publish right here, and then the changes will apply. And once that's done,
we can close this tab and go back to Elementor to see the changes
we've made here as well. We have to reload the page, but whenever you wanna reload, make sure you update the settings first by clicking on update here at the bottom, and then you can just reload the page. And then all of the changes you have made to the default settings will
now also be visible right here. Now, when you're creating your
website, you wanna make sure that it also looks good
on smaller screen sizes such as a tablet or a mobile phone because nowadays most people
are actually browsing the web using their mobile phone, and we wanna make sure that our website looks
good on the mobile phone device as well. So to see what our website looks
like on a different device, we have to open up the
responsive mode of Elementor. So to go to the responsive mode, we're gonna go down to the left side and click on the responsive mode. Once that's done, this bar
here at the top will open up where we can change between
different screen sizes. Currently we are on the desktop view, but we can also switch to the
tablet port review right here, and we can see how our
website looks like on a tablet because we are using a template
that is already optimized, we can see that it
already looks pretty good, so there's not much we need to do here, but let's go to the mobile
ported view as well. And here we can see that
we have a bit of a problem, which is that the WordPress
text is a bit too large, so it doesn't really fit the screen, so we need to change that
here in the mobile view. To do that, we can just
click on the text element or the heading element
and then go to style, and then click on the pen
icon next to a typography. And here we can decrease the size. Now, one thing you can notice is that here where it says size, there's a
mobile phone icon next to it. This means that you
can individually change this size of the text without having it affect
the other screen sizes. So here I can simply decrease
the size of this heading to let's say 40 pixels. And now when we go back to the tablet view and open up the typography settings, we can see here that it's still 60 pixels. And when we go back to the desktop view and open up the typography settings, we can see it's 83 pixels. And this works for all the values where we have this icon next to it. So let's go back to the mobile view, and then let's say we want
to make some more space here between this text and this button. So we can just click
on the button element, then go to the advanced tab. And then here for margin and padding, we can also see this phone icon. So we know that we can change
the spacing independently from the other screen sizes. So maybe we just want to add
some padding to the top here. We can just unlink these values, then add, let's say 10 pixels. And this will add this space here. And now when we go back
to the tablet view, it will be without any
padding here at the top. Another thing we can do
is hide specific elements on different screen sizes. So let's say we wanna just have this element on the desktop view and the tablet view, but we don't want to have it
shown on the mobile phone view. What we can do is select this element and then go to the advanced
tab, then scroll down and open up the responsive settings. Here under visibility, we can change the visibility
on different screen sizes. So for example, if you wanna
hide it on the mobile view, we can just switch this to hide. And then when we go to the mobile view, we can see that this
element is grayed out, which means that people will not be able to see it on their mobile phone. So now let's go back to the desktop view and close the responsive mode. Now we're gonna take a look at how to edit the contact
form on our contact page. So first we have to navigate
to the contact page. So let's just go to the URL box, type in our website address, hit enter, and this will take us to our website. From here, let's click
on the contact link, and this will take us to our contact page. And here when we scroll down,
we can find this contact form where people can get in contact you by entering their details and then clicking on this send now button. So let's see how we can edit this form. Let's click on edit with Elementor to open up the page builder
for our contact page. Then let's scroll down and go to our form. Then let's select it. And then here on the left side, we can see that we can just choose the kind of form that we
wanna add here to this page. But there's not a lot
of options that allow us to change these form fields, and that's because the form was actually inserted using
a plugin called WP Forms. So we can't make any changes
directly here on Elementor. So to make changes to this form, we have to go and open up the settings for the WP Forms plugin. So let's take a look at
the WordPress dashboard by going to a new tab and
then typing into the URL followed by wp-admin. And this will take us to
our WordPress dashboard. And then here we can see that under plugins we have
the WOP Form slide plugin, which allows us to add a contact
form to our contact page. And when we have installed this plugin, we can also see the WP
Forms settings right here in the left sidebar. When we click on it, we can see
our contact form right here. Now, to make changes, we can simply click on the contact form and start making changes. Now, recently, they have also introduced a
link directly on Elementor. So we can actually go back to
our page builder Elementor, where we can see our form, and then we can see when
we select the form element that there's a link saying
edit this selected form. When we click on this link, then the plugin settings
will automatically open up and we can make changes right here. So here we can see that the
contact form currently asks for the name, the phone number, the email, and then a message. Maybe we also want to
ask for something else, so we can check out these
fields right here on the left. Maybe we also wanna ask a question with a multiple choice answer. We can simply drag and drop
in this field to our form, and then to edit this field,
we can just click on it and then we can change the question here. So maybe we ask, what
are you interested in? And then the first choice
maybe would be web design. The second one could be
social media management. And then the third one could be paid ads. Then to make this field
required, we can scroll down and then flip the switch
here where it says required. And to get rid of any of the fields, we can just hover over it and
then click on the trash icon and then delete the field from the form. So now let's save our changes, and then let's check if
the form actually works. So let's open up a new
tab and go to our website. Then let's navigate to the
contact page, scroll down, and then type in our info
for the contact page. Choose something here
and add a random message and click on send Now. Now we can see a
confirmation message saying, thanks for contacting us. We will be in touch with you shortly. You can also edit this message by going back to the
form settings right here, then opening up the settings. And here under confirmations,
you can change the message to whatever you want right here. Now to check if the form actually worked, we wanna go to our email inbox, and then we should see an email saying new contact form entry. So we can just open this up and then we can find all the
details that were entered, like the name, the email address, what they were interested in, so the multiple choice
question, and then the message. Now we can answer directly to the email they have given us right here by just hitting reply. And then the email will just
be put into the recipient box and we can just start contacting them. Now by default, these
form entries will be sent to your WordPress admin email, but you can also have them
sent to a different email by going to the form settings again. Then under settings
going to notifications, and then here you can just enter any email that you want the form
entries to be sent to. Great. So now let's just
close all of these tabs. And then here, let's close
the form settings window and now we're back on the contact page. Let's click on update to save our changes. So now we're gonna take a look at how to add a completely
new page to our website. So to add a new page, we wanna start in the WordPress dashboard. So let's go to the URL box and type in our website
URL, followed by wp-admin Hit enter, and this will take
us to our WordPress dashboard. From here, let's go to pages, and then click on add new page. Then close this window, and
let's give our page a name. I'm gonna just name it projects, and then let's publish it
by clicking on publish, and again, publish. And now to make changes to our new page, we can just click on edit with Elementor, and this will take us to the
page builder of our new page. Now, to add content to our new
page, we have a few options. We can either just start from
scratch, hit the plus icon, and then start building out our content. Or we could also just use templates by using the starter templates
plugin by clicking here. And then here we have all of
these templates for websites that we could use, or we
could also use these blocks, and we've already learned how to do that. But what you could also
do is just use parts of the other pages that you
already have on your website. So when we go to our website, and then maybe we go to the services page, and then we probably want
to just copy and paste this entire top section because this is kind of the same throughout the entire website. So what we can do is just click on the edit with Elementor icon
to go into the page builder, then right click into this container, and then just click copy. Then go back here to the new page, and then just right click again and click on paste to paste
this entire top container. And then here we can just
change the text to say projects. And then maybe we also
want to import a part of our about page, so we can
just go to our website again, then go to the about page,
go to edit with Elementor. And then maybe we just want
to import this layout as well. We just right click copy. Then go back to our new
page and right click paste. Now let's save our changes
by clicking on update. And then let's preview our new page. And here we notice that we
have a bit of a problem, which is that the header is not transparent like
it is on the other pages. So to change that, we're gonna click on edit
page here in the top bar. Then we're gonna go to the Astra settings by clicking on this icon. And then we're gonna scroll down and click on advanced settings. And then for transparent header, we're gonna click on Enabled,
and then close the window and click on update. Now we can preview our page again, and we can see that the header
is now also transparent. But one thing that we can notice is that this new page project is not yet in the navigation
menu here at the top. So let's see how we can add
that new page to our menu. We have to go back to
our WordPress dashboard. So let's just click on the
WordPress icon right here. Then let's go to appearance
and click on menus. And here we can simply add our new page by selecting it right here
and clicking add to menu. Then it will show up
here in our main menu, and we can also change the position. So maybe we want the projects
page between the services and the contact page, so we can just drag and drop it in here. And then we can click on save menu and to see if that worked. We can just open up a new
tab and go to our website. And now we can see that the projects page is now part of our navigation menu. We could also just add this as a sub menu under an other link, maybe
under the services link. And to do that, we can just
go back to the menu settings, then scroll down here, and we can just drag and
drop that projects link below another existing link. So maybe just below the
services as a sub item. Now again, we can just save the changes and go to our website and reload the page. And now we can see that the
project page is a sub-menu of the services link. And to remove any of these links up here, we can also do that in the settings. So here in the menu settings, we can just go to the
link we wanna remove, for example, I don't need this home link, so I can just click on the dropdown arrow and click on remove, and
then save the changes. And now when I go back to the website and reload the page, we can see that the home link is removed. So now we know how we can edit our navigation
menu here in the header, but let's also learn how we can change the rest of the header. So how we can edit this logo here, how we can change the layout, and also how we can change the colors of our navigation menu. So to do that, we're
gonna click on customize to open up the customizer, and then here we're gonna
click on the header builder. And then here to change our logo, we can just click on side title and logo, and then on change logo,
then we can upload our logo that we want to add and click on select. Then here, we can skip
the logo if you want, but I like the frame that it already has. So I'm gonna click on skip cropping, and then it should
actually change right here. But because I have a
special retina display with a higher pixel density, it'll actually take this logo
right here, the retina logo. So we can upload a regular
logo and the retina logo. And this one right here is
usually in a bigger file size with more pixels. So then on the displays
with a higher pixel density, the logo will still be displayed sharply. So we can just click on remove here, and then by default, it will
just take this regular logo, or it can also upload this
logo again with more pixels. So now it's a bit too large, so I can also just decrease
the width of the logo to maybe, let's say we just do 35 pixels. And then we also wanna
upload our site icon or sometimes also called favicon. And this will be displayed at the top of the browser right here. So we can just scroll down and then click on side
icon, select side icon. And then you wanna upload a
square version of your logo. Click select skip cropping, and now we can see the square version of our logo right here at
the top of the browser. Now let's go back one step and then open up the
header builder once again. And here is where we can make changes to the layout of our header. So maybe we want to have
the menu on the left side and the logo on the right side. We can simply drag and drop these elements to wherever we want them to be. We could also put the
logo here to the center if we think that looks better. But for now, I'm just gonna put it back to its original layout. And to change the color
of our navigation menu, we can just come to transparent header and then go to a design. And then here, under menu
color, we can change the colors. So currently the text color is black, but I can also change it
to a red or to a green. Basically whatever color I like, I'm just gonna put it back to black. And then we also have this
hover color right here, which is currently a dark green. Maybe we want to use a bit
of a lighter green like this. And then the color changes to this color when we
hover over this link. And when we click on it and the page is active, it
will also have this color. And to save our changes,
we just click on publish. So now we've learned how
we can edit our header, but let's also learn how we can edit the
footer off our website, which is all the way here at the bottom. So let's go back one step
and then one more step, and then let's open up our footer builder. And here, just like in the header builder, we can just drag around these elements to different places of the footer to rearrange the layout if we want to. And we can also change the content. So to change this text here, we can just click on
this copyright element, and then here we can change the text. So I would just add something
like copyright in brackets, which will show this copyright icon. And then you can add current
underscore year in brackets, which will always show the current year. So you don't have to manually
update it every year. And then at the end, you
can just enter your name or business name. I'm just gonna add Medics Media. Then for the logo as well, we can just click on the HTML one element. And then to change the logo,
we just click on it here, click on the pen icon,
then click on replace, and choose our logo replace. And now we can see it's a bit too large. So let's click on the pen icon again. And then for size, we're
gonna change it from medium to custom size, and then change it to 50 times 50 pixels and click on update. And to make changes to our footer menu, we can just select the menu here, and then we can change the
layout from inline to stack, or we can change the alignment, or we can hide our footer on specific screen sizes right here. Now to see how our footer
looks on different devices, we can just click on them down here and see what it looks like on a tablet. Or we can click on the mobile phone and see what it looks
like on a mobile phone. So again, to save our changes,
let's click on publish and close the customizer. And once we're done building our website, we wanna go back to
the WordPress dashboard by clicking on this icon here. Then we want to go to plugins. And now we can activate
our LiteSpeed Cache plugin, which will make our website faster. So now you know how to
create your own website using Hostinger and WordPress. So if you found this video helpful, please give it a thumbs up and subscribe to the channel if you wanna see more tutorials like this. I look forward to seeing
you in the next video. Thanks for watching.
