In this video tutorial, we’ll be using the Airi theme by athemes to create a beautiful WordPress Website for free. Everything you need is in this text tutorial, so print it out if you need to…click on the links that are available and enjoy!

If you want to learn how to make a wordpress website using a free wordpress theme and you want to learn how to do it with a drag and drop pagebuilder like the Elementor pagebuilder, then keep watching the video below and you will make a beautiful wordpress website.

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

Requirements for this video tutorial:

• Computer
• A good attitude
• About 2 hours 🙂
• Hosting and Domain (yes – you need both)

Why do you need hosting and a domain?

Hosting allows you to run your website (it saves all your content and “runs” your website so it loads)

A domain is your web address. Without it, you don’t have a website.

We will walk you through both of these.

We will be using Hostgator to get our Domain and Hosting.

Step 1: Get Domain and Hosting

This is one of the most important things in the tutorial. Without completing this step, we can’t really move forward. We need to get a domain and hosting in order to make a wordpress website.

I recommend you go to Hostgator for your domain and hosting. I’ve been using them since I started because they’re simply the best, especially for you as you start scaling your web business.

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

There’s a variety of choices you can go with. I’ll link them below but if you asked me who I recommend, I’d say Hostgator

• Fast
• Reliable
• Cheap
• Great customer service

Click here to go to the Hostgator website and remember to use coupne code NYCTECH30 for 60% off 

Other hosting options include Godaddy and Inmotion (use nyctechclub for coupon code)

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

Step 2: Go to Email Inbox

Now we’re getting places! Ok so you have your domain and hosting taken care of, so it’s time to go to our email inbox to see the confirmation email so we can start building our wordpress website!

It should be an email from Hostgator, so go ahead and click and open that up.

What we’re going to do is click on the cpanel link and go to our hosting cpanel where we can install WordPress.

Step 3: Login to Cpanel

Once you’re logged into your cpanel, this is your file manager. This is where you’ll go to install and delete files from your server.

You can also create an email address through your hosting, which I’ll show you how to do later.

For now, just click on install wordpress or click on quick install so we can install WordPress.

Step 4: Install WordPress Theme

Click on this link to download the Empire Theme by Soho Themes for free

Soho Themes has been collaborating with NYC Tech Club to create some themes to bring to you so I’m really excited to be able to share this theme with you for free. You’re lucky because if you weren’t watching this video you would have to pay $60 for this wordpress theme. Keep it our little secret!

Step 5: Install Plugins

First we’ll install the required plugins on the WordPress dashboard. Then we need to install a few premium plugins

Download Plugin Zip File for Premium Themes

Here is a list of the plugins you should have installed and activated after this step

• Slider Revolution
• WPBakery Visual Composer Page Builder
• Recent Posts Widget Extended
• Contact Form 7
• Empire Custom Post Types
• Meta Box
• Meta Box Conditional Logic
• Meta Box Tabs
• Newsletter
• Redux Framework
• SVG Support

Copyright Footer plugin – This is a premium plugin we will talk about later as we edit our footer.

Step 6: Download and Install Demo Images

Click on this link to download the zip file with all the images that we are using in this tutorial to learn how to make a wordpress website for free.

You can use your own images if you want. I will also show you how to upload your own images onto wordpress.

Please note that the images you’re downloading maybe slightly different than the video because the images I use are copyrighted and require a license to use.

To upload your files

1. Go to your wordpress dashboard > click on Media > Add New
2. Add files
3. Now all of your files should be in your media library.

You can also upload these files individually on each page/post, when you need them. I’ll show you how in the video tutorial.

Step 7: Select WordPress Theme Settings

Now that we installed WordPress, what I want to do is teach you how to select the settings for your WordPress website. What this will do is let you customize your site so when you start learning how to make your wordpress website, you will already have the settings you want.

1. Go to your WordPress Dashboard
2. Hover over Empire Theme
3. Click on Theme Options

I’ll list out what we select for each section below if we make any changes to the default settings. Otherwise, go play around with the settings for your own wordpress website whenever you want! Just make sure to click save!

General

• I leave everything as is since I don’t want to change the site colors from the default blue color

Header

• Change the header menu color to #000000 (for black)
• This is where you can upload your own logo if you want!

Page

• No change

Blog

• I’m going to add a newsletter sign up optin here
• Customize the heading and subheadline (this will show up on your blog post pages)

Footer

• Add your social media links here
• We change the copyright background color to #000000

Typography

• Here is where you can change your font styles for your entire wordpress website

Translations

• Only need to change something here if you’re translating your website into another language

Custom CSS

