How to MAKE a WordPress Website FOR FREE – 2019 – For Beginners!


[Music] What’s up everyone? It’s Jameson
from NYC Tech Club, and I am the instructor for this course on How
to Make a WordPress Website for Free using the video tutorial.
In this video, you’re going to learn how to build a beautiful and
professional WordPress website step by step. You don’t need to know
any type of coding and programming, whatsoever. It’s just going to be a
bunch of drag and drop and copy and paste. By the end of this video,
you’re going to be a WordPress expert. Again, we are going to be using
WordPress to build out this website. WordPress is the number one content
management system on the internet. It runs some of the most popular
websites on the world wide web such as TechCrunch, Ariana Grande,
Zone and Usain Bolt just to name a few. So I’m really excited to show you
how to make a WordPress website step by step. Making a website has never been easier.
All you have to do is register a domain, install WordPress, log in and then
choose a theme that works for whatever type of business or website
design that you want. There are so many different options
that I can guarantee that you’ll find one that works for you. After that,
you can customize your website however you want from the text to the
font size to the colors. You can have images, you can select a background,
you can change the layout options, you can even add videos and you can
also move things around, you can delete columns, you can add animations,
you can add buttons, and you can even change the spacing on your WordPress
website. You can create as many different pages and posts as you want. You can even add a map and contact form. You can customize your website with your own logo and you can add your copyright and you can even customize your
navigation menus. With his video tutorial, you’re going to
be able to build any type of WordPress website that you want. The best part
about it is you’re going to save thousands of dollars building out
this website yourself. So if you want to build a beautiful and professional
WordPress website, keep watching this video because I want to show you
how to build this exact 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. Hosting allows you to run your website
and store all of your content. So you have to have hosting in order to
run a website. You also need a web address. You can see right here
that my web address is www.nyctechclub.com. So what we
want to do is go and register a web domain for your own website.
So what I want you to do is click on the link to the text tutorial on “How to Make
a WordPress Website for Free”. This is the NYC Tech Club Text Tutorial
for this video, so it’s going to have all the steps that we’re going to go
through in this video tutorial. So what I want you to do once you come
to this page right here is come down to Step 1 that’s titled “Get a Domain and
Hosting. I want you to click on this link to bring you to the HostGator website.
That’s where we’re going to go to register our domain and get hosting.
You should be redirected to the HostGator website. HostGator is what I
recommend to all of my clients and also what I use for a lot of my
different websites because they have a great reputation. They’re really fast, really
reliable, they’re cheap and they have great customer service. That’s why I’m
going to recommend them to you. So once you come to this page right here,
what we want to do is click this link that says, “Web Hosting”. Once you come
to this page right here, you can see there are three different plans
that we can choose from. The Business Plan is a little too
expensive and more than what we need, so we’re just going to focus on the
Hatchling and the Baby Plan. So the Hatchling Plan is if you’re
going to build one website and one website only, then all you need is the
Hatchling Plan, but if you want to build 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, I’m just going to select the Hatchling Plan. So once you’re ready,
go ahead and click on the “Buy Now!” button. Once you come to this page, this is the HostGator sign up page. So I’m going to go through these steps
with you just to make sure that you fill everything out correctly. So for Step 1, you want to make sure that you’re on the Register a New Domain tab. You want to
type in the web address that you want to register. So I’ll type in
nycstudiosdesigns.com and push “Enter”. Once the search results
come back, if you see the screen check mark and it says, “Added”
then we’re good to go. But if you don’t see the screen
check mark, what that means is someone else registered the
domain that you want. So you want to come back
in here and type in a new web address and
see if that one’s available. So once you get this green checkmark,
I want you to scroll down to the bottom over here to the Domain Privacy
Protection. By default, HostGator selects this for you but it’s just an extra cost
right now and you don’t really need it. But if you want to have it,
then you can just leave this checked. I’m going to uncheck this because
I don’t want this extra cost but I can always add this back later if I want it.
So it’s really up to you but once you’re ready, let’s go down to Step 2. Step 2 is
where you’re going to choose your hosting plan. So in this first dropdown,
you want to select whether or not you want the Hatchling or Baby Plan.
Just remember that the Hatchling Plan is if you want to build one website
and one website only, and then the Baby Plan is if you plan on building more than
one website and you want to host them on the same account, then you
want to select the Baby Plan. So I’ll select the Hatchling Plan right
here and then you want to select the billing cycle. What I usually recommend
is either 6 or 12 months, just to give yourself enough time to know whether
or not you want to continue to run a website or not. So you can select
whatever you want, but for this video, I’m going to select like “1 month”.
And then what you can do is create a username and a security pin.
I’m not going to do this with you because I’ve already created my account.
But go ahead and create a username and a security pin. Once you’re ready,
come down to Step 3. Step 3 is entering your billing information.
Again, you can pause the video and fill all this out yourself. I’m not going to do this
with you because I’ve already created my account. But once you’re ready,
go ahead and push “Play” and then we can move on to Step 4.
Step 4 is adding additional services. By default, HostGator selects some
of these for you. We don’t really need all of these services. So I want to go
through these with you really quickly. So the first one is the Free SSL Certificate.
You can leave this one checked, because that’s going to secure your
website whenever you have data transferred such as payment information
or anything like that. So we can leave that one checked, but we don’t need the
SiteLock monitoring. Again, this is an extra cost and you can always add this
back later. So uncheck this one. For the email, I have a video tutorial on
How to Create an Email with Your Domain for Free so we don’t need this one.
And then we don’t need the Backup because you can use free plugins on
WordPress to back up your website. I do have video tutorials on how to do
that also. So I’ll link you to those videos in the video description. And then we
don’t need the SEO tools, so leave this one unchecked also, okay?So once
you’re ready, come down to Step 5. Step 5 is probably the most important
step in this section because this is where you can enter a coupon code.
By default, you can see that HostGator puts in a coupon code for you and you
can see that you have a small little discount. But what I want you to do is
delete this coupon code and type in “NYCTECH30” and then click “Validate”.
What you’ll notice is that the discount actually increases to about 65% OFF.
That’s because the coupon code NYCTECH30 is one of the largest coupon
code with HostGator. So make sure that you type in “NYCTECH30” and click
“Validate” in order to get a large discount, okay? So once you’re ready,
the last thing that we have to do is just come down to the bottom and check this box to agree to the terms. Once you’re ready, just click on the “Checkout Now!”
button. Once everything is completed with HostGator, now what I want you to
do is go to your email inbox. You should see this email from HostGator titled
“Your Account Info” and if you open it up, it should have all of your account
information right here. What we’re going to do right now is go to our control panel.
So you should see a link right here that says “Your Control Panel”.
What we’re going to do is go there and log in and then install WordPress
so we can start customizing our WordPress website. So once you
come here, go ahead and click on this link right here. Once you come
to the login page, get your username and your password from the HostGator
email. So you can see it says, “Username” and “Password”.
Copy and paste that into these two sections right here and then click “Log In”.
Once you’re logged in to your cPanel, what we’re going to do is install
WordPress. So you should see this section called “POPULAR LINKS” and
what I want you to do is click on this link that says, “Build a New WordPress Site”.
Once you come to this page, just go to your drop down menu and select the
domain that you just registered, leave this blank and click “Next”.
Once you come to this page, just type in a website name right here.
You can always change this later, so don’t worry about what you type in
and then create a username. So I just type in “Admin” and then put in
my first and last name and then put in your email address right here and check
these two boxes. Once you’re ready, click on the “Install” button.
Now, we can just wait for WordPress to install. Once the installation is
complete, you should see this notification right here and you should have some
installation details right here. So if you want, you can save this
information somewhere because you are going to need this to log in
to your WordPress Dashboard or what you can do is go to your email inbox.
You should see this email from HostGator titled “Install Complete” and it should
have all of your log in details right here. What we’re going to do in just a few
seconds is go and log in to our WordPress dashboard using
the admin URL right here. So you also have the username and
password right here. So just make sure that you have this email
saved if you don’t save your information on the installation page, okay? So once
you’re ready, what we’re going to do is go to the admin URL page. So I’m just
going to click on this. Once you’re on the log in page, all you’re going to do is type
in your username and password and then just click “Log In”. Once you’re logged in,
this is your WordPress dashboard. This is we’re going to go to create all of
your different pages and posts and upload your media content and everything
like that, so you’re going to become very familiar with the WordPress dashboard
as we go through this website tutorial. But before we actually do anything, what I
want to do is just show you what the WordPress website looks like now that
you installed WordPress. So I’m going to hover over my website name and click on
“Visit Site”. Once the WordPress website loads, this is what you should see. So it
should look very basic because it uses a default WordPress theme and what we’re
going to do is go and install a custom theme and then customize our entire
WordPress website. So if this is what you see, then we’re good to go and what I
want to do is just hover over my website name on the upper left, and I want to go
back to the WordPress dashboard. Once you’re back on the WordPress
dashboard, you should see this notification right here that says,
“Your website is displaying a “Coming Soon” page”. So once you’re
ready to publish and launch your website, you want to click on this link right here to
publish your website. You can wait until the end of this video tutorial to do that
or you can just publish the website now because we are going to publish it at the
end of this video. So just to get out of the way, I’m going to click on the link right
now to make the website live. You can see right here that I have this
notification that says my site is live. So now, if anyone goes to visit my URL,
they’re going to be able to see my website. So if you click on that,
then that’s fine. If you want to wait until the end of the video tutorial to publish
your website, you can do that also. I will remind you right at the end, okay?
So now we are done installing WordPress and now we can move on to the next
step. Now what we’re going to do is install the theme that we’re going to use
to create and customize our WordPress website. So I want you to hover over
“Appearance” on the left hand side, and click on “Themes”. Once you’re on the
Themes page, what I want you to do is click on “WordPress.org Themes”.
Once you’re on the Add Themes page, you can see that there are a bunch of
different categories here that you can search for different themes by and there
are a bunch of different themes that you can choose from. So you can find any
theme that you want, but for this video tutorial, we want to find a specific theme.
So what I want you to do is type in “airi” in the search box, and you’ll see that this
theme shows up by A themes called “Airi”. This is the one that we want to install.
So once you hover over it, go ahead and click on the “Install” button.
Once the theme is installed, you should see the “Activate” button and we can just
click on that. You should be brought back to the Themes Page right here and you
can see that the Airi theme is the active theme now. We should see this little
link over here to visit our website. So I want to show you what the
WordPress website looks like now that we installed this new theme.
Once your Homepage loads, this is what you should see now. It should look a
little different because we’re using a new WordPress theme. What we’re going to do
in just a little bit is go in and customize the theme settings to change the colors
and the font styles. And then we’ll learn how to use the page builder to create all
the different layouts that we want for our WordPress website. So if this is what you
see, then we’re good to go. I want to go back to our WordPress dashboard and
move on to the next step. Once you’re back on the WordPress
dashboard, now what we’re going to do is install the recommended plugins
that we need for this WordPress tutorial. You should see this notification right here
that says, “This team recommends the following plugins”. So what we want to do
is install these. Plugins are tools that really just help you customize your
WordPress website. So that’s why we’re going to install these, they’re going
to make our life a lot easier. So what you want to do is click on this
link right here that says, “Begin installing plugins”. Once you come to this page
right here, just come the top box right here and check this box so that
you select all these plugins, and then go into this dropdown and select
“Install” and click “Apply”. Once everything is installed,
we want to come back to the install required plugins page. So if you
need to, hover over Appearance and click on “Install Plugins”.
Again, what we’re going to do is check this box to select all of
these plugins. This time in this dropdown, I want to click on the
“Activate” button and now click “Apply”. Now, you should see this notification
that says, “All the plugins are activated”. So we are good to go. I want to install another plugin for the
SSL certificate. So if you want to do that, hover over plugins on the left-hand
side and click on “Add New”. Once you’re on the Add Plugins page,
just come to the search box and type in “really simple ssl” and then push “Enter”.
You should see the plugin right here by Rogier Lankhorst. You can see that it has
over a million active installations. So go ahead and click on the “Install
Now!” button and then just click on the “Activate” button. Once everything is
activated, now what I want you to do is go to your settings. So on the left-hand
side, hover over Settings and click on “General”. If you need to, go ahead and
click on the “Log In” button again. This might just be for security purposes.
Once you’re on your general settings, all I want you to do is come down
to where it says, “WordPress” and “Site Address” and you should see
the “https” in both of these right now. So you have the SSL certificate activated.
But what I want to do is type in “www.” in front of my website domain.
This is just for the World Wide Web address right here. So if you want,
you can just type in “www.” and then your website name. Make sure that
you don’t change anything else. So you want to leave all of this the same.
If you do change anything, it’s going to mess up your WordPress website and
you’re not going to be able to access it, and you’ll have to start all over again.
So double and triple check to make sure that all you did was put in the “www.”
and make sure that you put it in both of these. And then once you’re ready,
just come down to the bottom and click on “Save Changes”. Just for security purposes, you might
have to log back in one more time. So go ahead and put in your username
and password and then click on the “Log In” button. Once you’re logged back
in, now on the URL up here, you should see the “https” and then the “www.” if
you did everything correctly, okay? So the last thing that we’re going to do
in this section is we’re going to go and select the permalinks that we want for
our WordPress website. So again, hover over settings and this time around,
go to “Permalinks” and click on that. Once you’re on the Permalinks page, I just
want you to come down to the Settings section and I like to select the “Post
name” option because this is the best one for SEO. So I recommend that you select this one right here and then just come down to the bottom and click “Save Changes”. Once everything is saved, we are good to go and we can
move on to the next step. Now what we’re going to do is go and
download the demo content from the text tutorial on How to Make a WordPress
Website for Free. So come down to this step right here in the text tutorial.
Again, there is a link in the video description to this page right here,
and you want to come to where it says, “Download and Install the Demo Images.”
You can click on this link right here to download a zip file with all of the demo
images or images very similar to the demo WordPress website and you can
use those as placeholders as you go through these website tutorial.
So click on this link if you need some demo images and download a file and
then go back to your WordPress website that you’re learning how to make.
On the left-hand side, we want to go and install these demo images.
So hover over Media on the left-hand side and click on “Add New”. Once you
come to this page, all you’re going to do is click on “Select Files” and I want you to
go to wherever you downloaded the demo content. So if you see a zip file, you want
to unzip this by double-clicking it and then you should have a folder right here. If I go
in here, I should have some demo images that I’m going to upload an
use for this video tutorial. So again, what you can do is click on each
of these and upload them one by one or you can select them all and upload them
all at once. These images might not be exactly like the demo images on the
demo WordPress website because again, those ones are copy written but they will
be very similar. Again, all you really need them for are just for place holders and
then you can replace them with your own images. So I’m just going to click on
everything and click on “Open”. Once the images are uploaded, you can
see that we have them all right here and you can always go and edit these.
Or what you can do is upload these one by one as we go through making
our pages and posts. So I will show you how to do that a little bit later but really
quickly, I want to show you what the Media Library looks like. So if I hover over
Media and click on “Library” you can see on the Media Library that I have all the
images that I uploaded right here and if I want, I can click on any one of these.
We’ll get this little popup, and I can click on the “Edit image” button.
You should see the image show up right here. If you select any of the space
in this image, you can crop it by clicking on this button or you can rearrange how
this image looks with these buttons right here. You also have the option of
changing the dimensions over here. If you do make any changes, you want to
click on the “Save” button right here. But we’re not going to change anything.
I just want to show you that you can edit these images if you want, okay?
So now, we are done uploading images for the WordPress website that
we’re going to learn how to make. We are good to go and we can
move on to the next step. So now, that we can do is move on and
go and customize the theme settings for our WordPress website so that we
can customize the colors, font, layouts and everything like that.So what
I want you to do is hover over Appearance on the left-hand side
and click on the “Customize” link. Once you’re on the Customize page,
this is where you can go to select the settings that you want for the WordPress
website that you’re learning how to make, including the header option, your font
styles, the colors that you want for your WordPress website, and then your footer
options and all of these other things. So what I want to do is just show you
what I selected for the demo WordPress website, and you can always pause the
video and go through all of these tabs on your own. They’re pretty self-explanatory
but if you need any help, you can always leave a comment in the comment section
below of this video and I will reply back to you, okay? So let me just go through
the first tab with you. So if I click on “Header” and then click on “Menu”
this is for the header section up here. What you can do is select the “Menu
Type” that you want and I’m going to leave everything as the default here,
but there are some options. So you can go and play around with these
and you can see what the site looks like on the right-hand side because this is
a preview screen. If you want to get rid of this left sidebar over here, you can
always click on “Hide Controls” and you’ll see that the page expands to
the actual page that your visitors would see when they go to your
WordPress website. You also have the option over here of seeing what the
website looks like on a PC or laptop, an iPad device or also a mobile device.
So you can see how responsive the WordPress website is based on these
different views right here, okay? So what I want to do right now is just
go back to the main section right here. I just want to go through what I selected
for my own WordPress website that I’m going to show you how to make
and you can follow along or you can select whatever options that you want.
The great thing about this is you can customize your WordPress website
really however you want. So the first thing that I’m going to do is
go into the Typography tab, and I’m just going to go into the Font families tab
and what I want to do is change the Font Family right here to this one called
“Crimson Text.” So I’ll type in “crimson” right here and just select this.
For the body font, I want to select another one right here. So I’ll just type in
“Y-A-N-T”. I don’t know how to pronounce this but this is the font that I want. Again,
you can really choose whatever fonts that you want for your WordPress website.
These are the ones that I think a lot look good so these are the ones that I
selected. I’m just going to go back right here. If you want to change the font
sizes for the body paragraph or the different titles, you can do that right here
by just dragging this little wheel for these different sections, but we’re not going to
do that. So each time I make changes, what I do want to do is click on the
“Publish” button just to save everything. You can do this at the end but if you take
a lot of time to go through all these tabs, then you might need to re-log in and all
that stuff. So I like to just save everything as I go through this. So I’m going to click
on the “Publish” button really quickly. Once that’s saved, I’m going to go to the
Colors tab. In the Colors tab, I just want to go to the General tab right here.
I want to change my primary color from this default pink color to this blue color.
That’s just personal preference and again, you can select whatever colors
that you want. You can also put in color codes and you can go through these
other tabs to change your different colors also. So I’m going to leave
everything else as the default but again, you can always pause the video and
select whatever you want. And then just make sure that you click on the blue
button at the top to save your changes. Now what I want to do is I want to leave
the Footer as the default and the Blog layout as the default also. So I’m just
going to jump down to “Site Identity” and click on this. If you want you can
change the Site Title right here if you didn’t like what you named your website
when we initially installed WordPress. And then if you want to change the
tagline, you can do that right here also. So I’ll just type in professionally designed
for the tagline. You can see that the preview screen is going to refresh and if I
didn’t have a logo right here, then the site title and the tagline would actually
show up. You can see right here in this section that we do have a default logo
and we can actually “Remove” this. So if you do have a custom logo, you
can upload it right here by clicking on “Select Logo”. What I want to do is go to
the Media Library, and I should have all the demo images right here. I’m going to
select this image right here which is the demo logo for this website tutorial.
So if you want to use this one, go ahead and select that and just click on “Select”.
We’re just going to skip the cropping right here. Now you can see that the logo
shows up right here. If you have a Site Icon, you can add that right here also.
That just going to shows up next to the URL on your web browser and sometimes
on the tabs over here, you can see that we have the NYC Tech Club one right here.
But we don’t have a site icon for this tutorial but if you do have one, you can
always upload it right here. So that’s really up to you.
I’m just going to click back right here and I want to just click and save everything one more time. What I want to do is I want to come down
here and in the next section, what we’re going to do in the Homepage settings is
we’re going to change the display options to a static page so that we can have a
homepage and then we can have a blog post page. Because right now,
by default the home page is just our blog post page. If you just want a
WordPress blog, then you can just leave the settings as your latest post and then
you’ll just have your blog post show up. But if you want have a homepage like
the demo WordPress website, then we’re going to go back into this section or the settings section a little bit later after we create some pages and change our homepage displays, okay? So that’s just a little FYI for you,
but what I want to do right now is I want to go into the additional CSS and
we’re going to add some custom CSS. So what I want to do, because yours
should be blank, is I’m going to delete all of this. I want you to go to the NYC
Tech Club Text Tutorial and in Step 7 where we select our WordPress theme
settings, if you come down to the Custom CSS section, you should see this yellow box. What I want you to do is just highlight all of this text right here
and this is custom CSS that’s going to format your WordPress website.
So I want you to just copy all of this and then paste that in right here.
You only need to do this if you want the same exact settings and look
as the demo WordPress website. If you don’t, then you don’t need to
paste this in at all, okay? But again, this is really just to create the look and
feel of the demo WordPress website that we’re learning how to make.
So go ahead and just paste that in and that’s going to format your
WordPress website. That’s pretty much all we have to do for the theme settings.
So again, you can always just go in here and then just play around with this stuff
and go through each tabs slowly on your own. If we need to, we can always
come back here later and update our settings. So as we go through
this tutorial, if I forgot anything, we will come back here, okay? So once
you’re ready let’s click on the “Publish” button one more time just to save
everything. Once that’s all saved, we are good to go and we can close
out of this and move on to the next step. Once you’re back on the WordPress
dashboard, now what we’re going to do is move on and create some pages
for the WordPress website that we’re learning how to make. So what I want you
to do is hover over pages on the left-hand side and then click on “Add New”.
Once you’re on the Add New page right here, all we’re going to do is type in
our page title right here. So I’m going to type in “Home” for our homepage.
And then down here where it says, “Page Attributes” I want you to click
and expand this section if you don’t see this drop down, and then go into this
template drop down and select the “Page Builder” option because we’re
going to be using the Elementor page builder to build out our WordPress
website. And then once you’re ready, go ahead and click on the “Publish”
button. If you see this question right here where it says, “Are you ready to
publish?” we can just click on the “Publish” button again one more time.
Once the page is published, we can go and check it out if you want but we’re not
going to do that right now in this video tutorial, because we want to create
another page for our blog post. So again, what you can do is hover over
Pages and click on “Add New”. Once you’re back on the Add New page,
go ahead and type in “Blog” for the Blog post page. For the template in the
page attributes, we’re going to use the default template for this page because
we can go and customize the layout of our blog post in the theme settings.
So again, if you do want to change the blog layout to something different
than the demo WordPress website, you can always hover over Appearance
and click on “Customize” and then go back to your theme settings, okay? So all
you have to do is type in the blog title and then click on the “Publish” button
and then just click on the “Publish” button one more time. Once the blog
page is created, now we have two pages: the Homepage and the Blog post page.
Before we go and customize and create our homepage for the WordPress website,
I want to set these pages in the settings so that when someone goes to our
domain, they’re going to go to the homepage, and then when someone
wants to go to the Blog page, they’re going to go to a specific page.
So let’s hover over Settings on the left-hand side and then click on
“Reading”. Once you’re on the reading settings page, come right here where it
says, “Your homepage displays” and select “A static page” and then go
into this first drop down and select the “Home” page, and then in the Post page,
select the “Blog” page. Once you’re ready, click on “Save Changes”. Once the
settings are saved, now we have a homepage set and a blog page set.
So what we can do now is go and customize and create our homepage.
So if you want to go back to the homepage, just hover over Pages and
click on “All Pages”. Once you’re on this page right here, this is where you’re going
to see a list of all your different pages that you create. So if you see any pages
that you don’t want anymore, you can just click on “Delete” or click on “Trash”
and then that’s going to remove that page. But you can see right here that I
just have the homepage and the blog post page. What we want to do
now is move on to the next step which is going to be creating and
customizing the homepage. So what I want to do is go ahead and click on
the “Edit” button. Once you’re back on the Edit page right here, let’s go
and start customizing our homepage by opening up the Elementor page builder.
So click on this button right at the top that says, “Edit with Elementor”. Once the
Elementor page builder loads, this is what you should see. So on the right-hand side,
this is the homepage, and it should be a pretty blank canvass right now besides
the footer. We are going to go in and customize this in a little bit and then what
we’re going to do is add some different sections and rows and columns and then
we’re going to drag in some elements on the left-hand side over here into our
homepage to really customize the look and feel of this page that we’re learning
how to make. Really quickly, I can show you down here at the bottom there are
some buttons. So you have this one right here called “Responsive Mode” and if you click on that, you can see what the desktop view looks like for your website
and if you click on “Tablet” it’s going to show you what the tablet device looks
like and then also the mobile device. So in this video tutorial, we are going to
show you how to make a responsive website. So first, what we’re going to do
is add all of our different sections for the Desktop view and then we’ll go
and customize the settings for the Tablet and Mobile device. So I’ll show you how
to do that and then you can go and do that to all of your different pages.
Also right here, you should see this little arrow to hide this panel. What that’s
going to do is just let you see what the website looks like if you were to look at it
on your desktop or laptop device, okay? You also have this little eye bar right here
so that you can preview the page if you want also. So again, we’re going to go
step-by-step and we’re going to learn how to create this homepage that you
see right here. So by the end of this section, you’re going to be able to
customize your homepage however you want with whatever colors or
different sections or anything like that or what you can do is just follow along
and create this exact website page that you see right here, okay? So if you’re
ready, let’s go back to the Elementor page builder. Once you’re back on the
page builder, what I’m going to do in this video tutorial is just show you how to
create all the pages that I have for the demo WordPress website. By following
along, you should have all the tools and resources to create any layout
for any page that you want to make for yourself or for any client, okay? So
first, what we’re going to do is add a row for our banner image. So click on the “+”
button right in the center of the page to add a new section. You should see this
little popup and what you can do is select the section option that you want. So all of
these have different columns and what I want to do is just have one big box. So I don’t want to have two different rows or columns, so I’m going to select this one
right here. You should see this section right here where it says, “Edit Section”
and what we’re doing is editing this little blue section right here right now. What
we’re going to do is add some elements over here to customize that section. So in
the layout section right here, I want to leave this as the “Boxed” option but you
can select the “Full Width” option if you want. And then for the Column Gaps, I’ll
leave that as the “Default”. For the height, I want to change this to the “Minimum
Height” option because you can see that right now, this blue box is the section.
What I want to do is make this a full-linked section. So I’m going to click
and drag this a little bit to make it larger. So maybe I’ll make it around 70-80 or so.
And then I can leave all this other stuff as the default but you can always go in here
and play around with the stuff on your own. And then once you’re ready,
let’s go to the Style tab right at the top. You should see this section popup and
what you can do is add a color if you want by clicking on this color pad and then just
drag in this wheel or adding a color code. But what I want to do is add a background
image. So I’m going to hover over this and click on the “+” button. You should
see the Media Library popup. So if you’re using the demo images, we can just stay
on this tab right here. If you want to upload your own images, click on
“Upload Files” and then click on “Select Files” and then find the
image that you want to upload. So I’m going to go to the Media Library
tab and just select this image right here. So I might change the name of this
image but this is the slider image that I’m using and you might not see the
same exact images because I do pay for the rights to use this but I will give you
some filler images that you can use and you can always replace them later,
okay? So I’m going to select this image and then just click “Insert Media”. Now
you should see the image show up right here and it doesn’t really look
that good right now. So I want to actually go into the settings and just select
some of these. So for the position, I’m going to go with “Center Center”.
You should see that adjusts a little bit and then we’ll go into the attachment,
and I want to change this to the “Fixed” option but you can always select
whichever one that you want so you can see right now, it looks like a parallax scroll when I actually scroll down. So that’s where you can select that.
And then for the repeat, I’m going to go with no repeat and then the size,
I’m going to change this to cover to actually format the image so it
looks perfect. So if we want, we can actually just hide the panel and
you can see that we have a full width slider image right here. I want to actually
add an overlay. What that’s going to do is just add a little cover or different color
for this image so it’s not as bright. So to do that, you can come down to the
background overlay section and just click and expand this and you should see this
section right here. I’m going to click on this “Classic’ button. What I want to do is
just add a color. So I’m going to click on the color pad and I’m going to put in this
color code right here which is “#1d41ad”. You can see that it’s this purple blue color
right here. So you can always just drag this wheel or add any color code that
you want. I will have these color codes in the Text Tutorial on How to Make a
WordPress Website. So if you like this color, go ahead and put in this color code
and then just click on the color pad right here. If you want to change the
opacity to make this lighter or darker, this overlay color, then you can just click
and drag this wheel. But I’m going to leave this as 0.5. So that’s all we have
to do for this right here. We can always go back in here and edit this section by right-clicking and you’ll get this popup and you can just click on “Edit Section”
okay? So now what I want to do is I want to add some elements to this
background image so that we can have our header and sub headline and
everything like that. So you can click on this “+” button right in the center or what
you can do is click on this little icon on the upper right of this panel and you’ll go
back to this section right here and then you can just click and drag these elements in. So I’m going to click and drag the heading element into this
section right here. You should see the heading show up right here and there
should be some demo text. So what we can do is just click on this section
and we’ll come in to the “Edit Heading” and we can go in here and change our
headline so I’ll type in “Creative Designs.” And then if you want to change the
font size, you can do that right here. I’ll leave it as H2 but I will center this.
And then if you want to edit the font color or size, what I want you to do is click on the “Style” link right here and then you can go into this color pad and then just change it to whatever color that you want. And then go into typography if you want to change the font family. I’m going to leave it as a default but I want to change the font size so I’m going to increase this to about “110” or so. This looks pretty good. And then I’ll change the font weight to “600” just to make it a little bolder.
If you want to change any of these other options, you can. I’m going to leave
everything as is. The only other thing that I want to do is go to the “Advanced” tab
and I want to add some bottom margin. So this section’s going to make a little
more sense as we go through this video tutorial, but the margin and the padding
are going to add some spacing to different spots of this element.
So you can see it says, “Top, right, bottom and left”. I want to add some margin but
right now, you can see if I type in “5” it goes all the way across. So I don’t want
that. I want to just have the bottom margin show up. So I want to delink this,
so I’m going to click on the link button right here. And then I just want to go into
this arrow and I want to add “-15”. So I went a little too far but you could see
right here I just pushed the down arrow and it changed it to -15 and that just
pushes this down a little bit. This looks pretty good. So now what I want to do is
add another element. So I’m going to click on this icon right here. This time around,
what I want to do is just click and drag in a “Text Editor” at the bottom of this
heading element. So I’ll just drop it right down here where you see this blue bar.
You should see the edit section right here. So I’m going to go in and delete the demo
text. I want to type in a sub headline so I’ll type in “Mobile Marketing”. So this is just
something specific to my demo website but you can type in whatever you want
and we’re going to go and center this and all that stuff in the Style tab. So once
you’re ready, click on the Style tab. The first thing that we can do is just align
this to the center and then I’ll go in again and change the font color to “White”.
So you can see the font color code right here. You can always just drag this wheel
to whatever colors that you want also. So these are just things that you can do
on your own and then we want to increase the font size and maybe change
the font family from this default type. So I’m going to go in here and I’ll
actually type in a font style that I want. So I want this one right here. I don’t really
know how to pronounce it but it’s “Alegreya” or something like that.
So if you want the same one, go ahead and find that one. And then I’ll just go in
here and type in “37″ for the font size. And then the weight maybe, I’ll type in
“500” or “300”. So this looks pretty good, and I’m pretty happy with it. So if you’re
happy with yours, we can just click this to close that. The last thing that we’re going
to do for this section is we’re going to add a button at the bottom. So let me show you how to do that. Let’s go back to this panel right here. Let’s find the button
element and click and drag that below the text editor. Now you should see
the button right here. We can just go in here and edit this text. So we’ll say
“LEARN MORE”. And then right here where it says, “Link’ this is where you
can type in the URL to link this button to another page. So what I want to do is
link this button to the About Page, but if you want to do this later,
you can leave the “#” right here and you can always come back to
this section. If you want to link this button to the About Page, then youn
can just type in the same URL that I’m going to. Again, we’re going to create this
page a little bit later. So I’ll type in “https” because we have the SSL certificate activated and then “://www.nycstudiodesigns.com”. So you
want to put in your own domain name and then just type in “/about”. So you
can also just link it to any of the pages that show up. If you have created some
additional pages, you should see little popup right here but you can
always just type in the URL also, okay? So now I’m going to center this and
just change the size to “Large”. That’s all I want to do on this tab.
So I’m going to go to the Style tab. You can see right here that for the
Typography, there’s the Normal and the Hover. So right now, we’re on the
Hover tab. So that’s what your button’s going to look like when you’re just on
the web page. But when you hover over it, you can actually customize the
colors and everything so that it changes to a different color. So I’m going to
show you how to do this really quickly. So make sure that you’re on the Normal
tab right here and I’m going to leave the Text Color as the default,
but I’m going to go in to the Background Color, and I want to
put in a color code right here. So I’ll type in the “#e50072”.
You can see that I get this pink color and I think that looks great for my
website, so I’m happy with that. And then what I want to do is I want
to make this button a little rounder. So for the Border Radius, I’m going to
type in “30” here and it’s going to make it round just like this. If you want to
change anything and you don’t want to change everything all at once,
you can always click on this little button right here, but that’s
really up to you, okay? So we have our button for the normal tab,
and now I want to add some styling for when you hover over. So what I want to do
is click on the “Hover” button right here and you can see that we get the same
options. But now what I want to do is I want to go into this section where it
says, “Text Color” and I want to put in the pink color. So I’m going to type
“#e50072” so it has that pink color. And then for the Background Color, I’m going to go in here and just choose “White”. So I’m going to leave everything else as, but check this out now when I hover over this button, you can see that it changes colors, and that’s because I styled everything using the Hover tab,
okay? So pretty much, that is all we’re going to do for this section right here.
So let’s go and save everything really quickly just to make sure that we
have everything saved. So what I want you to do is click on the “Update” button
at the bottom over here. Once that’s saved, now what we’re going to do is
we’re going to create the section below the slider where we have some
information about our business and we’ll insert a little image right here.
So let’s go and create a new row or section below this. So what I want you
to do is just scroll down and click on the “+” button right here and then
select this option right here where it has two columns. Now you should see
this section right here and you can always click on these little dots
right here to get the Edit section to show up. I just want to go into the layout
and select “Full Width” and then change the Column Gaps to the “Wide” option.
And then I ‘m going to go to the Advanced tab and I’m going to delink the
Padding and what I want to do is just add some top and bottom padding.
So I want to put in “100 for the top and “100” for the bottom and that just
gives me some space at the top and the bottom and you can see that
the elements are going to go into these two sections right here, okay?
So once you’re ready, now what we’re going to do is click on the little icon at
the top and drag a heading element into this section right here. You can see the
element right here and we’re just going to go in here and type in our headline.
So I have on different lines, it says, “A digital agency focused on growing
your online presence.” I’ll leave everything else as the default
but I will go into the Styling tab to change the font size. So I’m going to
click on the Typography icon and then just put in “48px” for the Font Size.
And then down here for the Line Height, I want to select the PX option so
click on this little link right at the top and then I want to put in “50” just to
give it some more space in between each line. Now we’re done with this
little headline, so what I want to do is go back to all of the elements by
clicking on this icon and I want to drag in a text editor for a little
description sections. So I’m going to drag this below this section and if you
hover over this section, you can see where we’re going to drop it. So I’ll just
place it right here. You should see the text editor right here. If you want, you
can go in here and just update this text. So I’m just going to delete some of
these text and I’m not really going to write anything out. Since this is a demo
website and I just want to show you how to use the Elementor page builder,
but if you need to you can always pause the video and type whatever
you need to and you can also use these buttons right here to style your text.
So you can also click on this button that says, “Toolbar Toggle” and you open
up this other section right here with some additional buttons. You also have
the Style tab right here if you want to change the alignment or the text color
or change the font style or size right here with the Typography button.
So we’re going to leave everything as is and we don’t need to go into the Advanced tab and add any margin or padding. So right now, we have our first text editor
and what I want to do for my website is I want to have another textbox below
this just for fun. So I’m going to right click this section and you should see
this popup right here and what I want to do is just “Duplicate” this section.
So I’m going to click on this. You can see right here that I have
another section right below now. So pretty much, I am done with this
section and I just want to add a button down here that says, “Learn more” or
“Read more”. So I’m going to go back into the panel and you should know
how to add a button now. So we’re just going to go and find the button widget
and just click and drag that and place it wherever we want. You should
see the button show up right here. So again, we’re going to go through the
same steps that we just did a little earlier with the other button that we put in.
We’re going to change the text right here and this time I’ll type in “Read More”.
And then if you want to put in a link or URL to link this button right now,
you can just type in the URL or what you can do is always just come back
here and then type in the URL later. So I’ll just type in “https://www.
nycstudiodesigns.com /about”. Again, I’m just linking this button to
the About page. And then I want to Center this button or actually, I’m going to leave
it on the left-hand side over here because it looks pretty good. I’m going
to leave this as the small size for this button but you can always go in here
and select whatever you want. If you don’t like any of the changes
or anything that you do to the WordPress page that you’re making, I do want to
note that there is a little button down here called “History” and if you click on
that, you can see all the steps that you did to customize this page so far.
If you ever want to go back on any of these steps, you can just click on these
little icons right here and then it’s going to erase everything above over here.
So hopefully, that doesn’t confuse you. I know I started a little bit right there but
that’s how you can go backwards or you can always just click on the sections
by right-clicking them and then you can just delete them also, okay?
So I’m going to go back and double click on this button. I know I just kind of took
a detour right there but I did want to mention that because some people don’t
always want to do all the steps that you do or they want to go backwards if they
messed up and all that stuff, so you do have this history button over here.
So let’s format this button a little bit more by clicking on the Style button
right here. First, we’re going to be on the Normal tab. So if you remember,
the button right now is going to look like this when you don’t hover over it and
then we might make some styling changes for when you do hover over it.
So first I want to change the Text Color. So let’s go in here and change to “Black”.
And then for the background color, I’m going to make this “White” because
what I want to do for this one is show you how you can add a border around
this button. So right here where it says, “Border Type” I’m going to go in here and
select “Solid” and then you can go in here and select the width that you want for
the border. So maybe we’ll do “2px” just to see how that looks. So you can see
the border looks a little thinner but if you type in “20” you can see how thick the
border is right here. So you can play around with that on your own.
And then for the color for this border, I want to go in here and I’m going to type
in that pink color code. So I’ll type in “#e50072” and again, you can see that
pink color and it shows up right here. So I’ll click this and I want to add the
roundness to this button. So again, I’ll type in “30px” and that’s going to go
across the board right here just to make this button round. So if you don’t want a
round button, then you can just change the radius or leave this blank. Now what I
want to do is I’m going to go to the Hover button right here. I actually don’t think I
want to make any changes to the hover settings, but if you want you can always
just click on “Hover” and then change the text, background or border color
whenever someone hovers over this button. So you can do that on your own.
I’m actually happy with how this section looks right here, so we can move on to
the right-hand side if you’re ready. So if you want, we’re going to go back
and click on the “Panel” icon right here to bring it up all of these widgets. What I
want to do is find the “Image” element and just click and drag that into this
section right here. Now what we’re going to do is just add an image right here.
So to do that, we can just hover over the “Choose Your Image” icon on the
left-hand side over here and click on that. You should see the Media Library show
up right here. So if you want to upload your own image, click on “Upload Files”
and click on “Select Files” and then find the image that you want to upload.
If you want to use the demo content, make sure that you’re on the Media
Library tab and we can just scroll down and find this image right here.
So if you find this one, make sure that you click on it so that you get this check
box and then click on “Insert Media”. You should see the image show up right
here. If you want to format the size or anything with this image or if you want
to add a caption or if you want to link this image to another page, you can go in here
and select custom URL and type that in. We’re going to leave everything as is.
So we are actually done with this section but what I want to do is just hide this
section really quickly just to show you what it looks like. You can see that this
section goes all the way from one side to the other, so what I want to do is make
sure that I go back into the Section Heading or Settings. So I want to hover
over this and click on the little icon right here. I want to go in to where it says,
“Content Width” and I want to select the “Boxed” option. That’s just going to
change the formatting for this section. So if I told you to select the “Full Width”
option, I apologize. Go ahead and go in here and select the “Content Width” by
just hovering over this section and clicking on the buttons right here.
And then now if we hide this section, you can see it’s formatted pretty nicely,
okay? So pretty much, we are done with this section. So again, what I like to do
all the time is just save everything just to make sure that we have all of our
changes saved so we don’t have to review everything. So click on the
“Update” button right here. Once everything is saved, we are good
to go and we can come down to the bottom. Now what we’re going to do is
create this section where we have a background color and then we have
some text and if we click on this, it’s going to open up a video. So I’m going
to show you how to do this really quickly. Maybe you don’t want this section on
your homepage, but I’m going to show you how to create it with that popup,
so just in case if you do want it, you can have that. So let’s click and add a
new section by clicking on the “+” button right here. Let’s add a “Row” like this one.
So click on this. You should see the edit section right here. It looks a little small
right now so what we’re going to do first is go in to the Content Width. For this one,
I want to select “Full Width” so it goes from one end to the other on this section
and page. We’ll leave everything else as is right now. We can just go to the
Styling tab, and I want to go and add a Background color. So I’ll go in here and
just click on color. I’m going to be consistent and just use the same
color code for most of my website. So again, this is the color code “#e50072”
and I get this pink color. And then, I’m going to go into the Advanced tab
right here, and I want to add some top and bottom padding. So I’m going to
delink this and for the top, I’ll type in “145” and then for the bottom, I’ll also
type in “145”. You can see that it just spaces out this section and then we
have the center section right here, okay? So now what I want to do is go back to
the Elements, so I’ll click on this icon. The first thing that we want to do is add
a “Heading” element. So I’m going to click and drag this in and I’ll just change
the text right here. So I’ll type in “Our Perspective”. Go ahead and type in
whatever you want and if I go too fast, you can always pause the video or
rewind and re-watch this section. Some of the feedback that I’ve gotten
before for some of my videos is that I take too long or describe things in too
much detail. So this time around, I’m just trying to show you guys exactly
what you guys need to do or what you need to know so that you can create
whatever type of pages that you want. So let me know in the comment section
how you guys do you like my teaching style, and if I’m going too fast or too
slow, because that feedback is always really, really valuable, okay? So back on
track right here, we have our headline, and I want to change the font size
right here. So in this HTML Tag, I’m going to select “H4” and then I’ll center this
right here. And then I’m going to go to the Style tab just to change the font color
to “White”. So I’m going to go in here and just select the “White” color at the
bottom. You can see that it has the color code right here. This looks really nice
with the pink background color. So now, I’m going to add a larger heading
down here. So I’m going to go back to the Elements and then just click and
drag another “Heading” element right below this. Once this section shows up,
I’m going to go in here and just type in my text that says, “See More About Us”
and I’ll leave the HTML Tag as “H2” but I will center this. And then I’m going to the
Style tab and change the Font Color to “White”. And then for the Typography, I’ll
go in here and I want to type in “60px” for the size and then I want to add some
line height. So first, I’m going to click on “PX” to change the formatting for this
and then I’ll type in “49” right here. You can see that just gives some spacing
in between these two sections right here, okay? So now we have our text for this
section, and we want to add the button for our video. So let’s go back to the
Elements. What we want to do is find the” Video” element. So click and
drag that to the bottom over here. You should see this section right here.
So what you can do is come and edit the video and if you have a URL to a YouTube
video or a Vimeo video or anything like that, you can paste that in here so you
could see all the different video sources that you have. I won’t show you how to
do that because you can just go to YouTube to find a URL. So we’re going to
use the Elementor default video right here, just because this is a demo website.
What I want to do is I want to customize this to make it look a little bit more
professional. So once you type in the URL for your video, I want to come down to the
bottom and click on the “Image Overlay” section to expand this, and then I want
to click and show the image overlay. You don’t really need to worry about
the image but if you want to have a thumbnail for your video, you can have
that right here and then you can choose the size of that right over here.
But what I want to do is make sure that the Play Icon is selected so that you see
this little play icon. And then I want to turn on the Lightbox so that the video
pops up on the screen right here. So I’m going to show you how to get rid
of this in just a little bit but first, let’s go to the Style tab. If you want, you can change
the Color for the play icon over here and then in the Lightbox section, you also
have the option of choosing an animation and all that stuff. So in the Advance tab
right here, what I want to do is I just want to put some top padding right here.
So I’m going to delink this and I’ll type in “25px” just to lower this a little bit.
You can see there’s a little spacing. So this is what the default looks like
right now, but what we want to do is we want to make it look like the demo
website where you just have this little play button right here. So if you want to
do that, what I want you to do is go back to the website that you’re learning how
to make and then go to the top to hover over the section and click on this little
buttons up here and then you go and edit this section. And what we’re going to do
is go to the Advanced tab and down here where it says, “CSS Classes,” what I want
you to do is type in this text right here. So it’s “atu-agency-video. This is some
code that’s going to hide the thumbnail because of the CSS that we added into
our theme settings a little earlier. So you need to paste this in if you want
to make the thumbnail image disappear. You don’t need this if you want to keep
the thumbnail and you want to just go and click on the edit video and you want
to add the image overlay down here. All you have to do is just click on this
section and then you can go to the Media Library and find the image that
you want and then select the size that you want, okay? So that’s how we add this
video section right here and you can see that this is what it’s going to look like.
So our website is looking pretty good right now. I’m going to save everything
just to make sure that we have everything saved. And then what we can
do is move on to the next step which is going to be creating this Services
section right here. So if you want to learn how to make this, let’s go back to
our WordPress website and let’s go down here and click on the “+” button.
What I want to do is I want to add this section right here and then we can go
into the Edit section and leave the Content Width as “Boxed”. I just want to
come to the Advanced tab, and I wanted to delink this and then I want to put in
“100”for the top and then “100” for the bottom. Again, this just spaces this out.
Now what I want to do is I want to add an inner section right here so that we can
have some columns for our services. So click on the “+” button right in the
middle to get this panel to show up and then click on the “Inner Section” and
drag that into this section. You should see that we have two columns right here
and we want to add three. So if you want to do that, hover over this section right
here and then just right click on this little grey icon at the top corner, and then
click on “Add New Column” and now you can see that it adds a new column
right here, okay? So that’s all we have to do for this section right now. So I want
to go back to the panel with all the widgets, and I want to click on the
“Heading” element to add that to the section. So what you want to do is drag
that in and you want to drag it right above the inner section so that you see
right where you’re dropping it off. So just drop it in here. You should
see the Heading element right here. So what we can do is just change the title
to say, “Our Services” and then we’ll center this. And then I’ll go to the Styling
tab. I just want to change the Font Size. So I’ll go in here and type in “48px”.
And then I’m going to go to the Advanced tab. I want to add some margin at the
bottom over here and that’s just going to add some spacing again. So again, you
can always just play around with this stuff to see what you like. So for the
bottom right here, I want to click on the down arrow to make this “-11”. That’s again just for formatting purposes that I like. So if you’re ready, now what I’m going to do is go back to the panel and get a Text editor and drag that below
the heading. So right over here. Now what we can do is just change the sub headline to say, “What we’re all about” and then I’ll go to the Style tab and just center this. You’ll notice that the font isn’t black right now. So I want to change this to “Black” and then I want to increase the Font Size and we’ve changed the Font
Family. So in the Family, I’m going to type in “abh” and find this font family.
So it’s “Abhaya Libre.” And then for the size, I’ll go for “24”. That’s pretty much all
I have to do. So there’s nothing to do in the Advanced tab right here. So if you’re
ready, let’s go back to the main panel right here. And now, what we want to do
is get some image boxes for the service icons that you see right here. So what
we’re going to do is go to the General tab over here and then just click and drag
this image box into this first section. You should see this right here. So the first thing that I’m going to do is add an icon right here. So if you want to do that, click on “Choose Image”. You should come to the Media Library and we have some images down here. So I’m going to select this one and then click on “Insert”.
You should see it show up right here. So if you want to put in a title right here,
we can just type in “Branding” and then what you can do is come in here and
jus change the description if you want. So I’m pasting in some gibberish so don’t
type in the same thing. Make sure that you replace this with something
professional. And then if you want to come down here, you can link this
section to another page or you can position this however you want, okay?
So we don’t need to do anything else. We’re going to leave the Style tab as
is and also the Advanced tab right here. So what I want to do right now to finish
out this first service box is I want to add a button. So I’m going to go back to the
main panel right here and I want to find the “Button” element and just click and
drag that in below this. You should see the button right here. What I want to do
is just go in here and just change the text to say, “Read more” and then I’ll let you
link this button to whatever page that you want. So if we wanted to, we can link it to the About page. So maybe we’ll just type that in just for fun really quickly. So again,
if you need to, type in https://www. your domain name. So we’ll type in
“nycstudiodesigns.com/about. So again, you can always come in here
and update this URL or link it to any page that you create for your website. And then
if you want to center this, we can do that right here. And then if you want to add
an icon, which I want to do for this one, let me show you how. So I’m going to go
in here and just type in “Angle”. You can see there are a few different options.
You can see all the lower icons right here. I’m going to go with this one called
“double-right”. You can see that the icon shows up right here. So I want to change
the positioning to “After” right here and then we can add some icon spacing,
so maybe we’ll put in “10” right there. Now what I want to do is just go to the
Style tab, and I want to change a few things. So down here for the Text Color,
I’m going to change this to “Black”. And then for the Background Color,
I’m going to go with no background color. So maybe, we’ll just make this opaque.
So if you do drag this all the way down to the bottom, it’s going to make it
transparent. So you don’t have to choose a color right there. And then for the
Boarder Type, I’m going to leave it as “None” so it just looks like a link right
here. If you want, you can also have a hover color. So you can just go in here
and style this however you want. I’ll leave this as is so let’s have a link right here.
So I’m not going to customize this. But if you want, go ahead and do that.
And then once you’re ready, we are done with this section right here. With the
power of video editing, I can just make the other two sections appear right here.
You can see that these two sections show up right here. We just followed the
same exact steps for this section right here. Again, this isn’t by magic.
It’s because I edited this video just to speed things up a little bit. So if you need
to, you can pause the video and add the other two sections right here and also
these buttons right here. If you don’t remember how to do that, you can just
re-watch this section to see how we created this section right here, okay?
So if you want, go ahead and pause the video and do that right now.
Otherwise, what we’re going to do is just move on to the next section down here
which is going to be this Testimonial section that you see right here. So I’m
just going to move on and create this section right now. The first thing that
we’re going to do is go and create a new section. So we’ll click on this “+” button.
What I want you to do is add this section right here. Now you should see this
section right here and I want you to click on the “+” button so that we can add
an inner section for our testimonials. So just hover and drag this inner
section in. Now you should see a parent section and then the inner section with
two columns right here. So what I want to do first is I want to hover the main section
and click on these little dots so that we can edit this section. All I want to do is go
in to the Style tab and I want to click on the “Classic” icon and then click on the
“Image” button right here so that we can add background image for this section.
So I’m going to select this image and again, I’ll find you similar images that you
can use and they might not be exactly the same, but I will find you images that
you can use that aren’t copyrighted. So once you select that image, go ahead
and click on “Insert Media”. And then what we can do is just set this to the
center, and then we can go with “No-repeat” and we can “Cover” this.
And then what I want to do is just add a background overlay really quickly.
So I’m going to open up this and click on the little icon and the color pad and just
put in the color code “#0b00af” and that’s going to give me this purple color
right here. The opacity is 0.5. And then what I want to do for this section is I want
to come to the “Advanced” tab and de-link the padding. And then I just want to type
in “100px” for the top and “100px” for the bottom. What that’s going to do is give
me some spacing in between so that everything is going to be centered for
this section, okay? So once you’re ready, we can click on this little icon to go back
to the main panel, and I want to add a Heading element. So just click and drag
the Heading element into this section right here and what we can do is just
change the title right here to say “What Our Clients Are Saying.” And then I can
center this and then go to the Style tab and we can change the font color to
“White”. And then for the Typography, I can go in here and maybe I’ll increase
the Font Size to “48”. If you want to do anything else, you can do it on your own.
I’m going to go back to the main page here. What I want to do now is I want to
add a sub headline. So I’m going to click and drag the Text editor below the
Heading. And then all we have to do is just come in here, and we can just paste
in our sub headline. So I‘ll type in “Don’t Just Listen To Us… Listen To Everyone
Else”. And then what we can do is go to the Style tab and we can “Center” this.
And then we can go to the Text box and change the color to “White”. And then in
the Typography tab, I’ll go in here, and I’ll change the Font Family to “Abhaya Libre”
and I’ll put in “24px” for the size. If you want to do anything else, you can on
your own. And then I want to go to the Advanced tab. All I want to do here is I
want to de-link the margin and then I want to use the down arrow. I want to change this to about “-11”. You can see that the formatting just looks a
little bit better right there, okay? So now what we’re going to do is add our
first testimonial right here. So what I want you to do is come down on the General
tab and then find this Testimonial element and then just click and drag
it into this first section right here. Once you see this, if you want to update
the testimonial with some actual text, you can update the Content section
right here. I’m going to leave it as is but I will show you how to format the colors
and everything for the font a little bit later. But first, what I want to do is I want to
add a profile image for the person that’s giving the testimonial. So I’ll click
“Choose Image” and then I’ll go into my Media Library and find this image right
here and click “Insert”. You should see the image get inserted right here and we
can increase the size in just a little bit, but first I want to change the name of the
person giving the testimonial to Jennifer Williams and then I’ll keep her job title as
is. If you want to link this testimonial box to the client’s page or anything like that,
you can put in the URL right here. So for the demo website, I do align these
testimonials to the left side. So I’ll just select the “Left” option. And then what
we can do is come up to the Style tab. This is where we can change the font
color. So we’re going to make this a white background color. So I want to change
all the texts to black. So in the content section, I’ll go in here and select “Black”
and then for the Typography, I’m going to change the font size to “17”. For the
Image, I want to go in here and just change the image to about “70” or so.
So I’m going to drag this wheel to make the image a little larger and I’m going to
come down to the name. And again, put in the “Black” font color and then also
change the font size to “17”. For the Job title, I’ll go in and select the “Black” color.
For the Font Size, I’ll make this a little smaller so I’ll put in “15” right there. And then what we can do is we can go to the Advanced tab right here. We can come down to Background, and we can click on this little “Classic” icon and just
choose the “White” background color. So now, you can see the text. I want to
come down to where it says “Border” and I want to make the edges round,
instead of making this a rectangle with sharp edges. So right here, I’ll type in “20”
and you see now that the edges are a little round. You can also see that the text
doesn’t look that great and there’s not a lot of spacing. So I’m going to go back to
the Advanced tab, and I’ll just put in some padding right here. So if I put in 25,
you can see now this looks a lot better, okay? So that’s all you have to do to
create a testimonial and before I publish this website, I’ll probably update the
testimonial blocks right here to make it look a little better with some actual text,
but this is all you have to do. So what I want to do is add another testimonial
right here, but I’m going to do the same steps, and I don’t want to really repeat
myself because that’s just going to waste time in this video. So I’m going to use a
shortcut. I’m going to right click this testimonial and just duplicate it and make
a copy of it. And then what I can do is just hover over this pencil and click and
drag it into this section right here. With the power of video editing, I did update this section. So you can see we have a different profile image and a different name. I also updated the text for both of these testimonials to reflect what
someone might say about the NYC Tech Club. So if you are watching this
video tutorial and you want to leave a testimonial, go ahead and leave one in the
comment section below in this video tutorial. Also, make sure to subscribe
and give this video a big thumbs if you haven’t already. So this is how you create
the testimonials for this section of the WordPress website. If you need to,
you can pose the video and go through the same steps that we just did to create
another one of these on the right-hand side. Otherwise, we’re just going to move
on to the next step. So if you’re ready, what we’re going to do now is add our
blog post section. So what we want to do is again, click on the “+” button right here
and then add a new section. Once you see this section right here, we’re
going to go and edit this section. So we’ll leave everything as is. I just want
to go to the Advanced tab and de-link the Padding. I want to put in “100px” for
the top and the bottom padding just to give it some space. Once we do that,
we can go and add our heading for this section, so drag that in. Once you see
this section right here, we can just go in and type in “Latest News”. We can center
this and then we can go to the Style tab and we can go to Typography. We can
change this to “48” right here. I think that looks pretty good. So I’m not going
to do anything to the rest of the settings. What I do want to do is add a sub
headline. So I’m going to add the Text Editor. So I’ll click and drag that below
the heading. All I’m going to do is just come in here and just replace the text
with “Recent Ramblings and What We’ve Been Up To”. And then I’ll go to the Style
tab and center this. You can see that the Font Color isn’t exactly black. So I’m
going to change that to “Black” right here and then go into Typography and change
the Font Family to “Abhaya Libre”. And then the Font Size, I’ll change it to
“24”. I think that’s about it for the Style tab. I’ll go to the Advanced tab though
and I will de-link this. I’ll use the down arrow for top to change it to “-11”
just to bring it up a little bit, okay? So now once you’re ready, what we
want to do is go back to the main panel right here and then come down to the
Airi elements. You should see this “aThemes Blog” element. I want you to
click and drag that below the Text editor. So let’s just find out where we can drag
that right here and just drop that in. You should see this section show up right
here and it should be formatted already. You might not have any blog post right
now. So my website already has a blog post published and that’s why this
section populates. I will show you how to create some blog post in this WordPress
tutorial so this section will show up in just a little bit. So right now, let’s just go
through the Settings. We have the default Skin and then we’re going to show our
latest three blog posts. All we have to do is go to the Advanced tab and I want to
add some Top Padding. So I’m going to de-link this and I’ll just type in “50”
right here and that’s just going to add some spacing right there. That’s pretty
much it. So pretty much, we are done creating the homepage for our
WordPress website. So what I want to do really quickly before we move on
to the next step, which is going to be showing you how to make your web page
responsive, is I want to make sure that we save everything. So click on the Update
button at the bottom over here. Once everything is updated, we are good to go
and we can move on to the next step. Now what we’re going to do is make sure
that our website is responsive for all of our different devices. So if we click on
the “Responsive mode link” down at the bottom, you can see that we’re on the
Desktop Preview page right now. If we want to see what the website looks
like on the tablet device, we can just click on “Tablet”. You can see that the website
looks really good on the tablet device. So we don’t need to make any changes
here but you can if you want. I will show you how to do that. But what I want to do
is just go and check out what it looks like on the mobile device. You can see right
at the top that the formatting for this section doesn’t really fit on the screen.
Everything is a little low and the text is a little too large right here. So we can
go and fix this in just a little bit. But first, I just want to go through the rest
of this page to make sure that everything looks good. You can see as I’m scrolling
through this, everything looks perfect. So the only thing that we have to fix for
the mobile view is the slider image right at the top. So what I’m going to do in this
section of the video tutorial is show you how you can edit any of your sections to
make them responsive for any desktop, tablet or mobile device. And then we will
go through this again for any of the other pages that need help with creating a
responsive website. But I will go into more detail in this section since we’re
going to focus on responsiveness, okay? So if you’re ready, what I want to do is
go back to the desktop view right here. I want to edit this section. So what I want
to do is right click on this section and click on the “Edit” link. And then you can
see I can edit this section. What I want to do is go to the Advanced tab right here.
Let me close out of this responsive popup right here. So on the Edit Section
Advanced tab, there is a tab right here called “Responsive”. On the Responsive
tab, you can see there’s a section called “Visibility”. What you can do is you can
hide this section that you created on any of these different devices: the desktop,
tablet or mobile device. But this section looks good on the desktop and tablet,
and it doesn’t look good on the mobile device. So what we want to do is we want
to hide this section on the mobile device, and then create another section and
format it correctly that shows up just for the mobile device and hides it on the
tablet and desktop device. So all I did was I checked this to hide this section on the
mobile device and then we can go into the Responsive mode and check the
“Mobile” option. Now what we can do is just click on the “+” button right here and
we can create a new section that’s going to look just like this one that we have for
the desktop and tablet but it’s going to be formatted correctly for the mobile device. So let’s click on the “+” button right here, and then add a new section. Once you
see this section right here, we can just go in and change the settings. So we’ll select
the “Minimum Height” and then we can just drag this to make everything show up
on this main page. So it’s about “546px” and then we’ll leave everything else as is.
I’m going to go to the Style tab and add the Background image that I want.
So I’ll click on the “Image” button. In my Media Library, I’m going to select
this image right here and click “Insert”. You should see the image show up
right here but we want to go through the settings again. So for the Position,
we’ll go “Center”, for the Attachment, I’m going to go with the “Fixed” option
and then for Repeat, we’ll go “No Repeat” and the Size is going to be “Cover”.
So now you can see the photo looks a lot better. And then I’ll come down to the
Background Overlay, and I want to add a tint. So I’ll click on the color pad and then just type in the color code
“1d41ad” and it’s this purple bluish color. We’ll leave the Opacity as is. That’s pretty
much all we have to do. So we have this new section right here. We want to go
to the Advanced tab and go to the Responsive tab down here. We only want
this new section to show up on the mobile device. So we want to select
“Hide On Desktop” and “Hide On Tablet”. So that’s all you have to do when you
create a new section that’s going to show up on certain devices to make
your website responsive. You want to make sure that you always go into the
Advanced tab for each of these sections and hide them on the devices that don’t
look good and then create a new section and make sure that it only shows up on
that device. And make sure that it only shows up on that device, okay? So now
what we can do is add our text and our button. So let’s go and do that really
quickly and these steps should be really easy. But we are going to format
things a little differently, so I will walk you through it. First, we’re going to add a
headline to this section right here. What we can do is just type in our title
right here. So I’ll type in “Creative Designs” and then if I want to put this
on two lines, I want to add some HTML. So I’m going to put a break. So it’s the

