Free WordPress Website Design Tutorial For Beginners Step by Step 2018

Free WordPress Website Design Tutorial For Beginners Step by Step 2018

In this WordPress website design tutorial, I have put all the content together for beginners. Follow along step by step and make your own website today.

When it comes to building a website, it is always best to streamline your time. I have put together a checklist at http://WebDesignPDF.com that will help you with the process. Follow along with the PDF as we go through the steps to build your own website.

Free WordPress Website Design Tutorial For Beginners | Step By Step

What everyone needs to know about website design

What Everyone Ought to Know About Website Design

With the evolution of technology over the last few years, we all understand how important it is to have a website. However, the type of site design that you choose is key. You need a website that not only makes a great first impression on online users but also allows for high levels of online visibility.

A responsive WordPress website might just be the solution you have been looking for to all of your website design problems. This is the easiest and most cost-effective way to create a website for your hobby, event, passion or small business that helps you increase relevancy and visibility.

Here are a few things that a responsive WordPress website offers that everyone needs access to in order to increase profits:

  1. Search Engine Optimized Site Design

Having a website offers no benefits if it is not recognized by search engines and seen by online users. A successful WordPress website should be designed with SEO in mind. This means that the overall look of the site will help you to rank higher in the search engines. This will make it so much easier for you to use your website as a marketing tool. SEO principles are infused into the design of WordPress websites so if you follow along with this web design tutorial when creating your site, you are already ahead of the game.

  1. Social Media Integration Made Easy

Not only is having a website key, but you need a site that makes social integration easy. Social media sites including Twitter, Instagram, YouTube, and Facebook are growing in popularity by the day. Promoting your social media accounts for your small business on your website will allow you to help make your business more relevant online. WordPress is specifically designed to make social integration simplified.

  1. Content is King

While WordPress can make SEO and social integration more manageable, you still need to make quality content the priority. The content that you display on your site needs to be seen as valuable to your target market and created with their needs and concerns in mind.

You need quality content to be added to your website regularly that is infused with keywords, but also completely unique. SEO methods and promoting your site on social media can be effective forms of marketing for small business owners, but the quality of the content on your site always needs to be maintained.

Follow along with this free WordPress website design tutorial to make your own website today!

 

 

 

 

start with a good domain

Find The Perfect Name For Your Website

Your website name is very important. But, your domain could be the most important part of your website.

A domain name is like a virtual identification card. It’s a way for people to verify your online presence. Many mistakenly believe having a bad domain name is better than not having one at all, which couldn’t be further from the truth.

Having a bad domain name can backfire and even cause you to lose customers and/or visitors. Having a bad domain name makes you look unprofessional while a good domain name leaves a positive impression and fosters a feeling of trust within your visitors.

A well-chosen domain name will also allow your website to rank higher in search engine results, which in turn allows your site to be seen by even more people.

Since your domain name will be on your social media account, other web properties, promotional print/swag, and more if you choose to take it over the top, you’ll want to choose a name that is reflective of what your website is.

Now that you understand the importance of a domain name, it’s time to make a list of potential domain names for your website. You don’t just have to use your company/product name.

In fact, it might be better not to if your company name is long or difficult to spell. One company had a difficult name to remember so it launched a website for its most popular product and found that customers were able to remember that domain name. This resulted in better customer/visitor conversions and higher search engine rankings since more customers were searching for the product than the company.

If you’re the face of your brand, you might consider using your name as your domain name. For instance, Gary Vaynerchuk and Mark Cuban are two people that are the face of their business. If that’s the case for you, then you’ll want to use your name as the domain name.

I would recommend you put together a list of 5-10 names that you would like to use. Do not get attached to any of these because in a few minutes we are going to eliminate a few of them.

Once you’ve come up with a list of potential domain names, go through and cross out anything that’s too long.  Sometimes the best name is a longer name depending on what you are doing for your website.

Try to stay around or under twenty characters so your domain name is easy to remember. Think about how easy it would be for someone to remember it.

Cross out anything that might have negative connotations. If you’re using several words write them without spaces to be sure that your domain name wouldn’t be potentially offensive. One of the examples that I found with this is a children’s clothing shop that was called Kid’s Exchange.

Kid’s Exchange didn’t look bad when it is punctuated properly but when people look at the name without punctuation it could look like something way worse!

