LongCut logo

WordPress Tutorial for Beginners (2026) – Updated & Simple

By Darrel Wilson

Summary

Topics Covered

  • WordPress Powers 44% of Web
  • NVMe Storage Quadruples Site Speed
  • One-Click Demo Imports Build Instantly
  • Flexbox Enables Side-by-Side Layouts
  • Skip Designers, Build for $43/Year

Full Transcript

So, today we're going to make something amazing. We're going to add some olive

amazing. We're going to add some olive oil in this bowl. And wait a minute.

Wrong tutorial. You want to make a website, right? All right, that's

website, right? All right, that's better. Wait a minute. Let me change.

better. Wait a minute. Let me change.

So, you want to make a website. So, we

need a website builder that's easy to use, something affordable, something all without coding. And you know what? I

without coding. And you know what? I

think I know which one. I have tested out every website builder in the industry, and in my experience, most users always tend to lean towards one CMS. And of course, that's WordPress.

WordPress is the number one CMS in the world and it also powers more than 44% of all websites on the internet. Plus,

it's completely free and simple to use.

I've been using WordPress for more than 9 years and I think the reason why WordPress is the most preferred CMS, it's because of the variety of plugins you can use on your website. WordPress

has more than 55,000 free plugins available in the WordPress repo. With

one plug-in, you can turn your basic WordPress website into a teaching LMS platform. Or with Woo Commerce, you can

platform. Or with Woo Commerce, you can turn your basic website into a full-on e-commerce website with a built-in shopping carts and allowing credit card payments directly on your websites. The

possibilities are endless with WordPress. So, today I'll walk you

WordPress. So, today I'll walk you through how to make a WordPress website step by step for complete beginners.

It's quite simple. We first get web hosting for your new WordPress website.

Plus, we have a coupon code that will give you the largest discount available.

In step two, we install WordPress onto your new domain. This process takes seconds. In step three, we import a

seconds. In step three, we import a clean template and use a drag and drop builder to design every part of your website. In step four, we publish your

website. In step four, we publish your websites, and now you're live on the internet. It's that simple. And the best

internet. It's that simple. And the best part, WordPress is completely free. It

comes with free drag and drop page builders, free WordPress plugins, and free ready to go pre-made templates that you can easily import on your websites with one click. It's a no-brainer. So,

let's first go to step one. Now, there's

a link in the video description. This

will take you to hostinger.com where we're going to get your domain for your new WordPress website. Okay. Now, this

is hostinger.com. Now, hostinger.com is among the fastest and also the most reliable web hosting in the industry.

They're also officially recommended by WordPress as well. Now, before we begin, if you speak other various languages here at the top under this little American flag banner, we'll click on English. And here you can switch to your

English. And here you can switch to your native language. So if you speak

native language. So if you speak Japanese or German or French or Thai, you can select your native language and the entire website will be translated to your native language. So here I'll close

this. Now here I'll click on claim deal.

this. Now here I'll click on claim deal.

Now here we have a few different plans.

We have the premium, the business and the cloud startup. Now I personally recommend to go with the business plan.

With the business plan you actually get more resources, more storage and you can host more websites. And with the basic plan, you only get SSC storage versus

NVME storage. If you're not sure what

NVME storage. If you're not sure what that means, just know that NVME storage is four times faster than SSD. So, as a result, your website will be a lot faster if you decide to go on the

business plan. And don't worry, you get

business plan. And don't worry, you get a free domain, a big discount, and a 30-day money back guarantee for any reason whatsoever. So, once you decide

reason whatsoever. So, once you decide on a plan, you'll then click on choose plan. Okay. Now, the next option you'll

plan. Okay. Now, the next option you'll select is the period. So right here, if you click on this arrow, you'll see we have 48 months, 24 months, 12 months, and 1 month. I definitely recommend

going with 12 months or more. This will

actually apply the largest discount available, and you'll still get a free domain if you select more than 12 months. So go ahead and select the

months. So go ahead and select the period. And on the right side, you'll

period. And on the right side, you'll see that we have this option for a coupon code. And don't worry, I got your

coupon code. And don't worry, I got your back. If we scroll down right here and

back. If we scroll down right here and enter the coupon code Daryl 10, we will save an additional 10% on top of the discount already available. So right

here, I'll click on apply and there we go. So now we have 81% total in

go. So now we have 81% total in discounts and you'll only pay $43 for the entire year and that's all you're going to pay. So once you enter in that coupon code, you'll then click on continue. Now the next step is you'll

continue. Now the next step is you'll register for a Hostinger account. So

right here you'll enter in an email address and also a password. Once you

enter in your email and your password, you'll then click on register. So, next

we're brought to our checkout page. And

here we need to input our information for our billing address. So, I'll go ahead and fill out my information. Okay.

Once you enter your billing address, you'll then click on continue. Next,

you're brought to your payment method.

So, here you can pay with credit card.

You can pay with Mastercard or Visa, American Express, or for those of you who have Discover, you can use a Discover card. Also, you can pay with