” and now you can see that the words are on two lines. And then what we
can do is just center this. And then, I’ll go To the Styling tab and change the font
color to “White”. And then what you can do is just choose whatever font size that
you want. So I think I’m going to go with “80” right here and it just makes it look a
lot larger. And then I’ll change the font Weight to maybe “600”. And then I’m
going to go into the Advanced tab and I want to de-link the margin and I want to
move this text higher. So I’m going to click this down arrow for Top and maybe
I’ll make it like “-100” or something like that. So maybe even lower or higher than
that. So “-120” I have my headline up here and then I want to put a small
sub headline and then our button. And then we’re done making
the homepage responsive. So what I’m going to do now is just go
back to the main panel and add a Text Editor and drag this below the heading.
You can see that I already added the sub headline. So it says, “Mobile
Marketing”. And then in the Style tab, I centered this and then I added the white
font color. And then in the Typography, I changed the Font Family to “Abhaya
Libre” and then the font Size is going to be “24” okay? So the last thing that we
have to do is just add our button right here that we’re going to link to the
About page. So I’ll come back here and just find the button and just drag that
into this mobile section right over here. You can see that I have my button right
here and I already changed the text to “LEARN MORE”, and I linked this button to
the About page. So if you need to, you can just type in the URL with your own domain
name for the About page that we’re going to create a little bit later. And then just
align this to the center and just choose the medium button size and then we can
go in to the Style tab and we can just style this button together. So in the Normal tab
right here, the first thing that we’re going to do is click on the background color
pad. I’m just going to type in the color code “e50072”. So it’s a pink color.
And then down here for the radius, I want to put in “30” to make this button
round. So I think that just looks a little bit better. And then what we can do is we
can have a hover color. So let’s click on “Hover” right here and let’s change the
text color to that pink color “e50072” and then the background color, we’ll change it
to “White”. So now, if someone hovers over this button, you can see that it
changes to a different color, okay? So pretty much, that’s all we have to do
to create the mobile look for this section. Really, the important thing is you want to
go in to each of these edit sections and go in to the Advanced tab and come
down to where it says, “Responsive” and you want to hide and show these sections
for the right devices. So remember, we just created this one for the mobile
device and then down here is the one that we created for the desktop and the tablet
device. You can see right here that we’re showing on the desktop and tablet and
we’re hiding on the mobile device, okay? So really quickly, I’m going to click the
“Update” button to save everything. Once everything is saved, I’m going to
go back to the responsive mode and go to the desktop view. What you’ll notice is
that right at the top, we will have both of these sections that we created.
So this one is only going to show up on the mobile device but it does show up on
the Preview page. And then this one down here is going to show up on the
desktop and the tablet device, okay? So if you’re ready, we are good to go.
Really quickly, what I want to do is just show you what the web page looks like.
So I’m going to click on this icon on the upper left and click on “View Page”.
Once the WordPress homepage loads, this is what you should see. So if you
want, you can check it out on the tablet and the mobile device also. I’m pretty
happy with the homepage that we just created. If you have any questions about
this page or you want to customize it some more, you can always leave a
comment in the comment section below, and I’ll get back to you. So a little bit later,
we are going to customize the footer and also add the navigation menu at the top.
But right now, we are done with the homepage and we can move
on to create our next page. So the next page that we’re going to
create is this About page right here.
So you can see we have some details about our background or story.
We’ll insert an image right here and then we’ll have another video that we can
insert. Also, a little strategy section and then our footer at the bottom. So if you
want to create this professional looking About page, let’s go back to the
WordPress website that we’re learning how to make with the Elementor page
builder. Hover over New and click on “Page”. Once you’re on the Add New
page, all we have to do is type in the title for our page right here. And down here in
the Page Attributes, I want you to select the Page Builder and then we can just
click on the “Publish” button right here and then just click “Publish” one more
time. Once the page is published, now what we can do is go and click on
the “Edit with Elementor” button. Once the Elementor page builder loads,
we’re going to go a little faster this time around because we should be pretty
familiar with the page builder right now and how to use it. So if you need to, you
can always pause the video to slow things down. So the first thing that I’m
going to do is add a section and I want to add this one with two columns.
We can leave everything as is on the Layout tab. So let’s go to the Style tab,
and I want to add a background color. So the color code is “e8e8e8” and it’s this
gray vanilla color right here. And then I want to go to the Advanced tab,
and I’m going to delink the padding. What I want to do is put some top
padding. So maybe I’ll do “150” for the top and then I’ll do “100” for the right, “100”
for the bottom and “100” for the left. So you can see right here we have our two
sections. What I’m going to do right now is just click on the “+” button for the
left-hand side and I want to add a Heading element. So I’m going to click
and drag this into this section right here. Once the heading shows up, I’m going to
come in here and just change the title to say, “Our Story”. I’ll leave everything as
the default right here. I’m going to go to the Style tab and just go in to Typography
and change the font family to the “Abhaya Libre” so I’ll select this.
And then I’ll change the font Size to “50” just to make it a little larger and then
the Weight, I’ll change it to “500”. And then what I want to do is I want to
add a Text Editor so I can actually write out our story. So I’m going to drag the
Text Editor into this section. Once you see this section right here, we can just go in
and type in our story. So I’m going to type in some gibberish, but if you need to,
you can pause this video and then just type in your story or whatever you want
right here. And then once you’re ready, go to the Style tab and I’m going to go
and change the text color to “Black”. And then what I want to do is go in to
Typography, and I’m going to change the Font Family to the same one, “Abhaya
Libre”. And then the font Size, I’ll put in “18px” right here. And then what I want to
do is I want to add another text editor below this for my signature. So I’m going
to go back to the main page and just add the text editor below this. Once you see
this section, I’m just going to type in my name right here. And then I’ll go into the
Style tab and change the Font Color and also change the Typography. So in here,
it’s going to be “Aguafina Script” which is a cursive color and then I’ll put in 30px
right here just to make it a little larger. So that’s all I’m going to do for the
left-hand side of this column. So it looks pretty good to me. You can always go and
format this or add some additional stuff. What I want to do on the right- hand side
is just add an image. So I’m going to drag this image element into the right-hand
side. Now what we can do is just go in here and click “Choose Your Image”.
Once the Media Library pops up, I’ll just click on this image right here and click
“Insert”. You should see the image show up right here. What I want to do is I want
to push this image down a little bit so it looks a little bit better with the left-hand
side. So what I want to do is go to the Advanced tab and de-link the padding.
For the top padding, I just want to add in “30px”. So we can check this out by
hiding the panel right here and you can see that it looks pretty awesome.
So I’m pretty happy with how this looks. If you need to, you can pause the video
and you can edit this section. What I want to do really quickly is just check out what
it looks like on the different devices. So I’m going to click on the “Tablet”
device. You can see it looks a little weird. So what I might do is add another set up
where we can have just the story in this section and then we can have the photo
below this. But let me check out the mobile device really quickly also. So this
one looks a little bit better but the image looks a little small. So what I’m going to
do is actually add another section for the tablet device and the mobile device and
then we’ll just hide those for the desktop and the different views. So again, what
we’re going to do really quickly is just show you how to make your different sections responsive. So I think this will be a good exercise for you for all of your different pages, okay? So I’m on the Desktop view right now and what I want
to do is I want to edit this section. So I’m going to right click and click “Edit
Section”. I’m going to hide this section that we just created on the tablet and the
mobile device. So I’m going to go in to the Advanced tab. This section is only going
to show up for the desktop. So I’m going to click “Hide” for tablet and hide for mobile, okay? So let’s click on the “Update” button to save everything.
And then what we can do is click on the “Responsive” mode and go to the Tablet
view and we can add a section above this or below this so that we can create a
new section for the tablet device. And then what we can do after we do that
is we can check what it looks like on the mobile device and see if we
have to create another section. So let’s click on the “+” button right here
and then let’s click on the “Add New Section” and then let’s just click on this
one right here. Once you see this section right here, what I did just to save some
time was I already recreated this section. So what I’m going to do is just walk you
through the steps that I created. So it should save a little bit of time because we
don’t have to do everything one by one. Really, all of these steps are the same as
down here. So I just customized the settings a little bit. First, once you add this
section you, can come in to the Edit section and see that we have the Boxed option.
And then for the Style tab, we just put in the same color code “e8e8e8”. And then
in the Advanced tab, I have “50px” for the padding all across the board right here.
And then what I did was I just duplicated the text boxes from below. So we have
the heading right here and you can see that in the Typography, we have the same
font family, the same font size and font weight and we didn’t change anything in
the Advanced tab. And then same with the Text Editor right here. Again, this is
just a duplicate of what we created below and you can see in the Typography that
we have “18px” and “Abhaya Libre”. We didn’t change anything for the padding
right here and then same with the signature right here. And then what I did
was I just added the image down here. All I did was I changed the image size
to the Medium Large option right here. I don’t believe I changed anything right
here. So that’s pretty much it. If you go and check out the responsive mode for
the mobile device, it actually looks pretty good. So if you wanted to, you can go in
here and customize this section for just the mobile device. But what I did was
when I created this tablet section in the Advanced tab right here for this section,
I went into the Advanced tab and then down here in the Responsive section,
I hid this on the desktop. So this is going to show up on the tablet device and the
mobile device. And then for this one, this is going to show up for the desktop, okay?
So we have just created the first section for our About page. If you have any
questions about how to create the responsiveness for this page, just let me
know in the comment section and I’ll get back to you. But I’m going to go back to
the desktop view. What we’re going to do, even though you see this section right
here, don’t freak out because again this is formatted just for the tablet and
the mobile device. What we’re going to do now is just come down to the bottom of
this page. I want to create a new section for this About page. So what I want to do
is just click on this “+” button and then click on this section right here.
What we’re going to do right now is we’re going to create this little section
where we add a heading and then include another video, but this time around we’re
going to have a thumbnail for the video and the play button right here. So
let’s go back to this page right here. What I want to do is come into the Layout
tab right here, and I want to put in “800px” for the content width. So you can see we
have some padding right here. And then I’m going to go to the Advanced tab and
just delink the padding and just type in “80px” for the top and “100” for the
bottom just for spacing right here. And then we can click on the “+”button
right here. Let’s add a Heading element, so just drag this in. All I’m going to do is
come to the title and I’m going to type in “Learn more about our work methods.” I
do have some HTML here to break this up into two separate lines and then I’m going
to center this and then go to the Style tab and just go to Typography and type in
“48px” right here. And then what we want to do is just go to the Advanced tab and
delink the margin, and I want to put in “45” for the bottom margin so that it
makes a little bit of space down here. Once I do that, now I can just add my
“Video” element, so just click and drag this in. You should see the Elementor
video right here. So if you want to replace this, you can just go to YouTube or any of
these other sources and just put in your URL right here. We’ll just use the demo
video that the Elementor plugin let us use. We’re going to come down here and just
select the “Image Overlay” to open this up. We’ll show the image overlay.
And then what I want to do is just choose an image for the thumbnail for
this video. So I’m going to click on “Choose image”. In the Media Library, I’ll
just select this image right here and click “Insert”. You should see the thumbnail
right here and the play icon should already be selected. So we are good to
go. That’s all we have to do for this section. So if you’re ready, let’s move on
to the next section where we can add some services information. So what I’m
going to do now is just add another section. So I click on the “+” button.
I want to add the one with 3 columns here, so click on this. You should see the
Edit Section right here, and what we’re going to do is just go in and change the column gaps for this section to “Wide” and then I can go in and put a background
color if you want. So we’ll use the same color code that we use above. So it’s
going to be “e8e8e8” and then in the Advanced tab, we’ll put some padding
again. So we’ll type in “80” for the top and “100” for the bottom. Once you’re ready,
now what we can do is go and add our first service and then we can do it for
these other ones right here. So all we’re going to do is come to the Element
section right here. We want to find the “Icon Box” option, and just click and
drag that into the left section right here. Once the icon box shows up, you can see
right over here that you can have an icon, the title and the description. But for my
WordPress website, what I want to do is remove the icon. So up here, you should
see a default icon, and I’m just going to click the “X” to delete that. So now, there
shouldn’t be an icon. What I did already was I put in a title so I put in “Strategy”
and then I created a little description right here. So if you want, you can do that on
your own. And then what I want to do is just add some additional boxes right here
with different services that my company or my website provides. So if you need to,
you can pause the video. What I’m going to do is just duplicate this section two
times, and then I’m going to drag this in really quickly just to save some time. So
I’ll do that right now and I’ll just drag this one in right here. You can see that these
are automatically updated with different titles because I did just edit these just to
save the time. So if you need to, you can pause the video, add some icon boxes
and then just change the titles and the little descriptions right here. And then
once you’re done, we are actually done creating the About page. We can click on
the “Update” button right here just to save everything. Once everything is saved,
now what I want to do is just go and make sure that the web page looks good
on the tablet device. So you can see we have the video section and then we have
our little services section right here. This looks good on the tablet device and
then if I go to the mobile device, it also looks good right here with the services all
stacked like this. So I’m pretty happy with how this webpage looks. So if you’re
happy, then we can just go back to the desktop view right here. We can actually
exit out of this if you saved everything. So we can check out the page when it
loads on your website. So I’m going to click on “View Page.” Once the WordPress
page loads, this is what you should see. So we have our story section, a little video
section that plays the video right over here. Below this, we’re going to have
a little description section with our services. You can always customizes
this however you want. Again, just as a reminder, we will be updating the footer
and the header in a little bit. So right now, we are going to move on to the next page
that we’re going to create. So what we’re going to do now is learn how to create
this Contact Us page. So we’ll insert a map if you have a physical location and
then down below, we’ll have some details about your business and also a contact
form for your visitors to get in touch with you. So if you want to learn how to
create this page right here, we want to go back to the WordPress website that we’re
learning how to make. Hover over “New” and let’s click on “Page”. Once you’re on
the Add New page, let’s just type in “Contact” for the page title, and then in
the Template dropdown, we’ll choose the page builder and then click on “Publish”
and then click on “Publish” one more time. Once the page is published,
now we can go and click on the “Edit with Elementor” button to open up
the page builder. Once you’re on the Elementor page builder, the first thing that
we’re going to do is add a new section. We don’t need to do anything with the
settings right here. So I want to go back to the main page right here with all of our
elements. What I want to do is get the Google maps and drag it into this section
right at the top. But we’re actually not able to because the header’s in the way.
So this is the one flaw with the Elementor page builder. It’s that we can’t access this
first section when it’s up here at the top. So here’s a helpful hint that I found. If you
go to the responsive mode and you just change it to another view, such as the
tablet device, now you can see that we have this section right here. What we can
do is just drag in the “Google Maps” into this section right here. Now what we can
do is just edit this and then we can go back to the Desktop view to make sure
that it’s correct. We will format this map a little bit later to make it look beautiful
just like the demo WordPress website So right here in the Content section,
what we’re going to do is come to the Skin dropdown and choose the Airi map.
You should see this update right here. So what I’m going to do is just really
quickly go back to the desktop view so that you can see everything. What
you want to do is get the latitude and longitude for the pinpoint for your map.
You also want to go to Google to get an API key in order to make the map show
up. So what I’m going to do is open up a new tab and show you how to do that.
So first, we can just click on this link right here. What that’s going to do is open
up a new tab. So what you can do here is type in the address for your physical
location if you have one. So I already typed in mine and then click find and then
all you have to do is copy the latitude and longitude into these two areas right here.
So I’m just going to do that really quickly and you should see the pinpoint update
for your map. And then what you want to do is you want to go and get the API
key with Google because this is a Google maps. So click on this link right here,
and it’s going to open up this tab. Once you come to this page, just log in
and then come down here and click “Get Started.” You should see this page
right here. Just check this box next to maps and then click “Continue”. And then
what you want to do is create a project name. So I already have a project called
“Map demo”. So I’m going to select that. And then once you’re ready, you have to
set up your billing, but don’t worry because this is completely free. It
just requires you to set your billing information but you don’t have to pay
anything whatsoever, okay? So once you’re ready, go ahead and click “Next”.
Once you come to this page, just click “Next” right here. Now, you should see
your API. All you have to do is copy this. So I might block this out because this is a
unique API but you want to click on this icon to copy it. And then all we have to do
is go back to your WordPress website and then just paste in the API key right here. Now you should see the map show up and what you can do is just change
the zoom down here. So maybe, we type in “16” and then for the height, I want to
put in “500”. Once you are happy with how this map looks, all we have to do is
go to the Advanced tab right here. What I want to do here is just delink the margin.
For top, I want to put in “140” and then for the bottom, I want to put in “25” and then
I want to delink the padding and on the right-hand side, I want to put in 50 and
then I want to put in 50 on the left-hand side also just to format this. And then
what I want to do is I want to come down to where it says, “CSS classes”
and I want to paste in this text: “contact-page-map”. So go ahead and put
this in. Now, you should see the map right over here on your WordPress page. It
should look pretty good. So let’s just save this really quickly. Once that’s saved,
now we can go to the bottom of this section and we can add another row or
section for our contact information and the contact form. So click on the “+” button and let’s add this one with two columns. Once you see this section show
up right here, we can just go in to the “Column Gaps” and I want to select the
“Wider” option. And then what we can do is just go to the Advanced tab. All I want
to do here is I want to delink the padding and just type in “125px” for the left-hand
side. Once you’re ready, let’s go back to the main panel right here. What I want to
do is add some Heading and Text Editor elements into the left-hand side. So let’s
click and drag the “Heading” element into this section right here. What we can do
is just type in “Contact Us” right here. And then once you’re ready, let’s go back
to the main page. And now, let’s drag in a text editor and put this right below.
You can type in whatever information that you want. So I’ll just type in some
gibberish right here, and then we’re going to do this a few additional time. So I’m
going to go back to the main page and drag a heading element for the address.
So in this one, I’m going to type in “Location” and then go back and get
another Heading element or a Text Editor element and just drag that in right here.
And then what I’m going to do is just type in the address. And then we’ll do this two
more times. So I’m going to drag in a Heading element for the phone number
or actually, I’m going to type in “Male” right here for the email address. And then
what we want to do is go back and get another Text Editor element. So let me
just come down here and just drag this below Mail. All I’m going to do is just type
in my email address right here. If you want to link your email, you can click on
this button that says “Insert edit link” after you highlight your email. And
then click on the “Apply” button. Now, you should see a link. So when your
visitors click on this, it’ll open up an email, okay? So what I’m going to do is
just remove this link because I don’t want that. The last thing that we’re going to do
in this section is add our phone number. So I’m going to go back in here and get a
heading element and just drag that underneath. In this section, I’ll just type in
“Phone” right here. Once you’re ready, let’s go and get a text editor for our phone
number. All we’re going to do is just paste that in right here. Now we should have
our first section on the left-hand side for the Contact Us page. So now what we’re
going to do is go to the right-hand side and add a contact form. So what I
want to do is just go back to the main elements. I want to drag in the Heading
element first to the right-hand side. Now, what we’re going to do is just go
in here and just change the title to say, “Get In Touch.” Once you do that, now
what we’re going to do is add some short code to make the contact form
show up right here. So we have a plugin called the “Contact Form 7” plugin that
we installed. So we’re going to get the short code from that plugin and then
we’re going to paste it in. So what I want you to do is find the short code element
and just click and drag it into this section right here. You should see this “Edit short
code”. We don’t have the short code yet. We have to go to our WordPress
dashboard to get it. So what I want you to do is just click on the “Update” button to
save everything. Once everything is saved, we’re going to go and get the short code
and then come back to this page in just a little bit. So on the upper left, click on this “hamburger” icon and then click on “EXIT TO DASHBOARD”. And then once
you’re back on the WordPress dashboard, on the left-hand side, I want you to find
the Contact tab and then click on “Contact Forms”. Once you’re on the
Contact Forms, you should see a contact form linked right here. So what we can
do is just click on the “Edit” button. Once you’re on the Contact Form,
you should see some tabs down here. If you want to customize your contact
form, you want to come to the Form tab and just add some HTML and CSS.
And then if you want to update your email address that the contact form
sends from, you can do that down here. And then you should have some default
messages right here for when someone submits a message. You can always
update this stuff on your own and then just click on the “Save” button right here.
This isn’t a Contact Form 7 plugin review or tutorial. So I’m not going to cover too
much here, but pretty much you have the gist of how to use the contact form that’s
created for you right here, okay? So what we want to do right now is we want to
take this short code that you see right at the top and we want to copy this. So just
click on “Ctrl C” once you highlight this contact form short code. And then what
we’re going to do is go back to our Contact page. So hover over pages and
click on “All Pages”. Once you’re back on this page, what we want to do is go where
it says, the “Contact Page” and just click on the “Edit with Elementor” link. Once
you’re back on the Elementor page builder page, come down to the short
code section and just click on that and then paste in your short code right
here. You should see the contact form get populated right here. If you ever want
to shorten the message section, just hover over the corner and then click
and drag this up a little bit, okay? So now we can go and check out what
this page looks like if I hide this panel and you can see that it looks really good
and really professional. So what I want to do is I just want to click on the “Update”
button to save everything really quickly. Once everything is saved, now what I
want to do is make sure that this page looks good on the tablet and the mobile
device. So for the tablet device, you can see that the map looks good but the
information right here is a little cluttered. So what we can do to make this look
better is we can stack this section on top of this section and then if I go to
the mobile device, you’ll notice that everything is off-centered right here.
So what we want to do is create some new sections for the tablet and the
mobile device. So I’m going to go to the tablet view, and the first thing I’m going to
do with this section that you see is go into the Edit section and then go into the
Advanced tab and go to the Responsive section. I want to hide this on the tablet
and the mobile device. Once we do that, we can go and create new sections.
So let’s click on “Add New” section and create a new section and then we’ll just
go in to the Advanced tab. For this section, we’re going to go into Responsive
nd hide this on the desktop. I know that we only need to hide this on the desktop
because I’ve created this section before. So what we’re going to do now is we’re
going to add our contact information. So drag in a Heading element and then
what we can do is just type in “Contact Us” right here. We can just center this and
then we can go into the Elements and add a Text Editor and drag this right below.
And then what we can do is just paste in our text right here and go to the Style tab
and center this. Pretty much, I’m going to do this a few different times to add all
this information right here that you see. So if you want, you can pause the video
and add your heading and text editor elements. What I’m going to do is just edit
this video to show you all the information in just a few seconds just to save some
time. So I’m going to do that right now. With the power of video editing, you can
see I have my additional sections right here on the tablet device. If you need to,
you can pause the video to add your sections. What I want to do is just show
you that it does look good on the mobile device. So if I scroll down here, we have
all of our text and it looks really centered and beautiful. So now, what we have to do
is we want to create a section for our contact form. Based on what I know,
we’re going to have to create two sections. One for the tablet device and
one for the mobile device. So let’s create the section for the tablet device first.
So let’s click and add a new section. We want to go into the Advanced tab right
here and we want to hide this. So we want to go into the Responsive section and
hide this on the desktop and the mobile device. Once you do, now we can go and
add a “Heading” element and just drag this in. It’ll say, “Get in touch” and then we
can just center this and then we can go and get our short code. So hover over the
short code element and drag this in right here. And then we can just go up here
and click on this element to copy this short code and then go back down here
and paste that in. Hopefully, I just didn’t confuse you with that lightning quick
speed that I just went through but really, I just took the short code from the other
short code element. You can see that the form is on my left-hand side right here.
So what I want to do is go into the Advanced tab and de-link the padding
and type in “180px”. You can see that that’s pretty centered right here. So this
looks really good. If I go to the mobile device, you’ll notice that the tablet
contact form doesn’t look good. So we hid this on the mobile device.
So what we can do is just come down here and create a new section. Again, we
want to make sure that we’re on the Edit section and go into the Advanced tab to
the Responsive section. We’re going to hide this one on the desktop and the
tablet device and just show up on the mobile device. Once we do, we can add
our heading. So again, this one is going to say, “Get In Touch”. We’ll center this
and then the last thing that we have to do for this page is just find the short code
and drag that in and then we can just paste in that short code right here.
This is going to look perfect for the mobile device so we don’t need to
add any padding or anything like that. So we can just click on the “Update”
button right here. Once that’s saved, we are good to go and now we can go
and check out what the page looks like. So I’m going to click on “View Page”.
Once the Contact page loads, this is what you should see. So we should have
our contact details and our contact form and we should have our map right at the
top. So if this what you see, then we are good to go and we can move on to the
next step. Now what we’re going to do is learn how to create this blog post page.
So if you want to have a blog post page just like this, the first time that we have
to do is learn how to create a blog post. So I’m going to show you how to create
a blog post that looks just like this with a contact form or a comment section.
What I want to do before we actually create the blog post is I want to show
you how to change your username to your name or an author name. So what
we’re going to do is go back to the WordPress website that we’re learning
how to make and I want you to hover over your website name and let’s click on the
dashboard link. Once you’re on the WordPress dashboard, just come down
to users and what you can do is just click on your profile. Once you’re on the profile
page, all you have to do is come down here to where it says, “Nickname” and
type in the name that you want to show up. And then in this drop down where it
says, “Display name publicly” just select that name right here. And then just come
down to the bottom and click “Update. Now, you should have that name show
up when you create a blog post, okay? So that’s all you have to do. Once you’re
ready, now we can go and learn how to create a blog post. So this is going to be
really easy. So I’ll show you how to do it really quickly. Just hover over post and
click on “Add New”. Once you’re on the “Add New” post page, creating a blog
post is really easy. So all you’re going to do is put in your title right here. So I’m
going to go to the demo website and just copy this text just to save some time.
Down here is where you can type in your text. You do have these buttons to add
some additional blocks or headings and add images and everything. So if
you wanted to, you can add different sections. All we’re going to do is just
create one section. So I’m just going to go here and just copy all of this text right
here. So I’ll copy all this and then just paste that in right here. But again, you do
have these buttons right here where you can customize your font and you can
also delete these blocks also and just remove everything, okay? So if you want,
you can just type in your text right here. You can see when you hover over these,
every paragraph is a new block. So if you need any help with creating a blog post,
let me know. Otherwise, let me just move on to the right-hand side over here.
If you want a featured image for your blog post, all you’re going to do is come
over here and click on “Set Featured Image.” You should see your Media
Library here, and all you do have to do is just choose the image that you want to
use and then click “Select”. And then you should see the image show up right here.
Down here, there are some additional options. If you want to create your own
customized excerpt for the blog post page, you can go in here and do that.
Otherwise, in the settings, I believe it sets up a certain number of words for
your excerpt. So we’re just going to leave that as is. That’s pretty much all we have
to do. So once you want to publish your blog post, just click on the “Publish”
button right at the top and then click on “Publish” right here. Once the post is
published, we can just click on “View Post” to check it out. You should see the
blog post show up with the featured image and then some details about who
wrote this blog post. And then you have your blog post section down here and
then the comment section down here for your visitors. So creating a blog post is
really easy. So if you want to create a few additional ones, go ahead and do that.
You can pause the video and do that right now. What I’m going to do is create three
additional blog post and then we can go and check out what the blog post page
looks like and then we can customize the sidebar over here if you want. So I’m
going to pause this video and create some additional blog post. So if you want,
go ahead and do that by hovering over New and click on “Post”. I’ll see you in just
a few minutes. Welcome back. So during this break, I created some additional blog
post. So if you ever want to come to this page, just click on “All Posts” right here
and you can always go and edit any of these posts. So now if you go to your
homepage, you should see in the blog post section some of your blog posts if
you create some additional one’s right here. What I want to do now is just
show you what the blog page looks like. So once come to your blog page, if you
created some additional blog post, it should look just like this where you
have your featured image, a title section and then a little excerpt with
the “READ MORE” link right here. So if this is what you see, then we are
good to go, and what I want to do now is move on to the next step. What we’re
going to do now is talk about how to customize your sidebar on your blog post
page. You can add whatever you want and it’s also going to show up on the
individual blog post. So if you want to customize the sidebar, what you want to
do is go back to your WordPress website. We’re going to hover over our website
name and click on “Widgets”. Once you’re on the Widgets page, what you’ll notice is
that you have some available widgets on the left-hand side and then right here on
the right-hand side is the sidebar section. By default, there are some widgets
already included in this section. If you want to delete any of these, you can just
click and expand it and click on the “Delete” link right here. If you want to add
some additional widgets, what you want to do is find the widget that you want to
add and then you can click and drag it into the side bar or what you can do is
just click and expand this, select the sidebar and then click “Add Widget”.
That’s going to add the widget into the side bar section, okay? So if you want,
you can pause the video and add whatever widgets that you want into your
side bar for your blog post and blog post pages. Otherwise, we’re going to move on
to the next step. What I want to do is talk about these additional widgets in the
footer section for the next step. So let me just show you on the home page. So if
I go down on the web page for my WordPress website, what you’ll notice is
that we have some footer widgets down here. What we can do on the Widgets
page is show you how to create and customize your footer to look just like
this. But before we do that, what we have to do is create some navigation menus
so that we can insert them right here and also right here. So what I think we should
do is actually just move on to the next step, which is going to be showing you
how to create your header menu and then some footer menus down here and then
we can come back to our widgets page and customize the footer section.
So what I want you to do is go back to the WordPress website that you’re
learning how to make and we’re just going to move on. So now what we’re going to
do is learn how to create our menus for our WordPress website. So what I want
you to do is hover over Appearance and click on “Menus”. Once you’re on the
Menus page, what I want you to do is type in a new menu name. So if you need
to, you can click on the link that says, “Create a new menu” and then just type in
“Home” and then click on “Create Menu”. Once your menu is created, what we’re
going to do first is create the Header menu. So over here in this section,
you should see the list of pages that you just created. So what we’re going to
do is add all of these pages into our navigation menu. So I’m going to check
these boxes for these pages and click “Add to Menu”. You should see the items
get added right here. If you want to rearrange these, you can just click and
drag these to wherever you want to place them. If you want sub menu items,
what you can do is just indent these and then this item is going to be a sub
menu item of this parent item, okay? So you can see that I have my header
navigation menu right here. What I want to do is check this primary box for the
display location so that this header menu shows up on all of my different pages.
If you want to create some additional links such as custom links or links with
your blog post or category names, you can go into this section and then type
in your URL for a custom ink and then put in the navigation label that you want right
here and just click “Add to Menu”. Or for your pages that you added into your
navigation menu, you can also go into each of these and you can customize
the navigation labels also, okay? So once you check these primary box and
you add the items that you want for your header menu, what I want you to do
is click on the “Save Menu” button. Once the menu is created, we are good to
go and now what we’re going to do is create the menus for the footer section.
So you want to click on this link that says, “Create a new menu”. Again, what we’re
going to do is create the navigation menu right here and also our social media buttons right here. So I already created these two menus. So I’m going to go into
my menu list right here and just show you what I did for the footer links. So I’m
going to click “Select” right here. So what I want you to do is create a menu called,
“Quick links. So you can just type that in and then click on the button that says,
“Create a new menu” and then you can see right here that I just added some links
right here. So I have some custom links. So all I did was I came into this section,
typed in the URL for the page that I want and then put in a navigation label right
here. So you can see in this first one, this is the About page. So I just typed in
the URL but I could have also just gone to the Pages list and added the page right
here. And then these other navigation links are just fake pages. So I haven’t
really created these pages but if I did, I can put in the URLs right here. So if you
want, you can create these two pages on your own. I do recommend that you have
a Privacy Policy page for your WordPress website. After you create the links for this
quick links navigation menu, all I want you to do is just click on the “Save Menu”
button. Once you save this menu, I want you to create one more menu and this is
going to be for your social media buttons. So I’m going to show you what that menu
looks like really quickly. So for this menu, what I want you to do is just create a
menu called “Social”. And then what you can do is go into the custom links and
you can add the social media pages for your different social media pages.
So you can see I added Facebook right here and it just links to my Facebook
page with the navigation label and then the same with Twitter right here. So what
you can do is just add all of your social media links right here and then once
you’re ready, all you have to do is click “Save Menu”. For the social media links
and also your quick links for your footer, you’re not supposed to check the primary
box. This is only for the header navigation menu for all of your WordPress pages.
So this is only going to be for your homepage, okay? So now you should
have three different menus that we just created together and if you go to your
homepage now, you should see your navigation menu right at the top.
Once your WordPress website loads, you should see the header navigation
links right at the top and if you do, then we’re good to go. Now what we can
do is just go and customize the footer widgets with this section down here.
So after you do this, you’re pretty much done creating your WordPress website.
So let’s finish strong by just finishing off this widget section in the footer. So we’re
going to hover over our website name again and then click on “Widgets”
to go back to the Widgets page. Once you’re back on the Widgets page,
now what we’re going to do is customize the footers. So I’m going to show you
exactly what I put in to each of these and then you can just replicate them or you
can customize them however you want. So Footer 1 is going to be the footer on
the left-hand side and you can see right that I added a text widget. Inside this text
widget, I have my logo. So if you want to add a logo, just click on “Add Media”.
What you can do is upload your own logo or you can use the demo one that we
have right here. So you just check that and then click “Insert” and you should
see it show up right here and you can customize the size and where you want
to align it and everything like that. And then I have a little excerpt right here
and then I have a copyright with my website or business name right here. So if
you do edit any of your widgets, you want to make sure that you click on the “Save”
button right here, okay? So that’s the left footer, and then for the next footer,
I have my contact information right here. So again, I have another text widget and
then inside this, I have the title that says, “Contact Us” and then I have some
additional details right here just similar to the Contact Us page, okay? So then
what I did was I went to the footer on the right-hand side and this is for the quick
links navigation menu. So what you want to do is find the navigation menu widget.
So that should be down here somewhere, so we can just find it. What you’re going
to do is just select it and then just choose Footer 3 and click “Add Widget”.
And then it should get added into this box right here. If you want, you can just title
it “Quick Links.” And then in the Select Menu, you want to choose the “Quick
links” option and click “Save”. And then for the last one, this is the
social media links. So if I open this up, the widget that we selected here is called
“Airi Social Profile”. So it should be right up here and you can just click and drag it
in or choose “Footer 4.” And then all you have to do is just put in your title and
then just choose the “Social” media menu item right here and then just click “Save”.
Once you do, then you should have your footer and you can go back to your
WordPress website just to check it out to make sure that you have everything.
Once you’re back on the WordPress website, if we come down to our footer
section, you should see your footer with your navigation links right here and then
your social media buttons right here. So if this is what you see, then you are
good to go. You actually have just completed this website tutorial on “How
to Make a WordPress Website for Free” using the Elementor page builder.
The last thing that I want to do is just remind you to publish your WordPress
website. So if you haven’t already done so, I want you to go back to you WordPress
Dashboard. Once you’re back on the WordPress dashboard, if you see a link
that says, “You can click on the link to make your website live” go ahead and
click on that to publish your WordPress website. We already did that stuff a little
earlier in this video tutorial. So our website is actually live. So let me be the
first to say, “Congratulations!” on learning how to make your own WordPress
website step-by-step using this video tutorial on How to Make a WordPress
Website for Free using the Elementor page builder. If you have any questions or
comments, leave them in the comment section below. If you enjoyed this video
tutorial, please make sure to give it a big thumbs up and make sure to subscribe
because we’re always coming out with new videos just like this. Congrats again,
and I hope to see you in the next video. [Music]