I first saw this looking for examples of bad logo design for a social media business conference I was hosting.  The logo is all together with the same font and the letters are all different colors so it runs together.  This made kidsexchange look more like kid sex change.  From a branding point of view, this could be a very negative tick on your website.

After you’ve gone through your list and crossed some out, rank these domain names in order of your most favorite ones to your least favorite ones. Go online and research which domain names are available without any active trademarks and also has matching availability with social media profiles.

You can use a FREE tool called KnowEm to check total availability.

http://knowem.com

check username and domain with knowem.com

I’ve used this tool since about 2011.  I share this tool with almost anyone I talk to because it is, in my opinion, one of the best free tools available online.

When you first land on the website you will see the search box.

Start by typing in the first name you desire and click on “Check It”.

This will now go check the availability of usernames for 25 of the top social media profiles, the top available domains, and the trademark status.

The best thing about using this tool is that it allows you to make sure that your social media handles will match your domain.

cjhallock.com | twitter.com/cjhallock | @cjhallock

The first section checks 25 of the top social media profiles.  Unfortunately, it doesn’t always get the information correct.  I have never seen it say something was available and find out that it wasn’t.  But, I have seen it say that a specific handle for a social media account was taken when it wasn’t. When you start out, the ideal results will show everything available except LinkedIn (I’ve never seen anything show available on LinkedIn) & SoundCloud normally will show as “Oops, Error!”. (See Screenshot Below)

The next section is a “Quick Search of the Most Popular Domain Extensions”.  Most of the time it doesn’t matter if there are 2 or 3 registered if you can get the .com domain. But, ideally, it would be best if you could find a name that was available on all of the extensions listed within knowem.com

The trademark status check tool within KnowEm.com is one of the most important steps in starting a website.  If you start building a website without doing a trademark search, you risk losing everything. I have spent weeks building out a website/project only to get a cease and desist letter because I forgot to check the trademark & I wasn’t allowed to use the domain I registered or any of the social media profiles I created.

This is a great example of a good username/domain that I would register based on the availability.

how to use knowem to find a good domain

Once you find a name that meets all of your requirements. You will want to finish the search of with checking for any of the other social media sites that you may use that is not on the homepage. You can check these by clicking on the Social Networks tab.

The Social Networks check on KnowEm is broken down into categories. So depending on what social sites/apps you are wanting to check you need to find that category and click on “Check This Category”.

Don’t worry if some of the sites are taken especially if you honestly never plan on using them. You should only be concerned if it is a platform that you will use or at least setup and point to your main social media platforms. (Contact me on Instagram @cjhallock)

Once you have found a name that you really like, that’s available on social media, for your domain (.com) & isn’t trademarked, make sure that no one else is using a similar name for something dishonest, spammy or offensive.

While this might seem like a very boring task, you don’t want your website confused with a similar website that’s not ethical. Even if you aren’t associated with them, it doesn’t mean people won’t automatically think about them when they visit your website.

how to register a domain and sign up for hosting

How to SignUp for Hosting & Get a FREE Domain!

Once you have found the best name for your business/project the next step is to register your domain and sign up for hosting. When you go to www.MyHostLink.com you will see that you land on the business hosting page.

The package that you need to sign up for (for starters only) is “Launch”. Click on “Order Now” & then chose the registration duration (1 or 2 years) It will break down to what it would cost monthly but you are required to pay in advance.

For 1 year it will cost about $85 & 2 years will cost about $150. (Prices are subject to change.)

Once you chose what duration period you want it will take you to the checkout page. There is a good possibility that you will get a pop-up for an upsell. You do not need this at this moment so you can just click on “No Thanks”.

Chose your Data Center – If they have availability for multiple servers at the time you sign up you will see multiple options for your data center. If you see the options, just chose the data center closest to you.

Do not install WordPress here. We are going to do this later so we can customize our advanced settings. So keep this section set to “No, Thanks” Click on “Continue”.

Enter in the domain you want to purchase on the next page and click search to start the process. Once you see the success message “Great news, thedomainyouwanted.com is available!” click on “Add to Cart” & then click on “Continue”

The next section is for “Domain Privacy Registration”. I highly recommend that you keep the privacy registration setting on. For only about $10/year this will keep your information private so that people can’t do a “WHOIS” reverse search to find your phone number, email address, mailing address, etc. Click on “Continue”

Once you have done that you will need to create a new account. Under “New Customer” please enter your email address & click continue.

On the next page fill out your information to create your account and complete the purchase. Now click “Continue”