Discover card. Also, you can pay with PayPal, Google Pay, Apple Pay, and Alip Pay. So, I'll go ahead and put in my

Pay. So, I'll go ahead and put in my credit card information. Okay. So, once

we fill out our credit card information, we'll then click on submit payment.

All right. So, after the payment page, it'll actually redirect us to the next page. Okay. So, now we're going to walk

page. Okay. So, now we're going to walk through the hostinger wizard. So, who is this website for? Well, it's for me or my business. I'll click on next. Do you

my business. I'll click on next. Do you

want to create or migrate a website? I

want to click on create a website and click on next.

So next you'll create your login credentials and this is what you're going to use to log into WordPress. So

make sure you write this down. You'll

put in your email address and then also put in a password for WordPress and then you'll click on next. Next they're

asking us what kind of website we want to build. We can actually click on

to build. We can actually click on create a blank site and skip this section. So click on create a blank

section. So click on create a blank site. So next you'll enter in the domain

site. So next you'll enter in the domain for your new website and you get a free domain using our coupon code. So, this

is the domain name that people enter in the address bar when they're browsing the internet. So, for example, I'll put

the internet. So, for example, I'll put darylutorial.com.

darylutorial.com.

After we type that in, you'll see this is our free domain and it's currently available. So, you'll go ahead and

available. So, you'll go ahead and select your domain here. And then you'll click on next. So, next we're going to register your domain. And this is important because you're claiming

ownership of this domain. So, is this personal or this a company? I'll select

personal. You'll then select the country of where you registered this domain. So

I'll put United States. And then I'll click on next step. And next, you'll enter in your contact details. This is

important because this lets people know who actually owns this domain. So if you ever want to sell your domain later or something, they're always going to look at your contact details. So go ahead and put in your first name, your last name,

and your contact information. And once

you're done, you'll then click on finish registration. So next, you'll go ahead

registration. So next, you'll go ahead and select a server closest to your target audience. So, if you're in the

target audience. So, if you're in the Americas, you'll go ahead and select United States. If you're in Europe,

United States. If you're in Europe, you'll select Germany. Or if you're in South America, you'll select Brazil.

This really isn't that important because you do get free CDNs with Hostinger. And

that makes copies of your website and puts it on servers all around the world.

So, your website will still be fast regardless of your location. But in my instance, I'll go ahead and pick Arizona right here. And then I'll click on next.

right here. And then I'll click on next.

So, now Hostinger is going to install WordPress on our new domain. So, just

give this maybe like one or two minutes and congratulations. This [music] is now

and congratulations. This [music] is now your new WordPress websites. So, this is Hostinger's welcome wizard where they're just saying, "Hey, get started with your websites." And they offer some tutorials

websites." And they offer some tutorials and all that cool stuff. Now, before

going any further, I first want you all to check your email. So, going over here to my Gmail, you're going to receive very important emails from Hostinger.

The first thing that you're going to do is verify your email address. This will

make sure that you are a real person and this will actually verify your email with Hostinger. So I'll go ahead and

with Hostinger. So I'll go ahead and click on verify email. Okay. And this is the Hostinger dashboard and this is where you can access the websites. You

can make free business emails and a whole lot more. We'll talk more about the Hostinger dashboard a little bit later. But let's go ahead and go back to

later. But let's go ahead and go back to the email. There is one more email that

the email. There is one more email that we also need to click on and that's from Hostinger as well. Here, click on inbox.

You're going to want to verify your domain right here. So verify your email address to use your domain. I'll click

on this and then we'll click on verify email. So after you click on that link,

email. So after you click on that link, our domain information has now been verified by hostinger.com. So let's jump back to our WordPress dashboard. So here

you'll see at the top we have this preview domain. Now in order to access

preview domain. Now in order to access your website and get out of preview mode, all you got to do is type in your domain name. So type in

domain name. So type in darylutorial.com.

darylutorial.com.

And this is now your new domain where you see it's live on the internet. Now,

if you ever want to log into your WordPress website, there's two ways to do this. You can either do this through

do this. You can either do this through the hosting or dashboard. I actually do this quite often because I get very lazy and I forget passwords really easily.

All you'll do is go over here to the website tab and then you'll see your domain and you can just click on WordPress admin and this will log you directly into your website. And just

like that, we are now logged into WordPress and you'll see that we are now using our live domain on the internet.

And if I click on visit site right here, you'll go ahead and see a copy of our websites. So next, let me show you all

websites. So next, let me show you all how to log into WordPress using your browser. So here you'll enter in your

browser. So here you'll enter in your domain name and then you'll enter d-wp-admin and this will bring you to the WordPress login screen. So I'll press enter. This

login screen. So I'll press enter. This

is where you're going to enter in your credentials. You'll enter in your email

credentials. You'll enter in your email and your password. So just remember, these are the credentials that you created when you installed WordPress.

So, I'll go ahead and click on remember me and then I'll click on login. So,

