If you want to learn how to make a
WordPress website, watch this video and I’ll show you how step-by-step. What’s up
everyone? It’s Jameson from NYC Tech Club and today I’m going to show you how to
make this beautiful and professional WordPress website step by step. And in
this video tutorial, you’re gonna learn how to create this entire WordPress
website with no coding or programming whatsoever. It’s just gonna be a bunch of
drag-and-drop and copy and paste. And as you can see, this website is just
beautiful. It’s modern it’s professional and it has everything that you need. And
the best part about it is it will only gonna take 45 minutes or less to build
this entire website and you’re gonna save thousands of dollars building this
out yourself. When I designed this website, I wanted to incorporate a lot of
the design aspects of leading Fortune 500 companies, such as Apple,
Nike and Tesla – companies that have spent millions of dollars on web design
research. And I really believe that we created something just as good, if not
better, than the leading websites on the internet. And through this tutorial,
you’re gonna learn how to use WordPress and you’re gonna become a WordPress
expert that can customize your entire WordPress website with whatever content
that you want. So if you like what you see, then keep watching this video
because I’m gonna show you how to make this exact WordPress website step by
step. So if you’re ready, I’m ready. Let’s get started. The first thing that we have
to do is register a domain and get hosting service. So a domain is your web
address and you can see up here that my web address is nyctechclub.com.
So we’re gonna go and register a domain together and then what we have to do is
get hosting service. And what hosting does is it runs your website and it
stores all of your content. So you need to make sure that you have a domain and
that you have hosting in order to run a WordPress website. So what I want you to
do is go to the video description and click on the link to the text tutorial
on How to Make a WordPress Website for Beginners 2018 and you should come to
this page right here. And what this is is the text tutorial for all the steps that
we’re gonna go through in this video tutorial. And once you come to this page,
I want you to come down to step number one which is get a domain and hosting.
And you’ll see a link to Hostgator right here and down here.
And what we’re gonna do is go to this website called “Hostgator” in order to get
our domain and our hosting. And I’ll tell you all about Hostgator in
just a little bit. So once you come over here, go ahead and click on this link. And
once you come to the Hostgator website, you should see a home page that looks
something like this, and if you need the web address, it’s www.hostgator.com. So
you can type that into your web browser if you need to. And once you come to the
home page, I want you to come to the top and click on this link that says, Web
Hosting.” And once you come to this page, you should see three different hosting
plans: the Hatchling, Baby and Business Plan. And we’re gonna focus on the
Hatchling and baby plan because the business plan is a little too expensive
and more than what we need. So the Hatchling Plan is if you want to
make one website and one website only, then all you need is the Hatchling Plan.
And if you want to create more than one website and you want to host them on the
same account, what you want to do is choose the Baby Plan. So for this video
tutorial, since we’re only building one website, I’m just gonna choose the
Hatchling Plan. So once you’re ready, go ahead and click on the “Buy Now” button
down here. And once you come to this page, this is what we’re gonna go to choose
our domain and choose our hosting plan. So we’re gonna go through all these
steps together. So the first thing that you want to do is come to where it says,
“Choose your domain” and make sure that you’re on this tab right here. And what
we can do is just type in the web address that we want to register. So I’ll
type in “howtouseelementor.com” and I’ll push “Enter.” And you should see
these search results show up right here. And if you see this green check mark and
it says, “Added” then we’re good to go, and if you don’t see this, what that means is
someone already registered the web address that you want. So you want to go
back in here and type in a new web address and see if that one’s available.
So if you see this green check mark, then we can just move on and what I want you
to do is just come down to the bottom and I want you to uncheck this box,
because this is an extra service and an additional cost that we don’t really
need right now, but we can always add this back a little bit later. So once you uncheck
this, let’s move on to step number two. So step number two is
choosing your hosting plan. And what you want to do is go into where it says,
“Package Type” and if you go in here, you can
see that we have the Hatchling, Baby and Business Plan. And if you remember, the
Hatchling Plan is if you want to build one website and one website only, then
all you need is the Hatchling Plan. And if you want to make more than one
website and you want to host them on the same account, then you want to select the
Baby Plan. So for this video tutorial, we’re gonna select the Hatchling Plan
and then what you can do is choose the billing cycle for how long you want your
hosting for. So you can select anywhere from one month to thirty six months. And
what I usually recommend to my viewers is anywhere from six to twelve months,
just to make sure that you have enough time to know whether or not you want to
run a website or not. But again, you can see right down here that if you know
that you’re gonna run a website, then the longer term options do save you a little
bit more money. So for this video tutorial,
I’ll select “12 months.” And then what you can do is put in a username and a
security pin right here. And I’m not gonna create these with you because I
already have a Hostgator account but if you need to, pause the video, fill out
this stuff and then push “Play” once you’re ready and let’s move on to step
number three. So step number three is entering your billing
information and again, I’m not gonna fill this out with you because I already have an account
but if you need to, you can pause the video, fill out all this information and
then once you’re ready let’s move on to step number four. So step number four is
adding some additional services and by default, Hostgator selects some of these
for you, and we don’t really need all of these. So I’m gonna go through these with
you. For the free SSL certificate, this one should be selected and we want to
leave this option selected because this is gonna secure your website and
Hostgator gives you this for free. So let’s leave this one checked but this
one right here for the monitoring, we don’t need this and this is just an
extra cost so we can uncheck that. And then for the email, I have a video
tutorial that shows you how to get an email address using your domain for free,
so we don’t need to check this option. And then for the site backup, again I
have a video tutorial that shows you how to do this with some WordPress plugins
for free. So we don’t need this. We can uncheck that. And we don’t need this one
right here. And if you ever want these options or these additional services, you
can always add them back a little bit later but right now, they’re just extra
costs and we don’t really need them. So once you uncheck these
options right here, let’s move on to step number five. And step number five is
entering a coupon code and by default, Hostgator puts in a coupon code for you.
And you can see down here that you do save a little bit of money. But what I
want you to do is delete this coupon code and type in “NYCTECH30.” And then
what you’re gonna do is click “Validate.” And if you put in this coupon code “NYCTECH30” you’re gonna get a very large discount because NYCTECH30 is the
largest coupon code available with Hostgator. And you’re gonna save almost
60% off with the hosting service that you select if you put in NYCTECH30.
So make sure that you put that in and click “Validate” right here. And you’ll
see your discount actually increase. And once you’re ready, all you have to do is
come down to the bottom and check this box that says, “You have read and agree to
the terms.” And once you’re ready, let’s click on this button right here that
says, “Checkout Now.” Once you register your domain and you get your hosting service,
what I want you to do is go to your email inbox. And you should see this
email from Hostgator titled “Your Account Info” and if you open it up, you’ll see
some login details right here to your Hostgator account. And what we want to do
is go to our Control Panel so that we can install WordPress. So once you come
to this email, all I want you to do is click on this link that says, “Your
control panel.” And once you come to the login page, what you’re gonna do is type
in your username and your password. If you don’t know those just go back to
your email from Hostgator, and right here is your username and your password is
right down here. Go ahead and copy and paste those into these two sections and
then once you’re ready, let’s click on “Log In.” And once you’re logged into your
control panel, this is where you can go to access all your different websites,
your email, your file manager and everything like that. So right now, what
we’re gonna do is install WordPress. So right here where it says “Popular Links,”
you should see this link right here where it says, “Build a New WordPress
Website.” So once you find this, go ahead and click on this. And once you come to
this page right here, go into this drop-down and select the domain that you
just registered and leave this box blank right here. And once you’re ready, click
on the “Next” button. And now, you should come to this page
right here, and what you want to do is type in a blog name right here.
So go ahead and type in any type of website name. You can always change this
later, and then create an admin username and then type in your first and last
name and an email address right here. And then check these two boxes and once
you’re ready, go ahead and click on the button right here that says, “Install.” And
once WordPress is installed, you should see this notification and you should
have some login details right here. What you want to do is save this
information so that you can log in to your WordPress website whenever you want
to go and customize and make your WordPress website. So I’m going to copy
this information and paste it into a new email right here just so that I can save
the username and password. So make sure that you do that on your own. And then
once you’re ready, let’s click on this button right here that says, “Log In” so
that we can login to our WordPress website. And once you’re on the login
page, I’m going to put the URL down here on the lower left so that you know how
to get to this page whenever you need to log in to your WordPress website. But
once you’re here, put in your username and your password. And if you need that
information, you’re going to go to wherever you saved the username and
password that you got when you installed WordPress and just copy and paste those
into these two sections. And then once you’re ready, let’s click on the “Log In”
button. And once you’re logged in, this is your WordPress dashboard, and you’re
going to become very familiar with the WordPress dashboard because this is
where we go to create our different pages and posts and upload our media
content. So even though it looks a little overwhelming right now, you will become
very familiar with the WordPress dashboard as we go through making our
WordPress website using the Elementor page builder. And really quickly, if you
scroll down to the bottom, you’ll see that you have this message board right
here from WordPress to show you what they’re working on for new updates and
latest versions and everything like that. So you can check this out on your own.
And I do have a video tutorial on how to use WordPress for beginners, so I’ll link
you to that in the video description and you can check that out on your own. So before we actually start building out
our WordPress website, I want to remove
some default plugins that are installed for us when we installed WordPress. So
really quickly, what we’re gonna do is on the left hand side, I want you to find
the “Plugins” tab over here and hover over that and click on “Install
Plugins.” And once you’re on the plugins page, we’re gonna talk about plugins in
just a little bit but right now, all I want you to do is just come down here to
this list of plugins. And right here where it says, “Plugins,” I want you to
check this box and that should select all these plugins that are installed for
you. And we’re gonna go into this drop down and click on “Deactivate” and click
“Apply” right here. And once all the plugins are deactivated, we should be
good to go and you can always activate these on your own. And I do have video
tutorials on how to use the Google Analytics plugin and a few of these
other ones. So you can always check out the NYC Tech Club YouTube channel if you
want to learn how to use Google Analytics for your WordPress website, but
right now we’re just gonna remove all of these because we don’t really need them
to make our WordPress website. So let’s go back to our WordPress dashboard
really quickly. So hover over Dashboard and click on “Home.” And once you’re back
on the WordPress dashboard, what we’re gonna do right now is install the theme
that we’re gonna use to build out our WordPress website. So a theme is a
template that really lets you customize and make your WordPress website however
you want. So what we want to do is go and find the theme that we want to use. So
hover over “Appearance” and then click on “Themes.” And once you’re on the Themes
page, you can see there are a few different default themes that are
installed right here and the one that we’re using is this one that’s active
right here. And before we go and install the theme that we’re gonna use to make
our WordPress website using the Elementor page builder, let’s actually go and
check out what our WordPress website looks like right now. So on the upper
left, we can hover over our website name and click on “Visit Site.” And once your
WordPress website loads, this is what it should look like right now. So it should
look very basic but don’t worry because we’re gonna install a theme and the
Elementor page builder to customize and make our WordPress website however we
want. So let’s go back now to that Themes page. So hover over your website name and
click on “Themes.” And once you’re back on the Themes page right here, all we have
to do to add our theme that we want to use is click on “Add New.” And once you’re
on the Add Themes page, what we’re gonna do is come to the search box over here
on the right-hand side and we want to search for a specific theme that’s going
to be compatible with the Elementor page builder.
So what I want you to do is type in Ocean WP, O-C-E-A-N WP. And the search
result should show the Ocean WP Theme right here. So if you hover over it, you
can click and check it out if you want but all we’re gonna do is just click on
this blue button right here that says, “Install.” And once the theme is installed,
now what I want you to do is click on the “Activate” button. And once the theme
is activated, if you want to go and check out the WordPress website now, you can
click on “Visit Site.” And now when you go to your Home page, it should look a
little different. But don’t worry if it doesn’t really look that good right now,
because again we’re gonna use a plug-in called the “Elementor” page builder to
make and customize our WordPress website. So let’s go back to our Dashboard right
here. And once you’re back on the WordPress dashboard, you can see that we
have this notification at the top that says, “This theme recommends the following
plugins.” So now what we can do is just move on to the next step. And now what
we’re gonna do is start installing the required plugins that we need for our
WordPress website. So first, let’s install these required
plugins right here. So we can just click on this link that says, “Begin installing
plugins.” And once we come to the Install Required Plugins page, we can
just check this box right at the top of this list to select all of these other
plugins down here, and then we can go into this drop down and select “Install”
and click “Apply.” And once the plugins are installed, we should see this little page
right here and don’t worry about these warnings. That’s okay. So now what we’re
gonna do is go and install a few additional plugins for our SSL
certificate and also our page builder that we need to customize our WordPress
website. So what I want you to do is hover over “Plugins” on the left-hand side
and let’s click on “Add New.” And once you’re on the Add Plugins page, you can
see here there are a bunch of different plugins. So if you ever need anything for
your WordPress website such as backing up your WordPress website or a contact
form, you can probably find a plug-in that will do that for you. And all you
have to do is just come here and search for the plug-in that you need, okay? So what
we’re gonna do is add one or two more plugins and the first one that we’re
gonna add is called, “Really Simple SSL.” So right here where it says, “Search
Plugins,” go ahead and type in “really simple SSL.” And what this plugin is going
to do is allow us to enable the SSL certificate so whenever information is
exchanged between a visitor to our server, it’s gonna be encrypted. So you
can see that we have the plug-in show up right here. So all we’re gonna do is
click on the “Install Now” button. And once the plug-in is installed, all we have to
do is click on this “Activate” button right here. And once the plugin is
activated, you should see this notification right here and all we have
to do is just click on this button that says, Go ahead and activate SSL.” And once
the SSL is activated, you should see this notification right here and we should
have all the plugins that we need right now. So we should have the Elementor
page builder plug-in, and it should be active. And this was installed with our
theme and then down here, you should see the Ocean WP Plugins right here and then
the Really Simple SSL. And all these other ones are deactivated right now
because we don’t need them and we can always come back to this page and add
some additional plugins if we need to, okay? So now your website is secure and
we have our page builder that we’re gonna use to build that our WordPress
website. And now, we can just move on to the next step. So what we’re gonna do now
is just go through our WordPress settings before we start making our
WordPress website. So what I want you to do on the left hand side is hover over
Settings and click on “General.” And once you’re in your General settings, this is
where you can go to change the site title and tagline and you can also do
this in your Theme settings. So I’ll show you how to do that in just a little bit. What
I want to do in the General Settings is come to where it says “WordPress Address
and Site Address” and I want to put in the “www.” right here before the domain
name. So if you want to do that, just make sure that you leave the “https://”
and then put your mouse right there and just type in “www.” and then do
the same for your site address. You want to make sure that you don’t change
anything or you don’t delete anything over here because if your WordPress and
your site address are incorrect, you’re not gonna be able to access your
WordPress website and you’re gonna have to start all over again. So just double
check to make sure that everything looks right and that the only thing that
you added was this right here. And then once you’re ready, we can just come down
to the bottom and click on “Save Changes.” And now, you’re gonna be asked to log
back in, so go ahead and do that. And once you’re logged back in to your WordPress
website, let’s go back down to our Settings and let’s go to our Permalinks.
And once you’re on the Permalink Settings page, what I want to do is just
change the URL settings. So I like to choose the “Post name” option. You can see
the examples of what your URLs will look like for all your different pages and
posts right here. I recommend this one for SEO. So if you want to change it to
that one, go ahead and select that and then just come down and click “Save
Changes.” And once the permalinks are saved, now what I want to do is create
two pages that we can set as our Home page and Blog Post page. So we’re gonna
move onto the next step and show you how to create some pages and then come back
to the WordPress settings. So now, what we’re going to do is create two pages.
So we can do this by hovering over “New” on the top and clicking on “Page” or what we
can do is hover over Pages on the left-hand side and then click on “Add New.”
And once you’re on the Add New page, all we’re gonna do right now is just create
these two pages. So all we have to do is just type in the title for this page, so
you can type in “Home” or “Home Page” or whatever you want and then once you’re
ready, let’s just click on “Publish.” And once that page is published, let’s click
on “Add New” to create one more page. And the second page that we’re gonna make is
the Blog Post page. So I’ll just type in “Blog” and again all I’m gonna do is click
“Publish.” And once we have our two pages, we can go and check them out by clicking
on “All Pages.” And once you’re on the Pages page, you should see the Blog page
and the Home page that we just made and then some other pages right here. And if
we want, we can just delete these two that we don’t need. So I’ll check those
two boxes and then click “Move To Trash” and click “Apply.” And once we remove those
pages, now we have our two pages that we just created. And we want to go into our
WordPress settings again and set those two pages. So hover over Settings and
let’s click on “Reading.” And once you’re on the Reading Settings page, we’re gonna
come to where it says, “homepage displays” and we want to check this option that
says, “A static page” to create a home page and a blog post page. So we’ll
go in to this first drop-down and select the Home page. And then for the Post page,
we’ll select the Blog page that we made. So now, we’re gonna have a Home page and
a Blog page set in our WordPress settings, and all we have to do is click
“Save Changes.” And once the settings are saved, we are done with the WordPress
settings and we can move on to the next step. So now what I want to do is show
you how to download the demo content if you need images for the WordPress
website that you’re learning how to make. So what I want you to do is click on the
link to bring you to the text tutorial on How to Make a WordPress Website for
Beginners 2018. And on this page, I want you to scroll down to step number eight.
And the steps might change in terms of the numbers but right now, this is step
number eight and what you can do is click on this link right here to
download a zip file with all the demo images that we’re going to use to learn
how to make our WordPress website. So if you click on this, you’ll download a file
with all the images and then we can go back to our WordPress website that we’re
learning how to make. And we want to go and install the demo images. So to do
that, on the left hand side, hover over Media and then click on “Add New.” And once
you’re on the Upload New Media Page, if you want to upload the content for the
WordPress website right now, just click on “Select Files” and if you’re using the
demo content, go to wherever you downloaded the zip file and you should
be able to open it up and you should see the Elementor folder right here. And
you can see that we have all of our images and you can upload these one by
one or you can select everything all at once and just upload everything. And you
can see that the images are getting uploaded right now. So we’ll just wait
till everything gets uploaded, and I’ll also show you how to upload the images
as you go through making your pages and posts. So if you don’t want to upload all
your images right now, you can do this a little bit later also. So you can see
that we have all of our images now and if you want to edit any of these, you can
always just click on the link right here or what you can do is go to your Media
Library. So you have this tab right here and if we click on it, you can see in the
Media Library page right here that we have all of our images and if I click on
this one right here, we get this little pop-up and you can click on “Edit Image.”
And you’ll see the image show up right here and you
can rescale this image or you can crop this image by just selecting whatever
you want to crop and then clicking on this little icon right here. If you do
make any edits, you want to make sure that you click on the “Save” button right
here, okay? So I’m gonna close out of this but you always have the option of
editing these images or you can go into one of these and you can always just
delete them if you don’t want to use them also, okay? And again, I will show you
how to upload images as we go through making our WordPress website if you don’t
want to upload everything all at once like I just did right here. Alright, so
now that we have our images uploaded, we are ready to move on to the next step.
And now what we’re gonna do is go into our Theme settings and just modify the
colors and the layouts for our WordPress website. So what I want you to do is
hover over Appearance on the WordPress dashboard and then click on the
customize link. And once you’re on the Customize page, this is where you can go
to select the theme options for your WordPress website. So there’s a bunch of
different tabs on the left hand side and then on the right hand side, this is a
preview screen of what the WordPress website looks like once you change your
options over here. And down here at the bottom, there are different icons for
different devices. So we have the PC, laptop and mobile device if you want to
see what the WordPress website looks like with these different devices, okay?
So we’re gonna focus on the PC option right here. And what I want to do is just
go through some of these tabs and show you what I would do. And you can always
pause this video and go through these tabs on your own. We don’t change
everything because a lot of the changes that we’re gonna make are going to be
specific to each page, but there are options for the entire WordPress website
such as changing the font styles and the general page layouts for all your
different pages that you can do over here. But each page that you go to, if you
change the settings there, it’s gonna override the WordPress settings that you
have here. And that’ll make more sense as we go through making pages. But really
quickly, let’s go through some of these tabs and let me just show you what I
would do if I was making a WordPress website. So right here, if we click on
“Site Identity,” this is where you can change the site title again and the
tagline, same as the WordPress settings and then down here is the Site Icon. So
if you have a favicon, you can add that right here. And sometimes,
that shows up in your web browser tab or in the URL up here. So in
the demo folder, I do have a site icon. So I’ll just show you how to upload that
really quickly. So we can click on “Select Image.” And once you get this pop-up, if
you’re on the Upload Files tab, you can just click on “Select Files” and find the
image or the icon that you want to use. And if you want to use the demo content,
click on “Media Library” and you should have everything uploaded already. And I’m
just gonna click on this little icon right here. So it’s “icon.png.” And I do
want to note that some of these images might not look exactly as what you see in
this video because some of these images are copy written so I do have to pay to
use them. But we’ll have something similar if we don’t have the same
exact images, okay? So once I select the icon that I want, all I have to do is
click “Select.” And once you’re on the Customize Page, this is where you can go
to change the theme options for your WordPress website. And on the right hand
side over here, this is a preview screen. So if you make any changes on the left-and
side, you can see them on the right hand side right here. And then down here
at the bottom, you do have these icons. So you can see what the website looks like
on the tablet, mobile and PC device. And if you make any changes to your theme
options, make sure that you click on the blue “Publish” button right here just to
save everything. And you can do this at the end or whatever you want, okay? So
what I want to do is just go through some of these tabs and highlight what I
would change or select for my own WordPress website. And if you want, you
can pause the video and go through all these tabs on your own and select
whatever options that you want. So you can follow along or you can choose
whatever options that you want to make your WordPress website look and feel
however you want, okay? So the first thing I’m going to do is go to the Site
Identity tab and this is where you can change the site title. So if you have a
logo, it’s gonna replace this right here but if you only have a site title then
you can rename your site whatever you want and you can also change the tagline
over here. So I put in “Professionally Created” but you can just delete this if
you want also. And then down here, this is where you can put in your favicon. So if
you have a little icon that you want to show up sometimes on the web browser or
up here next to the URL, you can just put in the image right here.
So we have a demo image that we can use. So I’ll just click
on “Select Image” and I’m in my Media Library but if you want to upload your
own site icon, just click on “Upload Files” and then click on “Select Files” right
here and then just upload the image that you want to use. So what I want to do is
go to the Media Library and I want to select this image right here and then
just click on “Select.” And now, the icon should show up right here. And if you
want you can remove it or change it and we can just click “Publish” right here
just to save everything really quickly. And you can always come back to this
section later too if you want to create your own icon, okay? So I’m gonna click back
here now that I’m done and we’re gonna skip the Menus and the Widgets tab right
now because we’re gonna cover this stuff a little bit later in this video
tutorial. So we don’t really need to go to the Home page settings but I can just
show you really quickly that this is where you can change the Home page or the
Blog Post page if you make a new page and you want to set them in these settings.
So we’ll go back here and I want to go to the General Options tab. And this is
where you can go to change the page layouts and the font colors for your
WordPress website. So you can see when I hover over this link right here, it
changes to a blue color. So by default, the theme that we’re using has default
colors and if we want to change them, we can go into the General Styling tab. And
you can see right here where it says, “Primary Color” and “Hover Color,” these are
the default colors. And if you ever want to change these, just click on “Select
Color.” And what you can do is type in the color code that you want to use or you
can drag this wheel around and you can see that the color changes to whatever
color that you want. So what I want to do is just put in a color code for the
WordPress website that I’m making. So it’s going to be the “#6beae6”
and if you want to use the same color code, go ahead and type that in and you
can always go back to the default color right here and then just click on “Select
Color” to close that. And I want to change the Hover primary color also. So you can always
play around with these colors on your own. You don’t have to choose the same
thing that I’m using. You can pause the video and just play around with these
colors on your own. So I’m gonna come down to the bottom over here where it
says the “Color Hover,” and I’m just gonna change this for the links color. So I’ll
open that up and just go down here and paste in the same color code. And again, if you
do make any changes, remember that you want to click on the “Blue” button right
here to save everything. So again, you can always pause the video, play around with
these colors on your own. And once you’re ready, let’s click “Back” right here. And we
can go into some of these other tabs if you want. So for General Settings, and
this is where you can go to change the layouts for all of your different pages.
So if you want to change the Layout Style, you can do that here. And then down
here for the default look for your different pages if you want to have a
sidebar, you can select these options right here or what we can do is go into
each page that we make and we can select the page layout. So I’m gonna show you
how to do that so it doesn’t really matter what layout we select here, but by
default, your pages are gonna have a sidebar unless you change that. And I’ll
show you how to do that a little bit later. And we’re really not gonna do
anything here but I did want to point out that you can change the layout
options for your pages here. So I’m just gonna click “Back” right here. And we’re
really not going to go into these other tabs here. For the page title, if you want
to go in here, you can change the look and feel of all of your different pages but
we’re gonna have custom page titles for all of our different pages. So I’m not gonna
do anything here. And then if you want to change the scroll to top button, you can
do that right here, okay? So I’m just gonna go back to the main
page right here and I want to talk about the font settings. So if I go into the
Typography tab, this is where I can go to change the font styles for all of these
different options. So you have the body font, all of your heading fonts, the logo
font and the top bar and your menu. So if you want to change any of the default
fonts that you see over here, all you have to do is click on each these tabs.
And in each one of these, you’ll have the Font Family option, so you can go into
this drop-down and select whatever font that you want. And then you can change
the font weight, the font style and then also your font size and even the colors
down here, okay? So I’ll let you do this on your own because we do change some of
the font options as we go through making our different pages but for each section,
we have different fonts. So I’ll show you how to customize that as we go through
making our pages but if you want, pause the video, change the fonts
to whatever you want And then once you’re ready, push the “Play”
button. Make sure that you push on the “Blue” button if you do make any changes
to save everything and then just click “Back” right here. And what I want to do is
I’m gonna disable the top bar that you see up here but if you want to keep that,
you can. But I’m gonna go in here and I’m just gonna click on this button right
here to disable this. And then you can see that the top bar disappears. So I’ll
save that, and I’ll click “Back” right here and I’ll just go back right here. And now
let’s go to the header tab and talk about uploading a logo. And what we can
do in this tab is if we go to the General tab, and what we can do here is
select the type of header that we want for the WordPress website that we’re
making. So I want to select the “Transparent” option and then I want to
deselect the “Border Bottom” right here. And then for the pages that don’t have
the transparent header, we can select the background color that we want for our
header. So I’m gonna go in here and just type in the color code that I want. So I
want to type in “1c1c1c” and that’s gonna give me this black color right
here, okay? So that’s all I have to do for this tab so we can click “Back” right here.
And I just want to come down to the logo section right here. And this is where you
can insert a logo. So if you have one or you’re gonna create one, you want to come
to this tab and then you can upload your logo right here. So all you have to do is
click on “Select logo.” And we’re in the Media Library, so if you have the demo
content you can just select this logo right here or you can always go and
upload your own logo if you have one, and then just click “Select.” And we don’t need
to crop anything here so I’ll just click on this. And now, you should see the logo
right here and it should get updated right here. So if you insert a logo, it’s
gonna replace the text that you have for your site title right here, okay? So once
you’re ready, we can just click “Back.” And if you want, we can go down to the Menu
option. And what you can do here is customize the header menu. So all I want
to do is come down to where it says, “Link Color Hover,” and I want to change this to
the same color as my site colors. So whenever someone hovers over a menu item,
it’s gonna have this color. So I want to change this to the same color code that
I put in earlier which is “6beae6”. So if you want the same color
code, go ahead and type that in. That’s all I want to do. So once you’re
ready, let’s go ahead and click “Publish” just to save everything that we’ve done
so far and then we can come back up to the top and click back right here. And if
you wanted to, you can also customize the mobile menu. So we can just go in here
and we can just come down to the Link Hover section also and just put in the
same color code right here just for fun and just to keep everything consistent.
And then we can click “Publish.” And once that’s saved, we can go back. And now, we
can just go back to the Main page. And now what we can do is just go in and
customize our Blog page layout. And what you can do here is choose the blog post
page layout. So if you want the same thing that you saw on the demo WordPress
website, just come down to where it says, “Blog Style” and we select the “Thumbnail”
option right here. And then you should get some other options over here and we
leave everything as is. So we don’t need to change anything here. So I’ll just
click “Save.” And then once you’re ready, we can go back right here. And I don’t
believe we changed anything for the Single Post pages, so I’m not gonna make
any changes here but if you want to, you can always go in here and select
whatever you want. So I’ll go back and then I’ll go back to the main page right
here. And we can just go down to these last few tabs, so I’ll go to the Footer
Widgets and I actually want to disable this. So I’m gonna uncheck this box and
then we can click “Publish” and then we can just go back. And then for the footer
bottom, let’s go in there. And what you can do here is change the copyright. So
if you look down at the bottom over here, it says, “Copyright Ocean WP.” If you want
to put in your own web address or anything like that, you can put that in
right here. So I’m just gonna type in “Copyright NYC Tech Club.”
So once you’re ready, let’s click “Publish” just to save everything, and I believe,
now we are done with our WordPress settings. So again, you can always go into
these tabs on your own and select whatever you want to customize your
WordPress website. Just make sure that you click on the “Publish” button to save
everything once you’re ready, okay? So now, we are done with this and we can
actually move on to the next step. So I’m gonna close out of this. And once you’re back on the
WordPress dashboard, now what we’re gonna do is make the Home page
for our WordPress website. And this is the demo Home page right here, and you can
see this is what we’re gonna learn how to make. So if you want to make something
like this, keep watching and I’ll show you how in this step right here. The
first thing that we’re going to do is go back to the pages that we made a little
earlier. So we can hover over Pages on the dashboard and then click on “All
Pages.” And once you’re on the Pages page, let’s hover over Home and click on
“Edit.” And once you’re on the edit home page, what I want to do for this page is
come to the Page Attributes and in the template drop-down, I want to select the
“Full Width” option for the Home page, and you can select whatever you want and
then come down to the Ocean WP settings. And for this Home page that we’re making,
in the content layout I want to go in here and select “100% Full Width.” And
again, you can always choose whatever you want. You don’t have to follow along
exactly. And then down here for the Title tab., go in here and I want to disable the
page title because we’re gonna create our own page titles and for the Home
page, we’re gonna have a slider. So let’s click “Disable” right here and that’s all
we have to do. So what you want to do is save these changes that you made. So we
can just click on “Update” really quickly. And once the page is updated, now what we
want to do is go into our Elementor page builder so that we can create all
the different content and layout options for this page. So let’s click on this
button right here that says, “Edit with Elementor.” And now you should be on the
Elementor page builder and this is a blank canvas for our Home page and what
we’re gonna do is create a bunch of different sections and then drag these
widgets into our Home page to create the custom layout that we want. And I have this tab
open for the demo WordPress website. So this is what the page builder is gonna
look like for our Home page once we’re done with it and after we create all the
different sections that we want. And what you might notice is that we do have some
sections that repeat such as this one right here. So in this video, I’m gonna
show you how to create this section that shows up on your PC and laptop, and then
we’re gonna hide this section for the mobile and tablet device and show this
section down here. So I’m gonna show you how to really make your website really
responsive. And you can see that we have all these different sections with
different widgets. So the great thing about watching this video tutorial
instead of any other one is we’re really going to show you
how to use the Elementor page builder to make your website responsive.
So give this video a big thumbs up for showing you how to really use the
Elementor page builder. And if you’re ready, let’s just get started right now.
So we’re gonna create our first section for our slider. So let’s click on the
“+” button right here, and you’ll see that you have all these different
options for these sections. So you can divide up the section into two pieces or
three columns or whatever you want. And what we want to do for our slider is
make it one big image. So I’m gonna select this one right here. And now, we
have this section show up right here and what I want to do in this video tutorial
is just show you how to use the Elementor page builder and give you a guideline
to really use the tool so that you can really make whatever you want. So again,
always remember that you can follow along and make the exact same website
that I am making or you can play around and make whatever you want. And that’s
really the great thing about having a page builder like this, okay? So first, we
have this section right here and all you have to do is just select it. So you can
see the blue line highlight this section, and we want to edit this section. So we
have these options right here: Layout, Style and Advance. And first, in the Layout
option, I want to make sure that the content width is the boxed option and
then for the slider image, I want to change it to fit the screen so that
the entire image shows up when someone goes to the Home page. And then if you
want, you can go to the Style tab right here and we can add our background image
by just coming into this section and clicking “Classic” and then you can add a
background color if you want but I want to add an image. So I’m gonna click on
the “+” button and my Media Library should pop up, and if you want to add
your own images, just click on “Upload Files” and click on “Select Files” and find
the image that you want to use. We’re gonna use the demo content, so I’m just
gonna select this option right here and this is the “slider.jpeg” and you can
always see the dimensions of the photo right here. So once you select the image that
you want to use, click on the “Insert” button. And now, you should see the image
get inserted right here, and it might look a little funky and that’s because
we want to go into the size option right here and change this to cover.
And that’s gonna reformat the image so it looks perfect. And then down here,
you do have other options. So what I want to do for this image is I just want to
make it a little darker. So I’m gonna go into the Background Overlay and then I’m
gonna click on “Classic” right here and just add a dark overlay. So I’ll click on “Color”
and select the “Black” option right here. So you can see that we have a black
overlay right here and you can change the opacity if you wanted to. We’re gonna
leave that as 0.5. And then for the Advanced tab right here, I want to
add some padding to the top and bottom so that the headline is gonna be
centered. So right here in the padding, I want to deselect this so that all the
values aren’t linked together. And then for the top, I’ll type in “300” and for the
bottom, I’ll type in “300.” And again, you can always play around with this stuff
and select whatever you want. And then, for the responsive option, let me show
you on the demo page builder. You can see that we have the slider section right
here and then below that, we’re gonna have another section for our slider for
the tablet or the mobile device. So if you want to have that, what you want to
do is go into the Responsive tab for this section that you’re making and then
you can always hide this section on any of these different devices. So for this
slider, we’re gonna just hide it on the mobile device. So this isn’t gonna show
up on the mobile device. The section below it that we make, what you see right
here is gonna show up instead, okay? So it’s really up to you if you want to
select this or not but that’s what I’m gonna do. And really quickly, what I can
do is just save everything so that we have this section saved right here so we
don’t have to go back in here and save it again. And before we actually put in
the headline and stuff, I want to mention that down here, you do have some icons. So
the main one that you want to notice is this one called, “History.” So if you want
to redo or erase anything that you did in the page builder, you see all your
actions over here and then you can just click on this little icon right here and
it’s gonna remove whatever you did, okay? But if you’re following along, then you
shouldn’t have to remove anything but there are these options right here to
remove sections or remove any sizes or anything that you did. So let’s
go back to the main section right here by clicking on this icon.
And what I want to do right now is add a headline. So I’m gonna click and
drag this into the middle section right here. And now, you should see the Edit heading
right here and you can just type in the title for your slider right here. So I typed in “Design Studio” and we can center this right here. And then if I go to the
Styling tab, I can go in here and change the text color to white and then
if I want to change the font style, I can go into Typography and change
the default setting to something like Pathway Gothic. And then if you want to
change the size of your font, you can do that right here. So we’ll just change it
to something like that. And then for the line height, you can drag this around
also. And also the letter spacing, if you want to change this you can do that also.
So this looks pretty good. And now what I want to do is add another heading right
below this for the sub-headline. So to go back to your widgets, you want
to click on this icon on the upper right over here and then we can just click and
drag another widget right below. And again, you should see the Edit Heading
right here and you can just type in your sub headlines. So I already typed this in
just to save some time, and I want to center this. But again, if you want to
remove this or you want to go back and make some changes, you can always just
click on “History” down here and you’ll make some changes you can always just
click on history down here and you’ll you added the heading for the sub
headline, just click on this right here and you can see that it removes
everything that you did. And then if you want to bring it back, just click on this
right here and here it is. And then we can go in here and edit this by clicking
on it and again, we’ll go back into the Edit Heading. So we centered this already
so we can go to the Styling tab right here and again, I’m gonna go in here and
change this to white. And you can change the font colors to whatever color code
that you want. And you also have this wheel right here that you can change the
colors to also. And then for the typography, I’m gonna go in here and I’m
gonna type in another font family. So I’ll type in something like “Nunudo”
right here or “Nunito” and then for the size, maybe I’ll go to 18
and for the line height, I’ll leave all that the same but for the padding, I’ll
come down here and if I keep this clicks so all the link values are gonna be
together, I can just type in “15” here and it’ll be 15 across the board. So I’m
pretty happy with how this looks. And the last thing I want to do for my
slider is I want to show you how to add a button. So I’m gonna go back into the
widgets or the elements right here, and I just want to drag in a button down here
to the bottom. And now, you should see the button right here and we can change the
text for this button to say “Learn more.” And if you want to link this button to
another page, you want to type in the URL right here and you do have some
additional options right here. And if you right here and you do have some
additional options right here and if you really quickly, this is the demo home
page and if we click on this button right here, it’s gonna automatically
scroll you to the next section below the slider. So if you want something like
that, what we’re gonna do is create this section and we’re gonna name the section
the “About” section. So on the WordPress page that we’re making, we want to link
this button to the About section that we’re gonna create. So if you want to do
that, all you have to do is put in the hashtag and then type in about which is
gonna be the name of the next section, and that’s going to make this button
link to the section below the slider, okay? So I’ll remind you about that
a little bit later when we create the next section but right now, we can just align this to the center. And then we can go to
the Styling tab and I want to change the 45:57 font for this. So I’m gonna go in here
and I want to change the font family to Pathway Gothic and then I want to change
the font size to “19” and the weight to “800” and the line space, I’ll change it to
“1.” And once I do that, I can come down to the text color and I want to put in the
same text color as the site color. So I’m gonna change this to “6beae6.” So if you
want to put in the same color code, go ahead. And then for the background color,
I want to change this to transparent. So to do that, I want to drag this all the
way down and it’s gonna make this transparent right here. So you can add a
background color if you want or you can just change this to
transparent. And then what I’m going to do is choose the border type that I want and then put in the width which is gonna 46:47 be 2px. And then for the radius, I’ll put
in “0” right here. So we don’t need to 46:53 do anything for the border color because
I’m gonna use the site color right here. 46:58 So the last thing that I can do is I can
just put in some padding right here. 47:02 And what I want to do first is I want to
click on this to delete the value so I 47:07 can put individual values. And right here,
I’m gonna type in 13 then 35, 12 and 35 47:14 and that’s just gonna give this button
some space. And what we can also do is 47:18 change the color of the button when
someone hovers over it. So when someone hovers over this button, I want to change
the text color to white and then the border color, I want to change to white
also. So let me show you what happens now. If I hover over this button, you can see
that the color changes. So what you want to do is make sure that you go into the
Hover tab right here and then select the colors that you want if you want to have
this effect right here, okay? So that’s all we have to do for the slider for our
homepage but I do want to note, if you want to delete any of these elements, all you have to do is right click and you’ll get this little pop-up and you
can click “Delete” right here to delete this element, okay? So I’m gonna place
this back in here. And that’s all we have to do. So before we go and create the
About section, let’s click the green button right here
to save everything. And once that’s saved, now what we can do is just scroll down a little bit and we’re gonna add the responsive slider a little bit later.
What I want to do first is just build out the Home page for the PC and laptop.
So let’s add our next section for the About section by clicking on the “+”
button right here, and let’s just add another section just like this. And now,
you should see the new section right 48:32 here and if you want, you can edit the
layout or the styling tab. I just want to go to the Advanced tab and type in “0” for
the padding. And then if we hover over this section, you should see this little
icon and if we click on it, we can edit the column layout and the style if we
want. So I’m gonna leave these as is but I want to go to the Advanced tab
and I just want to click on this button right here. And then for the
top and bottom padding, I want to type in “75” and I’ll leave everything else as
“0.” And then down here where it says, “CSS ID,” I want to name this row the
About section. So I’ll just type in “About” and what that’s going to do is link this
button up here to this section that we’re creating right here.
So you can do this for any section. All you have to do is just have a unique ID
and then link whatever buttons that you have using that hash tag and the ID name. And that’s
going to link to all your different sections. So I’ll show you how this works
in just a little bit. So right now, we have our section created and what we
want to do is add a heading. So let’s just click and drag this in. And once you
see this section right here, we can just come in here and type in our title. So
I’ll type in “What we do” and then I’ll Center this, and I can go to the style
tab and change the color to black and then I can change the font size in here
or the font style. So I’ll just choose Pathway Gothic and change this to “53 px”
and then I’ll bold this, and I’ll put i some letter spacing right here so you
can just type in whatever you want. Again, you can always play around with
this stuff and choose whatever that you want for your own WordPress website. And
then, that’s pretty much all we have to do for the heading right here. So what I
want to do now is add the icon section. So to do that, we have to create another
row right below this. So I’m gonna click on the “+” button and then just click
this one right here. And now, you should see a row with three different columns right here and let’s just go in and edit this really quickly. So click on this
little “Edit” section and we should get this pop up. And all I want to do is go
to the Advanced tab, and I want to click on this. And I just want to put “125 px”
for the bottom over here to give some more spacing on the bottom and then we
can add some icon boxes to each of these. So I’ll show you how to do it one time.
So right here, click on the “+” button and then let’s scroll down to this
section where it says, “General” and just drag this icon box in here. And you
should see the edit Icon Box right here, And you’ll notice that I added some
additional icon boxes right here just to save some time. So what I want to do in
this video is show you how to edit the icon box for one of these
and then you can pause the video and customize the section however
you want. So right here on the left hand side, what I did first was I changed the
icon. So if you come in here, you can search for keywords for whatever type of
icon that you want, and then I just put in the title and description right here
and I centered everything. And if you wanted to link this icon to another page
or anything like that, you can type in the URL right here and then I went to
the Style tab after that and I changed the primary color for the icon right
here. So you can see that this is the color code that I put in. And I have the
icon size right here. I changed it to 75. And then if you want to change the font style or typography, you want to expand the content section right here. And you
can see that I put in the font color right here. So it’s black. And then for
the typography, I have the Pathway Gothic and then I put in the font size right
here. And then for the description, I did the same. I selected this grey color over
here and then I just changed the typography to Arial, okay? So that’s all I
did. I didn’t do anything for the Advanced tab right here. So if you want
to add these icon boxes and customize them, go ahead and pause the video and
drag in some additional icon boxes right here, and then just go in and customize
them with whatever content that you want. And then once you’re ready, go ahead and
push “Play” and we’ll move on to the next section on the Home page. Otherwise, what
we’re gonna do is just move on right now and we’re gonna create the About section
down here. So what we’re gonna do again is add another section. So let’s click on
the plus button right here, and we’re gonna add this row right here where it
splits in half. And now, you should see the sections show up right here,
and we can edit the layout. So I’m gonna go in here and select the “Minimum height”
option. And then what I want to do is change the height from 400 to 606 and
what that’s gonna do is just make this section a little bit larger. And then I’m
gonna go into the Style tab and I want to add a background color to separate
this section and the section above and below. So I’m gonna click on this icon
and then click on the color pad and I’ll just put in the color code “efefef” and
you can select whatever you want. So you can see right here, it’s a light grey
color and then I’ll go into the Advanced tab and type in “0” for the margin. And
then down here, you can see that we have the right and left side column. And if
you want to resize these, you can just click and drag these over to whatever
you want. So I want to have this one about “40%” and this one, about “60%.” And you
can also just hover over these and click on the little icon right here. And you
can edit the column and put in the percents that you want right here. And
what I want to do for the left column is I want to go to the Advanced tab and
click on this button right here, and I want to put in some padding. So 70, 70, 50
and 70. And what that’s gonna do is just add some spacing around the section, okay?
So once you’re ready, let’s add our first element which is the text editor. So if
you need to, you can click on this or the “+” button and then just find the text
editor and drag that in. And now, you should see the text editor right here
and you can just type in whatever text that you want. So I’m gonna paste in the
text from the demo WordPress website right here, and you can see that we have
some larger text at the top. So this is all H1 right here and then down here is
paragraph text. So what I want to do really quickly is just style some of
this. You can see that the text is a little light grey right there. So I’m
gonna go in here and just change the text color to black and then I’ll change
the font size to 15 and that’s gonna make it a little larger. And then I want
to go to the Advanced tab and for this text element, I’m gonna add some
additional padding. So I’m gonna click on this and I want to add 50, 50, I’ll leave
this as 0 and I’ll add 50 right here. So you can see that we have some
additional padding here to squeeze everything together and it just looks a
little bit better, okay? So I’m gonna click on this button right here. And now,
what I want to do is add another button down here for people to click on to go
to another page. So I’m gonna click and drag this in. And again, you should see
the Edit button right here. So we have the learn more button right here, and we
can link this to the About page that we’re gonna make a little bit later. So
I’ll just type in the URL right here. So http: www.howtouseelementor.com /about.
And what this is going to do is link to the About page that we’ll create
a little bit later in this video tutorial, okay? So we can go to the Style
tab, and I can change the background color to black if I want, and you can
also change the text color. For the border color, we can do a solid color and
we can change this to two and then the border radius, I’ll change to 1. And we
can change the border color if we want, to black also. So it’ll just make it look
a little bit better. And then if we want, we can change the hover color. So when
someone hovers over this button, you can have a different color show up if you
want. We’re gonna leave this pretty much as is. So I’ll just change the background
color to black, and I’ll leave everything else as is. So it’s not really gonna
change any colors, and we can just change the text color if we want to white just
for fun. And let’s actually change the typography So I’ll just come in here and
maybe, I’ll change this to Arial just for fun and we’ll leave that all as is. So
that looks pretty good. And the last thing that we have to do for this
section is we want to add an image right here. So I can click on the “+” button
right here and then find the image element and just click and drag that in.
And to add your image, just click on this little section right here and we’re
gonna use the Media Library and find this image right here and just click
“Insert.” And you should see the image get inserted right here and what we can do
is just change some of the padding for this column right here. So hover over
this icon and click on this and then let’s go to the Advanced tab. And what I
want to do is just come down here and delink these values and come to the top
section right here for the padding and put in “50” and that’s gonna move this
image down just a little bit. And this looks pretty good. So I’m pretty happy
with how this looks. So let’s save everything really quickly once you’re ready. And now what we’re gonna do is add a little quote section down here that I think breaks up your website a little bit. So if you have a testimonial or something, you can add that. We’re just gonna add
one of these little sections right here and we’ll change this to full width and
then we’ll come to the Advanced tab. And I’ll delink this and just put in “50” for
the top and “50” for the bottom. And we can add a background color if we want to. So
we’ll go in here and just add this color code which is #001e56
if you want this navy blue color. And this looks pretty good .So now,
what we’re gonna do is just add a text element so you can click on the “+”
button right here and then just drag in the Text Editor. And all I’m gonna do
here is just paste in the demo text just to save some time. And if you want to
format your text, you can always click on this button right here that says, “Toolbar
Toggle” and get this expanded section right here with all these buttons or
what you can do is go to theSstyling tab right here and you can just align it
right here. So we’ll click “Center” and then we’ll go in here and change the
color to “d6dd00” which is a yellow color and then I’ll change the
typography right here to this one, “Cedarville Cursive.” And I’ll change the font size to
“28” and just for fun, I’ll put in the letter spacing as “0.8.” So this is all I’m
going to do for this section. So if you need to, you can pause the video. Type in
whatever you want, and format it however you want. And then once you’re ready,
let’s add another section right below it. So click on the “+” button right here.
And what we’re gonna do now is add a section for our testimonials. So first, we
need to put in a row for the title and then we’ll put in a section for our
testimonials. So let’s go with this one right here and what we’re gonna do is go
into the “Edit” section so we can format this. And all I really want to do here is
go into the Advanced tab, and I want to click on this button to delink this. And
I want to put in “75” for the top and “50” for the bottom. And that’s just gonna
give some spacing here, and then we can go and add a heading widget. So let’s
click and drag this into this section right here. And all I’m gonna do for this
section is just put in the title that says what our clients are saying and
I’ll center this. And then we can go into the Styling tab and change the font
color if we want. And then for the typography, I’m gonna use “Lato.”
And I like to just play around with the different font sizes or font types, so
it’s a lot of trial and error for me. So you can always just choose whatever you
want and I’ll make the font size “30” right here. And that’s all we have to do
for our title. So now, what we want to do is add our testimonial section right
below this. So again, I’m gonna add another row. So I’ll click on the”+”
button and I want to have four testimonials. So I’ll click on this one
right here, and all I want to do is come into theEedit section and I want to
change the content width right here to “1080” and then I’ll go to the Advanced
tab and click on this button right here. And I want to put in “100” for the bottom
padding just to give it some spacing down here. And once you’re ready, we can
go and add our first testimonial elements. So click on this “+” button
and then come down to the General section and find the Testimonial element
and just click and drag it in. And you should see the testimonial get added
right here. And just to save some time, I already created some additional
testimonial elements right here. And what I want to do is just show you how I
customized this and then you can pause the video and edit these additional
elements on your own. So what you’re gonna do for each of these is put in the
testimonial in the content section. And then if you want to add an image or a
logo, click over here and then go and upload whatever image that you want to
use. And then you can change the name and the job title for the testimonial right
here. And if you want to link this testimonial to another page, you can put
in the URL right here. And then what I did was I went to the Style tab right
here and you can see that it has content, image, name and job. So you can go into
each of these sections and format the text if you want. So for the content
section, I went in here and just change the size to “17.” And then for the name, I
put in the text color that you see right here, and then for the job,
I changed the typography to Arial, okay? So that’s all I did for this section. I
didn’t change any of the padding over here. So if you want, you can pause the
video and add some additional testimonial elements and customize them
however you want. And then once you’re ready, go ahead and push “Play” and then
we’ll move on to creating the last section which is the call to action
for the Home page. Otherwise, we’re just gonna create it right now. So if you’re
ready, all we’re gonna do is click on the “+” button right here and add this
little section. So click on this. And what I want to do is just edit this section a
little bit. So I’m gonna go into the Styling tab and add a background color.
So the color code that I want is “1c1c1c” and then I’ll go to the Advanced tab
and click on this button right here. I just want to add “50px” to the top and
the bottom. And then once you’re ready, we can click on the “+” button right here
and I want to add a heading element. So click and drag that in. And you can see
that I already put in the text right here. So it says, “Get In Touch” and I’ll
just click “Align Center” right here. And then for the Styling, what I did was I
put in this color code which is “d6c000.” So it’s a yellow color.
And then I just changed the font size to “47” right here. So that’s my big
call-to-action, and what I want to do is click on this little button right here
and I want to add a Text Editor so that I can add a sub-headline. So I’m gonna
click and drag this to the bottom right here. And what you want to do is put in
your sub headline right here. So mine says, “Want some professional fashion
advice..? Get in touch with us.” And all I’m gonna do is go to the Styling tab and I
just want to center this and I want to change the text color to white. And if
you want, you can change the typography on your own but that’s all I’m gonna do.
And the last thing that we have to do for this section is we want to add a
call to action button at the bottom that’s going to link to the Contact Us
page. So find the button and just click and drag that in. And once you see the
button right here, we can go in and change the text to say, “Contact Us.” And if
you want to link this button to the Contact Us page that we’re going to create
a little bit later, then just type in this URL: http://www.yourwebsitename.
So I’ll type in “howtouseelementor.com/contact.” And that’s gonna link to the
page that we’re gonna make a little bit later in this
WordPress tutorial. And then we can just Center this and then go to the Style tab
and I want to change the colors for this button. So for the text color, I’m gonna
change it to the yellow color. So the color code is “d6c000”
and then for the background of this, I’m going to just drag this to the bottom to
make it transparent. And then for the border type, I want to make it solid and
I’ll make the width “2” and then the border color is going to be the yellow
color. So again, the same color code that I just pasted in. And then the Border
radius, I want to change it to “1.” And then for the Hover Color, I want to change it
to white when someone hovers over this. So we’re gonna change the text color to
white and then the border color is also going to turn to white. And that’s all we
have to do. So now, when someone hovers over this, it changes to a white color,
okay? So this is the Home page and we have just created it for our WordPress
website. We’re gonna go and check it out really quickly and then we’ll come back
here and add the mobile responsive sections that we wanted to a little
earlier. So if you haven’t already, click on the “Green” button at the bottom to
save all of your changes. And once everything is saved, we can go and
preview this page by clicking on this little eyeball at the bottom. So go ahead
and click on that, and it should open up a new tab. So let’s go to that. And once
you open up this tab, you should see your WordPress Home page that you just made
with the Elementor plug-in right here. So if this is what you see, then we are
good to go and we can move on to the next step which is going to be showing
you how to make the responsive sections for your WordPress website. And if you
don’t see this exact website and you’ve been following along, you can always go
back in the video and see where you need to fix things, okay? So if you want to
make your WordPress website responsive, keep watching this video because that’s
what we’re gonna do in the next step. So now, what we’re gonna do is make our
website responsive. So let me just show you on the Elementor page builder
here that right now we’re looking at the desktop view. And if you come down here
and click on this responsive mode icon, you have these other options to see what
your website looks like on the tablet device and the mobile device. And what
you should do is go into each of these and then look at each of these sections
that you created and make sure that they look good on these different devices. And
you can see that this section for the tablet device doesn’t look that good.
So what we can do is go in and hide this section and then create a new section
with the same content that shows up just on the tablet device. And then same with
the mobile device. If we go to this view, you can see that the slider looks a
little weird because the text is too close. So what we can do here is hide the
slider section and then create another one that just shows up on the mobile
device. And you can see that these other sections look pretty good, so we can just
keep them as is. So what I want to do is just show you how you can hide sections
and create other sections that show up on these different devices for your
WordPress website so that it becomes really responsive, okay? So the first
thing that we’re going to do is hide this section on the mobile device and
then we’ll create a new slider that shows up on the iPhone, Android and all
those other mobile devices. So if you want to hide this section or show it on
these different devices, you want to click and make sure that you’re editing
this section and then just go to the Advanced tab for each of these sections.
And then you should have this tab called “Responsive” right here. And what you can
do is come to the visibility section and you can just show or hide these for
these different devices. So I want to hide this slider section
on just the mobile device. So I’ll click “Hide” right here. So it’s
gonna show on the desktop and tablet but not show up on the mobile device. So what
that’s gonna do is just make this hidden whenever you go to the website on your
iPhone or Android device. And what we want to do is create another section
below this that’s gonna show up on the mobile device with the same content that
you saw on the slider. So what we can do is just hover over this and click on the
“+” button right here and that’s going to create a new section over here. So we
can go and click on the “+” button and then click on what we want to add.
And now, you should see this section right here and before we get started, let me change
the view to the mobile device so that I can actually see what this section looks
like when I create it. And I want to go into the Edit section and I just want to
add the background image. So I’ll go in here and find the image that I want to use.
And what I want to do is I’m going to come over here and choose
the position for this image. So I’m gonna choose “Top Center” and then for the size,
I want to go in here and change it to “Cover.” And it’ll look a little bit better
once I add some padding here. So let me go to the Advanced tab and click on this
button. And I want to add “60px” to the top and to the bottom. And you can see
that it expands this section a little bit. And then I’ll go to the Responsive tab.
And I want to hide this on the desktop and the tablet device because the
original slider is gonna show up on those two devices and this section is only
gonna show up on the mobile device, okay? So once you’re ready, we can click in here and add our Heading element, so just click and drag that i.n And once you get
this section right here, we can just type in our text. So I can type in “Design
Studio” and you can notice that I have the HTML right here. And what that does,
it just makes a break in the line. So you can see that the text is in two lines
right here. So if you want that, go ahead and type in some HTML like that. And I
centered this and I’m just going to go to the Styling tab and change the text
to white. And then the font style, I want to go in here and just change it to
Pathway Gothic. Maybe change the font size to “53” and then the line height to
something like “1.3” just to space this out a little bit, okay? So now we’re gonna
add another heading element for our sub headline so I’m gonna drag this in. And
a lot of these steps are very similar to what we did a little earlier for the
original slider. So you should already know how to do all this stuff. It’s
really about formatting this section so that it looks good on the mobile device.
So we can just go in here and we can just erase this and paste in our sub
headline right here. And again, we do have some breaks for the words and you can
see that it shows up like that.l We’ll center this and then go back to the
Styling tab and format the text. And I don’t really need to repeat myself here
because you should already know how to do all this stuff since we went through
it, but if you need to you can always pause the video and see what I’m doing
here. So I’m gonna change the line height to make it look a little bit better, just
like that maybe. And the last thing that we have to do here is we
want to add our button down here. So we’re gonna go back in here and just
add the Button element. Ss click and drag that in. And once the button is inserted,
you can see that I just saved some time by customizing it already. So if you need
to, pause the video. You can see what I put in right here and then in the
Styling tab, we chose the white text. And then the
background color, I drag this to the bottom to make it transparent. And then
we chose our border options very similar to what we did on the original slider
right here. And we also have the hover option which we changed to the Site Color.
So you can see that color code right here for both the text and the border.
And we don’t need to do anything for the Advanced tab for the button. So this is
all we have to do for the slider for the mobile device. So the big thing that I
wanna emphasize here is whenever you create a new section for a certain
device, if you want to go to the Edit section and go into the Advanced tab and
come to the Responsive section and show and hide where you want this section to
show up, okay? So now what I want to do is just go to the tablet device and we’re
not gonna show this section in the tablet device, but we are going to hide
this section and then recreate it. So I’m gonna speed things up and I’ll probably
just show you what I do but I do want to show you again to hide a section. You
want to go in and edit this row or this section by going into the Advanced tab.
And let me close out of this, and just go to the responsive section and just click
on where you want to hide this. So we don’t want to show on the tablet device
but I think it looks good on the mobile device, but we can always just hide it
there too and recreate it. So we’ll do that for this one. And then just come
down wherever you want to put it, we’re gonna add a new section right here for
this section. So I’m gonna click on this and you should see these sections show
up right here. And just to save some time I already customized everything, but let
me just show you what I did. So for this section, we’re using the full width
option and I put in the same background color that you saw in the original
section. And then for the Advanced tab, we have “40px” for the padding. And what you
want to make sure that you do for this section is come down to the responsive
section and you want to hide this on the desktop and we’re just going to show
this section on the tablet and mobile device. And then once you’re ready, what I
did was I put in a Text Editor with the same text that you saw in the section
above. And if we go to the Styling tab, I don’t think I did anything here and I
didn’t do anything in the Advanced tab. When I added the button down here, you
can see that I changed the text and I linked this button to the About page
that we’re gonna create a little bit later. And down here where it says, the
“Alignment” for the button, what you can do is customize where you want this button
to show up for the different devices. So you can see right now that we’re using
the tablet device and we have the alignment on the left. And then if I
click on the mobile device, what you’ll notice is that this updates and now the
button is in the center. So if you click on this stuff, then you can actually
align the button and customize them for certain devices, okay? And on the Styling
tab, we have the typography. I don’t think I changed anything here but I did change
the text color to white and then the background is going to be black. And you
can see right here what we did with the border options and we also selected the
black border. And then for the hover option, I didn’t change anything here but
it’s always up to you if you want to change the hover color for whenever
someone hovers over this button. And then on the right hand side, all we did was we
put in an image which we have for the original section also, and I didn’t do
anything else. So the Styling tab and the Advanced tab should all be normal. What I
did do was I hovered over the right column. What I did do was i hovered over
the right column and I clicked on this icon right here. And I wanted to edit
this column. So I went to the Advanced tab and I just put in “60px” for the top
padding. So make sure that you click on this button just to push this image down
a little bit, okay? So if you want, you can pause the video and go through the same
steps to create this section or you can customize the section however you want.
And then once you’re ready, what I want you to do because this is all we have to
do for creating a mobile responsive Homepage
is I want you to click on the Update button to save everything. So go ahead
and do that once you’re ready. And once everything is saved, we are good to go
and now you should have the mobile responsive sections for the WordPress
Home page. And I will show you really quickly how to add each of those
sections whenever we need to on the pages that we’re creating. So now, we’re
done with the Home page and we can move on to the next step. So what I want you
to do is click on this hamburger icon and let’s go back to our WordPress dashboard. And now, what we’re going to do is learn how to create the About page for the WordPress website that we’re learning how to make with the Elementor
page builder and you can see right here that this is what it’s gonna look like
and it’s gonna be ‘very easy to customize however you want. So if you want to learn
how to create an About page like this, let’s go back to our WordPress website
that we’re making, and let’s create a new page by hovering over New and click on
“Page.” Once you’re on the Add New page, all we have to do is type in the page title
and then come down to the page attributes and we want to go into this
template and we want to select the full width option. And once we do that, we can
come down to the Ocean WP settings and I want to change the content layout to the
100% full width option. And then, I’m gonna go to the page title section, and I
want to disable the page title. And you can play around with all this other
stuff if you want but that’s all we have to do to create our page. So let’s click
on the “Publish” button right here. And once the page is published, now we can go
to the Elementor page builder. So click on this. And once the Elementor
page builder shows up, let’s go and add our first section. So we want the two
column section and if we go in and edit the section, we want the “Full Width”
option and we want to select “No Gap” for the Column Gaps so there’s no padding in
between these. And then we can just go to the Advanced tab and type in “0”
Padding right here. And then if I hover over the left-hand column and click on
this icon right here, I’ll get the Edit column for the left-hand side and if I
click on the Style tab, I can add a background color for the left-hand
column. So if I click on this and click on the color pad, I can just type in the
color code that I want which is “1c1c1c” and it’s going to be this black
color, and it only shows up once you put some elements in here. So
we’ll do that in just a few second,s but first let’s go to the Advanced tab. And I
want to put in “100px” for the padding right here. And once you’re ready, now we
can click in the column and we can add our first element which is the “Heading”
element. So just click and drag that in. And once the element shows up, we can
just go to the title section and type in “About Us” and then I want to go and
format this. So I’ll go to the Styling tab and change the color to white. And
then for the Typography, I want to change the font family to “Roboto Condensed” and
then I’ll type in “60px” for the size and the weight, I’ll put in “600 “and I’ll
Transform this to “Capitalize” and for the letter spacing, I’ll do 1.5. And again, I
always just play around with this stuff to figure it out. So we have our page
title now and the last thing that I want to do is just go to the Advanced tab and
click on this button. And I want to add some bottom padding just to add some
space. So I put in “10px” right there. And now, what we can do is add our text
editor for a little description below the page title. So let’s go and add the
text editor and just drag that in, and you should see the text section show up
right here. And just to save some time, I already added everything and I formatted
everything. So in the Style tab right here, you can see that the Text Color is
white and then for the Typography the font family is Roboto Condensed and the
size is 19px and then the line height is 1.8 and the letter spacing is 1. And
then in the Advanced tab right here, I clicked on this button so I added
padding for the top, right and the bottom. I put in 10px and the left, I kept at 0.
And that’s how you get this formatting right here, okay? So now what we want to
do is come to the right-hand side and we want to add a background image for this
site. So if you want to do that, we can just hover over this little icon on the
upper right and click on it so you get this Edit column and we can go to the
Style tab. And what we want to do is just add an image. So click on this little
button right here and then click on the image section. And if you’re
using the demo content, just make sure that you’re on the Media Library. If you
want to upload your own file, go to upload files and click on “Select Files”
and then find the image that you want to use. So this is the image that I want to
use so I’ll just click on it and click on “Insert.” And you should see the image
get inserted right here but you won’t see it right here until we add an
element. So don’t worry if you don’t see anything right here. As long as you see
it right here, it’s okay. And what we want to do is change the size to “Cover.” And
then once you’re ready, now what we’re going to do is just click in here so
that we have all of our elements and let’s just add a blank space. So click
the “Spacer” element and just drag that in. And once you put the spacer i,n now you
should see the background image right here. And you can always customize this
section however you want. But this is what we’re creating for our WordPress
website together. And if you want to change this up, go ahead and do that but
right now, we are done with the top part of our About page for the WordPress
website. So we’re gonna come down here and we’re gonna add our description
sections with our little icon boxes. So we’re gonna have two different rows of
these. So I want to click on the “+” button right here and we’re gonna have
three per row. And if you want, you can select these other ones but this is the
one that I want to select. So I’m gonna click on this one right here. And what I
want to do is just edit this section really quickly, so I’ll leave it as boxed
but I want to type in “1040” for this section. And then on the Advanced tab, I
want to click on this button and I just want to add some padding to the top. So
I’m gonna add “100” just to give it some space up here. And now what we can do is
add our elements into each of these columns. So the element that I want to
add is called the “Icon Box.” So if you find that, go ahead and click and drag
that into each of these columns. And you should see the Icon Box show up right
here, and just to save some time, I did add some additional icon boxe.sSso let me
show you how to customize the icon box to look like this. And then you can push
“Pause” and create some additional ones. And then once you’re ready, push “Play” and
we can create another row with some additional icon boxes. So if you want the
icon box to look like this, all you have to do is go into each of these and you
want to select the icon that you want over here. So you can go
into this drop-down and just type in keywords to find the icon
that you want. And then this is where you can type in your title and your
description right here. And then you can link the icon box to another page if you
type in a URL right here, and if you want the icon box to look like this where the
icon is on the side, then you want to select the “Align Left” option. Otherwise,
you can center it or you can put it to the right. And then if you want to
customize the colors, go to the Style tab. And this is where you can change the
color for the icon in the icon tab right here and you can change the size and
everything. And then if you want to change the size and the font for the
title or the description, you want to go to the content tab and this is where you
can do that, okay? And I don’t add anything for the padding or anything
like that so you don’t need to go to the Advanced tab. So if you want, you can
pause the video and create some icon boxes and customize them however you
want. And then once you’re ready, push “Play” and I’ll show you how to create the
second row of icon boxes. Otherwise, we’re just gonna move on right now and we’re
gonna add that second row, and I’ll show you how to add the padding that you need
for the row of icon boxes below this. So if you want to do that, let’s just click
on the “+” button right here and we’re gonna add another three column row. And
you should see these sections show up right here, and all we have to do is go
back into the edit section and type in “1040” for the Content Width and then go
to the Advanced tab and click on this button. And we just want to put in “40px”
for the top and “100px” for the bottom. And once you do that, now all we have to
do is add our icon boxes below and then we can customize them just like we did
for the first row right here. So just click and drag this in. And now, you
should see the icon box show up right here and just to save some time, I did
add some additional icon boxes. So if you want to pause the video and add some
additional icon boxes just like this, go ahead and do that right now. And we
customize these the same way that we did for the section above. So if you go to
the Styling tab, everything is going to be the same as you saw in this section
when we created these icon boxes. So if you want, pause the video, add some
additional icon boxes right here and then put in whatever you want
and then push “Play” and I’m gonna show you how to add the call-to-action that
you see on the demo WordPress website right here. And if you want, we can just
move on and show you how to do that right now. So on the Home page, we
actually made this call to action. So instead of recreating all the steps and
the customizations, what we can do is go back to the Home page and save this section
so then we can just upload it whenever we want to create a call to action that
looks just like this. So let me show you how to do that by opening up a new tab.
And what I’m gonna do is go to my WordPress dashboard for the WordPress
website that we’re learning how to make, and I want to go to the Pages page. And
what I want to do is go to the Home page and I want to click on edit with
Elementor. And once the Elementor page builder shows up, let’s just scroll down
to the bottom to the call to action section and what we want to do is save
this entire section so that we don’t have to go and format it and build it
again whenever we add it to another page. So to do that, what we’re gonna do is
just hover over this blue tab right here and right click, and you’ll get this
little pop-up and you should see Save As template. If you click on this, you’ll get
this pop-up right here and what we can do is just name this template. So I can
name it “Call To Action” and then just click “Save.” And now, you should see the
call to action saved right here. And now, we can just close out of this. And you
might see this little tab right here or a little button to put the section back
wherever you want to place it. So if you need to, go ahead and just click and just
drop it back in wherever you want to place it. And we don’t need to do
anything here so we can just close out of this page now. And what I want you to
do is go back to the page that you’re building. So this is the About page and
this is the Elementor page builder. So once you’re ready, come down to the
bottom where you want to add the call-to-action. And instead of clicking
on the “+” button right here, we’re gonna click on the folder to add a
template, and you’ll get this pop-up right here. And before we actually add
this template, let me just talk about these tabs at the top. So what you can do
with the Elementor page builder is if you go to the Blocks tab, you’ll actually
see a bunch of pre-made blocks that you can add for different sections on your
WordPress website. So if you want, you can just click on the microscope and you’ll
get this little pop-up and you can see what it looks like. And then you can
click on the “Insert” button if you want to add this and then you can go and
customize the look and feel or the content. And if you want to go back,
just click on “Back” right here. And you do have the option of going in here and
just selecting whatever type of category that you want to look for for different
types of blocks. And then, you can actually add full pages over here also.
So if you like any of these pages that you see, you can just add the pre-made
templates and then you can go in and customize them however you want. But
since we’re learning how to build the WordPress website on our own using the
Elementor page builder, we’re just gonna go and just add the template that we
just saved that we created from our Home page. So make sure that you’re on the My
Templates tab and you should see the Call to action tab right here. And all we
have to do is click on the “Insert” button. And you should see this little pop-up
and we can just click on “Yes.” And you should see the template get added right
here and you can always go in and update the content or the look and feel of this
section or you can always right-click and save this template as an updated
template also, okay? So this is the About page that we just learned how to make
with the Elementor page builder for our WordPress website.
So if you want, go ahead and click on the “Update” button right here just to save
everything. And now, we are actually done with the About page. So what we can do is
just go and click on this Hamburger icon at the upper left and let’s click on
“Exit To Dashboard.” And once we’re back on the Edit page right here, we can just go
and check out what the page looks like by clicking on this link right here. And
once your WordPress website loads, this is what you should see right now. So we
should have our logo or site title right here, and we’re going to add our header
menu a little bit later. And we should have our page title section and then we
should have some icon boxes over here. And if you wanted to, you can link these
to different pages and then we should have the call to action that we just
added right down here, okay? So if this is what you see, then we are good to go and
now what we can do is move on to the next step. And now, what we’re gonna do is
show you how to make a Portfolio page. So we’ll insert a page title at the top and
then we can insert some images just like this. And if you want to click on these
images, we can get a Lightbox like this to expand the image, and I’ll show you
how to add these images to have a scrolling effect so that we can load
these images from different directions. And at the bottom of this page, we’ll
insert our call to action that we saved as a template a little bit
earlier. So if you want to learn how to make a Portfolio page like this, let’s go
back to the WordPress website that we’re making and what we want to do is create
a new page. So we can just hover over Mew right here and click on “Page.” And once
you’re on the Add New page, what you want to do is type in the page title right
here. So I’m gonna type in “Portfolio” and if you type in “Gallery,” what that’s gonna
do is set the page to the WordPress Gallery page. And if you do that, you’re
not going to be able to have a Header menu for your page. So I suggest that you
type in something like “Portfolio” or “Image Gallery” instead of just Gallery, okay?
And once you’re ready, let’s come down to the Template and let’s select
the “Full Width” option and then we can come down to the Ocean WP Settings and
we just want to go to the title tab on this page and we want to disable the
page title. And that’s all we have to do. And once you’re ready, let’s click on the
“Publish” button. And once the page is published, now we can go to the Elementor
page builder. And once you see the Elementor page builder, let’s go and
add our first section for our page title. And what I want to do is just go into
the Edit section and I want to change the content width to the full width
option, and then I’m gonna go to the Style tab and what I want to do is just
add a background color for this section. So the color code that I’m gonna type in
is “1c1c1c” and I don’t need to add any padding here, but what I want to do
is go to this Row section and then click on this little icon to edit the column.Aand I want to go to the Advanced tab here and click on this button, and I want
to add some padding in this section. So I’m gonna type in “100” for the top, “100”
for the right, “50” for the bottom and “100” for the left. And once you do that, now
what we can do is click on the “+” button right here and we can add our
Heading element. So let’s click and drag that in. And once the heading is added,
let me just change the text right here to say, “Our Work” and then I’m gonna
center this and then go to the Styling tab and change the font to white. And
then for the typography, I’m gonna change the font style to “Roboto Condense”d and
the font size, I’ll change to” 60.” So you can see that we have our page title
right here. And now what we want to do if you’re ready is just add our different
columns for all of our different images that we want to add to our portfolio.
So let’s click on the “+” button right here and what you want to do is select
the number of columns that you want for each row that you have for images. So I’m
gonna select the “3 column” option. And once you see these section added right
here, what I want to do is leave the content width as the boxed option. And I
just want to go to the Advanced tab, and click on this button right here and I
want to add “100px” to the top and to the bottom padding. And once we do that, we
can just go to the first column right here and click on the “+” button and we
can add an Image element. So let’s just click and drag this in. And you should
see the element get inserted right here. So let’s go and add an image by clicking
on this button and if you want to upload your own images, click on “Upload Files”
and then click on “Select Files” and find the image that you want to upload. I’m
just going to use the demo content so I’ll select this image right here. And
for all the portfolio images, you can see the size over here, okay? So once I select
this image, I’ll just click on “Insert Media” and you should see the image get
inserted right here. And what I want to do for this image is I want to make it
so that when a visitor clicks on it, it opens up on the web page. And you can see
that on this demo website right here that the image opens up in a lightbox. So
if you want this, what you want to do is go back to the WordPress page that
you’re making. And for this image, you want to come down to where it says, “Link
to” and go into this drop down and select “Media File.” And once you do that, you’ll
get this little section where it says, “Lightbox” and by default, the Lightbox is
already set to open up the images, but if you want you can click on “Yes” if you
want also, okay? So the last thing that I want to do for this image is I want to
give it an animation for when it loads on the web page. So I’m going to go to
the Advanced tab and right here where it says, “Entrance Animation,” there’s a bunch
of different options here for the animation that you can select for this
image. Sso I want to select “Fade In Left” and what you can see is that the image
loads in from the left hand side when it shows up on the web page. So you can
choose whatever type of animation that you want for your images. And that’s all
you have to do for each image that you insert into your portfolio.
So what I want to do is just insert two additional images with you and then you
can pause the video and add as many different images as you want for your
Portfolio page, okay? So let’s go and add our second image right here. Let’s go and
click and add another Image element and just drop it in. And again, all I want to
do is go and click on this, and I want to find the second image that I want to use
and click on “Insert Media.” And again, I want to add the Lightbox option. So I
want to click on “Media File” and I can just leave this as the default, and then
I can just go into the Advanced tab and choose the entrance animation that I
want to use. So maybe, I’ll do fade in down for this one. And that’s pretty much
all I have to do. So I’ll do it one more time with you. So we’ll just go to this
column right here and we’ll find another Image element and just drag that in. And
again, I want to go and click on “Choose Image” and you can always go and upload
your own images. I’m just going to use this image right here. And I’ll click on
“Insert Media” and you should see the image get inserted right here. And what
we want to do is give it the Lightbox option. So again, for all the images that
I have, I’m gonna go into this drop-down and select “Media File” and then we can
just leave this as the default. If you don’t want to have the image pop-up, then
you want to just click “No” right here, okay? And then I’ll just give this an
animation. So again, I’ll come to the Advanced tab and go into the Entrance
Animation option, and I’ll select “Fade in right” for this one. So that’s how you add
images into your Portfolio Gallery and what you can do is add some additional
ones in each of these columns, so you can have a full page of portfolio images. So
if you want, you can pause the video and add some additional images and just size
them however you want and add whatever type of animations that you want. And
once you’re ready, push “Play” and then what we’ll do is just add a call to
action at the bottom on the page over here, okay? So go ahead and push “Pause” and
push “Play” once you’re ready, and I’ll see you in just a few minutes. Alright, and welcome back!
So if you paused this video to add some additional images, then you
should have a Portfolio page that looks something like this. And what
I did was I added all the demo images that you see on the demo
website and each of these images have different sizes and different animations
so that when they load, they all load a little differently, okay? So you can
always come back and add some additional images if you want but what we’re gonna
do right now is just add the call to action at the bottom of this page. And if
you recall, from the Home page and the About page, we have the call to action
template already saved. So instead of clicking on the “+” button right here,
we can click on the folder. And what that’s going to do is give us this pop
up with these tabs at the top. And if we click on “My Templates,” then you should
see the call to action template right here and we can just hover over it and
click on “Insert”. And you’ll get this pop-up right here. And we can actually
click “No” instead of “Yes” that we don’t import any settings from any other pages.
So on the About page, I think we clicked “Yes” but let’s click “No” right here and
you should see the call to action get inserted right down here. So this is how
you create the Portfolio page. So if you need to, click on the green button right
here just to save everything. And then what we can do is exit out of this and
go and check out the page. So let’s click on “Exit” to dashboard. And once you’re on
the Edit page, all we have to do is click on this link so that we can check out
the Portfolio page. And once the Portfolio page loads, you should see all
of your images and the animations that you selected. And if you click on these
images, you should get the Lightbox so all of these images should pop up just
like this. And then at the bottom of this page, you should have a call to action
that’s gonna link to the Contact Us page then we’re gonna make a little bit later
in this WordPress tutorial. So if this is what you see, then we are good to go and
now we can move on to the next step. And now what we’re gonna do is learn how to
write some blog post for our WordPress website. So once you write some blog
posts, you’re gonna have a blog page that looks just like this where you can have
individual links to all of your blog posts. And on the right-hand side, I’ll
show you how to customize your sidebar to look just like this. So if you want a
blog page that looks something like this, what you have to do is write some blog
post. So that’s what we’re gonna do in this section of this video tutorial.
We’re gonna learn how to write a blog post with a featured image at the
top and then our title right here and some information about our blog post
right here. And then below that, we’ll have our content section and another
section down here. Then we’ll populate automatically with related blog posts
based on the category name that you have for this blog post. And then below this,
we can have a section for your visitors to leave you a comment if you want. So if
you want to learn how to create some blog posts and have a blog page that
looks just like this, let’s go back to the WordpPress website that we’re
learning how to make and we want to go and create a blog post. So hover over “New”
and click on “Posts.” And once you’re on the Add New Post page, creating a blog
post is really easy. So I’ll show you how to do this once and then you can add as
many different blog posts as you want. So right here is where you’re gonna type in
the title for this blog post. So we’ll just type in “All In One Design.” And then
down here is where you can type in the content. And you have all these buttons
right here to format your text and if you don’t see the second row of buttons,
just click on this button that says, “Toolbar Toggle” and you’ll unhide this
section. And you can add images by clicking on “Add Media” And you can see
that we have our Media Library right here with all of our images and if you
want to upload some images, just click on the “Upload Files” tab and click on “Select
Files” and find the images that you want to upload. So we’re not going to upload
any images here but that’s what you can do to upload images. And I do have a
video tutorial on How to Use WordPress for Beginners so I will link you to that,
and you can see how to customize your blog posts and everything in that video
tutorial. So what you can also do is add a category name for this blog post so
that you can categorize your blog posts. All you have to do is click on “Add New” category and just type in the category name right here. So we can just type in
“Design” and click “Enter” and you can see that the category name shows up right
here. And if you check this box, then this blog post is going to go into this
category name. And you can add as many different categories as you want. And
then down here, you can add some tags if you want also but we’re gonna leave this
blank. And then down here is where you can insert your featured image for your
blog posts. So all you have to do is click on “Set Featured Image” and you’ll
get this pop-up, and we can go to our Media Library, and just find
the image that we want to use and then click on “Set Featured Image.” And you
should see the image get inserted over here. And the last thing that I want to
do right now is I want to go into my Ocean WP Settings, and I want to go to
the Header. And what I want to do is change the header style for all of my
blog posts. So I want to go in here, and I wanted to select the minimal option
because that’s gonna give me a black background for my header. So you’ll see
what it looks like if you select the minimal option or if you leave this as a
defaul,t you’ll see what the other option looks like, okay? So now we can just come
up here. And the last thing that we have to do to publish our blog posts is click
on this button right here. And once our post is published we can go and check it
out by clicking on view posts. And once our blog post load,s you can see that I
have a black background for the header because I selected the minimal option,
and I selected the black background and the customize tab a little earlier in
this video tutorial. So I do recommend that you select the minimal option
because if you have a transparent header it is a little hard to see, but it’s
really up to you. And then on the rest of this Blog Post page, you can see we have
our featured image, our title and then some information right here and our
content section right here. And you can see that the related post doesn’t
populate, and that’s because we don’t have any additional blog post right now.
But once you create some and you have the same category names for those blog
posts, that section with additional links for articles will show up over here, okay?
So what I want to do right now before I tell you to pause this video and add
some additional blog posts is I want to show you how you can change the name of
the author of your blog post to another user name instead of admin. So let’s go
back to our WordPress dashboard really quickly. So let’s click on “Dashboard.” And
once we’re back on our WordPress dashboard, what I want to do is come down
and edit the user nickname. So hover over Users and click on “All Users.” And once
you’re on this page right here, you can add additional users if you want but all
I want to do right now is just edit the admin user name.
So let’s click on “Edit” right here. And once you come to the Profile page, we
can just come down to this section where it says nickname and you can see that it
uses the same name as the username right now. I can change this to “Jameson” and
then right here where it says, “Display name publicly as,” if I go into this
drop-down, now I see the new nickname and I can select that, and that’s what’s
gonna show up on my blog post now. So I can just come down here and click “Update
Profile.” And once my profile is updated, if you ever want, you can add some
additional users by clicking on “Add New” but we’re not going to do that right now.
We’re just gonna go back to our post page. So hover over Posts and click on
“All Posts.” And once you’re on this page right here, you should see the blog post
that we just created and then a default post here. We can just delete this really
quickly. And once that’s deleted, you can see that we have our blog post that we
just wrote right here and the author is Jameson. But let me show you something
really quickly. So I’m just gonna go into the Edit page. And once I’m on the Edit
Blog Post, if I go to my screen options and I open this up and I checked
this box next to author, then if I scroll down to the bottom of this page now, I
have the Author section right here. And I will have this drop-down and if you have
some additional users, what you can do is select whichever user that you want to
select as the author for this blog post. But we only have one user right now so
there’s only one option. But that is an option for you if you have additional
authors or different users that want to write blog posts for you, okay? So now you
know how to create blog posts for your WordPress website. So I want you to pause
this video and if you want, and create some additional blog posts. And then once
you’re ready, push “Play” and I’ll show you how to customize the sidebar that you
see over here on your blog page and also on your individual blog posts, okay? So pause the
video and I will see you in a few minutes. All right and welcome back!
So if you paused this video to create some additional blog posts, then on the
Post page, you should see a list of all your blog posts that you just wrote. So I
have a total of three right now. And if you’re ready, what I want to do is show
you what the blog page looks like. So if we hover over pages
and click on “All Pages ,”we should come to our pages list and we should have a blog
page that we created a little earlier. So we can just click on “View” right here. And
once the blog page loads, you can see that we have a transparent header at the
top. So I want to go in and change this to the Minimal options so that it has a
background color. And over here, we have a list of all of our individual blog posts.
So this looks pretty good. Aand what I want to do after we change
the header option is I want to show you how you can customize your sidebar to
look just like this, okay? So what I want to do is go and edit this page really
quickly. And once I’m on the Edit Blog page, what I want to do is just come down
to the header tab and I want to go in here and just select the minimal option
and click “Update.” And once the Blog page is updated, we can go and check it out
just to make sure that it’s correct. And you can see that we have a header with a
background color now, so this is what I wanted. And if you want to change the
background color, what you want to do is go to your Customize page. And all you
have to do is go to the Header tab and then go to the General tab. And right
here where it says, “Background Color,” this is where you can select the color that
you want when you select the Minimal option for the header. So if you want you
can change this but we covered this section a little earlier in this video
tutorial. So I’m just gonna close out of this and what I want to do now is show
you how you can customize the sidebar for your blog pages. So we’re gonna go
back to our WordPress dashboard. And once you’re on the WordPress dashboard, I want
you to hover over Appearance and then click on “Widgets.” And once you’re on the
Widgets page, on the left-hand side you should see some available widgets and
what you can do is drag them into different parts of your WordPress
website on the right-hand side. And what we want to do is customize the default
sidebar because this is what shows up on the Blog pages. So by default, you should
see some widgets already inserted for you. And if you want to remove any of
these, just click and expand it. And you’ll see this little section open up,
and you can click on the delete link for each of these widgets and
that’s gonna remove them. So if you want to add a widget, all you
have to do is just click and drag it into the default sidebar and then place
it wherever you want. And you might have to click on the “Save” button if it lets
you. Otherwise, it’s just gonna show up on the sidebar when you go back to your
blog pages. So I’m gonna delete this one but that’s what you have to do to add
any type of widgets that you want to the sidebar for your Blog page. And I’m gonna
leave everything as the default but you can pause the video and customize your
sidebar however you want with any of these widgets and you can always add
some plugins for additional widgets also, okay? So go ahead and pause the video and
whatever type of widgets that you want into the sidebar and then push “Play” once
you’re ready. And then we’ll move on to the next step. Alright and welcome back!
So if you customize the sidebar with some additional widgets for your
WordPress website, if you go to your Blog page or any individual blog posts on the
sidebar on the right-hand side, you should see those additional widgets now,
okay? So now we are done learning how to create blog posts for our WordPress
website, and if you’re ready, we can move on to the next step. And now what we’re
gonna do is learn how to create the contact us page for our WordPress
website, and I believe this is the last page that we’re gonna learn how to make
in this video tutorial on How to Make a WordPress Website for Beginners, but if
you need to learn how to make any other pages or customize any pages
and you need help, you can always leave a comment or
question in the comment section below this video, okay? So what we’re gonna do
here is insert a custom page title and then we’ll have a section right here for
your visitors to know how to contact you. And if you have a physical location, we
can insert a Google map right here with our location and your visitors can get
directions on how to go to that location. So if you want to learn how to create
this Contact Us page for your WordPress website, let’s go back to theWwordpress
website that we’re making, and let’s create a new page by hovering over New
and click on “Page.” And once you’re on the Add New Page, let’s just type in our page
title. So I’ll type in “Contact.” And then for the template, I’ll choose the full
width option and then I’ll come down to the Ocean WP Settings
and I just want to go to the title tab and I want to disable this
title. And once you’re ready, we can click on the “Publish” button. And once the page
is published, now we can go and edit this page with the Elementor page builder.
And once the Elementor page builder shows up, we can just add our first
section for our page title, and i want to go in and i want to select the full
width option. And I want to add a black background color for this section. So I’ll go
into the Style tab, click on this icon and then go in here and just put in the
color code “1c1c1c” and we don’t need to add any padding to this section but I
want to add padding to this column. So I’m gonna hover over this section and
click on the little icon right here so that I can edit this column. And I’ll
just go to the Advanced tab right here and click on this link button. And then I
want to put in “100” for the top, “100” for the right, “50” for the bottom and “100px”
for the left. And that’s all I have to do. And so once you’re ready, we can add our
Heading element, so let’s click and drag this in. And once you see the heading
element right here, we can just go in and change the title to “Contact Us” and we
can Center this and then go to the Style tab. And I can change the font color to
white and then change the font family over here to Roboto Condensed. And then
I’ll change the size to “60px” and for the letter spacing, I want to put this at
1.5. And once you’re ready, now we can just add our section for all of our
contact information. So I’ll click on the “+” button right here
and I want to do a three column section so I’ll click on this. And what I want to do
for this section right here is I want to leave it as the Boxed option but I want to
change the Content Width to “1140” and then I want to go into the Advanced tab right
here and click on this button. And I just want to add “60px” to the top and bottom
padding. And then for each of these columns, I want to hover over them and I
want to click on the icon right here to edit the column and then I just want to
go into the Advanced tab for each one and type in “70px” for the padding. So I’ll
do it for the left and also the center right here, and then we’ll
also do it to the right-hand column right here.So again,
just go into the Advanced tab for each of these and put in “70px” and
that’s just going to change the spacing for each of these sections. And once
you’re ready, we can click on the “+” button on the left hand side. And if you
want to add the icon box and some information for each of these little
sections, go and find the Icon Box element and just click and drag it in. And you should see the icon box show up right here and we used the icon box a
little earlier in this video tutorial. So again, what you want to do is go into
the drop down over here and find the icon that you want to use. And then you
can type in your title and if you have a little description, you can type that in
right here. I just use some dummy text and I centered this to format the icon
box to look like this. And what I want to do is just change the colors for the
icons, so I’ll go in here and select the “Gray” color. And then I’ll come down to
the Content tab and open this up, and I want to change the title to black. So
I’ll click on the color pad right here and just click on the Black option. And
now what I want to do is just add a Heading element to put in my address
right here. So I’ll click on the “Element” tab over here and find the Heading
element and just drag this in. And once you see the Heading element right here,
we can go and type in our address right here. And we can center this and we
can also change the color of the font if we want. So I’ll select the black color
here and you always have the option of changing the font family or the sizes
over here also. So this is what you have to do to customize each of these columns.
And what I want to do is add some Icon Boxes and Heading elements for these
other two columns right here. So if you want, you can pause the video and add any
type of elements that you want to the Contact Us page right here. What I’m
going to do is just quickly add an icon box. So I’ll go back in here and find the icon
box and just drag it to the center column right here. And you should see the
icon box added right here. And just to save some time, I did add a Heading
element right here and also another Icon Box right here and a Heading element for
my email address right here. So for the email address, once you get to
this section, if you want to link this to your email, what you want to do is just
type in your email address in the Title section and then you want to add some
HTML right here to link your email. So all you have to do is just type in “Mail to:”
and then your email address and that’s gonna make this a link, okay? So
before I let you pause this video and add these two sections, I also want to
add a border line to separate all of these columns. So I’m gonna add it to
this middle section. So I’ll just hover over this section and click on the
little icon to go to the Edit column, and I want to go to the Style tab and go
into the Border tab right here, and I want to select the Border Type. So I want
to put “Solid” and then I want to put in a Border Width. So I’ll click on this
button and then I’ll just type in “1” for the right and “1” for the left. And then
I can select the Border Color right here, so I’ll type in the color code “e2e2e2”
which is a light gray color. And then for the Border Radius, we’ll click on
this button and we’ll just put in “1” for the right and “1” for the left. And
that’s all you have to do. And now, if I click out of this, you can see that we
have this separator line for these different columns, okay? So if you want,
you can pause this video and add these two sections right here.
And then once you’re ready, push “Play” and we’ll move on to adding our map section
below this. Otherwise, we’re just gonna move on right now. So what I want to do
is add another section. So we’ll just click on this section right here. And
once you see this section right here, I want to go in and select the “Full Width”
option and then where it says, “Column Gaps,” I want to go in here and select “No
Gap.” And that’s pretty much all we have to do. So once you’re ready, let’s click
the “+” button right here and let’s add the Google Maps element. So just drag
that in. And once you see the map right here, what you can do is type in the
address right here,if you have a physical location. And you can change the
Zoom if you want. I’m gonna leave that as the default. But what I want to do is
just come to the Height and I want to type in “400px.” And what that’s gonna do
is just make this map a little larger. And once you’re done, pretty much
we have just created the Contact Us page for our WordPress
website, but there’s one more thing that I want to show you. So if we come down
here and go to the responsive mode and I change it to be tablet device you can
see that it looks pretty good. But if I go to the mobile device for the Contact
Us page, you can see at the top that the page title doesn’t look that good .So
what I want to do is I want to hide the section for the mobile device, and then I
want to make another page title that shows up on the mobile devices. So if you
want to do that so that we can make this page really responsive, we want to go and
click to edit this page title section and what I want you to do is go to the
Advanced tab. And you’re gonna come down to the Responsive tab right here and
open this up. And what you want to do is come over to the Visibility section and
if you remember, what we want to do is just hide this section on the mobile
device because we’re gonna create a new section that shows up for iPhones and
androids and everything like that. So once you hide this section, now what we
can do is click the “+” button right here and we can add another section. So
click on the “+” button and add this. And you should see the section added
right here. So I want to go in and change it to the full width option, and then I
want to go to the Advanced tab and come down to the Responsive tab and open that
up, and we want to hide this section that we’re creating on the desktop and the
tablet device. And we just want to show it on the mobile device, okay? So once
you’re ready, now what we’re gonna do is hover over this and click on this little
icon to edit this column, and we want to put in the background color that we want.
So we’ll just come in here and click on this, and I want to type in the color
code “1c1c1c” and that’s gonna give me the same background color that you
see up here, but it’s not gonna show up until we add our Heading element. So we
can do that right now by clicking on the section and then just dragging in the
Heading element. And once you see the heading element inserted right here, we
can just type in our page title right here but what I want to do is I want to
put these two words on separate lines, so it doesn’t look all messed up like this.
So I’m going to add some HTML after the first word. So it’s going to be open
arrow BR close arrow. And the B R stands for break, and
now you can see that the two words are on separate lines. So if you want to do
that, go ahead and type in the HTML that you see right here, and then we can just
go and customize this some more by clicking on the center icon. And then I
can format the text by changing the text color just like we did for the original
page title. And then for the font size, I’ll put in “55” for the Mobile Text. And
then I want to add some padding for this section. So I’ll go in here and just type
in “45.” And pretty much, this is what the mobile device page title is gonna look
like. So it’s not gonna show up like this, it will show up like this,
okay? So if you’re happy with how this looks, let’s go ahead and click on the
“Update” button right here just to save everything. And once everything is saved,
we can go back to the desktop device right here. And don’t worry about how
this looks right here because even if we go back to the responsive device, you can
see that the formatting is correct, okay? So we have just learned how to create
the Contact Us page for our WordPress website. So what I want to do is go back
to our WordPress dashboard now. So let’s click on the “Hamburger icon” and click on
the “Exit To Dashboard” button. And once you’re back on the Edit page, we can go
and check out the page if you want. Once your WordPress page loads, this is
what you should see. So you should have your Contact section
right here and this should be an email link if you linked it, and then down here
you should have your map. So if this is what you see, then we are good to go
and now what we can do is move on to the next step. And now what we’re gonna do is
learn how to make the Header menu for our WordPress website and we’ll also
show you how to make the Footer menu at the bottom of this page over here.
So if you want to learn how to make a header and footer menu for your
WordPress website, let’s go back to the website that we’re making, and let’s
hover over our website name and let’s click on “Menus.” Once you’re on the Menus
page, the first thing that we’re gonna do is create a Header menu. So go ahead and
type in “Header” right here and then click on the button that says, “Create Menu.” And
once the menu is created, you should see this section right here. So first,
what we can do is add the pages that we want to link to our
Header menu. So I’m gonna add these pages that we just created. So I’m gonna check
all these boxes and click on “Add to Menu.” And if you wanted to, you can add custom
links by opening up this tab and typing in the URL and then the navigation label
right here. So what I did was I just added some pages that we created, and I
want to rearrange these. So I’m just gonna click and drag these around really
quickly, and you can do the same if you want. And if you ever want to rename some
of these instead of having the page title, you can just click and expand this
and change the navigation label right here just like I’m doing for the
Portfolio Gallery. And then the last thing that you want to do is just come
down to the Menu settings and you want to select where you want this menu to
show up. So in the Display Location, we want to make this the Header menu. So we
want to select the Main Menu option. And then once you’re ready, all we have to do
is click “Save Menu.” And once the Header menu is created, before we go and check
out the WordPress website, I want to create the Footer menu. So again, we’re
just going to go and create a new menu. So we would click on this link that says,
“Create a new menu.” And once you come to this page right here, we can just type in
the name for our footer menu. So I’ll type in “Footer” and click on “Create Menu.”
And once the footer menu is created, again what you want to do is add some
links to the menu structure section. So what I did was I added a few links and I
also added a custom link for aPprivacy Policy page that I’ll probably create a
little bit later on my own. So go ahead and add whatever links that you want for
the footer, and then just make sure that you come down to the display location.
And for this menu, you want to select the Footer option. And then all you want to
do once you’re ready is click “Save Menu.” And once the footer menu is save,d now we
are done creating the header and footer menu. And what I want to do is just go
and visit our website that we just learned how to make and make sure that
everything looks good. So let’s click on “Visit Site.” And once your WordPress
website loads, you can see that we have a Header menu at the top now. And if you
want to change the link colors, I’ll show you how to do that in the customize
settings in just a few seconds, but first what I want to do is just come down to
the bottom and check out the footer menu. So you can see down here that the
footer menu looks pretty good with the white text. So all I want to do for my
WordPress website that I’m learning how to make is just change the text colors
to white when you’re not hovering over these items. So if you want to do that,
all we have to do is click on the “Customize” tab up here. And once you’re on
the Customize page, if you want to change the link colors for your Header menu,
just come down to the “Header” tab and click on that and then all you have to
do is come to the menu tab right here and then come down to the Main Styling
section. And you should see the Link Color section and if you click on this,
you can just select the color that you want for your Header menu. And you can
see when I select “White,” it changes the link colors at the Header menu over here.
And what you want to do is just come back up to the top and click”Back.” And
you want to do the same for your mobile menu if you want to change the link
colors. So if I click on this, and what you want to do is just come down to the Styling section and come to the Links Color and go in here and then just
select the color that you want. So again, I’ll select “White” and that’s all you
have to do. So once you’re ready, you can just click on the “Publish” button to save
everything. And then if you want to change the font color for your footer,
you want to go back to the main tab over here and then come down to the footer
bottom, and you can do the same thing, okay? So that’s all you have to do to
customize your header and footer menus. And now, we can actually go back to our
Main page because we are done creating our WordPress website.
So I’m gonna close out of this. And now you have just completed this video tutorial
by NYC Tech Club on How to Make a WordPress website step-by-step. So I want to be the
first to say, “Congratulations!” on completing this video tutorial and
learning how to make your own WordPress website. If you have any comments or
questions or need any help, you can always leave a comment in the
Comment section below. Please make sure to give this video
a big thumbs up and make sure to Subscribe because we’re always coming out
with new videos just like this. So Again, I want to say, “Congrats!” and
I’ll see you in the next video. [Music]