WordPress Tutorial for Beginners (2024) – How To Get Started

What we need to build our website.

Lesson Transcript:

Okay, so in order for us to build our website, we need 3 things.

The first is a “Content Management System”, or “CMS”.

And for this tutorial, we’re going to be using WordPress.

WordPress actually powers over 40% of all websites online.

It’s the same platform used by companies like Forbes, TechCrunch, and Sony for their websites.

And it’s 100% free to for us to use.

Then, the next thing we need to build our website, is a domain name.

And this is what people are going to type into their internet browser, to visit our website.

Then, the last thing we need, is web hosting.

Which is basically where the different files that make up our website will be stored online, so people can access it.

Now, there are tons of different places online to get domain names and web hosting.

But, for this video, we’re going to be using bluehost dot com.

Bluehost are a well known hosting company with affordable pricing and great support.

They also offer a free domain name with all of their hosting packages.

And they’re even recommended by WordPress dot org themselves, as their top choice for hosting.

Registering a domain name and web hosting from Bluehost.

Lesson Transcript:

So, to get started, we’re going to open up our internet browser and go to "bluehost dot com".

Or, if you want to support me and my channel.

You can use my affiliate link in the video description.

I will earn a small commission if you do this, and you’ll also get a discount.

Plus, I really do appreciate the support.

Then, once we get here, we’re going to hover over “Web Hosting” at the top and click “Web Hosting”.

Then, if we scroll down.

This is going to show us the different hosting plans that Bluehost offer.

I recommend going for the “Basic” plan, here on the left, which allows us to create 1 single website and comes with a free domain name for a year.

Or, if you’re wanting to build multiple websites on the same hosting plan, you could always go for the “Choice Plus” plan, which allows up to 3.

Then, once we’ve decided on the plan we want, we just need to click “Select”.

And here, we can register the domain name for our website.

And for my example, I’m going to type in “martieswebsite”.

Then, here on the right, we can choose our domain extension.

And I’m going to choose .com.

So, the domain name I’m registering here, is martieswebsite dot com.

Then, we just need to click “Next”.

And hopefully we get a message at the top of the screen, telling us the domain is available.

Then, as long as it is, we can scroll down.

And here, we can enter our “Account Information”.

So, things like our name and address.

Then, under this, if we scroll down.

We’ll see here that it’s only going to cost me $35.40 for 12 months of hosting.

And we also get our domain name for free.

This means it’s only going to cost me around $2.95 per month to run my website.

Which is awesome.

Then, below this, it says “Package Extras”.

And these are just some added extras that Bluehost offer.

I don’t want any of these.

So, I’m just going to uncheck the boxes.

But, you can have a read through them yourself and check the box beside any you want.

Then, under this, we can enter our payment details.

Or, we can choose PayPal.

Then, finally, down at the bottom, we just need to click “Submit”.

At this point, we’ll either see a payment processing screen, or we’ll be redirected to PayPal to login and pay for our order.

Installing WordPress onto our domain name and hosting.

Lesson Transcript:

Then, after paying for our order, we’re going to get a message saying: Congratulations, you successfully created your account.

Now, we’re going to click “Create password”.

Enter the password we want to use for logging into our Bluehost account.

Type it again, to confirm it.

And click “CREATE PASSWORD”.

Then, we need to type in the new password we just created.

And click “NEXT” to log in.

Then, once we’re logged into our Bluehost account, it’s going to automatically bring us through the WordPress installation process.

But, if we’ve already done this before.

We just need to click into “WordPress Hosting”, on the left.

Then, click “Add Site”, over to the right.

Make sure “Install WordPress” is selected here.

And click “CONTINUE” on the right.

And this will bring us back to the WordPress setup screen.

Now, we can enter our “Site Title”.

And don’t worry too much about this for now, as we can always change it again later.

Then, click “CONTINUE” on the right.

Now, we need to enter the domain name we’re wanting to use for our WordPress website.

And this is going to be the one that we just registered.

So, for me, I’m going to put martieswebsite dot com.

Then, if we click “CONTINUE”.

Bluehost is going to start installing WordPress for us, right away.

This will usually only take about 30 seconds or so to complete.

But, sometimes it can take a little longer.

Then, once WordPress has been installed.

We just need to click these 3 dots, to the right.

And click “LOG IN”.