that's how you can log in and log out of WordPress so you can work on your website from any location. So, next

let's go ahead and talk about the WordPress dashboard. So, here you'll go

WordPress dashboard. So, here you'll go ahead and see a list of your pages. So,

if I click on all pages right here, you'll see a list of all of your pages.

These are just demo pages. So, you can just go ahead and delete these pages if you don't want them. Also, for post, the same thing for post. These are a list of all of your blog posts. And you always

get this cool one called Hello World, which is just an introduction to uh you know the blog. But we can go ahead and also trash this. So I'll click on trash.

And that's how you can delete pages from your websites. So let's go ahead now and

your websites. So let's go ahead now and jump into the important WordPress options. So let's go ahead and go over

options. So let's go ahead and go over here to users and click on profile.

So the first thing you can do is you can go ahead and change the backend color scheme of your websites. So, if you like blue or coffee or midnights, you can go ahead and select one of these colors. I

do like midnights. I feel like this is easier on the eye, right? If you scroll down, you'll see this is where you can um change your email. So, if you ever forget your password for WordPress,

it'll always be sent to this email. So,

make sure you have access to it. We'll

go ahead and scroll down. Now, if you ever want to change your password for WordPress, you'll go ahead and click on set new password. And then you'll enter in a new password for WordPress right here. Once you're done with those

here. Once you're done with those options, we'll then click on update profile. Next, let's go ahead and go

profile. Next, let's go ahead and go over here to settings and let's click on general.

Now, the first thing is you can give your website a name. So, I'm going to put Daryl's store, right? And then you have a tagline. This

right? And then you have a tagline. This

is kind of like the tagline of your website. You know how Nike has just do

website. You know how Nike has just do it, right? You can put a tagline if you

it, right? You can put a tagline if you want or you can leave it blank. You can

also upload a site icon and this appears at the top of browsers when people visit your website. And scrolling down, you

your website. And scrolling down, you can always adjust your email address again right here. Now, for those of you who speak various languages, you can actually change the back end of WordPress to your native language. So,

if you speak Chinese or Russian or Dutch or Spanish, you can go ahead and select the language right here and the entire backend will change to your native language. Once you're done with those

language. Once you're done with those options, we'll then scroll to the bottom and then click on save changes.

Okay. Now, there's two more options that I do want to check. Let's go ahead and click on the discussion tab right here.

Now, WordPress started off as a blog, so people typically are going to leave comments on your website, but that's really annoying. So, right here, I'll

really annoying. So, right here, I'll click on allow people to submit comments. This typically will allow

comments. This typically will allow people to spam your website with like Viagra pills and all sorts of crazy stuff. So make sure you uncheck that

stuff. So make sure you uncheck that box. Scroll to the bottom and then click

box. Scroll to the bottom and then click on save changes.

And the very last option before we design our website is permal links. So

right here I'll click on permal links.

Now you always want to change the permal link structure to post name. This is

optimal for SEO and it's a lot cleaner.

You'll see these other links right here are really messy with the date and all this unnecessary information. Postname

is actually optimal for SEO and is the best setting for your permanently structure. So, go ahead and select post

structure. So, go ahead and select post name. Scroll to the bottom and click on

name. Scroll to the bottom and click on save changes. Okay, now let's go ahead

save changes. Okay, now let's go ahead and click on our dashboard. All right,

congratulations on your new website.

Pretty simple, right? Hostinger makes

things like stupid proof as you can tell. So, in this next step, I'm going

tell. So, in this next step, I'm going to walk you through how to install a WordPress theme and then we're going to import a starter template. Then, I'll

walk you through how to use the page builder. We'll talk about the flexbox

builder. We'll talk about the flexbox and other things about the Elementor page builder. With that said, let's go

page builder. With that said, let's go ahead now and jump back to the video.

Okay. Now, the next thing we're going to do is we're now going to install a WordPress theme. So, over here under

WordPress theme. So, over here under appearance, let's click on themes. Here

at the top, I'll click on add theme. And

then under search themes, we're going to type in Solace.

S O L A C E.

So, this is the theme that we're going to use. And this comes with more than a

to use. And this comes with more than a 100 demos that you can use to create your website. So, right here under

your website. So, right here under install, click on install. Then you'll

click on activate. Okay. Now once you install the solace theme it'll prompt you to install the plugin to import the starter templates. So right here under

starter templates. So right here under this blue button you'll click on install starter templates. And after that it'll

starter templates. And after that it'll redirect you to the Solace dashboard. So

from here we can go ahead now and import some starter templates. So for starter templates I'll click on start now. Next

you'll see this page with me. I'm saying

hey how are you? And this is like a little video I made. But uh here at the bottom right I'll click on start now.

And here's a list of free starter templates that you can easily import on your website with one click. Now, we

have a variety of different templates for a variety of different niches. On

the left side, you can also filter by category. So, on the category section on

category. So, on the category section on the left side, let's click on marketing and we're going to import a template called Pixel Pro. So, we're going to scroll down and you're going to see this template right here called Pixel Pro. If

