Resources For:

Creating a Quick and Simple WordPress Website in 30 Minutes

Creating a Quick and Simple WordPress Website in 30 Minutes

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:

Default WordPress Screen

 

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:

How To Log Into WordPress

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.

Where do you load a theme in WordPress

Next, Click ADD NEW at the top:

Adding a new theme in wordpress

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”

How to search for a theme in wordpress

At the top of your dashboard you should see a big button to Install Mesmerize Homepage.  Click that button.

installing the mesmerize homepage

Then click Activate Plugin.

Activate The 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

How To Find 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.WordPress Plugins To Delete

Next we want to install Contact Form 7. Go to PLUGINS, Then  ADD NEW.

Adding New Plugins WordPRess

 

Type in CONTACT FORM 7 as the keyword.  Find the plugin and then click INSTALL NOW and then ACTIVATE.

How To Find And Activate The Contact Form 7 Plugin

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.

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:

Mesmerize theme default page in wordpress

 

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:

how to find a free stock photo using pixabay

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.

free stock photo download on pixabay

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”

Losslessly Compressing A Big Image With TinyPng

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.

using the customizer in wordpress to edit theme

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.

Not Using A Pre-designed layout in Mesmerize

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.

making change to the customize options in the mesmerize theme

Then SITE IDENTITY

site identity options in the customize of wordpress

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.

uploading a logo in the customize options of wordpress

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.

Site identity option

Then back one more time:

Click the back button in the customize

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:

Changing the hero image in wordpress

 

 

Then FRONT PAGE HERO

front page hero optin mesmerize

Then Click OPTIONS and then CHANGE FILE

changing the background image of the mesmerize theme in wordpress

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.

selecting an image into the media gallery of wordpress

From there you can navigate to your image and select it as shown below.

selecting an image from computer to load into wordpress

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.

selecting a media gallery image in wordpress to load into page

If your lawnmower image is selected you can click CHOOSE FILE in the bottom right.

choose file button in wordpress

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.

changing the option a wordpress lawnmower website

Make the changes to your top section so it looks similar to this.  You can change the text to whatever you want here.

lawnmower website hompages changes shown in wordpress

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.

changing an icon in the mesmerize theme

The three icons I chose were Clock, Smile and Paw.

Change your blue icons to look something similar to this.

changing icons in the mesmerize theme in wordpress

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.

deleting sections for the mesmerize customers

Once you eliminate those you will have a customize bar that looks something like this:

customize bar in the wordpress mesmerize theme

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.

creating a services section for a lawncare website in wordpress

For the Call To Action (CTA) I made mine say:

creating a call to action in wordpress

Go ahead and click the PUBLISH button so all our changes are saved.

Clicking the publish button in wordpress

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.

How to access the wordpress dashboard from homepage

 

You should see CONTACT on the left sidebar. Hover over that  and click CONTACT FORMS.

how to access the contact forms in wordpress

In the new section it opens, copy the little line of code (maybe slightly different) that displays in the contact form.

copying a contact form short code in wordpress

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.

inserting a contact form short code into a wordpress website module

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.

changing the background in a module in wordpress

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.

selecting the background image for a wordpress lawncare website

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.

 

The Ultimate

DIGITAL MARKETING Email List

SPEND ONE HOUR A WEEK ON YOUR DIGITAL MARKETING WITH THE HELP OF OUR WEEKLY GUIDES EMAILED TO YOU!

SIGN UP NOW

    IS THIS CONTENT

    UP-TO-DATE?

    IF NOT, PLEASE LET US KNOW
    SO WE CAN UPDATE

    POPULAR POSTS