.atu-agency-video img {
display: none !important;
}
.atu-agency-video .eicon-play {
font-size: 62px;
}
.atu-agency-video .elementor-custom-embed-image-overlay {
height: 60px;
}
.atu-agency-progress .elementor-progress-wrapper {
height: 8px;
line-height: 8px;
}
.atu-agency-progress .elementor-progress-percentage {
position: relative;
top: -16px;
font-weight: 500;
font-size: 14px;
}
.athemes-blog:not(.atu_athemes_blog_skin) .posted-on a {
color: #000000;
}

/* Contact page map */
.contact-page-map #atu-map {
height: 400px;
}
.contact-page-form label,
.contact-page-form input:not(.wpcf7-submit),
.contact-page-form select {
width: 100%;
max-width: 100%;
}
.contact-page-form select {
padding: 17px 20px;
}
.contact-page-form .wpcf7-submit {
width: auto;
margin: 0 auto;
display: table;
border-radius: 30px;
box-shadow: 0 5px 35px 0 rgba(51, 51, 51, 0.26);
}
.contact-page-form .row {
margin-bottom: 10px;
}
.site-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}
button, .button, input[type="button"], input[type="reset"], input[type="submit"] {
border-radius: 30px;
}
.page-id-198 #masthead {
background-color: #13151d;
}

Import/Export

• No change

Step 8: Create Free Logo

If you want to learn how to make a Free WordPress Website logo go to Logomakr

The video will show you how to navigate the site. My suggestion is you resize the logo by clicking and dragging the corners to make the logo smaller so it fits and looks good in the navigation menu.

1. The first thing you need to do is go to this website: Logomakr
2. On the upper left corner, there is a search bar.
3. Type in whatever type of image you want your logo to be
4. Then find an image that you like
5. Then go to the right upper corner and change the size to roughly “50 x 50”
6. Make sure your logo fits within that white space
7. Click on the T on the left hand side if you want to add text to your logo
8. Make sure all the text also fits within the white space
9. You can change the colors of your logo by highlighting the image or the text and clicking in the color chart on the lower right corner
10. Once you’re happy with your logo, go to the upper right corner and click on the disk
11. A new page will pop up. Right click and download the logo
12. Then go to your download folder. Double click the logo and export it to PNG.
13. The logo should now be saved as a PNG image

Helpful hints: I change my logo to White so it looks good on the slider image. I also save a black copy of the same logo for the favicon

Now that we have our logo – let’s upload it!

1. Go back to your Dashboard > Appearance > Customize
2. To upload your favicon, click on the General tab and just click to upload your image
3. To upload your logo to go the Site title/tagline/logo tab
4. You can change your site title and tagline if you want
5. Click select image to upload your logo
6. Make sure you click Save!

Step 9: Modify Permalinks

The last thing we’re going to do is modify our links so we show the www at the beginning of our URL and also how our blog post links look.

1. Go to your dashboard > settings > general
2. Where it says wordpress address – type in www. in from of your web address
3. And then where it says site address – type in www. in from of your web address
4. Then click save changes

Now let’s change our permalinks for our blog posts pages

1. Go to your dashboard > settings > permalinks
2. Select the post name option
3. Click save change

Step 10: Create Homepage and Blog Page

Now the fun really begins because this is when we start learning how to make our wordpress website ?

The first thing we are going to do is create our first page – the wordpress website home page.

1. Go to your wordpress dashboard
2. Hover over pages
3. Click add New
4. Title the page Home
5. Click the publish button

Let’s create another page using the same steps and title it Blog.

Well come back to this page in a few minutes. But first let’s set the homepage.

Step 11: Set Homepage

• Now let’s go back to the wordpress dashboard
• Hover over settings
• And click on reading
• Select Front page option
• In the drop downs put in Home and Blog
• Make sure to click save!

Step 12: Create Slider for WordPress Website Homepage

Step 13: Make and Customize Homepage

• Now go back to your wordpress dashboard > hover over pages
• Click on edit homepage
• Click on the backend (or front end) editor for visual composer

1. Add a new row
2. Make the row stretch row and content
3. Click the + and add a Revolution Slider 5 widget
4. Select your slider
5. Click Save

Now we’re make our about section for the wordpress website

1. Add a new row
2. Default spacing. Add 0px for bottom margin in the design option tab
3. Customize the rows to 4/12 + 8/12
4. Add a heading
5. Add a text box
6. Add a button
7. Add a single image -> large size
8. Click save

Now we are going to learn how to build the services section for our wordpress website

1. Add a new row
2. Stretch row
3. Add background color for row: #f4f4f4
4. Add a heading and title it “Our Services” -> H2, Centered, Style 2
5. Add a new row and change the columns to three
6. Add Service Modules with description, icons, images and links (do this three times)
7. Add a button

For the next about section I just make a duplicate of the previous