you can't find it, you can just type it in on the search bar. So, under Pixel Pro, let's click on this image. So,

here's the website. Now, what's really cool with this WordPress theme is you can actually scroll down and actually take a look at what the theme looks like before you import it. So, you can go through any of our templates. You can

check it out and then you can import it directly onto your WordPress website.

You can also adjust the color palette.

So, if you don't want the green, you can change it to like pink or blue or something like that. You can also change the font style as well. But once you adjust your color palette and your font

style here, I'll click on the check box.

This right here will activate the element page builder. This essentially

creates all the content. So, you must check this box in order to import the websites. Once you've done that, you'll

websites. Once you've done that, you'll click on continue. Next, it'll prompt you to enter in your name and your email. You can always choose to opt into

email. You can always choose to opt into our newsletter. If you don't want to, no

our newsletter. If you don't want to, no problem. You can always skip this step.

problem. You can always skip this step.

So, right here, I'll click on skip this step. Now, Solace is going to import

step. Now, Solace is going to import your starter websites. Now, this process might take anywhere between 1 to 3 minutes. All right, the import has been

minutes. All right, the import has been complete, and now you can check your website. So, right here, I'll click on

website. So, right here, I'll click on check website. And just like that, you

check website. And just like that, you now have a beautiful website. How about

that? So, we can scroll down here and make sure everything imported correctly.

You'll see we have these images, you know, just general upsells and some content for your website so it's not so like naked. Right here, we have just

like naked. Right here, we have just some like upsells about our company.

Scrolling down, we, you know, you can obviously replace these images with your, you know, your team or your company. And then we have our frequently

company. And then we have our frequently asked questions here at the bottom. And

then we have a call to action with our footer there at the bottom. Amazing. So,

let's go ahead now and talk about how to design this website using the drag and drop page builder. Okay. So, in this part of the video, I'm going to walk you through how to use the Elemener page builder. We obviously need to learn the

builder. We obviously need to learn the basics. So, we're going to start on a

basics. So, we're going to start on a blank page. I'll walk you through how to

blank page. I'll walk you through how to create sections, how to use the flexbox, and also how to use the grid layout. So,

with that said, let's go ahead now and jump back to the video. So, let me give you all a 10-minute crash course on how to use the element page builder. Now, I

recommend starting from a blank page. So

over here under the plus new let's click on page and for the title I'll put practice at the top right I'll click on publish and publish and to turn on elementor

here at the top let's click on edit with elementor and this will turn on the page builder you might get notifications on your first time so I'm going to close this and I'm also going to close the structure box here as well also you might notice that we have this page

title so I want to remove this so to remove the page title all you got to do is click on page settings and then over Here, I'll go ahead and click on the page layouts and click on element full width. And this will make sure that

width. And this will make sure that we're only using the element page builder. All right, cool. So now you can

builder. All right, cool. So now you can see that we have the header, the footer, and then we have the main content of our websites. Okay, so let's get started.

websites. Okay, so let's get started.

Now the very first thing that we need to do is create a row. So right here, click on plus, and here I'll select flexbox.

We'll talk more about the flexbox and grid in just a bit, but let's just select a two column row for now. Now

here at the top left, I'll click on add elements. And let me explain how this

elements. And let me explain how this works. So these are basically columns

works. So these are basically columns and you can drag and drop elements inside of the columns. So here on the left side you'll see that we have basic elements. These are using the free

elements. These are using the free version elements. And here are the pro

version elements. And here are the pro elements. We will install element pro in

elements. We will install element pro in just a bit and come back to this. And

then below that we actually have the general elements. And these are just

general elements. And these are just more free elements you can use on your websites. So to get started with over

websites. So to get started with over here I'm going to go ahead and drop in a heading text. Now, for every element,

heading text. Now, for every element, you're going to see that you have three different tabs on the left side. You

have the content tab. This controls the actual content of the element. And then

we have style. Style changes things like the font color, typography, and also you can add in cool things like text shadow and just other graphic effects. Then we

have the advanced tab. This controls

things like the margin and the padding and also the position of the element.

You'll use this sometimes for some elements, but for most elements, you're probably not going to use the margin and padding. Let's click over here under

padding. Let's click over here under content. Now, you might also get these

content. Now, you might also get these little pop-ups right here asking to install plugins. I recommend to just

install plugins. I recommend to just close any of those popups. Now, for

example, here we're going to put in Daryl Wilson. Okay? And I'll click on

Daryl Wilson. Okay? And I'll click on the plus. And then here, I will throw in

the plus. And then here, I will throw in an image. So, right here we have image.

an image. So, right here we have image.

Okay? And then I'll click on choose image and select media library. And here

we have demo images that were automatically imported when you imported the demo content. So I'm going to select this one right here and then click on select. Now for the image resolution,

select. Now for the image resolution, I'm going to select mine at 1536.

However, if you adjust this, it can make the image longer or shorter depending on the actual resolution. But I like this right here. This is kind of like, you

