Metics Media · คลังวิเคราะห์

IONOS WordPress Tutorial 2026 - Full Step by Step Setup Guide

📺 ดูคลิป · 👁️ 9,370 views · 📅 2025 · ⏱️ 19:04 · 🌐 Websites / WordPress / Hosting / Builders

📌 สรุป

คลิปนี้สอนวิธีสร้างเว็บไซต์ WordPress ตั้งแต่ต้นจนจบบน IONOS hosting โดย Caleb ผู้สอนพาทำ step-by-step ตั้งแต่สมัคร hosting รับโดเมนฟรี ติดตั้ง WordPress เลือก template สำเร็จรูป ปรับแต่งด้วย Elementor และ publish เว็บให้ live ใช้เวลาจริงไม่กี่ชั่วโมงก็ได้เว็บมืออาชีพ คลิปนี้เน้นมือใหม่ ไม่ต้องเขียนโค้ด

🔑 ประเด็น / ขั้นตอนหลัก

🛠️ เครื่องมือ / บริการ / ลิงก์ที่พูดถึง

💡 เอาไปใช้ / ข้อสังเกต


📄 Transcript เต็ม (English, 3,769 คำ)

Hey, I'm Caleb and today I'll show you step by step how to build your WordPress website using Ionus hosting. We'll start by setting up your hosting and getting a free domain and I'll make sure you know how to get the lowest price available. Then we'll install WordPress and add a free plugin that gives us access to hundreds of professional website templates. From there, we'll customize your website's design using Elementor, a beginnerfriendly drag and drop website builder. And finally, we'll publish the website so it's live and ready to go. So, how do we get started? Well, the first step is to sign up for Ionis hosting. This is a great option because plans start at just a dollar per month and they even include a free domain for the first year. To get the best available deal for Ionis, go to this link right here at the bottom of the screen or just scroll down to the video description and click on the first link you find there. That's our special partner link and it'll make sure you're getting the best available deal when you sign up. Once you go to that link, you'll be brought to this page here. The first thing we'll do is scroll down and look at the hosting plans. Then you'll see that there are three options down here. The first option we'll look at is the start plan. This is best if you just want something small like a personal website or a blog and you don't need a lot of storage or extra features. Next is the grow plan, which is what I recommend for most people. It'll give you more flexibility in tools to run a business website or something that you plan to grow over time. And right now, Ionis is offering it for only a dollar per month for the first year, which makes it a really good deal. And finally, you have the boost plan. This is designed for larger projects that need extra performance. So, if you're planning to host a really big website with lots of traffic, this is the plan to go for. But for most people, the grow plan is the perfect option. So, let's scroll back up to the top of the page and click on get started to begin. And on this page, you're able to add a domain and get it free for a year. Go ahead and click in here to type in your domain name. I'll go with ioniswordpressutorial.com. And then I'll click on search. And as you can see, it's available and free for the first year. I want this domain, so I'm going to click on add to cart. Then I can scroll down and see that domain guard has been added. This will only be a dollar for the year. And I do recommend keeping this turned on to protect your personal information and prevent your website or email from being spammed. If you would like to turn this off, though, you can do that by clicking on this toggle here. With that done, let's go to the bottom right and click on continue. Next, you'll see some optional add-ons like having a business email. You also have a malware scanner and cloud storage. You can add any of these to your cart if you'd like to. For now, I'll just go to the bottom right and click on continue. And on this page here, we're able to see everything that we've added to our cart. We have our hosting plan here along with our plan length. In this case, it's going to be for 12 months. Then we have our domain here, which is completely free. And we can also toggle on free private registration. I'll go ahead and turn this on here. And then we have domain guard. Go ahead and review your cart. And when you're ready, click on continue. On this page here, you'll need to enter your billing information. I've gone ahead and entered in my personal billing information. So I'll go and click on continue. You can review everything one more time here. Then click on continue to payment options. Next, you'll need to select your payment method. Here you have an option to choose a credit card, PayPal, Apple Pay, or Google Pay. I'll go ahead and enter my credit card information. Now, I've entered in my information here. So, I'll scroll down and click on buy now. And there we go. We have now purchased hosting through Ionus and we have claimed our free domain. Keep an eye on your email inbox. So, you're going to be receiving an email from Ionus that contains all of your information relating to your order and login data. Also, on the screen, you'll see that your control panel is going to be set up. And once that's done, go down and click on get started. Now, before we start the WordPress installation, we'll need to give our project a name. This will be used as your website title and as an internal project name. And don't worry, you can always change this later. For my project name, I'll enter Ionis WordPress tutorial. Then I'll click on start WordPress installation. This will take a few moments to complete. So I'll wait here and fast forward when this is done and I'll meet you at the next step. Great. Everything has finished installing and it's ready to go. Right now the website is accessible under a temporary domain which you can see here. Later on, once we publish the website and go live, we'll be able to connect it to the domain we registered earlier through Ionus. For now, let's click on launch WordPress. Next, you'll be asked how you want to create your new website. Ionis gives you the option to build your website with AI, but for this tutorial, I'll choose the do-it-yourself method so that way I can walk you through exactly how everything works. So, I'll click on do-it-yourself. And here you'll be brought to your Ionis WordPress dashboard. Let's start by clicking on close. And within your overview tab here, you'll have some really helpful next steps for creating your website. And right here is where you're able to connect the free domain you claimed earlier. Just click on connect domain and follow the steps. And if you do decide later on that you would like to build your website with AI, you have access to the AI website builder here in the top right as well. You can also manage your hosting plan and view your website. To access our main WordPress dashboard, let's go back to the lefth hand side here and click on dashboard. Let's go ahead and close out of this banner here at the top. Then click into screen options. And let's uncheck everything here to clear everything out and make it nice and clutter-free. And you can always add back in any of these screen elements later on if you want to. I'll go ahead and close up the screen options here. Next, we need to install our theme. The theme is what controls the overall look and structure of your website. Things like the layout, style, and how everything comes together visually. To do this, let's go to the left and click on appearance. And from here, we're going to find the Astra theme. Astra is one of the most popular free themes for WordPress. It's simple, flexible, and works well for pretty much any type of website. And that's why I recommend that most beginners start with Astra. So to install the Astra theme, let's go to the top here and click on add a theme. Then go to the right side and click into search themes and type Astra. This is the Astro theme here. Click on install. We'll give it a moment to load. Then click on activate. Nice. Now our theme has been activated. And let's go ahead and close out of this banner here. The next thing we'll do is install a plugin called Starter Templates. This will give us access to tons of free professional website templates that are really easy to customize. To manage your plugins, go to the left and click on plugins. Depending on the plan you chose, you might see a few plugins already installed here by default. Plugins are kind of like apps for your phone. You can install them to add new features or abilities to your website. I usually like to start fresh with my plugins. So, I'm going to deactivate all of these. You can do that really easily by clicking on the check box here to select all of your plugins. Click into bulk actions and click on deactivate. Then just click on apply. Now that's going to deactivate all of the plugins that were automatically installed for you. Now let's add a new plugin. Go back to the left here and click on add plugin. Then go to the top right and search for starter templates. This is the plugin that we're looking for right here. Click on install now and then click on activate. And once starter templates is activated, you'll be brought right into the onboarding screen. To select your page builder, go to the top right and you'll see this drop down here. Right now, it's set to the AI website builder. If I click into it, you'll see we have options for the WordPress block editor and Elementor. We'll be using Elementor throughout this video, but in some cases, you may not see Elementor appear. To fix that, it's super easy. Let's start by going to the bottom here and clicking on exit to dashboard. Then go back to the left and click on settings. Scroll all the way down to the bottom of the page. And you'll see this option here. Sometimes, by default, this will be ticked on and this will disable Elementor from showing up within starter templates. Make sure that this is unchecked and click on save changes. Now let's go back to starter templates. We can get back there by going to plugins, scrolling down the page, and under starter templates, click on get started. Now, once again, let's go back to the top right, click in, and select Elementor. And now we have a gallery of different templates to choose from. These templates will give us a huge jump start on designing our website. You can scroll through the homepage here and find a template that you like. Or you can use these category drop downs here at the top to find a specific template that you're looking for. You'll also notice that some templates have this premium tag. That indicates that this template is not free. But if you see any template without that premium tag, it's completely free to use. So go ahead and find a template that you like. I'll be going with the outdoor adventure template here. So I'll click on it to select it. And then we have some initial customization options here on the lefth hand side. First, you can upload your website logo. And if you don't have one yet, then don't worry. You can always add it later on. Next, you can choose a font pairing. You can select different fonts to see how they look. And I think I'll go with this font here. And then you can customize your color palette. I think I'll go with this option here. And once you're done making changes, click on continue. Next, you'll see this page that asks if you want any extra features. You can select anything that you want here or scroll down and click on skip this step. Then you'll see this confirmation page appear. You can choose if you want to enter your personal information. If not, just scroll down, click on I understand. Let's go. Then click on submit and build my website. Now, this is going to install everything for your website, and it can take a few moments to complete. Once it's done, you'll get this cool confetti animation here. To view your website, click on view your website. And here it is. The outdoor adventure template is fully loaded onto our website. You can see that everything here already looks really clean and professional. And this will give us a great starting point to customize our website and get it to look exactly how you want. To customize your website pages, go to the top and click on edit with Elementor. Before we start editing, let's take a look at how this page is structured. In Elementor, there are two main building blocks. You have containers and elements. Containers are the larger sections that hold everything together. And inside containers, you have elements, things like text, buttons, or images. To get a better look at what I mean, we can use the structure panel here. Click on the drop- down arrow next to the container to expand it. Do that once again. And now we can see everything that's inside of it. As you can see here, I have four elements inside of my container. And I can use the eyeball button here and click on it. And that's going to hide that element. I can turn it back on by clicking on the eyeball button again. And I can even hide the entire container. And you can also easily reorder your containers and elements simply by dragging and moving them underneath another element. To clear things up, let's go to the top right and close out of the structure panel. And if you ever need access to the structure panel again, just go to the top left and click on this icon here. Now, let's begin customizing our website. We'll begin by changing out some text. To edit text, just click directly on the text you want to change. You can then highlight the text here and then you can type and change out the text to say whatever you want it to. You can also edit the text here on the left hand side. And if you click into style, you have some options for how the text is going to look. You can also edit buttons in the same way. Let's click on this button here. Then on the left, we can change what the button is going to say. We'll highlight the text and I'll make it say click here. You can also change where the button will link to after a website visitor clicks on it. Let's say after somebody clicks on this button, I want them to be brought to my contact page. I can do that by highlighting the field here and typing in contact. My contact page will appear here and I'll click on it to select it. Changing out images is also super simple. Let's scroll down to a section on our website that includes some images. and we have one right here. To change the image, let's click on it. We'll highlight the image. Click on choose image. Here you'll have the option to upload an image from your device. You can click on media library at the top. This will open all of the images that exist on your website currently. Or you can click on search images. And here you'll have access to a stock image library. For example, I can type in nature. I like this image here. So I'll click on insert. And there we go. That image has now been updated on the page. We can also add in new containers and elements to our pages very easily. To add in a new container, let's scroll up and we'll find this pink popup here. Go ahead and click on this plus icon. That's going to add in a new container. You can click on the plus icon again. And here you'll be able to choose what layout you want. I'll go ahead and select the grid. I'll choose my structure. Now let's add in a new element. go to the top left and click on this plus icon. And here we can see all of the different elements that we can add. We can add in text, an image, or a video, for example. I'll go ahead and drag in some text and drop it here. And later on, if you decide you don't want this container, you can easily delete it by clicking on the X icon. Now, we've looked at creating new containers and elements, but we can also create brand new pages. At the top, click on the drop down next to your current page name. In this case, it says home. We'll click into this, then go to the bottom and click on add new page. Make sure we save our progress by clicking on save and leave. And just like before, we could create a container and add in new elements from scratch. But if we click on this starter templates plugin here, we'll have access to a bunch of different pre-made page layouts. So, let's click on the starter templates plugin here. I'll find another template I like, like the planet Earth template, and then I'll use the about page. Nice. And now we have a super clean about us page. And we can edit all of the content within the page. Just like before, we'll also need to give this page a name. So, let's go to the top and hit this gear icon here. And on the left, we'll change this page to say who are we. And I'm also noticing that we have this page title here. So, who are we is appearing up here at the top and then also here on the main page. To hide your page title at the top, go back to the left and go all the way to the bottom. Then click on hide title. And now that title has been removed. And the last thing we want to do is make this page public. Right now you'll see that it's set to draft. To publish it, just go to the top right and click on publish. And there we go. Our page is now live. to preview our changes. Let's go back to the top right here and click on this eyeball button. And it's going to open up our website in a new tab and we can see our brand new page. One thing you may notice is that we created this brand new who are we page, but it isn't actually appearing in our main menu navigation. Let's go ahead and fix this. Start by going to the top left and clicking on customize. Then go down and click on menus. And we'll choose our main menu here. Let's go down and click on add items. We'll find the who are we page and we'll click on the plus icon to add it to our main menu. We can also reorder and remove pages here as well. Like for example, I don't need the about page anymore. So, I'll click on the X icon next to it to remove it. And then I can take the who are we page and drag it up to the top. I'm happy with this. So, I'll go to the top and click on publish. And as you can see, the menu has been updated. And now that page is part of your site's navigation. Now, let's take a look at how to update our header and footer. Your header is this section at the top of your website. To edit it, just simply hover over it until it highlights. Then, click on the pencil icon in the top left. And this will open up your header settings. You have some options here for design on the lefth hand side. And then you have your header layout here at the bottom. You'll see it split into three different sections. And you can add in new elements to your header by clicking on the plus icon. You can also reorder the existing content within your header. You can do this simply by dragging an element and moving it into a new position. I moved my menu over to the right and you'll see that change reflect here in the header in real time. And we should also change out the logo in our header as well. Let's click on the back button. Then click into site title and logo. Then click on change logo. Select your logo here. Then go to the bottom right and click on select. And here if your logo is like mine, I would recommend cropping the logo. Right now there's a lot of negative space on the bottom and top of the logo. And that can make our header look unusually large. So I'll take the slider at the top and bring it just above my logo. And I'll do the exact same thing for the bottom slider. Now go back to the bottom right and click on crop image. And you'll see that my logo is now uploaded here. To change the size of your logo, go down to logo width and use the slider to make it bigger or smaller. And finally, let's learn how to update our website's footer. Start by going to the back button at the top. Click on it once again and go down and find footer. Click into this here. and that's going to scroll all the way down to the bottom of your website. You'll have some options for the design of your footer here on the left. And your footer layout is basically the exact same as your header. You can reorder, add, and remove content here simply by dragging and moving it into a new position to finalize and publish all of the changes on my website that I've made so far. Let's go back up to the top here and click on publish. Now, all of our changes have been saved. And don't forget when you're signing up for hosting with Ionis to make sure you're getting the best available deal, make sure you use the first link in the video description. Thanks for watching this video. I hope it helped you out and taught you everything you wanted to know. And with that said, I'll see you in the next

← WordPress Tutorial for Beginners (2026) Hostinger Supabase Tutorial 2026 - How t →