At this point, we might get a message telling us that: “This site is using a temporary URL until our domain is pointed at Bluehost. If this is a new domain name, it might take a few hours to finish setting up”.

But, once our domain name’s ready, it’ll replace the temporary one right away, without us needing to do anything.

Now, we just need to click “LOG INTO WORDPRESS”.

And this’ll open up our WordPress website, in a new tab.

When we first install WordPress on Bluehost, we’ll be prompted to use their “WordPress Onboarding” process.

But, personally, I feel like it’s better to start with a fresh WordPress installation.

And making any changes ourselves.

So, to skip over the onboarding process and head straight to our site.

We’re going to click “Exit to WordPress”, in the top left.

Then, click “Exit”, in the middle.

And this’ll bring us into the “WordPress Dashboard”.

Which is where we can start adding content, and customising our WordPress website.

Deleting the demo WordPress plugins that come pre-installed.

Lesson Transcript:

Then, to visit our website, we just need to click our “Site Title”, in the top left.

And this’ll show us what WordPress looks like, when we first install it.

And don’t worry if yours looks a little different than mine, as sometimes they change up the default theme.

Either way, it’s just going to have some demo content on it for now.

Like this demo blog post called “Hello World!”

And a sample page, in our menu.

But, it’s ready for us to start customizing, and adding content to.

Then, to get back to the Dashboard, we just need to click our site title again, in the top left.

Then, the first thing we’re going to do in here, is remove a couple of demo plugins.

Plugins are used to add extra functionality to our website, that WordPress doesn’t come with by default.

Now, we’re going to be installing a plugin later on this video, to create our contact form.

But, for now, we’re just going to remove the ones that came pre-installed.

To do this, we need to click into “Plugins" on the left.

And this’ll show us any plugins we have installed.

Then, before we can delete these plugins, we need to deactivate them first.

To do this, we’re going to check the box in the top left, to select them all.

Then, change this dropdown menu to “Deactivate”.

And click “Apply”.

And this will deactivate all the plugins at once.

Now, you might notice that when we deactivate them.

A lot of the different options and notifications, disappear from our menu on the left.

This is the main reason I wanted to do this first.

Because sometimes the extra options created by these plugins, can make things a little more confusing, when just getting started.

Then, once they’re deactivated, we can delete them in basically the same way.

So, we’re just going to check this box, in the top left, to select them all again.

Change the dropdown menu to “Delete”.

And click “Apply”.

Then, just click “OK” to confirm it.

And WordPress is going to delete the plugins.

Installing a WordPress theme (GeneratePress).

Lesson Transcript:

Then, once these plugins have been deleted, we can move onto the next step, which is installing a theme.

And this is going to change the entire look of our WordPress website.

Now, there are literally thousands of free themes available for WordPress.

But, we’re going to be using one of my favourites, which is a theme called “GeneratePress”.

GeneratePress is a perfect theme for beginners.

It’s easy to use, and works well for almost any type of website.

And it even has a perfect 5 star review score on WordPress, with more than 1,300 reviews.

You can always change the theme again later, if you want to.

But, personally, I think GeneratePress is great.

Then, to install a theme on WordPress.

We just need to hover over where it says “Appearance” on the left.

And click “Themes”.

And this will show us any themes we have installed.

As we can see, the theme that’s currently active on my site at the moment is called “Twenty Twenty-Three”.

As it’s the one that says “Active” beside its name.

Then, to install a new theme, we just need to click “Add New” at the top.

And this will show us all of the different free themes that we can use.

We can browse through these different themes, until we find one we like.

Or, we can search for a specific theme, using the search bar in the top right.

So, we just need to type the word “GeneratePress" into this search bar.

Then, when it shows up, we’re going to hover over the theme.

And click “Install”.

This will only take a few seconds.

And then we can click “Activate”.

Once it’s active on our site.

If we click our site title, in the top left, to visit our site.

We’ll see that our website now looks totally different.

So, we still have the demo post.

And the demo page.

But, the style of our website has completely changed.

And now that we have it installed, the next thing we’re going to do is customize our WordPress theme.

In this lesson, we cover:

Changing our website title and tagline

Adding a logo

Adding a site icon (favicon)

Lesson Transcript:

Then, after installing our theme, and visiting our website.

We’re going to click here at the top, where it says “Customize”.

And this will open up our “Theme Options" on the left.