right here. This is kind of like, you know, it's a slim fit. Here, click on add elements. Next, I want to take the

add elements. Next, I want to take the text editor and just drag and drop. Now,

when you see that pink line right there, all you got to do is just drop the elements. And after we drop that in here

elements. And after we drop that in here on the left side, you can see that we can add in, you know, more content to this specific section. And here, I'll click on add elements one more time. And

then I'll just throw in a button module.

So, now we have this button. Pretty

cool. Now, what's really cool is for each element, you can rightclick and you can duplicate. And then you can take

can duplicate. And then you can take this element and here we have this pencil icon. You can drag and drop it.

pencil icon. You can drag and drop it.

So I can put it in this other column right here. And I can do the same thing

right here. And I can do the same thing for this one. Right? Take this, drag and drop it. And keep going as you can tell.

drop it. And keep going as you can tell.

Now you can also go ahead and delete elements. So I can right click on an

elements. So I can right click on an element, click on delete, rightclick, delete, and rightclick and also delete.

Now, what's really cool about duplicating things is you can also duplicate columns and also entire rows.

So, for example, I will right click on this duplicate rightclick and duplicate. And I no longer need this

duplicate. And I no longer need this column right here. So, I'm just going to delete this column. And there we go.

Now, you can also duplicate entire section. So, here you'll see that we

section. So, here you'll see that we have this edit container. I can right click on this, duplicate, and then the entire section will actually be duplicated. So yeah, there's a lot of

duplicated. So yeah, there's a lot of really cool things you can do with Elementor, but I'm going to close this and let's talk about now how to design the background. So the first thing I

the background. So the first thing I want to talk about is you can actually change the color of each column. So if I click on edit container under the style

section, if I go to classic right here and select color, you'll now see that we can change the color for this specific background. So we can change a specific

background. So we can change a specific color. Pretty cool. Now you can also add

color. Pretty cool. Now you can also add in colors on the entire background. So

this section right here with the six dots, this is controlling this entire section. So for example, for the style

section. So for example, for the style section, if I want to add in a color, I'll click on classic and then we can apply like a classic. Now notice how this one is still carrying that one

color because we selected that one color for this column. If I want to get rid of that, I'll click on the column and then just make that transparent. And voila.

So that is a quick little crash course on how you can, you know, design elements and style them a little bit more. But I bet you guys are all

more. But I bet you guys are all wondering about these controls over here on the left side under layouts. Now this

is referring to the flexbox. So let me dive into that. So here I will go ahead and click on the plus and click on flexbox. Now I'm going to select a two

flexbox. Now I'm going to select a two column row. Okay. And here we have two

column row. Okay. And here we have two columns. Now here's an example of where

columns. Now here's an example of where the flexbox really becomes useful. Let's

say for example you want to build a landing page, right? And on your landing page, you might have two buttons side by side. Very similar to my website. On my

side. Very similar to my website. On my

website, darywilson.com, we have a heading text, a normal text, and then we have two buttons. Now, if we go to this website over here, and we drag a button, right, and I drag another one right

here, you're going to notice that it's stacked on top of each other. And

there's no way to put these side by side. And this can lead to a lot of

side. And this can lead to a lot of frustration. Obviously, this is where

frustration. Obviously, this is where we're going to use the flexbox. So, over

here, I'll click on add elements. and

we're going to take a container and we're going to drag and drop it right here. Now, I want to take these buttons

here. Now, I want to take these buttons here and put them in the box. Okay, take

this one and take this one. So, now we have these two buttons. So, now we can utilize and manipulate these elements inside of the container. So, I'm going to click on edit container and then here

we have those directions. Remember

earlier how we had those directions for the flexbox earlier like the bottom and the right side? That's exactly what these are referring to.

So if I select horizontal, it's going to place the elements horizontal from one another. To give you an example here,

another. To give you an example here, I'll click on horizontal. And now you see that we have these buttons side by side. We can also add in space between,

side. We can also add in space between, space around, space evenly, or just put them at the start. Now align items. This actually will work if we have a larger

box. So we'll come back to that. Now I

box. So we'll come back to that. Now I

want to make this a little bit longer as you can tell. So this is kind of like, you know, this is kind of like, you know, it's very tight. So I'll click on this container. So I want to expand the

this container. So I want to expand the heights. So to expand the height over

heights. So to expand the height over here under the minimum heights, you can actually increase the size of this. If

you want a full page, you're going to select VH and then select 100.

Elementary even tells you this to achieve a full height container. Use

100VH. Full height is essentially having a landing page just like this. So this

is 100VH where the users are brought to a really clean landing page that is full width that covers the entire screen. So

going back over here, if I now want to utilize the flux box again, I can manipulate these elements inside. So

I'll click on this container.

And now you're going to see that uh we can actually justify this. So I'm going to put this in the center. Now we can also create gaps. So now you can see that we can utilize gaps and we can space this exactly how we want it to be