, , , , , , , , , , , , , , , , ,

Post navigation

50 thoughts on “How to MAKE a WordPress Website FOR FREE – 2019 – For Beginners!

  1. Hey NYC TECH CLUB

    It has been a year when I discovered and subscribed on your channel and I have never regretted that but I got a small challenge.
    when I share one of my post the link doesn't show the featured image but always the logo.
    how can I change that? it happens on Whatsapp facebook has a way of debugging the link. but how do I do that permanently from the website so that anyone who shares a link goes with a featured image? please help!!

  2. for web hosting, you can use this. its very good : http://earnclik.com/Ie0vRwml

    and for web design in WordPress this is the best : http://earnclik.com/57mrU

  3. Please page make a video about how to create a membership website as well as an ọnline business
    Thank you in advance

  4. Wuddup Jameson✌️ Waiting for that opt in page tutorial my man.
    (Should You Ever Have Plans To Release One)
    I did purchase my hosting plan using your code, so there you go .. CHA-CHING brother.

  5. Hi, Thanks for this great tutorial. however, I can't seem to add a section and the plus sign don't seem clickable inside elementor page editing area. is this not available in the free version?

  6. Hi Jameson! I am running WP 5.1 and does not enact the 'your site is currently displaying coming soon' nor do any 'under construction' plugins work when activated. Any idea what the problem is? I really appreciate your work.

  7. Im using colormag theme and I don't get edit with elementor opt in home page …..can you please help me sir….

  8. Another tutorial where not all the plugins on the tutorial are findable 🙁 tried to get help with the Sydney theme…denied do I dare ask for help on this one

  9. What if I wanted to choose the business plan and do you know a big difference between the two?should I still follow all the steps as directed? Thank you

  10. Thank you for your good work. I have been following your tutorials and with that i have been able to create my own WordPress website too.Keep it up.

  11. Great video! I've got a weird issue where the Home menu on mobile expands to a white background. All the menu items are white as well, except for Home (pink), and any clicked item (they turn pink). Not sure why since I don't have pink anywhere else on my site. Any assistance would be awesome.

  12. Hello, thanks for the video, but am having an issue, my SSL certificate is not coming up, even after downloading the really simple SSL and doing all the adjustment in the general setting still the http is not appearing on my website, what can I do

  13. Thank you for the wonderful tutorial and I have nearly completed the website. When I create a page and click 'Page Builder" , the top black header is disappeared. Please guide me on how to keep the header. Thank you.

  14. thanks Jameson ..can you please help me Jameson im using empire themes for free but on the footer before the logo i want to decrease the pading how do i do it

  15. Thank you for this video, It is very good. I have a problem at the responsive mode section, I am not able to edit the image like you are doing in the video. The settings, "Position, Attachment, Repeat, etc. just aren't there. I have resized the image in Photoshop but that's not fixing my problem. Can you suggest what I should do next because I am stuck at that point? Thanks a million

Leave a Reply

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