1. Add background color for row: #ecf2f4
2. Add 0px for bottom padding and bottom margin)
3. Add an image
4. Go ahead and customize this however you want

Now let’s learn how to make the section for our blog posts

1. Add a new row
2. Select stretch row – add a background color #f4f4f4
3. Add a heading and title it “Latest News”
4. Add blog post module and customize it with 3 blog posts

The next thing for this wordpress website homepage we’re going to create is the testimonial section (optional)

1. Add a new row
2. Select stretch row
3. Add 0px for bottom margin (optional – I do not add this)
4. Add a heading that says “What Our Clients Are Saying”
5. Add an inner row with 4 columns
6. Add single testimonials

Now let’s finish off learning how to make our wordpress website homepage with a call to action

1. Add a new row
2. Stretch row
3. Add background color: #00a9da and 0px bottom margin
4. Add a heading that says “Ready to get the ball rolling?”
5. 20px bottom margin
6. Add a button that says Contact Us
7. Customize the button if you want

Now that you are done learning how to make your wordpress website homepage for free – make sure you click save!

Click Save! (Yes I said it again haha)

Step 12: Make About Page

Now we could just go and make our wordpress blog posts but I want to do this in a certain order. If you don’t want to learn how to make any of these wordpress website pages then go ahead and skip these steps. You do not have to do them all.

But for the people that want to learn how to build a beautiful about page for their wordpress website this section is for you.

1. Go to your wordpress dashboard > hover over pages > click add new
2. Title the page “About”
3. Uncheck show page title (we’re going to make our own)
4. Select the backend visual composer editor
5. Add a row for your custom page title
6. Select stretch row and content
7. Add 40px to top padding for row
8. Add a background image and select cover option (we darken the image)
9. Add a heading and title it About (h1, white, style 1)
10. Add a separator (white, center, 3px, 10%, -20px for top margin padding)

Now let’s add a description row for our wordpress website

Add a new row (leave everything as the default)

1. Change the columns to “5/12 + 7/12”
2. Add a text block and add text
3. Add a single image (I add 500×300 for the image size but you can put in whatever you want)
4. Center Image

Now we will learn how to create the services section for our wordpress website 2017

1. Add a new row > stretch row > add background color: #f4f4f4
2. Add a Heading and title it “Our Process” with subtitle “How We Do it”
3. Add an inner row with 3 columns
4. Add service modules (select style 2 option)

Now we are going to add another about section

1. Add a new row > default > columns 7/12 + 5/12
2. Add a single image > full size
3. Add a text box
4. Add a button

Now we are going to learn how to create another call to action at the bottom of our wordpress website page

1. Create a row (stretch row and content)
2. Add background color: #00a9da
3. 0px bottom margin
4. Add a heading > 20px bottom margin
5. Add a button and customize it

Click publish when you’re done ?

Step 13: Learn How to Make WordPress Website Success Stories Page

1. Go to wordpress website dashboard
2. Hover over pages and click new page and title it Success Stories
3. Check to hide page title
4. Turn on backend visual composer editor
5. Add a row > stretch row > Add image > select cover >40px top padding
6. Add a heading and title it Success Stories (H1, change font color if you want to white)
7. Style 1 heading option
8. Add a separator (white, 3px, 10%, -20px for top margin padding)

Let’s now add a row for our wordpress website testimonials

1. Add row (change columns to 4)
2. Add single testimonials

Now let’s build the client section for our wordpress website ?

1. Add a new row
2. Stretch row
3. 0px for bottom margin
4. #ededed background color
5. Change it to 4 columns
6. Add logo blocks

Now we’ll add our call to action

1. Add a new row
2. Stretch row
3. Add 0px for bottom margin
4. #00a9da for color
5. Add a heading and title it “Stay Updated” > 20px bottom margin
6. Subtitle “Sign up for our Newsletter!” (change to H3)
7. Add a newsletter module (customize button colors)

Click publish when you’re done!

Step 14: Team Page

Now we are going to learn how to make a wordpress website page for your employees

1. Go to your wordpress dashboard and create a new page
2. Title the wordpress page “Team” or any other name you want
3. Check the box to disable page title (we are going to create a custom one)
4. Turn on the backend editor
5. Add a new row for your wordpress website page
6. Stretch row
7. Add a background image
8. Change the option to cover
9. 40px top padding for row
10. Add a heading and title it “Meet The Team” (style 1)
11. Add a separator line (white, 3px, 10%, -20px for top margin padding)
12. Add a new row for your team member photos
13. Add an inner row
14. Change the row to 4 rows
15. Add team member modules
16. Create a new row for call to action > stretch row > 0px bottom margin > background color #00a9da
17. Add a heading and put in “Work With Our Team” (style 2) > 20px bottom margin
18. Add a button “Get In Touch” > customize the button > 20px bottom margin

