WordPress Tutorial for Beginners (2026) – Updated & Simple

Darrel Wilson · Beginner ·🛠️ AI Tools & Apps ·6mo ago

Key Takeaways

This video tutorial covers the basics of building a professional website from scratch using WordPress, including installing WordPress, selecting a theme, and customizing the website using Elementor page builder. The tutorial also covers responsive design, contact forms, and optimizing the website for mobile devices.

Full Transcript

So, today we're going to make something 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 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 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 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 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 clean template and use a drag and drop builder to design every part of your website. In step four, we publish your websites, and now you're live on the 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 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. 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 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 a free domain, a big discount, and a 30-day money back guarantee for any reason whatsoever. So, once you decide on a plan, you'll then click on choose 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 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 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 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 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 PayPal, Google Pay, Apple Pay, and Alip 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 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 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 create a blank site and skip this section. So click on create a blank 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 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 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 and select a server closest to your target audience. So, if you're in the Americas, you'll go ahead and select 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. 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 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 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 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 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, 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 your website and get out of preview mode, all you got to do is type in your domain name. So type in 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 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 how to log into WordPress using 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 is where you're going to enter in your 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 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 jump into the important WordPress 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 options, we'll then click on update 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 is kind of like the tagline of your website. You know how Nike has just do 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 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 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 click on allow people to submit 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 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 name. Scroll to the bottom and click on 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 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 and other things about the Elementor 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 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 100 demos that you can use to create 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 this blue button you'll click on install 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 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 click on continue. Next, it'll prompt you to enter in your name and your email. You can always choose to opt into our newsletter. If you don't want to, no problem. You can always skip this step. So, right here, I'll click on skip this 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 complete, and now you can check your website. So, right here, I'll click on 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 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 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 basics. So, we're going to start on a 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 we're only using the element page 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. 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 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 version elements. And here are the pro 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 more free elements you can use on your websites. So to get started with over here I'm going to go ahead and drop in a 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 content. Now, you might also get these little pop-ups right here asking to 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 the plus. And then here, I will throw in 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, 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 know, it's a slim fit. Here, click on 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 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 this element and here we have this 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 for this one. Right? Take this, drag and 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 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 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 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 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 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 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, 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 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 column row. Okay. And here we have two 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 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 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 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, I'll click on horizontal. And now you see that we have these buttons side by 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 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 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 something like, uh, you know, center, 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 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 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 actual grid. And we are going to start 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 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 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 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 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 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 how to use this. But let's say for example you want to adjust the width 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 it. So here at the top right I'll click 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 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 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 pages and also how to add them to the menu. Next, let's go over one of the important options, which is the theme customizer. Here at the top, I'll click on customize. So this is the Solace 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 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 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 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 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 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 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 now and click on publish to save our 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 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 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 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 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. 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 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 mobile device. And right away it looks pretty good, right? So scrolling down here. I don't think there's much we got 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 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 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 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 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 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 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 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. Thank you all so much for watching this 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 WordPress, you probably don't have to hire a web designer and pay them like five grand. You can just easily build it 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.

Original Description

Get Hosting: https://www.darrelwilson.com/hostinger In this WordPress tutorial for beginners, I’ll show you exactly how to create a professional website from scratch — no coding, no experience needed. If you’ve never built a website before, don’t worry. In this video, we’ll go step-by-step and I’ll explain everything in plain English, so ANYONE can follow along. 🚀 In This WordPress Tutorial, You’ll Learn: How to install WordPress the RIGHT way How to choose a beginner-friendly theme How to customize your website using drag-and-drop tools How to create pages like Home, About, and Contact How to make your website look professional Common beginner mistakes (and how to avoid them) This tutorial is perfect for: ✅ Beginners ✅ Small business owners ✅ Bloggers ✅ Freelancers ✅ Anyone who wants a website without hiring a developer WordPress powers over 43% of all websites on the internet, and after watching this video, you’ll understand why. 👇 Follow Along & Build Your Website Today
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Darrel Wilson · Darrel Wilson · 0 of 60

