1 

 

 

From WordPress Beginner to Small Business Winner Step By Step Tutorial To Jumpstart Your Site With Over 50 Free Business Templates ─ 

Bill Wood Step By Step Websites LLC https://stepbystepwp.com 

 

2  

Introduction 

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. 

 

 

This class was first created as an online video, but it was adapted to this format to reach more people. If you prefer video, you can take the class for free at https://stepbystepwp.com/class 

   

3  

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.   

 

(photo of my tutorial site with more info about SiteGround) 

 

 

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 the link to Siteground at the bottom my tutorial site at https://stepbystepwp.com 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, you just don’t get to share the love. SiteGround also has a 30 day return policy if WordPress isn’t for you, and you want a full refund. 

   

4  

 

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. 

 

 

 

   

5  

 

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 tutorial video on https://stepbystepwp.com/class ). 

6  

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. 

   

7  

SSL Encryption 

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. 

 

 

 

8  

 

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. 

   

9  

Logging In To 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. 

10  

WordPress Dashboard 

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 

   

11  

Install Theme 

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.    

12  

Install Plugins 

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. 

 

13  

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. 

● “Google XML Sitemaps” - Updates search engines of your site. ● “Yoast” - Keyword help, meta descriptions, and writing for search 

engines. ● “All in One WP Security” - See tutorial video on my site.  ● “UpdraftPlus” - To make backup, see video on my site. SiteGround 

already makes daily backups, though, so you are covered. 

   

14  

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. 

   

15  

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. 

 

 

 

16  

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. 

 

 

17  

Change Site Name, Intro to Customizer 

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. 

   

18  

Edit a 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.   

19  

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. 

 

 

 

Set Color Picker  

 

 

The Color Picker controls the colors of the squares in the bottom row any time you edit a color of anything. 

   

20  

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. 

   

21  

Saving Sections and Saving Entire Pages 

To reuse a section on the same page, just duplicate it. But, if you like the layout of a section and you want to use it on another page, right click the section and pick “save as template.” This will add the entire blue box section to your template library.   

To access your template library, click the “+” for a new section, and pick the folder for templates. 

To save and duplicate an entire page, and reuse it on another page, the task is slightly different. At the bottom of the page, next to the UPDATE button, there is a little up arrow. Click the up arrow, and pick “Save as Template.” That will add the entire page to your library for use anywhere on your site.   

Once you save your pages, you can easily save them locally by exporting the templates to your computer. From the Dashboard, click Templates, check the box next to the template, click the “Bulk actions” button, and pick Export. Now you have them as a backup, and you can use them on totally different WordPress sites by importing them into the second site. 

   

22  

Adding New Sections and Pages 

Access the template folder by hitting the “+” for a new section (on the blue section tab). Within the templates folder, you can see free pages and blocks that you can use to get ideas for content. You can insert these premade resources directly into your page, and then change the fonts and colors to match your site. 

  

You can access your saved templates and pages (1), Elementor free template pages (2), and premade blocks (3). 

   

23  

Background Colors, Photos, and Videos 

You can create some amazing designs with this simple tool. First, find a page, and Edit with Elementor. Right click a section (blue tab), and pick Edit section. Click Style at the top, and you see how to change the background of a section. 

 

To change the background to a solid color, pick a color. To add a photo, click the “+” to add a background image.   

Further down in the settings, there is “Background Overlay.” This enables you to darken a background photo so text widgets in the section will be legible.   

You can also change the background to a gradient, or a video by selecting the icons in “Background Type.” Find a cool drone video on youtube and add a dark background overlay (video only works on desktop, so add a fallback image under the video settings).   

24  

Email Contact Form 

If you want a contact form on your contact page, go to “Pages” and under the correct page, pick “Edit with Elementor.”  

If your template site came with a contact form, edit the widget, and all you see is a blank for a “shortcode.”   

 