Step 15: Build Portfolio Page

Step 16: Create Blog Posts

Now we are going to create some wordpress blog posts to show up on our homepage and also for our blog post page.

1. Go to your wordpress dashboard
2. Hover over Posts
3. Click Add New
4. Add wordpress blog title
5. Add text
6. Add featured image
7. Make sure you choose the title option you want
8. Publish when ready

Repeat these steps if you’d like to make additional blog posts ?

Step 17: Create Blog Post Page

• Add a new page and title it blog
• Select Masonry option or any option that you want for the template on the right hand side
• Disable the page title
• Add a row (stretch row and add a background image > cover)
• Add a heading for your page title (style 1, white)
• Add another row for your call to action (stretch row, 0px bottom margin, background color #00a9da)
• Add a heading (style 2, 0px bottom margin)
• Add a newsletter form
• Click publish when ready!

Step 18: Customize Sidebar

The sidebar shows up on any page you want it to but specfically the blog post and blog page for this wordpress website that we are making.

To customize the side barfor the wordpress website that you are building, do the following:

1. Go to your wordpress website dashboard
2. Hover over appearance and click on widgets
3. Drag whatever widgets you want into your sidebar
4. Watch the video if you want to format some of the plugins we use
5. Click save when you’re done

Step 19: Contact Us Page

1. Go back to your wordpress dashboard and create a new page
2. Title the page FAQ
3. Disable the page title
4. Turn on the backend visual composer editor
5. Add a row > stretch > background image > select cover > 40px top padding
6. Add a heading for your page title (h1, style 1, white)
7. Add a separator with -20px for top margin
8. Create a new row for your contact information and change the row to 4 columns
9. Add some contact info modules
10. Add another row for the contact form (stretch row, 20px top padding, 0px bottom padding, #f4f4f4 background color)
11. Add an inner row and change the column size
12. Add a Heading for your contact form title (we will change the contact form layout at the end of this section)
13. Add another row for your map (stretch row and content with no padding)
14. Add a map module (0px bottom margin)
15. Add a new row for your call to action (stretch row and content, 0px bottom margin, background color:#00a9da)
16. Add a heading
17. Add a call to action newsletter module

Click publish to publish your wordpress website page!

Now on your wordpress dashboard, hover over CONTACTS and click on forms

• Click on edit Form 1
• Replace the html with the following to customize your contact form:

<div class="form-group">
[text* your-name placeholder "Name"]
</div>
<div class="form-group">
[email* your-email placeholder "Email"]
</div>
<div class="form-group wpcf7-message">
[textarea your-message placeholder "Message"]
</div>
<div id="recaptcha_response" class="g-recaptcha" data-sitekey="6LcUERkTAAAAAKj94Lv1HoeLspJykDfslIqF4Fyx"></div>
<div class="btn-wrapper mt-40">
[submit "Send"]
</div>

Click save/update when you’re done

Now you have just learned how to make your wordpress website homepage for free ? We’ll come back to this page in a big to finish learning how to make our wordpress website menus but if you want to make other pages like a terms and conditions page or privacy page, feel free to do that yourself!

Step 19: FAQ Page

FAQ time (if you have one) for your website. Let’s learn how to make this page for our wordpress website. Side note, are you having fun building your website from scratch following this step by step wordpress website tutorial?

1. Go back to your wordpress dashboard and create a new page
2. Title the page FAQ
3. Disable the page title
4. Turn on the backend visual composer editor
5. Add a row > stretch > background image > select cover > 40px top padding
6. Add a heading for your page title (h1, style 1, white)
7. Add a separator with -20px for top margin
8. Add another row and change it to two columns
9. Add headings for each FAQ section
10. For FAQs add accordion modules and add your questions and answers
11. Add a new row for your wordpress website call to action
12. Make the row a stretch row, background color: #00a9da, and 0px for bottom margin
13. Add a heading (20px for bottom margin) and title it Have Any More Questions?
14. Add a button and customize it

Make sure you click publish wordpress website page when you’re done!

Step x: Change Permalinks for WordPress Website

Step x: Add Favicon

Step x: Create Header Menus

Create Footer Menu

Transcript for the video tutorial –

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 nycstudiosdesign.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 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, 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 and 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 and 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 and 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 than ì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 you 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 a 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 checkbox 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 in to 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î elements. 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 events 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 of 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 just 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 at ì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 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 and 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 to the Settings. We have the default Skin and then weíre going to show our latest three blog posts. All I 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 clink 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 ì<br>î 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 or 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 change 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 paus 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 the 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 sort 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 to 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 cover 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 in to 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 in to Responsive and 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 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 delink 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 dropdown 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 is going to be the footer on the left-hand side and you can see right here 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.