And then we have a LIVE preview of our website, on the right.

Now, I should point out here, that these options are sometimes very theme specific.

Which means that if we do decide to change our theme at some point, these options might be a little different.

But, everything else we’ll be covering, like creating pages and adding content will be done in the same way, on most themes.

Then, from here, we’re going to click into the first option on the left, which is “Site Identity”.

And here, we can change our “Site Title” at the top, if we like.

And we’ll see it updates in real time, on the right.

Then, under this on the left, we have our “Tagline”.

And this is hidden by default.

But, if we uncheck the box beside “Hide site tagline”.

We’ll see it now appears underneath our site title.

This is going to say “My WordPress Blog”.

But, to change this, we just need to change the text in this box, on the left.

Now, this is already looking pretty good.

But, if we have a logo image we’d like to use.

We just need to click “Select Logo,” on the left.

Then, click “Select Files,” in the middle.

Find the image on our computer.

Click on it, and click “Open”.

Then, once the image has been uploaded.

We need to click “Select,” in the bottom right.

Then, here we have an option to crop our image if we need to.

Or, we can click “Skip Cropping.”

And when we do this, we’ll see our logo now appears at the top.

Then, if we need to change the size of our logo, we can change the width, on the left.

And I’m going to change mine to 60 pixels.

And when I do this, we’ll see that it updates on the right.

Now, this is looking good in my example, with the type of logo I'm using.

But, if we’re using a logo with text in it.

We can hide the site title and tagline, by checking these 2 boxes on the left.

And we’ll see that it’s now just showing the logo.

But, I’m just going to bring these back for mine.

Then, the last option at the bottom is to add a “Site Icon”.

And this is referring to the little icon that appears beside our website title, at the top of our internet browser.

These icons are to help users tell what websites they have open.

And they usually consist of a website’s logo, or something related to their branding.

To upload our site icon, we just need to click “Select site icon”.

Then, click “Upload files” in the top left.

And here at the bottom, we’ll see it says the recommended size for this image is 512 by 512 pixels.

Now, it really doesn’t have to be exactly this size, as long as it’s a square image, it should look fine.

Then, once we have our site icon saved to our computer.

We’re going to click “Select Files” in the middle.

Find the image, click on it and click “Open”.

Then, once the image has been uploaded, we need to click “Select” in the bottom right.

When we do this, we’ll see our site icon is updated at the top, and it’s now showing the new image.

Then, once we’re finished with these options, on the left.

We can click “Publish” at the top, to save our changes.

And then click the back pointing arrow, in the top left, to get back to the main list of options.

Changing our websites colors.

Color Changes:

If you want to build the exact same website as me, these are the colors I changed in the lesson.

The color hex codes are in brackets.

BODY