Shortcodes enable plugins to talk to WordPress. In this case, the WPForms plugin will insert your premade form here. Write down this shortcode and exit Elementor. We need to go to the WPForms plugin and ensure this shortcode matches your shortcode widget on your 

page. 

If you don’t have a form, and you want one, drag the “shortcode widget” onto your page. Now we will make a form with the WPForms plugin, and insert the code into the shortcode blank. Exit Elementor and go to your dashboard. 

25  

Email Contact Form (continued) 

From your Dashboard, click WPForms on the side. You will see your available forms, along with the accompanying shortcode that needs to be pasted into the shortcode widget on your page. 

 

You can edit the form, and make a new form. When you are done, copy the entire shortcode, including the brackets, and paste it your page using the “shortcode widget.” 

Be sure to test this form yourself. Whatever email you used when you installed WordPress is the default destination email your customer’s inquiries. This can be changed in the WPForms settings, where you prefer to receive it in a different location. After testing, gmail was putting my form emails in the junk folder, so be sure to check that location, and click “this isn’t junk” and hopefully they will arrive in your inbox. 

Another tip, do not reply directly to the form inquiry. You need to copy the email they entered, and compose an email to that person.   

Lastly, as another option, you could get a free google voice phone number for your business and don’t bother with a contact form!  

26  

Changing Global Fonts In Customizer 

To change the fonts used by your template site, don’t change each individual widget on every single page. Instead, change the fonts 

globally in the customizer.   

From the Dashboard, select Appearance, Customize. 

Select Typography, Base Typography. From this menu, you can change your template site’s fonts. 

The Font Family picked for “Body and Content” will change the paragraph fonts. Pick a font and see how it changes the fonts on the page (remember the font it was using if you want to keep it). 

The Font Family for Headings will change all the headings on your site. 

 

Note - this setting only works if the widgets in your Elementor pages are set to “Default” font. If you pick a font within a widget, it will override this setting. 

   

27  

Create a Blog Page 

Your template site might have come with a blog page. I prefer the clean and straightforward blog page that comes with the Astra Theme. To create this, create a blank page called “Blog” (Dashboard, Pages, Add New, Title: Blog, publish).   

After you create your blank blog page, you need to tell WordPress it is your blog page. Go to Dashboard, Appearance, Customize. 

In the Customizer, Select Homepage Settings. Under “Posts Page” select the blank page you created. 

Now, all the posts you create will appear within that page. 

Creating a Post 

Blog posts help you gain more traffic and keep your customers up to date. When you create a post (Dashboard, Posts, Add New), don’t forget to add a “Featured Image” to the post. The “set featured image” is located on the right sidebar when you make a post, near the bottom. The featured image will show up in the blog post and as a preview on your blog page. 

If you installed the Classic Editor plugin, you can write blog posts in a simple word processor format, while still adding photos and media to your post. I prefer the Classic Editor for my posts, and Elementor for my pages. 

If you want access to both the classic editor and the Gutenberg editor, go to Dashboard, Settings, Writing. On that page, pick a default editor, and pick “Yes” for “Allow users to switch editors.”   

28  

Wrapping Up 

I hope you were able to get your small business site up and running! There are more customization tutorials on my site, https://stepbystepwp.com/class/ but I didn’t want to make this book too exhausting. 

Additional Tutorials 

● Make a Free Logo ● Customize Header (Transparent Header Options) ● Contacting SiteGround Chat Support ● Elementor Animations and Effects ● Add Large Footer Sections ● Make a Terms and Conditions ● Go through Security Settings ● Backup Site 

Final tips for security - update your plugins and themes when developers issue updates--once per week is usually sufficient. 

When WordPress has a new version, SiteGround usually updates the version automatically, unless you disable updates yourself.   

If you have any questions, you can post a comment on the class page, https://stepbystepwp.com/class , or, you can visit my youtube channel, StepByStepWP, and ask a question for a video or the general channel.