← Previous Next →
1 How To Add Google Analytics To Your Wordpress Website 2016!
How To Add Google Analytics To Your Wordpress Website 2016!
Darrel Wilson
2 How To Embed A Youtube Video On Your Wordpress Website in 60 Seconds
How To Embed A Youtube Video On Your Wordpress Website in 60 Seconds
Darrel Wilson
3 How To Make A Wordpress Website | For Business |  2016
How To Make A Wordpress Website | For Business | 2016
Darrel Wilson
4 How to make a Free Wordpress Website for Music or Fanpages - Beginners Tutorial 2016
How to make a Free Wordpress Website for Music or Fanpages - Beginners Tutorial 2016
Darrel Wilson
5 How To Create An Amazing eCommerce Website with Wordpress - 2017 | FREE Theme
How To Create An Amazing eCommerce Website with Wordpress - 2017 | FREE Theme
Darrel Wilson
6 How To Make A  Wordpress Website 2016 | Beginners Tutorial
How To Make A Wordpress Website 2016 | Beginners Tutorial
Darrel Wilson
7 How To Make A Blog With Wordpress - 2016 | Beginners Tutorial
How To Make A Blog With Wordpress - 2016 | Beginners Tutorial
Darrel Wilson
8 How To Create A Beautiful and Free eCommerce Website with Wordpress 2017 (Online Store!)
How To Create A Beautiful and Free eCommerce Website with Wordpress 2017 (Online Store!)
Darrel Wilson
9 How To Make A WordPress Website 2017 - Step By Step Wordpress Tutorial
How To Make A WordPress Website 2017 - Step By Step Wordpress Tutorial
Darrel Wilson
10 How To Create A Stunning and Free eCommerce Website With Wordpress 2017 | Online Store Tutorial
How To Create A Stunning and Free eCommerce Website With Wordpress 2017 | Online Store Tutorial
Darrel Wilson
11 How To Setup Subscriptions and Recurring Payments For Your Website | Paypal Tutorial 2016
How To Setup Subscriptions and Recurring Payments For Your Website | Paypal Tutorial 2016
Darrel Wilson
12 How To Make A PREMIUM eCommerce Website with WordPress | Online Store Tutorial 2016!
How To Make A PREMIUM eCommerce Website with WordPress | Online Store Tutorial 2016!
Darrel Wilson
13 How To Create Amazing Landing Pages For Your WordPress Website! | Divi Theme Tutorial
How To Create Amazing Landing Pages For Your WordPress Website! | Divi Theme Tutorial
Darrel Wilson
14 Yoast Seo Tutorial 2016 - How To Setup Yoast SEO Plugin - Wordpress SEO By Yoast
Yoast Seo Tutorial 2016 - How To Setup Yoast SEO Plugin - Wordpress SEO By Yoast
Darrel Wilson
15 How To Create a Coming Soon(Under Construction) Page in Wordpress 2016!
How To Create a Coming Soon(Under Construction) Page in Wordpress 2016!
Darrel Wilson
16 Onlywire: Promote Your Wordpress Website to +50 Social Networks With Social Media SEO
Onlywire: Promote Your Wordpress Website to +50 Social Networks With Social Media SEO
Darrel Wilson
17 How To Create A Professional and Free eCommerce Website with Wordpress 2017 (Online Store)
How To Create A Professional and Free eCommerce Website with Wordpress 2017 (Online Store)
Darrel Wilson
18 How To Add Intergeo Maps Plugin For Your Wordpress Website
How To Add Intergeo Maps Plugin For Your Wordpress Website
Darrel Wilson
19 Top 11 Best Wordpress Plugins 2018 | Must Have Plugins For Wordpress!
Top 11 Best Wordpress Plugins 2018 | Must Have Plugins For Wordpress!
Darrel Wilson
20 How to Create a Free eCommerce Website with Wordpress 2017
How to Create a Free eCommerce Website with Wordpress 2017
Darrel Wilson
21 How To Make Beautiful Web Pages For Your WordPress Website! | Divi Theme Tutorial
How To Make Beautiful Web Pages For Your WordPress Website! | Divi Theme Tutorial
Darrel Wilson
22 How To Reset Your Wordpress Website | Reset Wordpress Back To Original Settings
How To Reset Your Wordpress Website | Reset Wordpress Back To Original Settings
Darrel Wilson
23 Top 10 Free and Responsive Wordpress Themes 2017
Top 10 Free and Responsive Wordpress Themes 2017
Darrel Wilson
24 How To Add Amazing Resume Layout Packs For Your Wordpress Website | Divi Theme tutorial
How To Add Amazing Resume Layout Packs For Your Wordpress Website | Divi Theme tutorial
Darrel Wilson
25 20 Best Websites To Sell Your Products! The Best Websites To Sell Online !
20 Best Websites To Sell Your Products! The Best Websites To Sell Online !
Darrel Wilson
26 SEO Tutorial For Beginners 2016 | What Is SEO and How Does It Work?
SEO Tutorial For Beginners 2016 | What Is SEO and How Does It Work?
Darrel Wilson
27 Best Web Hosting 2016! FREE DOMAINS! Top 5 Wordpress Web Hosting!
Best Web Hosting 2016! FREE DOMAINS! Top 5 Wordpress Web Hosting!
Darrel Wilson
28 How To Use Facebook Ads For Beginners 2017 | Complete Facebook Ads Tutorial
How To Use Facebook Ads For Beginners 2017 | Complete Facebook Ads Tutorial
Darrel Wilson
29 NEW Divi Theme 3.0 Visual Editor for Wordpress | Divi Theme Review!
NEW Divi Theme 3.0 Visual Editor for Wordpress | Divi Theme Review!
Darrel Wilson
30 How To Update The Divi Theme to 3.0 | Update Divi Theme From 2.7 to 3.0! Elegant Themes!
How To Update The Divi Theme to 3.0 | Update Divi Theme From 2.7 to 3.0! Elegant Themes!
Darrel Wilson
31 NEW Divi Theme 3.0 Layout Packs! | Divi Theme Review For Wordpress
NEW Divi Theme 3.0 Layout Packs! | Divi Theme Review For Wordpress
Darrel Wilson
32 Divi Theme 3.0 Tutorials for Wordpress. Coming Soon.
Divi Theme 3.0 Tutorials for Wordpress. Coming Soon.
Darrel Wilson
33 How To Make a Wordpress Website 2017 | NEW Divi Theme 3.0 Tutorial For Beginners!
How To Make a Wordpress Website 2017 | NEW Divi Theme 3.0 Tutorial For Beginners!
Darrel Wilson
34 How To Make A Wordpress Website 2017 | NEW Divi Theme 3.0 Tutorial - AMAZING!
How To Make A Wordpress Website 2017 | NEW Divi Theme 3.0 Tutorial - AMAZING!
Darrel Wilson
35 How To Use The Bloom Plugin By Elegant Themes | Add An Email opt-in Form To Your Wordpress Website
How To Use The Bloom Plugin By Elegant Themes | Add An Email opt-in Form To Your Wordpress Website
Darrel Wilson
36 How To Advertise Your Website On Reddit 2016 |  MARKET Your Website and Get Traffic!
How To Advertise Your Website On Reddit 2016 | MARKET Your Website and Get Traffic!
Darrel Wilson
37 Divi Theme 3.0 Customization | Tips and Tricks For Divi 3.0 for Wordpress!
Divi Theme 3.0 Customization | Tips and Tricks For Divi 3.0 for Wordpress!
Darrel Wilson
38 Divi Theme 3.0 Customization and Review | Tips on Divi 3.0 for Wordpress! MUST WATCH!
Divi Theme 3.0 Customization and Review | Tips on Divi 3.0 for Wordpress! MUST WATCH!
Darrel Wilson
39 Flippa.com Review: Buy And Sell Websites + Domains With Flippa Auctions
Flippa.com Review: Buy And Sell Websites + Domains With Flippa Auctions
Darrel Wilson
40 Udemy Course: How To Make A Wordpress Website With The Divi Theme 2016! EVERY MODULE COVERED!
Udemy Course: How To Make A Wordpress Website With The Divi Theme 2016! EVERY MODULE COVERED!
Darrel Wilson
41 How To Create An eCommerce Website With Wordpress 2017 | ONLINE STORE | NEW 3.0 Divi Theme -AMAZING!
How To Create An eCommerce Website With Wordpress 2017 | ONLINE STORE | NEW 3.0 Divi Theme -AMAZING!
Darrel Wilson
42 FREE and NEW 3.0 Divi Theme Layouts For Wordpress - Review, Tutorial, And Customization!
FREE and NEW 3.0 Divi Theme Layouts For Wordpress - Review, Tutorial, And Customization!
Darrel Wilson
43 NEW 3.0 Divi Theme Customization For Wordpress | Create Amazing Animations! -Must WATCH!
NEW 3.0 Divi Theme Customization For Wordpress | Create Amazing Animations! -Must WATCH!
Darrel Wilson
44 How To Add Live Chat In Wordpress For FREE! - Best Live Chat Plugin For Your Website
How To Add Live Chat In Wordpress For FREE! - Best Live Chat Plugin For Your Website
Darrel Wilson
45 Yoast Seo Tutorial 2017 - How To Setup Yoast SEO Plugin - Wordpress SEO By Yoast
Yoast Seo Tutorial 2017 - How To Setup Yoast SEO Plugin - Wordpress SEO By Yoast
Darrel Wilson
46 10k Subscribers. Thank You All!
10k Subscribers. Thank You All!
Darrel Wilson
47 How To Install and Setup Google Analytics To Your Wordpress Website - 2016! EASY!
How To Install and Setup Google Analytics To Your Wordpress Website - 2016! EASY!
Darrel Wilson
48 How To Advertise and Promote on Youtube For Beginners | Youtube Advertising Tutorial 2017
How To Advertise and Promote on Youtube For Beginners | Youtube Advertising Tutorial 2017
Darrel Wilson
49 How To Make A Wordpress Blog - Create A Blog With Wordpress - EXTRA THEME
How To Make A Wordpress Blog - Create A Blog With Wordpress - EXTRA THEME
Darrel Wilson
50 NEW DIVI THEME 3.0 Layout Packs | Importing Divi Theme Layouts For Wordpress
NEW DIVI THEME 3.0 Layout Packs | Importing Divi Theme Layouts For Wordpress
Darrel Wilson
51 How To Make A Parallax Wordpress Website 2017 -NEW!!
How To Make A Parallax Wordpress Website 2017 -NEW!!
Darrel Wilson
52 How To Make The Divi Slider Fullscreen | Divi Theme 3.0 Customization
How To Make The Divi Slider Fullscreen | Divi Theme 3.0 Customization
Darrel Wilson
53 Elementor Page Builder Tutorial - How To Create A Wordpress Website 2017
Elementor Page Builder Tutorial - How To Create A Wordpress Website 2017
Darrel Wilson
54 SEO For Beginners 2017 | How To Rank High In Google | Freelancer.com Tutorial
SEO For Beginners 2017 | How To Rank High In Google | Freelancer.com Tutorial
Darrel Wilson
55 Yoast Seo Premium Tutorial 2017 | Wordpress SEO By Yoast
Yoast Seo Premium Tutorial 2017 | Wordpress SEO By Yoast
Darrel Wilson
56 How To Install Wordpress With TMDhosting - MAXIMUM TMDHOSTING COUPON CODE!!
How To Install Wordpress With TMDhosting - MAXIMUM TMDHOSTING COUPON CODE!!
Darrel Wilson
57 How To Make A Wordpress Website 2019 | Divi Theme Tutorial
How To Make A Wordpress Website 2019 | Divi Theme Tutorial
Darrel Wilson
58 Divi Theme Customization: How to Create Diagonal Lines Between Sections in Divi Theme
Divi Theme Customization: How to Create Diagonal Lines Between Sections in Divi Theme
Darrel Wilson
59 NEW Divi Theme Tutorial On Udemy And Skillshare! 😀
NEW Divi Theme Tutorial On Udemy And Skillshare! 😀
Darrel Wilson
60 Unsplash.com: Best Free Photography Pictures and Images From Around The World | Unsplash Tribute
Unsplash.com: Best Free Photography Pictures and Images From Around The World | Unsplash Tribute
Darrel Wilson

This video tutorial teaches beginners how to build a professional website from scratch using WordPress, including installing WordPress, selecting a theme, and customizing the website using Elementor page builder. The tutorial also covers responsive design, contact forms, and optimizing the website for mobile devices. By following this tutorial, viewers can create a professional-looking website without hiring a web designer.

Key Takeaways
  1. Get web hosting for your new WordPress website
  2. Install WordPress onto your new domain
  3. Import a clean template and use a drag and drop builder to design every part of your website
  4. Publish your website
  5. Delete demo pages and posts in WordPress
  6. Change backend color scheme of WordPress
  7. Change email and password in WordPress profile
  8. Give website a name and tagline in WordPress settings
  9. Upload site icon in WordPress settings
💡 WordPress can be used to build professional-looking websites without hiring a web designer, and Elementor page builder makes it easy to customize and design websites without coding knowledge.

Related Reads

Up next
Your Competitors Are Using This: The AI SEO Toolkit for Brand Mentions
Matt Tutorials
Watch →