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 video analysis...