inside of this box right here. But, uh,

I think I'll just stick with something basic. I'm just going to, uh, put maybe

basic. I'm just going to, uh, put maybe something like, uh, you know, center, right? And to finish this off here at

right? And to finish this off here at the top, I'll click on add elements.

I'll drag in an image. And then I'll select an image. I'll go ahead and select this one here and click on select.

Then I'll center this. So, I'll use the flex box again. And I'll justify this in the center. And there we go. So, now I

the center. And there we go. So, now I have a full complete landing page. So,

that is the flexbox summed up. on the

demo website over here, you're going to come to find that we are using a lot of the flexbox containers with specific elements. So, uh we'll come back to the

elements. So, uh we'll come back to the landing page in just a little bit. But

before we go into the landing page, now let's talk about the grid layout. So,

I'm going to right click on this and delete it. And now, let's talk about the

delete it. And now, let's talk about the actual grid. And we are going to start

actual grid. And we are going to start from scratch. So, I'll click on the plus

from scratch. So, I'll click on the plus and click on grid this time. So, here we have different structures. Now, I think the one that describes us the best is probably going to be the four column

row. So, here we have two rows and two

row. So, here we have two rows and two columns. Now, if I click on add elements

columns. Now, if I click on add elements over here and try to drag in an image, you're going to see that it won't let us. You first must actually put an image

us. You first must actually put an image in the first one and after that you can then put it in the second one. So, for

example, if I want to add an element over here, like uh I don't know, anything, you're going to see that we can only add in one specific element, and then it prompts us to insert something into the next one. I'll

explain more on why that is in just a bit, but I'm going to put in four images. So, I'm going to right click on

images. So, I'm going to right click on this one, delete it, throw an image. So,

once we have that, we can now manipulate these boxes inside of this uh grid layout. So, over here, I'll click on

layout. So, over here, I'll click on container. And right away you're going

container. And right away you're going to see that we have options. So for

example, we can put something like you know four columns or three columns. And

we can also add in more rows. So now

you're going to see that we have more rows. Okay. But I'll do something like

rows. Okay. But I'll do something like uh we'll just put in like maybe like four columns and just one row. Now

essentially I believe this is best suited for portfolios, images, and other ways. But I'll explain another cool way

ways. But I'll explain another cool way how to use this. But let's say for example you want to adjust the width right here. You can make this larger.

right here. You can make this larger.

You can also add in gaps. If you don't want any gaps at all, you can just put zero gaps. And then we have this sort of

zero gaps. And then we have this sort of effect right here. You can also add in a background image or a color to this. So,

for example, if I click on style over here and go to classic, we can actually add in like a black right there. And

then you can showcase images right here for the grid layouts. So, here we have four different columns and we also have one row. Now, instead of actually

one row. Now, instead of actually inserting a module where we only have the option for one, we can actually insert a container into each of these.

And then we can add in multiple modules inside of that container. For example,

if I want to throw in a text right here, change the text color to white so we can see a little bit better. Okay. And then

maybe throw in an image and then throw in a button. We can do that for each specific one. So by doing this it does give you a little bit more flexibility to add in more columns and

rows. So for example over here we can

rows. So for example over here we can throw in a container and then also do the same thing for this one over here.

So essentially what you're doing here is you are creating grid layouts with flexboxes where you can have multiple elements. And don't forget you can

elements. And don't forget you can always use the flexbox just like we did on the other sections here as well. So

that is a quick little rundown on how to use the grid. I do recommend to actually insert flexboxes in the boxes and that'll just give you more control over your website. Now, one more thing I want

your website. Now, one more thing I want to mention is let's say you accidentally delete something and you make a mistake over here under this history button. If

we go to uh these revisions right here, you can always back trace and go to any part of when you're building your website. So, if you ever made a mistake

website. So, if you ever made a mistake or something went wrong, you can always go back into the history and uh build your website as you were building it before. And once you're done making all

before. And once you're done making all the changes on your website here at the top right, you'll click on publish. And

this is going to now save all the content on your website. And if you do want to see what your website looks like on this page, you'll click on preview changes. This will open up a new tab

changes. This will open up a new tab where you can view all the changes you made to your page right here. We'll talk

more about how to add it to the menu a little bit later. But with that said, let's go ahead now and talk about the actual homepage. So, to go to our

actual homepage. So, to go to our homepage, it's quite simple. Instead of

actually closing the editor and going to the homepage here under the uh this arrow right here, I can now click on home. And this will bring us to the

home. And this will bring us to the homepage with the editor still open.

Okay. So, now that you have an understanding of how to use Elementor, you can actually go to our demo content right here. Click on any of these

right here. Click on any of these elements and adjust it. You can also take elements here and just drag them onto the page and you can further expand and build your websites. So feel free to

go throughout the rest of the websites.

And there are some images that you might not need like this one. So I'm going to rightclick over here and delete this cuz I think that's no longer needed. Also

for this one here, I don't want this either. So I'm going to delete that. So

