SiteGround WordPress Tutorial 2026: Step-by-Step Guide for Beginners
📺 ดูคลิป · 👁️ 5,867 views · 📅 2025 · ⏱️ 13:56 · 🌐 Websites / WordPress / Hosting / Builders
📌 สรุป
คลิปนี้สอนวิธีสร้างเว็บไซต์ WordPress ด้วย SiteGround แบบ step-by-step สำหรับผู้เริ่มต้น ครอบคลุมตั้งแต่การสมัคร hosting ซื้อ domain ติดตั้ง WordPress เลือก template สำเร็จรูป ไปจนถึงการแก้ไขหน้าเว็บด้วย Elementor drag-and-drop builder เกือบทุกอย่างฟรียกเว้นค่า hosting
🔑 ประเด็น / ขั้นตอนหลัก
- สมัคร SiteGround ผ่านลิงก์ affiliate ในคำอธิบาย → เลือกแผน Startup $2.99/เดือน (จ่ายล่วงหน้า 12 เดือน) จะได้ domain ฟรี 1 ปี · ต่ออายุ $17.99/เดือน
- กรอก domain ที่ต้องการ (.org/.net/.us ก็ได้สิทธิ์ domain ฟรี) → กรอกข้อมูลบัญชีและบัตรเครดิต → ไม่ต้องติก add-on เสริม (domain privacy $12/ปี, site scanner, premium backup, email marketing) เว้นแต่ต้องการจริง
- ยืนยัน email สำหรับ domain registration และยืนยันเบอร์โทรศัพท์ → เข้า client area แล้วคลิก Setup Site → เลือก domain → Start New Website → เลือก WordPress → ตั้ง admin username/password (แยกจาก SiteGround account)
- WordPress ติดตั้งเสร็จ → เข้า dashboard ผ่าน /wp-admin หรือผ่าน SiteGround client area → deactivate plugin ทั้งหมดที่ติดมา (bulk deactivate)
- ติดตั้ง theme Astra (ค้นหาใน Appearance > Add Theme) → ติดตั้ง plugin Starter Templates → ตรวจสอบว่า Elementor ไม่ถูก disable ใน Settings > Starter Templates
- เปิด Starter Templates → เลือก Elementor เป็น page builder → เลือก template (แบบฟรี ไม่มีป้าย Premium) → ปรับ logo/font/color palette เบื้องต้น → คลิก Build My Website
- แก้ไขหน้าเว็บด้วย Elementor: คลิก Edit with Elementor → แก้ text/button/image ผ่าน panel ซ้าย · ลาก element ใหม่เข้ามาจาก + · ลบด้วย right-click > delete · ใช้ Structure panel (Cmd+I) ดูโครงสร้าง container/element
- เพิ่มหน้าใหม่: dropdown ชื่อ page > Add New Page → ตั้งชื่อ → เพิ่ม container/element เองหรือ import template จาก Starter Templates → คลิก Publish เพื่อให้หน้าออนไลน์
- เพิ่มหน้าใหม่เข้า navigation bar: Customize > Menus > Main Menu > Add Items → เลือกหน้า → จัดลำดับด้วยการลาก → Publish
- แก้ header/footer: Customize > Header หรือ Footer → เปลี่ยน logo (upload ไฟล์หรือ media library) ปรับขนาด → แก้ footer elements → Publish
🛠️ เครื่องมือ / บริการ / ลิงก์ที่พูดถึง
- SiteGround WordPress Hosting — Startup Plan $2.99/เดือน (12 เดือนแรก), ต่ออายุ $17.99/เดือน — siteground.com (affiliate link ในคำอธิบาย)
- Domain ฟรี 1 ปี เมื่อซื้อแผน Startup (นามสกุล .org/.net/.us ได้)
- Domain Privacy add-on $12/ปี (optional, ปิดไว้ก่อนได้)
- WordPress CMS — ฟรี, ติดตั้งผ่าน SiteGround auto-installer
- Astra Theme — ฟรี, ติดตั้งจาก WordPress Theme Directory
- Starter Templates plugin — ฟรี, ติดตั้งจาก WordPress Plugin Directory
- Elementor page builder — ฟรี (version ที่ใช้ใน tutorial นี้)
💡 เอาไปใช้ / ข้อสังเกต
- คลิปนี้เป็น affiliate tutorial ชัดเจน — Matt ใช้ partner link SiteGround ตลอดเรื่อง รูปแบบนี้คือ how-to + affiliate combo ที่สายนี้นิยมมาก เหมาะนำไปเป็น template content strategy
- กลยุทธ์ 'เกือบทั้งหมดฟรี จ่ายแค่ hosting' ลด friction ผู้ชมได้มาก เป็น framing ที่ดีในการ convert คนดูให้คลิก affiliate link
- ลำดับ tool stack ที่แนะนำ (SiteGround + Astra + Starter Templates + Elementor) เป็น stack ยอดนิยม low-cost ที่ใช้งานได้จริงสำหรับเว็บธุรกิจทั่วไป
- ราคา renewal $17.99/เดือน สูงกว่าราคา intro มาก 6 เท่า — ควรวางแผนค่าใช้จ่ายปีที่ 2 ล่วงหน้า หรือ migrate hosting หากต้องการประหยัด
- Starter Templates มี template ฟรีจำนวนมาก ช่วยให้สร้างเว็บสวยได้เร็วโดยไม่ต้องออกแบบเอง — เหมาะสำหรับ client project หรือ niche site
📄 Transcript เต็ม (English, 2,630 คำ)
Hi there, I'm Matt and today I'm going to walk you through creating your WordPress website with site ground. In this tutorial, we'll start by setting up your site ground hosting account and I'll make sure you know how to get the lowest price available. Then we'll configure your domain name and get WordPress up and running. From there, I'll demonstrate how to access a massive library of professional website templates, all completely free and designed to look great on any device. Finally, I'll teach you how to personalize these templates using Elementor, which is an incredibly userfriendly drag and drop website builder. The best part is almost everything in this guide is completely free. You'll only pay for your site ground hosting. To get the best available deal for Site Ground, go to the link right here at the bottom of the screen or just scroll down to the video description and click on the first link that you find there. When you land on the Site Ground WordPress hosting page, click start now. You'll see three hosting plans. For the absolute cheapest option, choose the startup plan. It's advertised at $2.99 per month for the first year when you prepay for 12 months, and it renews at $17.99 per month after that. Selecting the annual term also unlocks a free domain for the first year. Go ahead and click get plan to start checkout. In step two, you'll add your domain. The new domain option should already be selected. Enter the domain name you're interested in. In my case, I want to see if Matt's GWP site is available. Choose an extension.org.net or do us are all eligible for the free year. Click continue to reserve it for your account. Site ground will confirm the domain is available and include one year of registration at no additional cost. Next, create your account with an email and password. Then, complete your client information with your name, address, and phone number. After that, enter your payment card details. In the purchase information section, make sure the startup plan term remains at 12 months. That's the best deal. Now, let's review the extra services section. Site Ground preselects domain registration, which is free for the first year, so that's great. Other add-ons are unchecked by default, such as domain privacy at $12 per year, site scanner, premium backup, and email marketing. I recommend leaving them unchecked unless you specifically want them. At the bottom, check the box indicating you've read and agree to the terms of service and privacy policy. The optional marketing opt-in is unchecked. I'll leave it that way to avoid promotional emails. When everything looks good, click pay now to finalize your purchase. You may be prompted to verify your phone number. Select either text message or phone call to receive your verification code. Then click next. When you receive the code, enter it and click next again. You'll get a confirmation page. Go ahead and click to enter your client area. Next, you'll need to verify your domain registration. You'll see a banner on your dashboard notifying you about this. Open your inbox and find the email with the subject verification required. Inside the email, click the verification link. On the page that loads, review your contact information and click the orange verify information button. You'll get a confirmation page. Go ahead and close any extra tabs and return to your site ground client area. Now, let's set up WordPress. In the home section of the client area, click setup site to start the setup wizard. Make sure your domain is selected, then click continue. Choose start a new website. Select WordPress and set your desired admin username and password. Remember, this is for your WordPress account, not your site ground account. You may see some upsell pop-ups, but you can simply decline those. Site Ground's auto installer will set up WordPress for you. This may take a few minutes. Once WordPress is installed, click login admin to access your WordPress dashboard. You'll be routed into a WordPress setup wizard, but you can click exit wizard in the upper right because we'll set up your site on our own. Welcome to your WordPress dashboard. This is your command center for website management. Just so you know, there are two ways to log in to your WordPress admin panel. The first is the method you've already seen, accessing WordPress by first logging into your site ground account. But there's also a quicker way. Just type your domain into your browser and add /wp-admin to the end. That will bring up the login page where you can enter the WordPress credentials you just created. Next, let's clean up WordPress by deactivating unnecessary plugins. On the left side, click plugins. We have three plugins installed by default. Conveniently, they're all deactivated, but I'll show you how to bulk deactivate everything in case the default plugins are different when you sign up. Click the check box at the top left of the plug-in list. Then click the bulk actions drop down and select deactivate. Then click apply. Next, let's install a theme. A WordPress theme controls the overall site structure and appearance. On the left side, click appearance. Then at the top, click add theme. In the top right, search for Astra. It should show up as the first option. Click install and then click activate. Now, let's jump start the design for our website by adding the starter templates plugin. This gives us access to professional pre-made website templates. On the left side, navigate to plugins. Then at the top, click add plugin. Search for starter templates. When you see it, click install now. Then when it appears, click the activate button. You'll be routed into a setup wizard. Before we dive in, let's make sure Elementor is available in starter templates. First, click exit to dashboard. On the left side, click settings. Scroll down to the starter templates section. Make sure disable Elementor is unchecked. Then click save changes. Now return to plugins and under starter templates, click get started. Then in the top right, select Elementor from the drop-down. After you've selected Elementor for your page builder, you'll see this gallery of templates that are available to you. A template is different than a WordPress theme. A theme is the overall design framework that controls your site's look and feel, while a template is a specific page layout within that theme. You can simply scroll through and look for options, or you can use the category drop downs at the top to quickly filter and find templates that are suitable for your site. As you scroll through, you'll see that some sites have a premium tag. A premium tag indicates a template that costs money. All the other templates are free. For our tutorial, I really like the look of this one at the top left, so I'll go ahead and select this. Next, you'll get some initial customization options. First, you can upload a site logo by clicking to upload a file. But if you don't have a logo right now, that's okay. I'll show you how to add one later. You can also choose your font pair, toggling through to see which one you like the best. I like this one. Next, you can choose a color palette. Again, toggling through until you find one that you like. I really like it with this yellow button. Once you've got your initial setup dialed in, go ahead and click continue. You'll be prompted to select features. Check any options that you want, or just click skip this step. You'll get this page here and you can fill it out if you'd like to or you can just click I understand. Let's go and then click submit and build my website. This will take a few moments to process as it sets everything up. When it's done, you'll get this fun little confetti animation and you can click view your website to see how it turned out. And here we go. You can see that the starter template is all loaded into our site. Now that we're in our editor, you can close out the starter templates tab. Next, let's start to edit our site. We'll use Elementor for our page builder. To access this, go to the top and click edit with Elementor. And here you can see the Elementor interface. Elementor is a drag and drop builder, making it super easy to make changes to your site. Let's take a quick look at how this web page is constructed. There are two main types of building blocks in WordPress. Containers and elements. These broader sections here are containers and the individual parts within them are considered elements. To understand the structure of the site better, we can use the structure panel. Click the drop- down arrow next to the containers. And if you click the various items in the list, you can see the various containers and elements highlighted so you can understand fully what you're looking at. Containers do exactly what they sound like. They hold other things, including other containers and elements. You can click the I button next to any element in the structure panel to hide and show it. You can also do this for entire sections by clicking the I next to containers. Let's close out of this structure panel by clicking the X. You can always pull it up again later by hitting command I on a Mac or controlI on Windows. If you scroll down to see the next container on the page and hover over it, you'll see that this pink edit container tab appears. You can click these six dots to drag the container to a different location on the page. You can click the plus button to add a new container. Or if you want to remove a container entirely, you can click the X. Next, I'll show you how to edit text, buttons, and images. Elementor makes it super easy to add new elements and make changes. To edit the text on a page, click on the text you want to update, and then simply type like you're in a word processor. You can also update text styles by clicking the style tab in the left side inspector panel. To update, it's similar. Click on the button you want to change and then in the left side panel change the text. You can link the button to a destination in the link section on the left side panel. First delete the pound sign. Then start typing the name of the page you want to connect and select it when it shows up. The link will fill in automatically. For external links, just paste the full URL. And like text, you can update button styles by clicking the style tab. It's also really easy to add new elements to a page. Go up to the top and click plus to add an element. Then find the element type you want to add and drag it in. To move the element to a different spot on the page, simply click on it and drag it elsewhere. To remove an element, simply secondary click on it and then click delete. Next, I'll show you how to update the images. Click on any image you want to change and then in the left side panel, hover over the image and select choose image. Then click select files to upload an image from your computer or click media library to find one that's already on your site. You can also click search images to find stock images. When you find one you like, click insert. Now you know how to edit containers and elements on your page. But what if you want to add a new page? Elementor makes this super easy. Simply go up to the top and click the drop down next to your current page name. In our case, that's home. Then click add new page. You may get a window asking you to save before you leave. Go ahead and click save and leave. Here you can see the blank page. First, we'll want to name it. So go up and click the gear icon. And then in the left side under general settings, find the title field and give your page a name. In my case, I'll call it the team. Next, you could click the plus button to add a container. Select the layout for the container and start adding elements. This is great if you want to build a page from scratch. But if you don't want to build everything from scratch, you can use starter templates to give you a jump start. Click the starter templates logo. Scroll through the gallery to find a general design you like. And when you open it up, you'll get options for individual pages. In my case, I like this about us design here. So, I'll go ahead and click to open it and then click import template. And just like that, the template has been loaded onto the page. And I can quickly change this header to say the team. Now, if someone were to go to this website right now, they would not see this page. And that's because if you look at the top next to the page name, it says draft. To make this page live, click publish in the top right. And here you can see the draft tag next to our page name has disappeared and the page is currently live. To preview this page on your live site, you can go up to the top right and click the eye icon. And there it is. But there's just one problem. This page doesn't show up in our navigation bar. To add this new page to the navigation bar, go up to the top left and click customize. Then on the left side, click menus and then click main menu. Here you can click add items and then select the new page from the list and click publish to see your changes. If you don't like the order of the items in the menu, you can simply grab the new page and drag it to a new location. Again, when you're happy with your changes, you can click publish and then you can back out to the main menu. Now, while we're in here, let me show you how to update the site's header and footer. We'll start with the header. On the left side, from the menu, click header. And next, we can update the site logo. To change the logo, click the change logo button and then add your new logo from the media library or upload a new file. Just like that, the logo's been added to the top left of the website. And I can change the logo size by changing the logo width with the slider here. Next, let's update the site footer. We'll back out to that main menu and then select footer. And here you can make updates by dragging the various elements in this editor down below. When you're done, be sure to publish your changes. When you're done making changes to the site settings, click the X to back out. And here we can see our beautiful new website. Now you know how to set up your WordPress website with Site Ground and you know how to customize it using Elementor's intuitive tools. Remember, if you haven't signed up yet, use our special partner link in the description to get the best deal on site ground hosting. Thanks for following along.