STUDENTS
arnold on Oct 12, 2018
***Updated 8/30/2022***
These instructions will show how to create a quick, free lawn care website. I chose lawn care at random and you can make any kind of similar services website for this class if you would like. Just run it by me quick before you start so I can approve your idea. These instructions start from a blank WordPress Installation and will get you to a completed Lawn Care Home Page which is all we will need for this course.
At this point you have a blank installation of WordPress
Your site should currently look something like this:
We need to log into the WordPress Dashboard of our website. In order to do this we need to add /wp-login.php or /admin to the end of our url.
So if the URL of my website is http://seo-demo.com/ then in order to log in I need to go to:
http://seo-demo.com/admin or http://seo-demo.com/wp-login.php
That will take me to a page that looks like this:
Enter your Username and password. Once you enter your credentials you can go to your dashboard. That will look something like the next image. In your dashboard we want to load a template that looks more like a lawn care website. Click APPEARANCE and then THEMES.
Next, Click ADD NEW at the top:
On the top right there will be a search box. Search for the MESMERIZE theme as shown below. Next click INSTALL on the mesmerize template. The click “Activate”
At the top of your dashboard you should see a big button to Install Mesmerize Homepage. Click that button.
Then click Activate Plugin.
You now have a new template for your WordPress website. Go to your URL to have a look if you want. (You may need to hit the refresh button once or twice if you do not see a new website). The website is pretty plain at this point so we need to get it fixed up.
The first thing we will do is delete some unnecessary plugins and install the recommended plugins.
Go to Plugins -> Installed Plugins
You will see all your installed plugins. Your plugins will look similar to mine but not exact. Delete all the plugins from your site as shown in the image below.
Next we want to install Contact Form 7. Go to PLUGINS, Then ADD NEW.
Type in CONTACT FORM 7 as the keyword. Find the plugin and then click INSTALL NOW and then ACTIVATE.
If you get an error warning about too few arguments, just ignore it. It happens every now and again. The next thing you need to do is Activate your contact form.
Repeat the same steps for the Mesmerize companion. (Go to PLUGINS, Then ADD NEW. Type in MESMERIZE COMPANION as the keyword. Find the plugin and click INSTALL NOW and then ACTIVATE. If your Mesmerize Companion plugin came installed by deault you will not need to do this and it will show grayed out.
Visit your URL again.
Your website is going to look a lot more like a website. It should look something like the following image with a different background image:
Making A Lawn Care Website:
Now that we have a template loaded, we need to make it a lawn care website. The first thing we need to get is a lawn care image. Let’s grab a free one from a website called PIXABAY that has free stock images.
Go to: https://pixabay.com/
Then search for lawnmower in the search box. You will see some free images and a few that you have to pay for (At the very top). Let’s just grab the first one as shown below:
If you don’t see it just click on this link:
https://pixabay.com/en/lawnmower-gardening-lawn-mower-384589/
Then click FREE DOWNLOAD. The following will pop up. Keep it at 1920 X 1275 and then click download. Save it to a folder on your computer.
Next open tinypng.com and upload the photo there. Tinypng is a free online program that will reduce the file size of your images down without changing anything else about the image. The quality will stay the same and the actual size of the image will stay the same.
Google wants to show websites that load fast and the number one way to slow down a website is to use really big images. When you run a large image through TINYPNG you can see the file size drops from 3.1MB down to 907.7kb which is 70% smaller.
So every time someone loads your website they have 2MB less of an image to download which is important, especially for mobile phones which have slower download speeds. Click DOWNLOAD and replace the image on your computer with the new one. While you do that, give it a better name. I am going to call mine “Arnies lawn care lawnmower”
Hold onto that image for now. We are going to use it shortly.
At the top of your website you should see a button called CUSTOMIZE (or Customise). Click that.
It will give you the option for a pre-configured layout. We will skip that step and just play with the default. Click the X as shown below.
You will see a long column that runs the height of your web page that includes all the options to customize your theme. The first thing I am going to do is change the name of my website. To do this I am going to click General settings as shown below.
Then SITE IDENTITY
Then I am going to change the site title to ARNIE’S LAWN CARE. I am getting rid of the tagline for now also. If I had a logo I would upload that above instead. You can click PUBLISH to save the changes.
You should notice that the changes occur live on the website. There are also a plethora of options to change anything and everything that you want for your website. You can play around with these if you want. If you mess something up just do not save the changes.
I am now going to click the back buttons to get to the main page of the CUSTOMIZE options.
Then back one more time:
The next thing I want to do is change the main header image at the top. In this particular template this is located in the HERO section. Click on Hero:
Then FRONT PAGE HERO
Then Click OPTIONS and then CHANGE FILE
This is going to bring you to the option where you could upload an image that was in your media library if you had one. But since we don’t have any images uploaded into our brand new WordPress website we will have to upload that lawnmower mower photo we found a few minutes ago. The image below shows that you need to click UPLOAD FILES and SELECT FILES.
From there you can navigate to your image and select it as shown below.
Once selected it should show with a check mark. The file details are on the right. The one other thing you can see that I changed is the ALT text. I changes that to the name of my picture for SEO reasons. Google cannot read images so we use the ALT tag to tell Google what our image is. We will have more on this later in the course.
If your lawnmower image is selected you can click CHOOSE FILE in the bottom right.
Click PUBLISH and go take another look at your website. With just that one picture this looks a lot more like a lawn care website.
Let’s go ahead and make a couple more quick changes to finish making this look better.
Go back to your customize options by clicking CUSTOMIZE options at the top left of your homepage.
Now, if you look at the preview pane of your website, look for a pencil icon in each of the text boxes. If you click on these you can change the text. Go ahead and change the text for the top section of your website.
Make the changes to your top section so it looks similar to this. You can change the text to whatever you want here.
Next Scroll down a little bit and change the three circle elements to something related to lawn care. Change the icons as well by clicking BROWSE ICON when you get to the options.
The three icons I chose were Clock, Smile and Paw.
Change your blue icons to look something similar to this.
Now for simplicity purposes let’s get rid of most of the other sections. Click the red trashcan buttons to delete ABOUT, CONTENT , CONTENT , PORTFOLIO, TESTIMONIALS, TEAMS , and LATEST-NEWS. The next image shows which ones to delete.
Once you eliminate those you will have a customize bar that looks something like this:
We now need to change the content on the last three sections. Let’s start with the features.
The three icons I chose were diamond, wrench, dollar and tree. I made mine look like the following. Make yours look similar.
For the Call To Action (CTA) I made mine say:
Go ahead and click the PUBLISH button so all our changes are saved.
The next thing we need to do is configure the CONTACT US plugin.
Go back to the dashboard.
To access this, close out the customize section. Then in the top right hover over the name of your website as shown below and click dashboard.
You should see CONTACT on the left sidebar. Hover over that and click CONTACT FORMS.
In the new section it opens, copy the little line of code (maybe slightly different) that displays in the contact form.
Then go back to the main page of your website and revisit the CUSTOMIZE options by clicking CUSTOMIZE at the top of your homepage. Then scroll to the bottom of your website and click the pencil icon in the contact form as shown below.
Copy your short code into the box above and click apply changes. This will copy the contact form into the template. If you want to play with the contact form you can edit the fields back in the dashboard.
The last thing I want to do is change the contact form text and put a new (reduced size) image to replace the desk image.
To replace the desk image I hover over the gear and click CHANGE BACKGROUND.
Then I upload the image I got from pixabay to replace the desk. The picture I used was this:
https://pixabay.com/en/grass-rush-juicy-green-375586/
I used the smaller 1280 size. I reduced it with TINYPNG and changed to alt tag before uploading.
Select your image and click PUBLISH.
You now have a very basic Lawn Care Website that we can play with. The links don’t do anything and the menu doesn’t make sense right now but we will change those later on.
Please take a look at https://seo-demo.com/
And make sure your website looks similar to that.
