Small Business Site Creation Class
No Experience Needed!
Start with an expert site by leveraging downloadable templates, instead of doing everything from scratch.
Once you get your site up, check out more tutorial videos below to add a final touch.
- 0:00 – Introduction and Preview
- 2:00 – Get Hosting, Install WordPress, SSL padlock encryption (skip if you have hosting)
- 8:55 – Log in first time (optional)
- 10:45 – Theme, Plugins, Under Construction
- 17:02 – Install Template Site
- 22:30 – Background image, video, and email form
- 29:23 – Making changes (crash course in Elementor)
More Specific Customization Tutorials Below!
Free Demo Space
We offer free sandbox space for a month to anyone hoping to demo the tools and test out the resources used in the video. You can even create your site’s pages on the demo server, and export the pages when you are ready to buy hosting!
Not Interseted In Video Tutorials?
Step By Step Instructions For Creating Quality Small Business Sites Fast
Jump To Section
- Get Hosting (Optional)
- Install WordPress (Optional)
- SSL Encryption (Optional)
- Logging In First Time
- Install Theme
- Install Plugins
- Install Template Site
The essential resource in this class is having a library of over 50 free sites. Unlike many tutorials, you will start with an expert site and learn how to customize them. This is a much better approach for beginners and people that need a quality site efficiently. This tutorial will give your WordPress basket of tools a quantum boost to another level.
Don’t take my word for it, you can browse the free templates at https://wpastra.com/ready-websites/
Pick the “Elementor” tab, and “Free” tab at the top. Here is a preview of some of the sites.
Get Hosting (Optional)
Before you make a website, you need hosting (the company that stores your website on a server). The initial setup in this tutorial uses SiteGround, a host that I use. Out of the thousands of hosts out there, they are 1 of 3 hosts that is recommended by WordPress.org (see https://wordpress.org/hosting/ ), so rest assured, they are a quality host. You get free SSL encryption (padlock in browser), fast speed, and great service. First year cost: about $6 per month.
If you want to use SiteGround and follow the steps in this tutorial, and if you want to thank me by making these free resources, you can use this link to Siteground. By using the link on my site to get to SiteGround, you can tip me for sharing these resources, while costing you nothing extra. Note, if you go directly to SiteGround, you get the same service and price. SiteGround also has a 30 day return policy if WordPress isn’t for you, and you want a full refund.
Next, pick WordPress Hosting. This opens 3 plans to choose from.
If you only want one business site, choose the cheapest plan (you can always upgrade). If you want to develop multiple sites with different domains, pick the second option (you can always upgrade if you exceed any limits).
Next, enter your domain and see if it is available. If it is available, you can move on to the next step.
Next, fill out the form and note your email and password. This information will be used to log into SiteGround.com, where you pay your bill and get customer service help. It is not your WordPress login.
For the options further down in the form, I opted in for the domain privacy, and opted out of the scanner. Note, after the first year, you can save $20/year by moving your domain to Namecheap (see additional videos on https://stepbystepwp.com/class
Install WordPress (Optional)
If you already have WordPress installed, you can skip this section. Once in your customer area, pick Set Up Site (button). Then, pick “Start a New Website” and pick “WordPress.”
Next, this is where you enter your email and a different password. Use a good password because bots scan the internet for weak passwords to gain access to WordPress sites. Now you have two logins and passwords. One is to SiteGround, and one is to your WordPress site.
If installation was a success, Congratulations! Now we just have a few steps before we can install the downloadable templates.
SSL Encryption (Optional)
If you want to ensure your site is encrypted (highly recommended), you can follow these easy steps. This ensures your site has the “padlock” in the address bar, so the information is always encrypted. Your site might already have SSL, but if you follow the steps, you can ensure SSL is present. From your SiteGround account (after you log in), go to the websites tab, and click the “Site Tools” button to access your website’s settings. This is where all your site settings live. You can browse these to get familiar with the options.
In the top left, click the 3 lines for more settings. Under Security, click SSL Manager.
At the bottom of the SSL Manager, you should see an active certificate with your site’s URL address (see #1 in photo). If you don’t see any certificate, do #2 in the photo and use the middle box to install a certificate by selecting your domain, and Let’s Encrypt SSL (top choice), and click “Get.” For #3, under Actions, click “Enforce HTTPS.” At the new screen, ensure “HTTPS Enforce” has the toggle switch in the On position. Exit settings at the top left.
Logging Into WordPress For The First Time
If your site is new, you might not be able to type your address directly into the address bar because it can take 24-48 hours for the DNS servers to register your site. Until that happens, log into your SiteGround account, pick the websites tab, and click the open link box next to your domain. That will take you to your site.
Once you are at your site, you will probably see the default WordPress installation. We will be changing this soon.
To log in, you need to click in the address bar, and add “/wp-login.php” to reach the login page. For example, if your domain is https://greatbusinesssite.com, you need to put “https://greatbusinesssite.com/wp-login.php” in the address bar, and then enter your email and password from when you installed WordPress.
WordPress Dashboard Tour
After you log in, you see your Dashboard, where all the settings for your WordPress site are found. The top bar contains some settings, and allows you to visit your site. The Sidebar contains most of the settings and functionality (if mine has more settings, we will be installing more functionality soon).
You can browse your Dashboard and see what is under each topic.
- Updates – update your themes, plugins, and WordPress
- Posts – create and edit blog posts
- Media – upload your photos in here so you can use them
- Pages – Landing pages that contain important info about your business (these will be created with the template soon)
- Appearance – Customize your theme and look
- Plugins – Add functionality to your WordPress site
- Users – Adjust your login and add more users
- Settings – More settings
Finally, we can start working with all the wonderful things WordPress has to offer, and take advantage of years of development by thousands of developers.
To install 1 of over 50 downloadable template sites, you need a specific theme.
From the Dashboard, select Appearance, Themes on the side.
Next, select the “Add New” button. Then, type “Astra” in the search box. You can preview the theme, but you need it to install the templates, so select “Install” and “Activate.” Now you are running the Astra theme, and if you go to your site, it looks a little different. We will install the template site soon, so it won’t always look like this.
The Astra theme is perfect for most purposes. It is lightweight, fast, and it was created by the same developers that made the Elementor Page Builder, so they should be compatible.
Plugins add functionality to your site. There are free and paid plugins, and this tutorial only uses free plugins (some have paid versions). Here are some tips regarding plugins.
- Use popular plugins (that means the developer is trusted and there is less security risk).
- Try and limit the number of plugins you use. The fewer the plugins, the faster and more secure your site will be.
From the Dashboard, Select Plugins on the left side, and “Add New.”
Type “Elementor” in the search box. You will see the page builder that uses the template sites. Note, this page builder is better than Gutenberg, the page builder that comes with WordPress. You can still learn Gutenberg later, after your site is up. Click “Install Now” and “Activate.” Now do the same thing for all the following plugins.
Search and install plugins:
- Astra Starter Sites – Install Now, Activate
- WPForms (no spaces) – Install Now, Activate
Note, when you install your template site, it might require other plugins, and it will download them as needed. Here are other popular plugins. Each plugin is the first result if you type what is in quotes.
- “Classic Editor” – Create blog posts in an easier word processor format without Gutenberg. See section on enabling this plugin.
- “Under Construction” – Visitors see under construction page instead of your site being created.
- “Yoast” – Keyword help, submit sitemap to search engines, meta descriptions, and writing for search engines.
- “All in One WP Security” – See tutorial video.
- “UpdraftPlus” – To make backup, see video tutorial. SiteGround already makes daily backups, though, so you are covered.
Enable Under Construction (Optional)
If you downloaded the Under Construction Plugin and activated it, you can enable it by clicking the light in the top address bar. If it is green, your visitors will see an under construction page.
**Note, you still log in by going to the same place, https://mydomain.com/wp-login.php
Don’t forget to turn it to red when you are done. You can also deactivate and delete the plugin when you are done.
Install Downloadable Template Site
If you made it this far, you will be so glad you did! Now we will install the template site.
From the Dashboard, Select Appearance, Astra Starter Sites.
If given a choice between page builders, select Elementor. Next, pick the Free tab at the top to browse all free sites.
Click preview to view all the pages, photos, layouts, and content you will be installing. You will be downloading all the pages that are shown within each site.
Keep in mind, you can change all the photos, colors, and fonts. Find one that is close to fitting your needs, check the boxes on the side, and Import Site. If you are installing for the second time, check the box to uninstall the previous template site.
Browse Your Site
If installation was a success, browse your site by hovering over your Site Title, then Visit Site at the top of the page.
Browse all the pages that are now in the menu of your site.
Next, go back to your dashboard, and view the Media. All the photos in your template site were added to your media.
Next, from the dashboard, view the “Pages.” You will see the individual pages that came with your template site. You might notice that next to the page, the dark font says “Elementor.” Since it was created with Elementor, you have to “Edit with Elementor” to edit most the content.
Introduction To Customizer & Change Site Name
Before editing individual pages, you should probably know about the Customizer, where several of your Astra Theme settings live.
From the Dashboard, Select Appearance, Customize. Different themes allow different customizations, and Astra allows you to change many things from the Customizer. You can click on the pencil within the preview page on the right to jump to the setting, or you can navigate to the setting from the left side panel.
To change the name of your site from “My Blog” to your business name or title of your blog, pick Layout, Header, Site Identity, Site Title. You can also see the place to upload your logo, and uncheck the option to Display Site Tagline. Click “Publish” to save changes and go back to the dashboard. Now, you will see your site title in the top bar.
We will return to the Customizer when we want to set the fonts of our template site. This will globally change the fonts so you don’t have to change every single box in your template site.
Edit Page In Elementor
Your template site has pages that were created with Elementor, so for the most part, you edit the pages in Elementor.
From the Dashboard, select Pages. Under the page you want to edit, select “Edit with Elementor” to open the Elementor Page Builder.
You will notice settings (1) on the left, and your page on the right (2).
A page is made up of sections (3). Each section is a blue block that contains gray columns (4). Some sections have just one column, others can have 2, 3, or more columns. The widgets (5), or elements, are the pieces of content that live inside the columns.
In the beginning, if you are a beginner, you may want to only make small changes, like the text and the photos. There are also many Elementor tutorials on Youtube. Here is a short video introduction – https://www.youtube.com/watch?v=-TPpwuB6dnI The video format is nice because the screencasts work well for certain tasks.
More Settings In Elementor
At the bottom of the settings panel, you can view your site in mobile mode (1), and ensure it looks great. Also, you can go back in history if you make a mistake (2). The bottom panel is also where you save your page (3).
If you click the 3 line settings icon at the top you can exit Elementor, and you can set you colors in your color picker. With this setting, you can add your site’s colors and palette to the color picker before we start editing.
The Color Picker controls the row of colored squares any time you edit a color of anything.
Simple Changes In Elementor
You can make a few changes in Elementor to practice. If you don’t like the changes, use the history icon at the bottom to revert back to the start of the session.
Practice Exercise – Duplicate Section, Column, and Element. Right click each one, and duplicate it. Move the copy anywhere on the page. Right click, and delete the copies. Note, duplicating things saves time and keeps things consistent.
Change a header color – right click widget, select edit. By default, the content appears. To view styles (and colors), select styles at the top, and then pick “Text Color.”
You can adjust the font size and font family under “Typography,” too. But in a later section, you see how to set the font family globally.