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

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

If you do not then please go back to these posts:

Getting A URL From Namecheap

Setting Up Free University Hosting on Siteground

Installing WordPress on Siteground

Your site should look like this:

Blank WordPress Install Graphic

 

The URL of my website is http://seo-demo.com/

In order to make changes I need to log in.  to do this I 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.  If it doesn’t work then click lost password and enter your username or email.  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.  Then click INSTALL on the mesmerize template.

How to search for a theme in wordpress

 

With that click you can see you now have a new template for your WordPress website.  Go to your URL to have a look if you want.  It is plain at this point so we need to get it fixed up.

The first thing we will do is install the recommended plugins.  The screenshot below shows where to click to install the Contact Form 7 plugin. You might not see Contact Form 7 and that is fine.  Just install what is recommended.

Click “BEGIN INSTALLING PLUGINS.”

installing recommended plugins in wordpress

We want to install both contact Form 7 and Mesmerize Companion so click the buttons for both of the plugins, change the top option to install and then click APPLY.

install and activate plugins in wordpress

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 both of the plugins.  Simply click activate next to each one.  You need to activate both plugins.  The image below shows one but you need two.

activate an installed plugin

Now click RETURN TO DASHBOARD

return to dashboard in wordpress

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

The looks a lot nicer but we need to make it a lawn care website. The first thing we need 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 the lawnmower image through TINYPNG you can see the file size drops from 801kb down to 309.7kb which is 61% smaller.

So every time someone loads your website they have 500kb 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”

shrinking an image on 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.  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.

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 that:

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 are probably going to have to install Contact Form 7. To do so go to PLUGINS -> ADD NEW. Search for “CONTACT FORM 7” as the keyword and click on “INSTALL NOW” on the correct plugin.  The image below shows these steps.

How To Add Contact Form 7 through the plugin page in wordpress dashboard

Then Click ACTIVATE.

Clicking The activate button on an installed plugin

You should now 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 http://seo-demo.com/test3/

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

POPULAR POSTS