either. So I'm going to delete that. So

feel free to go throughout the rest of the website, make any modifications you want, add in content, and fully adjust this templates to fit your business needs. So, after you're done making

needs. So, after you're done making changes to your website here at the top right, you're going to click on publish.

Here, I'll click on save options and click on view page. And now we're logged out of Elementor where we can view the websites and view any changes we've made to our websites. Okay. So, next let's talk about how to create pages and also

how to add them to the menu. So, there's

two ways to do this. Right here under plus new and here you'll see page. You

can click on that or you can do it from the back end. So, here I'll go to dashboard. Over here we have pages and

dashboard. Over here we have pages and here click on all pages. Now right here you're going to see a list of all the pages on your websites. Now in order to create a new page here I'm going to close this popup. All you got to do is

click on add page and then just give your page a name. So this will be like my cool team here at the top right. I'll click on publish and publish and then I'll click on edit with

Elementor. The next thing you'll do for

Elementor. The next thing you'll do for all of your pages is you want to make sure you delete this title. So over here under page settings, I'll go ahead and change the page layouts to Elementor full width and then you can design your page as normal. So here I'll just go

ahead and quickly upload a template.

Okay, so I just quickly made this little section. Now I'll go ahead and publish

section. Now I'll go ahead and publish it. So here at the top right I'll click

it. So here at the top right I'll click on publish. Now notice here how this

on publish. Now notice here how this page is not on our menu. So now we need to assign this to our menu. So let's go to the menu settings. So over here I'll click on exit to WordPress. Next I'll

click on the WordPress logo. And then

over here we're going to scroll down under appearance and click on menus.

So right here we have select a menu to edit. Now we're going to select the main

edit. Now we're going to select the main menu here. Click on select. And below

menu here. Click on select. And below

that you'll see list of pages. So right

here we have a list of all the pages on our website. And this is the one that I

our website. And this is the one that I created earlier. So I'll click on add to

created earlier. So I'll click on add to menu.

And then here we have that page. And now

you can rearrange this to your menu. You

can also drag it below like the about us page to create a drop-own menu. But in

this case, I'll just add it to the menu.

And then here at the bottom, I'll click on save menu. Now we can go take a look at our websites. So over here, I'll go to visit sites. And then right here, we have that page, my cool team. And now

you'll see that it's assigned to our websites. So that's how you can create

websites. So that's how you can create pages and also how to add them to the menu. Next, let's go over one of the

menu. Next, let's go over one of the important options, which is the theme customizer. Here at the top, I'll click

customizer. Here at the top, I'll click on customize. So this is the Solace

on customize. So this is the Solace theme customizer. Now for every

theme customizer. Now for every WordPress theme, you're going to have your own specific theme options. Solace

allows you to customize the header and footer of your websites without any sort of added plug-in. So right here, I'll click on header builder. And here you can select different presets for your menu up here. So for example, if you

want like the logo in the middle with just a hamburger menu, you can add that.

Or if you want like two buttons here on the right side, you can also add that as well. If you click on elements, you can

well. If you click on elements, you can now also drag in any elements and fully design your menu. For example, here I'll take contacts and drag and drop it. And

then for every single element, you're going to have unique styling options for every single element that you drag in.

You can also change the background color of every single row. So, for example, here, click on the gear icon, and then for the row, I can change this to something like, you know, red or

gradients. You'll now see the backend

gradients. You'll now see the backend color changes to this gradient. You can

also do this for each specific row. Now,

I'm not going to go through the theme customizer and the header builder in detail because I think many of you watching this can sort of understand how to use it. Here, I'll click on back.

Now, if you want to delete an element, all you got to do is just click on delete. And just remember, you can drag

delete. And just remember, you can drag and drop elements. So, the sol theme is an amazing theme that you can just go ahead and, you know, drag elements around and custom build the header however you would like. So, here I'll

just put it right here. And just

remember that if you click on any of these elements, you can then add in the URL. You can change the text, change the

URL. You can change the text, change the color, and a whole bunch of styling options for each individual elements.

Here, I'm going to go ahead and go back right here. You can also do the same

right here. You can also do the same thing for the footer. So, here's the footer of your websites. And we also have presets, uh, templates that you can use to customize the footer of your websites. So on your own free time, feel

websites. So on your own free time, feel free to, you know, mess around with the theme customizer, build a header and footer however you would like using Solace. With that said, let's go ahead

Solace. With that said, let's go ahead now and click on publish to save our settings. Next, let's go ahead and exit

settings. Next, let's go ahead and exit out of the theme customizer. So to do that here, click on the X. So next,

let's talk about mobile optimization. So

here at the top, let's click on edit with Elementor, and this will turn on the page builder. Okay, so this is the website view on a desktop device. If I

go over here at the top and click on tablet portraits, you'll now see that this is the tablet view for this websites. Now, what we can do here is we

websites. Now, what we can do here is we can scroll down and we can adjust specific elements for specific devices.