Once you get to the “Review Your Order” page, please be sure to go over all of the information. Then you need to click “I Agree” on the bottom of the page to agree to the purchase & Terms of Service. Then click on “Checkout”

Now you have completed the process to register your domain name and have signed up for hosting. The next thing you need to do is check your email account for an email from InMotion Hosting to set your password & verify your account. Please follow those emails and complete this step.

how to install wordpress with cPanel

How to Install WordPress With InMotion Hosting

For this step, you are going to need to Login to your “AMP” (Account Management Panel)

In the second panel down you should see the cPanel logo (Just cPanel in orange) all you need to do is click on that to get into your cPanel.

Once in your cPanel, you will need to go down to the “Top Applications” panel and click on the WordPress logo. This will take you to the install WordPress page.

Click on “Install Now” and now you are on the “Software Setup” page.

Choose the right protocol. If you have an SSL, then choose the HTTPS protocol & if not just set it to HTTP:// (Don’t worry you can add an “SSL” to your website later)

Choose your domain. If you are using a larger plan from InMotion Hosting you may have added some “Add-On Domains” in which case you will have multiple domains to choose from. If not then just make sure your domain is selected.

The next section is for your “Directory”, you will need to keep this empty. This will install WordPress on your actual domain instead of yourdomain.com/blog

In the “Site Settings” panel simply fill out your Site Name & Site Description.

Leave the “Enable Multisite (WPMU)” checkbox unchecked

The “Admin Account” panel is going to be used to create a temporary User Account. So fill in a basic username & password. Feel free to use the following example. (I’d recommend you do not change the email address even if you don’t have access to the email listed. We will change all this later)

Username: start

Password: #delete

Uncheck selected plugins (We’re going to cover plugins later)

Now, the next section “Advanced Options” is going to be very important so I need you to pay attention!!

Touch Nothing! 🙂

The next thing you need to do is simply click on “Install” and you have now successfully installed WordPress on your domain.

How Do You Login To Your WordPress Dashboard

Once you have installed WordPress you can log in to your website by going to yourwebsite.com/wp-admin (just replace your domain & add /wp-admin)

This will take you to the login page. Just enter the username and password you just set for this installation.

Now, you should be inside of your Dashboard.

create a new wordpress user

How To Create a New User for Self Hosted WordPress

This is a very important step. The reason we are doing this separately and not earlier when we installed WordPress is because you need to get all the information filled out and not skip anything.

Go down on the left sidebar and go to Users > Add New

Username: This needs to be around 6-10 characters and needs to be original. DO NOT USE “ADMIN”, “WEBMASTER” or anything else like that. Feel free to use your name or nickname.

Email: Put in a valid email address. I recommend a Gmail account for this.

Fill out your First Name & Last Name.