Background = White (#ffffff)

Link = Purple (#7d2de6)

HEADER

Background = Black (#131313)

Site Title = White (#ffffff)

Tagline = Light Grey (#f5f5f5)

PRIMARY NAVIGATION

Navigation Background = Black (#131313)

Navigation Text = White (#ffffff)

Navigation Text (Hover) = Light Grey (#efefef)

BUTTONS

Background = Purple (#5e10eb)

Note: The rest of the colors were left unchanged.

Lesson Transcript:

Now, on the left, we’re going to click into “Colors”.

And this is where we can change any of our website’s colors.

To get started, we’re going to click the down pointing arrow beside “Body”.

And here, we can change the “Background” color.

And for this example, I’m going to make mine solid white.

Then, under this, we can change our main “Text” color.

And we’ll see it updates on the right.

But, if we ever change one of our colors, and then want to change it back.

We just need to click here, where it says “Default”.

And it’ll go back to the original color.

Then, under this, we have “Link”.

Which is any clickable links on our site.

This option has 2 colors.

The first one is the main “Link” color.

And then, the second one is the “Hover” color.

So, if we look here on the right, we’ll see the links are blue.

And if we hover over them, they turn black.

Then, over on the left, I'm going to change the first color to purple.

Then, I’m just going to leave the second color the way it is.

So, if I hover over my links on the right, they still turn black.

Then, once we’re done with these colors, we can click the up-pointing arrow to close them again.

And open up the next set of colors underneath.

And we can change these in the same way.

I'll link to a post in the description that explains what each of these colors represent on our website.

But, to save time in the video, I’m just going to do this.

Then, once we’re happy with our colors, we can click “Publish” at the top, to save our changes.

And then, click the back pointing arrow to the left, to get back to the main list of options.

Changing our websites fonts (typography).

Lesson Transcript:

Now, we’re going to click into “Typography” on the left.

And this is where we can change our website’s fonts.

This is totally optional, and the default fonts look great.

But, if we want to change them, we just need to click “Add Font” at the top.

And then, we can choose our new font.

So, first we have a few “System Fonts”, which are built into the theme.

And then, under this we have a bunch of different “Google Fonts”.

If we want to see what these fonts look like, we can search for them, over at "fonts dot google dot com".

Or, if we already know a font we like, we can search for it using the search bar at the top.

I’m going to type “Open Sans” in here, for my example.

And then, click on the font, to select it.

Then, if we click “Close”, down at the bottom.

We’ll see the font name is now showing here, at the top.

And this means the font has been added to our theme.

Then, we can leave this option, set to “Auto”.

And click “Add Typography” at the bottom.

And now, we’re going to choose where we want to use the new font.

So, we have “Body”, which is the main text on our website.

Then, we have “Site Title”.

And “Site description”, which is our tagline.

Then, if we scroll down, we also have “Menus”, “Buttons”, “Headings”, and anything else we might want to change.

I'll link to a post in the description, that’ll tell you what each of these mean.

But, I’m going to choose “Body” in my example.

Which as I said, is the main text on our website.

Then, under “Font Family”, we’re going to choose the new font we just added.

And when we do this, we’ll see the font updates to the new one, on the right.

Then, we also have some other options on the left, like “Weight” and “Style”.

I'm just going to leave these as they are for mine.

But, I do want to make my text a little bigger.

So, beside “Font Size”, I’m going to change it from 17 to 18.

And we’ll see the text gets larger on the right.

Then, under this, we have a few more spacing options, if we want to change them.

But, I’m just going to leave these as they are.

Then, once we’re finished with these options, we can click "Close" at the bottom.

And repeat the same process, for any other fonts we want to change.

I want to change the heading font for mine as well, so, I’ll quickly run through it again.

First we need to click “Add Font” at the top.

And choose the font we want to use.

I’m going to search for a font called “Inter” for mine.

Then, we need to click on the font to select it

And click “Close” at the bottom.

And at this point, we’ll see it’s been added to our theme, at the top.

Now, we need to click “Add Typography”, at the bottom.

And choose where we want to assign the new font.

And as I’m changing my site headings, I’m going to set this to “All Headings”.

Then, under “Font Family”, we’re going to choose the new font we just added.

And we’ll see it updates on the right.

Then, as I’m using this for my headings, I want to change the “Font Weight”.

I’m going to set this to 800, which will make it a thicker font.

And once again, we’ll see this updates on the right.

Then, one we’re happy with the different sizing and spacing options.

We just need to scroll down to the bottom and click “Close”.

Now, I think this is looking pretty good in my example.

But, you can experiment with different fonts, styles and combinations, until you get it the way you like.

Then, once we’re happy with our website’s fonts.

We’re going to click “Publish" at the top, to save our changes.

And then, click the back pointing arrow, to go back to the main list of options.

Creating a navigation menu (adding pages).

Lesson Transcript:

And now that we’ve updated our colors, and changed our fonts.

We can start creating any of the pages we want on our website.

To do this, we’re going to click into “Menus” on the left.

And click where it says “Create New Menu”.

Then, we need to give our new menu a name, at the top.

And I’m just going to call mine “Main Menu”.

Then, under this, we want to make sure the box beside “Primary Menu” is checked.

And then, click “Next”.

And now we can start creating our pages.

To do this, we just need to click “Add Items”.

Then, we can type the page name into this box.

And the first page I’m going to add, is a page called “About Us”.

Then, we need to click “Add” to create the page.

And when we do, it’s going to be added to this list on the left, which represents our menu.

Then, we just need to do the same thing, for any other pages we want to add to our website.

So, for me, I’m going to add another one called “Home”.

Another one called “Contact Us”.

And one called “Services”.

Now, we can add as many pages as we like, but, I’m just going to add these 4 in my example.

And we can always come back here any time we want, to add another page to our menu.

Now, to make sure you can follow along with everything in this tutorial.

I would recommend adding a page called Home.

And we’ll be using this to replace the blog, that’s currently on our home page at the moment.

Then, we’ll also be adding a contact form, so, maybe add a contact page too.

But, you can always add the form to a different page, if you prefer.

Then, once we’ve added any pages we want, we can click here, where it says “Reorder”.

And at this point, we’ll see our menu now appears on the right.

Now, we can use use these up and down arrows on the left, to change the order of our pages.

And for reference, anything we put to the top of this list, will be on the left side of our menu.

And anything we put to the bottom, will be on the right.

So, I’m going to put my home page to the top, as I want it at the start of my menu.

Then, I’m going to move my contact page to the bottom, so it’s at the end.

Then, once we’re happy with the order of our pages in our menu, we can click “Done”.

And at this point, we can click into the pages we just created, in our menu on the right.

Now, they are blank at the moment, but we will be adding content to them soon.

Then, once we’re finished with our menu, we’re going to click “Publish” at the top, to save our changes.

Then, click the back pointing arrow to go back.

And then click it once more, to get back to the main list of options.

Assigning our websites home page.

Lesson Transcript:

And now, we’re going to assign our website’s home page.

So, by default, WordPress is set up to be a blog, with posts on the home page.

If we click our logo, or site title, it’ll bring us to our home page.

Which currently has the “Hello World!” blog post.

But, as we’re building a website, we’re going to replace this with the new home page that we just created.

To do this, we need to click into “Homepage Settings” on the left, down at the bottom.

Then, we’re going to change this to “A static page”.

And then, under “Homepage”, we’re going to choose our page called “Home”.

When we do this, we’ll see it updates on the right.

And now, we can click “Publish” at the top, to save our changes.

Then, instead of clicking the back-pointing arrow to go back.

We’re going to click the X in the top left, to close out of the theme options.

And at this point, we’ll see that all of the changes we made, are now LIVE on our website.

Adding content to our different pages.

This includes text, headings, bullet lists, images and clickable links.

Lesson Transcript:

Then, to add content to our website’s pages.

We just need to click into the one we’re wanting to edit, in our menu.

And for me, this is going to be my about page.

Then, we need to click “Edit Page,” at the top.

And this will open up the WordPress page editor.

We can change the title if we need to, here at the top.

But, I’m going to leave mine as it is.

Then, we can just start typing any text we want on our page, underneath.

But, to save time in the video, I’m just going to delete this again.

And paste in some demo text, I already have copied.

Then, if we have any text that we want to turn into a heading.

We just need to click on it.

Then, click this symbol in the menu, that looks like a backwards P.

And change it to “Heading”.

And we’ll see the text gets bigger in the editor.

Then, if we want to change the heading size.

We just need to click on it again, to select it.

Then, click where it says “H2" in the menu.

And change it to a different size.

And we’ll see that it updates in the editor.

And I’m going to do this again, for my other heading.

So, we just need to click on the text we’re wanting to change.

Then, click the backwards P in the menu above it.

And change it to “Heading”.

Then, I’m going to click “H2” in the menu.

And change this one to be H3 as well, so they’re both the same size.

Then, once we’ve added our headings, if we want to add a bullet list.

We can highlight the lines of text we want to include in the list.

Then, click the backwards P, and choose “List”.

And we’ll see it updates in the editor.

Or, if we want it to be a numbered list.

We can click anywhere in the list.

Then, click this symbol to the left of the menu, to select the full list.

And then, we can change it to numbers, here.

But, I’m just going to quickly change mine back to bullets.

Then, once we’ve added any text we want on our page, we can add some images.

To do this, we just need to take a new line, where we’re wanting our image to appear.

Then, click the plus symbol (+) to the right.

Type “image” into this search bar.

And, then click on the “image” block, to add it to our page.

Now, over to the left, we need to click “Upload”.

Find the image on our computer.

Click on it and click “Open”.

And we’ll see the image now appears in the editor.

Then, once we’ve added it, if we look over to the right, we’ll see we have a few different sizing options for our image.

Or, we can just click here, to the right of our image.

And drag it, to change the size.

And I’m going to change mine to be smaller, as it’s a bit too big.

And I think this looks a lot better.

Then, once we’re happy with our image, we can add another one if we like.

But, to save some time, I’m just going to add one.

And now we can add some clickable links.

So, for example, here where it says “visit our contact page”, at the bottom.

If we wanted to link this to our contact page.

We just need to highlight the text.

Then, click this chain link icon, in the menu above it.

And that’s going to open up this popup.

If we’re wanting to link to another website, we can just paste the URL into this box.

And then hit enter on our keyboard, to add the link.

Or, if we’re linking to another page on our own website, like I am.

We just need to type the page name into this box.

So, I’m going to type “contact us" in here.

Then, when it shows up in this list, we can click on the page to add the link.

At this point, we’ll see it changes color in the editor, which means it’s been linked successfully.

Then, if at any point, we want to preview our page.

We just need to scroll up to the top.

Then, over on the right, we’re going to “click this icon”.

And then, click “Preview in new tab”.

And this will open up a preview of our page.

So, we have our text, and any images we added.

Then, our bullet list, and our different headings.

And now, we can just double check our link’s working.

So, I’m going to click the link at the bottom.

And we’ll see that it brings me to my contact page.

Then, we can just use the back button in our browser, to go back.

Then, once we’re done, we can close out of the preview.

And make any changes we want, to our content.

But, mine was looking pretty good in the preview, so I’m just going to leave it as it is.

Then, once we’re happy with our page, we can publish our changes.

To do this, we just need to click where it says “Update”, in the top right.

Then, if we click “View Page”, in the bottom left.

We’ll see that everything we added to our page is now LIVE on our site.

And everything’s looking awesome.

Now, we just need to repeat the same process, for any other pages.

So, we can click into the next page in our menu.

Then, click “Edit Page” at the top, to open it up in the editor.

Then, add our content, in the same way as we did with the first one.

But, to save some time in the video, I’m just going to do this.

So, now I have my Home page.

My About page

A Services page.

And a Contact page.

And I’ve left space at the bottom of this one, as we’re going to be adding a contact form.

Updating the email address associated with our WordPress website.

Lesson Transcript:

Now, as WordPress doesn’t have the ability to create a contact form, built into it.

We’re going to install a free plugin to create it.

But, just quickly before that, we need to update the email address, that's linked with our WordPress website.

So, to do this, we just need to click our site title in the top left, to get back to the dashboard.

Then, click into “Users” on the left.

Hover over the “admin” username, and click “Edit”.

Now, we’re going to scroll down to the section called “Contact Info”.

And change the email address in this box, to the one we want to use.

Then, we just need to scroll down to the bottom, and click “Update”.

At this point, we’ll see it says we need to confirm the email change, before it will update.

So, we just need to open up our email inbox.

Click into the confirmation email.

And click the confirmation link.

This will open up our website, in a new tab.

And we’ll see it says our profile’s been updated, at the top.

Which means our email address has been changed.

Now, we can close out of this new tab, and our email inbox.

Then, I’m just going to refresh this page, to get rid of the message at the top.

Creating a contact form using the free WPForms plugin.

Lesson Transcript:

Then, once we’re finished updating our email address, we can create the form.

And as I said earlier, we’re going be installing a plugin to create it.

To do this, we’re going to click into “Plugins” on the left.

And click “Add New” at the top.

Now, we’re going to click into the search bar, in the top right.

And type “WPForms”.

Then, once it shows up, this is the one we’re looking for here, “Contact Form by WPForms”.

Then, to install the plugin, we just need to click “Install Now”.

Give it a few seconds to install.

And then, click “Activate”.

Then, once it’s active, we’re going to click into where it now says “WPForms,” in our left dashboard menu.

And then click “Add New” at the top, to create a new form.

Now, we need to give our form a name, at the top.

And I’m going to call mine “Contact Form”.

But, you can call yours whatever you like.

Then, one of the awesome things about the WPForms plugin, is that it comes with contact form already created for us.

So, if we hover over “Simple Contact Form,” and click “Use Template”.

This will bring us into the form builder.

And here we can see that this form will ask for the user’s name, email address and their message.

And this is going to work for most websites.

Then, if we want to change it so it only asks for users first name, instead of first and last.

We can click on the “Name” field, here on the right.

Then, on the left, we need to change the “Format” to “Simple”.

And we’ll see it updates on the right.

Then, if we want to change it to say “First Name” on the form, instead of “Name”.

We just need to change the “Label” text, on the left.

And we’ll see it changes on the right.

Then, we can do the same thing for the “Email” field.

So, I’m just going to click on the “Email Field”, on the right.

Then, over on the left, I’m gonna change the “Label” to say “Email Address,” instead of just “Email”.

And once again, we’ll see it updates on the right.

Then, I’m just going to leave the “Comment” field as it is.

But, you can change it in the same way, if you want to.

Now, if we click on the “Submit” button, at the bottom.

We can change the button text, in this box, if we like.

And I’m going to change mine to say “Send Message”.

Then, once we’re done here, if we click into “Confirmations” on the left.

And look under “Confirmation Message”.

This is some text that’s going to show, after someone submits a message using the form.

And I’m going to type “Thank you for your message, we’ll get back to you as soon as possible.”

Then, once we’re finished here.

We can click into “Fields”, on the far left, to get back to form builder.

And at this point, we’ll see the button text we changed a moment ago, has been updated.

Then, once we’re happy with our form, we need to click “Save” in the top right, to save our changes.

And then click the X to the right, to close out of the form builder.

Adding the contact form to one of our pages.

Lesson Transcript:

And now that we’ve created our form, we can add it to one of our pages.

To do this, we just need to click our site title in the top left, to visit our site.

Then, click into the page, we want to add it to, in our menu.

Which for me, is the one called “Contact Us”.

Then, click “Edit Page” at the top, to open it up in the editor.

Now, we’re going to take a new line, where we want to add our form, and I’m going to add mine at the bottom.

Then, we need to click the plus symbol (+), to the right.

Type “wp forms” into the search bar.

And then click on the “WPForms” block, to add it to the page.

Then, we’re going to choose the form we just created, here.

And we’ll see it now appears in the editor.

Now, we’re going to click “Update” in the top right, to save our changes.

Then, if we click “View Page,” in the bottom left.

We’ll see the form has now been added to our page, and it’s looking great.

Now, the form isn’t going to work at the moment, as we’re still using the temporary domain name.

But, once our domain has been updated, we’ll be able to use the form.

And the message will be sent to us as an email.

Hiding the home page title.

(we can do this for any page)

Lesson Transcript:

Now that we’ve added our contact form, I just want to quickly cover how to hide our home page title.

So, if we visit our home page, by clicking “Home” in our menu.

We can see here, that it says “Home” at the top.

And while we are going to want a title at the top of most pages.

It seems a little out of place on the home page, so, we’re going to hide it.

Not all themes do, but the GeneratePress has this option built into to it.

So, to hide a page title, we just need to click “Edit Page” at the top, to open it up in the editor.

Then, if we look over to the right, and click into “Layout”.

We just need to check this box, beside “Content Title”, under where it says “Disable Elements”.

Now, we can click “Update,” in the top right, to save our changes.

And then click “View Page,” in the bottom left.

And at this point, we’ll see the title is now gone, at the top.

And we can do this for any of our other pages if we like, but I just wanted to do it for the home page for mine.

Then, if I wanted to make mine look a little better.

I could change this first sentence to be a larger heading, in the editor.

But, I’m just going to leave it to save time.

Changing the sidebar content.

Lesson Transcript:

And our website’s really coming together nicely now.

But, we still have one more thing to do.

Which is change our website’s sidebar.

The sidebar is this part of our website, on the right.

And it appears the same way, on all of our pages.

At the moment, it’s mainly stuff related to a blog.

So, we have a search bar.

A list of recent blog posts.

And then recent comments.

But, we can change our sidebar to show whatever content we like.

To do this, we just need to click “Customize” in the top left, to open up our theme options.

Then, we’re going to click into “Widgets,” on the left.

Then, click into “Right Sidebar,” at the top.

And here, we’ll see each of the different blocks that make up our sidebar.

So, first we have the search bar, at the top.

The list of recent posts.

And then, the comments at the bottom.

For my example, I want to remove all 3 of these.

But, if you want to keep any of them, you can.

So, to remove the “search bar”, at the top.

We’re just going to click on it.

Then, click the 3 dots, to the right of this menu.

And click “Delete,” at the bottom

And when we do this, we’ll see that it disappears from our sidebar, in the preview on the right.

Then, the next one we have on the left, is “Recent Posts”.

And this is made up of 2 different parts, the title and the list of posts.

And these have been grouped together.

So, to remove this group, we just need to click on the title.

Then, click this icon to the left of the menu, to select the full group.

Then, we’re going to click the 3 dots to the right.

And click “Delete” at the bottom.

And once again, we’ll see this disappears from our sidebar, on the right.

Then, the last one we have is “Recent Comments.”

And this is also a group.

So, we have the title, and then the list of recent comments.

So, to delete this, we’re going to click on the title.

Then, click this icon to the left of the menu, to select the group.

Then, we’re going to click the 3 dots, to the right.

And click “Delete” at the bottom.

And at this point, we’ll see our sidebar is now completely empty, on the right.

Now, we could leave it like this if we wanted, but, I’m going to add some content in here for my mine.

And to do this, we’re going to this plus (+) symbol, on the left, to add a new block.

And this is basically done in the same way, as adding content to our pages.

So, first, I’m going to click on “Heading,” to add a text heading.

Then, we can just type our text, in here.

And we’ll see it appears on the right.

Then, just like with our pages, if we click on the heading.

And then, click where it says “H2”.

We can choose a different heading size, here.

And I’m going to choose H3, for mine.

And I think this looks a bit better, on the right.

And now that I’ve added my heading, I’m going to click the plus (+) symbol again, on the left, to add another block to my sidebar.

And this time, I’m going to click on “Paragraph” to add some text underneath my heading.

Once again, we can just type whatever text we want, in here.

But, to save some time, I’m going to paste in some text, I already have copied.

Then, if we look over to the right, we can see the text is now here.

But, the text and the heading are pretty far apart.

So, if these are both related, we’re going to want them to be closer to each other.

To do this, we need to highlight them both at the same time, on the left.

Then, click this symbol, to the left of the menu.

And choose “Group”.

And when we do this, we’ll see it now looks a lot better, on the right.

Then, I also want to add an image to my sidebar.

So, to so this, I’m going to click on the plus (+) symbol, to add a new block

And then, choose the “Image” block.

Now, here, we can click “Media Library,” if we want to use an image we’ve already uploaded.

Or, click “Upload”, to add a new one.

Then, we just need to find the image on our computer, click on it, and click “Open”.

And once it’s been uploaded, we’ll see it appears on the right, at the bottom of our sidebar.

But, say we wanted the image to be at the top.

We just need to click on the image, on the left.

And then, we can use these up and down arrows in the menu, to move it.

I’m going to move mine to the top.

And we’ll see that it updates on the right.

Then, if we want to adjust the size of our image, we just need to click and drag this point, to the right.

And once we’re done, we’ll see it changes size on the right.

And now that we have our image the way we want it.

If we click the plus symbol (+) at the bottom again, we can add another block.

Or, if we click “Browse All”, there are actually tons of other blocks we can add.

And they’re all pretty straight forward.

I’ll link to a post underneath that covers how to set up most of them

But, for my example, I’m just going to leave my sidebar the way it is, as I think it’s looking pretty good.

And don’t feel like you need to add a ton of stuff to your sidebar right away.

You can always add more to it as you add more content to your website.

And sometimes, less really is better when it comes to our sidebar.

Then, once we’re done adding content, and we’re happy with our sidebar.

We just need to click “Publish” at the top, to save our changes.

Then click the “X” in the top left, to close out of the theme options.

And we’ll see that our sidebar has now been updated and all of our changes are now LIVE on our website.

Transcript:

And now the only thing left to do, is congratulate yourself.

Because, you just finished building your own website, in less than 60 minutes.

So, we have our logo, and our site title and tagline, at the top.

And our colors and fonts the way we like.

Then, we have our menu, with our different pages.

And our pages have text, headings, images and links.

Then, we also have our sidebar looking good too.

And if we click into our contact page.

We also have our contact form, so people can send us a message if they need to.

And without us needing to do anything else, our website’s also 100% mobile friendly.

So, here’s what this website looks like on tablet.

And this is what it looks like on a mobile phone.

So, no matter what device our website’s being viewed on, it’s always going to look amazing.

Then, we’ll just need to give it a few hours for our website’s domain name to update.

And once our domain name has changed to the new one, our contact form will start working as well.

So, that’s us now at the end, and that was how to build a simple website using WordPress.

If you have any questions or anything, about building your website.

Or, if you just want to tell me what you thought about this tutorial.

Be sure to leave a comment and I’ll try my best to reply.

Once again, my name’s Martie from letsbuildwp dot com, and thank you very much for watching.