Now, with the Sols theme, you're going to see that the website is already fully responsive for tablet and mobile devices. So, our templates are fully

devices. So, our templates are fully optimized for all devices. However,

right here, you can see that we need a little bit of work. So, I'll click on this elements and go to the style section. Now, whenever you're designing

section. Now, whenever you're designing anything in the tablet portrait, you're going to see that there is a tablet portraits icon available. So, right

here, I'll click on topography. And here

you'll see that this is the tablet portraits. And I want to make this just

portraits. And I want to make this just a little bit smaller. Just like that.

Okay. So, now you'll see that the S fits pretty well. I'm going to close this.

pretty well. I'm going to close this.

So, what you can do is you can go throughout the rest of the website and if there's anything that you want to adjust for a tablet, you can go ahead and do that. You can also hide specific

elements for specific devices. Let's

say, for example, you want to hide this specific elements for tablet devices.

Here, I'll click on the advanced tab, scroll all the way to the bottom, and over here under responsive, you can choose to hide this on a tablet and also a mobile device. Now, this might make

more sense for sections. So, over here, I'll click on these six dots. And you

can also hide specific sections for specific devices. So for example over

specific devices. So for example over here under responsive let's just say you want to hide this section for tablets and also mobile. Now this section will not appear for anyone visiting your

website on a tablet or a mobile device.

Next let's go ahead and click on mobile portraits. So this is the view from a

portraits. So this is the view from a mobile device. And right away it looks

mobile device. And right away it looks pretty good, right? So scrolling down here. I don't think there's much we got

here. I don't think there's much we got to change. However, if you do see

to change. However, if you do see something that you do want to change, all you need to do is click on any of these elements, go to the style section, and here you'll see you can now design things under mobile portraits. Okay, so

mobile optimization is very important.

So, just make sure that you do navigate the rest of the websites and adjust it for all devices. Let's go ahead and scroll up. Now, once you actually make

scroll up. Now, once you actually make all the changes you want here at the top, you'll click on publish. Okay. Now,

the very last thing that we're going to do is add a contact form to our websites. So over here, let's go to

websites. So over here, let's go to dashboard, go to plugins, and click on add plugin.

Now, under search plugins, we're going to type in contact form. Now, there are several contact form plugins you can use on your websites. I personally recommend WP forms. It's just a really easy form to work with. So, right here, I'll click

on install now and then I'll click on activate. Now, on the left side, you're

activate. Now, on the left side, you're going to see WP forms. Here, I'll click on WP forms. Now, they have created several forms for you automatically. So

here we have a simple contact form, a newsletter, and a signup form. I'm not

going to go in detail and show you how to build forms from scratch. But if you click on one, it's pretty self-explanatory. Here you can design

self-explanatory. Here you can design your contact form. Let's say, for example, you want to add a multiple choice right here. I'll go ahead and put a multiple choice. And then for multiple

choice, I'll put this as and the label would be what do you need? Right? So

maybe you want to like offer some services or something. Right? Uh here

I'll go ahead and just save this here at the top right. All right, cool. Now I'll

go ahead and close out of this. And now

let's embed this onto the website. So to

do that, let's go over here to visit sites and let's visit the contact page.

Next, I'll go ahead and turn on the page builder. So right here, I'll click on

builder. So right here, I'll click on edit with Elementor. Okay, so now let's go ahead and scroll down. Now here is a default contact form with Solless, but I want to get rid of this. So I'm going to rightclick and delete. Now on the left

side, we're just going to type in forms. F O RMS. And here is WP forms and we can actually drag and drop this. And then

we're going to select the form. So this

was the simple contact form. You'll

notice here that the form is kind of scrunched and that's just because the page builder is actually manipulating this element. It's actually cool. You

this element. It's actually cool. You

can make this larger or smaller depending on your needs. But right here I'll click on edit container. And what

we're going to do is just take off the actual flexbox. And that's just going to

actual flexbox. And that's just going to make it a full row. And let's just say for example you want to throw in like you know contact form or something here.

Here you can just throw in like, you know, contact us and then voila, now we have this contact form and this will go directly to your email. So here I'll go ahead and click on publish and then I'll view the page. If you need help with

contact forms, I actually have a dedicated video I'll put in the video description. All right, party people.

description. All right, party people.

Thank you all so much for watching this WordPress tutorial. I hope this video

WordPress tutorial. I hope this video really helped you out and taught you all the aspects of WordPress. As you can tell, making websites today is not that tough. And now that you know how to use

tough. And now that you know how to use WordPress, you probably don't have to hire a web designer and pay them like five grand. You can just easily build it

five grand. You can just easily build it yourself, right? So, I really do hope

yourself, right? So, I really do hope that this video brought a lot of value for my viewers. You have any questions for me about WordPress or page builders or plugins, let me know in the comments below, and I'll do my best to get to

everyone's [music] comments. With that

said, my name is Daryl Wilson and I will see all of you party people in the next video. Take care.

video. Take care.

Loading...

Loading video analysis...