In the “Website” section you need to include the full link so it should look something like this ( http://yourwebsitename.com or https://yourwebsitename.com )

Password: This is a touchy subject. I know how much you may want to create a password that you can remember, but that could cost you in the end. I’d recommend you create a password that is 10-15 characters long that includes lowercase (a,b,c), uppercase (A, B, C), numbers (1,2,3) & special characters (!, @, #).

To be honest, my secret is to find 3 things you have absolutely no interest in. Not that you “Hate” or “Love” but just some regular things you don’t have a care in the world about. Then break it down into one password. On occasion, you may want to add one or two characters at the end or beginning.

For example, I don’t care a lot about golf, magic or tea so some passwords I may use are:

[email protected][email protected]

MaG1cGolFtEA!18

#TeAGolfMaGic44

Check the box to “Send User Notification”

Then set the “Role” to “Administrator”

Then click on “Add New User” & that is it!

Well, you need to do 2 more things. First is in the upper right-hand corner you need to hover over “Howdy, name” and click on “Log Out”.

Now that you are back on the login page you need to log in with your new username & password.

Next thing on the list is to delete the old username. You can do this by going to Users > All Users

Hover over the old user you want to delete and click on “Delete”

On the next page, you need to check “Delete all content.” and then click on “Confirm Deletion”

how to install a wordpress theme

How to Install a WordPress Theme?

What is the best free WordPress Theme?

Installing your WordPress theme is very easy. Once you login you go to install your theme by…

Dashboard > Appearance > Theme > Add New

Once you’re are on the Add New WordPress Theme Page all you need to do is search for your desired theme.

Ocean WP is the WordPress Theme we are going to be using. Once you Search for the theme, simply install & activate. That is it!

This is a FREE WordPress Theme & you can do a lot with the free theme but it does have a premium extensions plugin. You can get the premium OceanWp extensions here.

The Ocean WP extensions plugin will give you more options for designing & running your website.

Now, you need to delete all of the other default WordPress themes.

From the “Themes” page, hover over the other themes and click on “Theme Details” then in the bottom right corner of the theme popup click on “Delete”

You will get a popup asking for you to confirm that you want to delete the theme. Click “OK”

Repeat until OceanWP is the only theme left.

install wordpress plugins

How To Install WordPress Plugins

Before we install any plugins you need to delete the default plugins. Visit Plugins > Installed Plugins & on that page you can select them by checking the box next to the word Plugin to “Select All” then in the drop-down “Bulk Actions” box, select Delete. Then click “Apply”.

In putting this website and free website design tutorial together I wanted to speed up the process as much as possible. Aside from designing the website installing plugins was always one of the tasks that seemed to take way too long. So I asked myself … How do I “Bulk Install” WordPress Plugins?

This first plugin we’re going to install will help us “Bulk Install” all of the needed WordPress plugins.

Start by installing Wp Favs – Plugin Manager by searching for the plugin via Dashboard > Plugins > Add New

Install & Activate

Once the plugin is “Active” go to the settings via Dashboard > Tools > WP Favs

Insert the Quick Key & click on “Quick Load” Quick Key (QK):

j9ZUqzuJrSSuG3WPsZlyaMYlTQ3Xa7

Once you have clicked on Quick Load you will want to click on “Run this List”

This will take you to our magic list of WordPress Plugins. These are the recommended plugins for this tutorial.

Click on the drop down over the plugins and select “Bulk Options” and then “Install”

Check the first box to Select All

Then Click Apply to install all plugins.

If you have any questions about the plugins this step will install you can view the WordPress Plugin Page on our website.

Click on “Return to WPFavs Installer” and keep moving forward.

Activating & Setting Up WordPress Plugins

What WordPress Plugins Should I Use?

Use your judgment in using the recommended plugins. Only you know what you are doing and what you need. The plugins you are going to Activate will depend on what you will need for your website.

To “Activate” your plugins you need to check the box next to the plugins you wish to use and once all your plugins are checked in the drop-down menu (Bulk Actions) select “Activate” and “Apply”

This will “Activate” all of your desired plugins.

The plugins we recommend for EVERY installation of WordPress are:

Admin Block Country – This blocks admin access from all countries but your own. Access these settings by clicking on Block Country on the right sidebar. Scroll down to the second section where it lists all of the countries and click on “Select All” then click on “Block”

Akismet Anti-Spam – This blocks most spam comments on your blog. In order to set this up (if you are not going to have comments on you will not need this plugin), you are going to need to have a WordPress.com account. The warning to set up the Akismet plugin will walk you through what you need.

Blackhole for Bad Bots – This puts all bots in a “Black Hole” so they don’t use your server’s resources. Once active, the plugin does all the hard work. No settings needed here.

Elementor Page Builder – This is the WYSIWYG (What You See Is What You Get) page builder we are going to use to build your website.

Far Future Expiry Header – This assists in your page load speed. Go to Settings > FarFutureExpiry & check to Enable Far Future Expiration. Set the Number of Days to 7 and click all file types. Click to Enable Gzip Compression & click on “Save”

Formidable Forms – This is, in my opinion, the best form builder for WordPress. You do not need to do anything to set this up. If you plan on building forms you can customize them then.

Insert Headers and Footers – This is for putting a code in your headers or footers. If you are using Google Analytics or something else that needs “code” in the <head> or above the </body> section this is where you will put that. Get to it via Settings > Insert Headers and Footers.

Ocean Extra – Gives extra options for the Ocean WP theme. There is nothing to do for this. 

Remove Query Strings From Static Resources – This helps your load speed. No settings for this plugin.

Shortlinks by Pretty Links – This is like bit.ly for your website. For example, if I want to create a short link to my new YouTube channel, instead of it being

https://www.youtube.com/channel/UCfXl7ycftvA3RLUzqrVDrtg?)

I can use Pretty Links and make it look like this

(https://freewebdesigntutorial.com/yt)

WP Super Cache – This helps with browser caching (page load speed) Go to Settings > WP Super Cache

You are going to click on the “Advanced” tab & be sure that the following boxes are checked:

_

Enable Caching

_

Simple (Recommended)

_

Don’t cache pages for known users. (Recommended)

Compress pages so they’re served more quickly to visitors. (Recommended)

Cache rebuild. Serve a super cache file to anonymous users while a new file is being generated. (Recommended)

304 Not Modified browser caching. Indicate when a page has not been modified since it was last requested. (Recommended)

_

Clear all cache files when a post or page is published or updated.

Extra homepage checks. (Very occasionally stops homepage caching) (Recommended)

At the bottom of this section, click “Update Status” and you are done!

Yoast SEO – This is the best SEO plugin on the market. The settings for the plugin itself is decent for now without having to customize. The power of this plugin will come when using it while creating posts & pages within WordPress.

pages every website should have

What Pages Do I Need For My Website?

I’ve been building websites for almost two decades and I’ve found that regardless of what your website is for there are a few “NEEDED” pages that every website should have.  I’ve put together an import file for WordPress so it will install the templates and create the pages you need.

Use the .xml file from the toolbox to import your needed pages.

Using the XML file to import your needed pages will install the following pages.

Download WordPress XML File Here

Home

About

Blog

Contact

Privacy Policy

Terms of Use

Earnings Disclaimer

Go to Dashboard > Tools > WordPress > Install > Run Importer

Choose the .xml file from the toolbox and upload the file. You will attribute all content to yourself & continue.

There is content on the Privacy Policy, Terms of Use, & Earnings Disclaimer, but it is just templates.

These templates have placeholders for your domain in bold. Please replace these URLs with your website URL.

You can do so by going to Pages > All Pages then under the page you are going to edit click on “Edit”

Then you are going to go through each of the pages and make the necessary changes.

Earnings Disclaimer – If you need to use this page you will edit one spot on this page. At the very bottom of this page (In the text field) you will see www.yourwebsitename.

You need to replace this with your website URL. You can turn the bold off. It is only there to make it easier for you to see. Then click on the blue “Update” button on the top of the right sidebar.

Privacy Policy – There are 5 locations you need to change your domain. There are 4 in the first few lines and the 5th is about halfway down the page

Terms of Use Agreement – at the very bottom of this page there is a fake email and you need to change that to your email address.

Please seek legal counsel to be sure of what you need & for proper verbiage. If you wish to use the legal page templates you are accepting all legal liability.

The next page to take a mental note on is the “Blog” page. You will not touch this page as it is going to be the page that displays all of your blog posts.

The rest of the pages we will be designing in a little bit. But here are some things to be thinking about until then.

Each of your pages should be responsive (This will be covered in the FreeWebDesignTutorial.com video training if you aren’t sure how to do that)

Some Things To Think About When Planning Your Website.

Home Page – When you start thinking about the design for your home page you need to think about what your visitors will want. Don’t add something to your homepage just because it’s cool. Everything on your homepage should have a purpose. In designing your home page it should be full width without a sidebar.

The biggest purpose you can have is to make it clear what you offer. If they don’t know they are likely to leave.

When you are designing your homepage you need to make sure that the layout is not only clean and not too busy, but it also needs to be easy to navigate. So remember that whitespace is not your enemy & don’t add any more steps that are needed.

Another big factor to the home page (and others) is the images. While it is nice to have “high resolution” images (which I beg that you do), you also want to make sure that it is optimized for the web so that it doesn’t slow your website down.

Don’t forget your Call To Actions. The reason you are building your website is business. So be sure to include some good CTA’s. Don’t forget to include a Call-to-Action at the top of your website so it is above the fold (visible without having to scroll).

Please do not use the “Slider” or “Carousel” feature on your website. Yes, it does look awesome but it creates a poor user experience.

About Page – This is a lot different than the “Bio” inside of your business plan. Successful websites, most of the time, get very creative with their about page.

Some people include pictures of staff with fun facts about each staff member. John spends his evenings watching his favorite movie “Peaceful Warrior” while meditating. Now, you don’t have to go that far, but try to stand out a bit.

Contact Page – If a person would want to contact you, you should list every possible way you can be contacted. One of the biggest concerns I’ve heard from businesses about listing and/or using social media is they don’t want people posting negative stuff on their page or profile.

I want to let you in on a secret, if you are not there when they want to say something negative to fix the problem then you have bigger problems. It’s best to have the platform so they will use your account to complain instead of just to a feed of 500+ people.

NOTE: Please use social media to listen to your followers 🙂

how to customize wordpress settings

Customize Your WordPress Settings

This is where you will begin getting your content into play to get started designing your website. Before we complete this section you will need to have a color palette in mind as well as your logo and site icon.

I wanted to try and keep this checklist short but this section can’t be any shorter so this is what you need to do.

**Don’t Forget To Optimize All Media You Upload To Your Library** The first thing your going to do is hover over “Appearance” and click on “Customize”.

Customize Settings

Site Identity – This is one of the most important parts of this process. This is where you will be giving your website a name, tagline, and uploading your website icon.

Set your “Site Title” as the name of your business, type in your “Tagline” and upload your “Site Icon”. (Website Icon should be 512px x 512px)

Don’t forget the Alt Text and the Description when you upload the Site Icon.

Click “Save and Publish” and once it is saved go back to the main customize tab by clicking the left facing arrow underneath the save button.

Menus – In this section, we are going to create 2 menus

In this section click on Create New Menu

Create Main Menu – Create a name for this menu “Main Menu” will work. Then underneath that section check the “MAIN” box & click next.

Add the following pages by clicking on “+Add Items”

Home (Custom Link)

About

Contact

Blog

Click/Hold & Drag to reorder if desired.

Publish & Continue

Go back to the “Menus” tab and create another menu

Create Footer Menu – This is going to display the “Legal” pages.

Follow the same steps as before but name this menu “Footer” and check the “Footer” box & click “Next”

Add the following pages by clicking on “+Add Items”

Terms of Use Agreement

Privacy Policy

Earnings Disclaimer (If Needed)

Click/Hold & Drag to reorder if desired.

Publish & Continue

Widgets – This section we are not going to be covering until we start blogging so you can skip it.

Homepage Settings – This is where we tell WordPress what our home page is going to be and what page our Blog is going to be.

Click on the circle for “A static page”

In the “Homepage” drop-down, select “Home”.

In the Posts Page drop-down, select “Blog”.

Now is a GREAT time to “Publish” and save your work.

General Options

Note: there are multiple options here so hang in there.

General Styling This is where you are going to put in your colors. There will be three colors to change:

“Primary Color” which is just what it says.

The “Hover color” should be a darker shade of your primary. Then the next thing you will change is the Links-Color.

At the bottom of the sidebar, you will also change “Color: Hover”

This is going to be universal on the site so be sure what colors you use can be read with the chosen backgrounds you plan on using. Getting the color hex #’s in a notepad on your desktop will be good so that you can just copy and paste into the different fields.

General Settings

This is already almost set the only thing you need to do is scroll down to the “Pages” section and select the solid “full width” layout.

Page Title

You will be changing the Text Color, Link Color, and Link Color: Hover. Save/Publish/Continue

Scroll To Top

This is your “Scroll To Top” button that displays in the bottom right corner of your website when your visitors scroll down the page. It works as a shortcut to get to the top of the page. If you wish to customize it, you can do that here.

Pagination

This section is already set and good to go! No need to change anything here!

Forms (Input – Textarea)

This section is already set and good to go! No need to change anything here!

Theme Buttons

You will need to change the Background Color and Background Color: Hover in this section.

404 Error Page

This is also done for you so nothing to do here!

Click on “Publish” to save all of your changes.

Now you need to back out to the main Customizer menu.

Typography tab is used to change the global font settings for your site if you feel the need. You can use google fonts here so if you know the name of a font you like or maybe one that was used for your logo you can set the same font to the entire site here.

Top Bar is a feature to add a small bar at the very top of your website. You can use this in many different ways. If you don’t want to use it, you don’t have to.

General

This is where you decide if you are going to enable the top bar or not. The option is there for making the top bar full width but I personally would recommend against it. I think it stretches the site too much.

I also recommend that you “Hide On Tablet & Mobile” in the visibility section.

The style is up to you. I’ve seen it be successful in every style so just pick the one you like best.

Change the “Link Color: Hover” and continue.

Content –This is where you will write out the content that you want to display on the top bar. Try to keep it short. Possibly your “Tagline” or your address/phone# … Just don’t make it more than one sentence.

Social – This is where you put your social media links to display as icons in your header’s top bar. You can change the colors of the icons if you want. Then just go down the sidebar and paste in the links to your social media profiles & pages.

Header

General – This section is set but you can change the website header style if you wish.

There are 8 different options for the Header Style:

Minimal – This is the default style. It includes the top bar, your logo on the left & menu on the right.

Transparent – This style doesn’t differ from Minimal except it has a “Transparent” background.

Top Menu – This is a bigger header with the menu as a second bar under the top bar with the main section having your logo centered & your tagline underneath it.

Full Screen – This style is made with the “Tablet” & “Phone” user in mind as it keeps the menu in a mobile stack button.

Center – This keeps a minimal look with the Top Bar then the main section has a menu on the left, Logo/Name in the center & search bar on the right.

Medium – Not quite as big as the “Top Menu” style but still a bigger header with a similar layout as Center but just a bit “Taller”.

Vertical – I personally do not like this theme. It is set with the mobile stack button on the right and all your header information is in a pop out menu. If you are based 100% on your “content” this would be ok otherwise I would recommend you not do this.

The last option is a custom header. I am not going to cover this in this checklist or the FreeWebDesignTutorial.com training. But I will be doing a blog/video walk-through on this in the coming weeks so be sure to check the site for that.

Once you select a header, just click “Publish” & continue.

Header Media is a section that we are not going to touch.

Logo – You guessed it! This is where we upload our logo files

Please keep in mind that you need to upload the logo to be sized at 320px wide for the regular logo and 640px wide for the retina logo. The height can change but I recommend you stay at the same width.

Click “Publish” & Continue

Menu – The only thing you will be changing here is the colors to fit your color palette.

Social Menu – In this section, you will be changing the colors and putting in the URLs for the social icons you want to display in your header. If you decided to use the top bar and enable the social menu there you will not want to enable this. If you did not, you may want to enable this.

Mobile Menu – This is already set up with the exception of the Links-Color: Hover … so change that to your primary color and continue.

Blog – Nothing to do here 🙂

Sidebar – In this tab, all you are going to be doing is changing the Titles Border Color to your Primary Color.

Footer Widgets – If you do not want to use the footer widgets you can turn them off here. If you plan on using them you can just change the Links-Color:

Hover to your Primary Color. We will be working on the content that goes into these in a little bit.

Footer Bottom – This is where the copyright information is listed on your website.

This is automatically populated with the Copyright & Year. It also gives credit back to the theme developer. You can remove this and add your name or any other content you would like to display in this section. Feel free to give us a shout out by adding ( Free Website Design Training Provided By FreeWebDesignTutorial.com )

You also need to change the Links-Color: Hover to your Primary Color and continue.

The last section is for Custom CSS/JS … Unless you know what you are doing please don’t touch this section.

design your website with elementor

Design Your Own Website

Using Elementor you can design your website now. If you want extra design features you can use Elementor Pro. I have been using Elementor Pro for my personal sites & my client sites for a while now and I strongly suggest you do the same if you want some killer websites.

Check it out >>>Elementor Pro.

Before you start editing with Elementor, you need to change 2 settings on every page. These settings are in the OceanWP Settings when you have the pages loaded in the “Basic Editor”.

MAIN

Content Layout needs to be set to 100% Full Width

Title

Display Page Title needs to be set to “Disable”

Click on “Update” to save your changes.

Once you do that you are free to click on “Edit with Elementor”

There are two different ways you can design your website with the Free Elementor plugin.

The first way is to basically design every page from scratch by adding “Elements”.

The second way you can design your website is by using “Templates”. There are a lot of different pre-design website templates you can use. The templates with “PRO” in the upper right-hand corner are only for people who have Elementor Pro.

If you use the WordPress Elementor “Templates” then all you need to do is replace the “placeholder” content to make it your own!

Unfortunately using Elementor is not something I can cover in detail in writing, it would be best for you to finish up the training by watching the video on the homepage.

Launch your website image

Launch Your Website

Now that you have finished building your website, all you need to do is tell people!

Don’t forget to share your website on your social media profiles and be sure to tweet @ me with the link so I can see your website. @cjhallock

Moving forward, be sure to check back with www.FreeWebDesignTutorial.com for more tutorials & updates.

Be sure to check the version number above the video on the homepage so you know to check up on the changelog as the tutorial updates.

Feel free to share this free website design tutorial with a friend.

***Disclaimer: Links inside of this blog post may or may not result in compensation if you take action based on my recommendation***

 

If you are going to use “Stock Photos” then please be sure you look at the usage rights. I wrote a blog post to explain what you need to know about Stock Photos.

Check it out here.

 

 

 

Leave a Comment

Do NOT follow this link or you will be banned from the site!