How to Add Google Analytics to WordPress
Easily Set-Up Google Analytics With Just A Few Clicks

how to add Google Analytics to WordPress

Dale McManus

Co-Founder & Web Developer

Jun. 28, 2019


Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites around the world. In this simple, step-by-step guide, we’ll cover everything you need to know about how to add Google Analytics to your WordPress website. Let's dive in!

  • Level of Expertise
  • Time To Complete
    20 Minutes
  • What You Get
    Google Analytics, Installed

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

We’re flipping the script with a special blend of a couple videos mixed in below, so let’s jump straight to the post. Right. Now.

So you’ve heard a bit about Google Analytics and think you want to add it to WordPress?

Smart. It’s an essential tool in the pro website toolkit.

But what exactly is it?

And is there an easy way to install Google Analytics in WordPress (meaning without having to tear your hair out messing with code).

There sure is friends.

All will be explained below.

how to add Google Analytics to WordPress

What is Google Analytics?

So WTF is Google Analytics?

Put simply, it’s an awesome tool that allows you (and over 50 million other websites around the world) to track and analyze your website traffic aka visitors.

It works by adding a piece of JavaScript code to your page (don’t worry – you won’t have to mess with this when you follow our tutorial below!).

That Google Analytics tracking code then monitors the visitors that come to your site to show you things like how long they spend on each page, where they come from, and what things they do while they’re visiting you.

It then does some programming magic to present this truckload of data in the form of stats and reports so you can better understand your visitors and how they use your WordPress site.

Why You Should Use Google Analytics with WordPress Sites 

GAnalytics. Definitely a must-have tool in the pro website game.

Not having it is like driving a cruise ship with a blindfold on – unless you’re the saltiest of sailors with a birdlike sense of magnetic north (for real, we watch way too many nature documentaries), you’ll just have no idea where you’re going.

And that means you’ll go in circles at best (read: create a bunch of content, do a bunch of marketing and earn no $$).

At worst, you’ll run aground on some uncharted island (not so bad except death).

By adding Google Analytics to WordPress, you’ll be able to learn a whole bunch about your website including:

Who Visits

Where do your visitors come from? What browsers and devices do they use? What times do they visit most?

We don’t know.

And neither do you until you install Google Analytics in WordPress!

How They Find You

When you add Google Analytics to WordPress, you’ll also be able to see where your visitors come from – search engines, typing your website directly into the address bar, links from other sites, and social media.

GA also lets you know what percentage of your visitors come from each source, as well as particular breakdowns for each category e.g. for “search engines” you can see how much traffic comes from Google, Yahoo, Bing, etc.

What They Do

Last but not least, setting up Google Analytics on WordPress will let you track which pages visitors land on first, where they go from there, and how long they stay on your pages.

And if you get fancy with the setup, you can even see what links people click on and create goals that let you track wins like lead magnet downloads and cart checkouts.

With all this juicy data, you’ll be able to effectively optimize your site to get more traffic and sales.


  • Optimize your site for certain devices.
  • Invest in getting traffic from sources that work well for you.
  • Create content that better fits what your visitors are looking for to keep them on your site longer and build a stronger relationship with them.

Basically, installing Google Analytics on your WordPress site cuts out a lot of the guesswork so you can make decisions about where to go next based on what people actually do on your site.

Not gut instinct. We like that kind of moxie but it’s not pro website best practice.

Google Analytics Basics

Before we get into the details of how to add the Google Analytics tracking code to WordPress, let’s have a quick look at the main Google Analytics interface so you can start getting up to speed.

Google analytics wordpress dashboard

On the right, you’ll find a bunch of cool/important stats for your website like how many users (visitors) have come to your site recently, as well as how they’re getting to your site, when they visit, where they’re from, etc.

As you build your Google Analytics ninja skills, though, you’ll spend most of your time in the more specific “Reports,” which you’ll find from the sidebar on the left.

There are a ton of different sections here, but these are general types of reports you’ll find:

  • Real-Time: These reports show you what’s happening on your site in… real-time. Normally it takes 24 hours to see data in other reports, here you can see how many people are on your site, what they’re looking at, etc right now!
  • Audience: Here you’ll learn more about how many people have visited your site over the past x amount of time (you can adjust this), how long they staid on your site, plus demographic data.
  • Acquisition: These will show you where your traffic is coming from. Super valuable!
  • Behavior: Reports in this tab show you things like what pages visitors land on first, what pages they visit the most, how long they stay on each page and more.
  • Conversion: If/when you set up “Goals” in Google Analytics (a topic for another time), you’ll be able to see how well you do at getting visitors to complete those goals (eg email signups or product purchases).

Alright, time to deliver on what we promised in the headline…

Adding Google Analytics to WordPress

Step 1: Set Up a Google Analytics Account

Alright, first step in setting up Google Analytics on WordPress is to set up a Google Analytics account.

Totally free and super simple (especially if you already have a Google account).

Just head over to and click start for free.

Sign in to your Google account if you’re not already logged in, otherwise, just click “sign up.”

google analytics wordpress account signup

From here, Google’s going to ask you what you want to track (select “website”), then you’ll type in an account name (your business name works well, in case you want to build more websites later), then your website name (your domain name works here).

Select an industry and make sure your time zone is correct.

google analytics wordpress settings

Leave all the other boxes below that checked, then click “Get Tracking ID,” and accept the terms.

That’ll take you to your new Google Analytics dashboard and this step’s done!

Step 2: Install the Google Analytics WordPress Plugin

Next, time to install Google Analytics on WordPress, no code required!

Because we’re using a plugin baby. B)

Jump over to your WordPress dashboard, then “Plugins” and “Add New” in the sidebar.

google analytics wordpress plugin add new

From here, head over to the search box, type in “Google Analytics,” find the “Google Analytics Dashboard for WP” plugin, smash that “Install Now” button then “Activate” once that’s done.

wordpress google analytics plugin install

Sweet, now we’ve got to link your account to the Google Analytics WordPress plugin we just installed.

Easy enough, just go over to the sidebar menu on the left and scroll down until you see “Google Analytics,” then click on “General Settings.”

google analytics wordpress plugin settings

On the next page, click “Authorize Plugin.”

authorize google analytics wordpress plugin

Then on the page after that, click the “Get Access Code” link.

wordpress google analytics plugin get access code

This will open a new tab/window (depending on your chrome settings lol), from here just sign in to the Google account you signed up for Analytics with, then click “Allow.”

You’ll then get a code to copy:

google analytics code copy

Copy that bad boy, paste it into the aptly named “Access Code” field back in the Google Analytics WordPress plugin page, then click “Save Access Code.”

save wordpress google analytics tracking code

Assuming plugin authorization succeeded (if not you probably copied the code wrong; no biggie, we screw that up sometimes too), just scroll all the way down the plugin page and click “Save Changes”…

wordpress google analytics plugin save changes

And we’re set on Step 3!

Step 4: View Your Google Analytics Data;

Setup’s done, time to start checking out that sweet sweet website data!

We covered the basics of what you’ll find inside Google Analytics’ dashboard above (“Google Analytics Basics” in case you forgot or skipped it).

But one of the cool things about the Google Analytics WordPress plugin we installed is that it gives you a lot of this information right inside WordPress!

To check that out, head over to your main WordPress dashboard (click “Dashboard” in the sidebar if you’re not already there), scroll down and you’ll see a mini Google Analytics dashboard widget

google analytics wordpress plugin dashboard

This will start at zero because we just installed Google Analytics/the WordPress plugin, but over the next few weeks Analytics will record data and start displaying that here.

Here you’ll also find a couple of dropdown boxes to change what data is displayed in the little line graph.

In the one on the right, options include:

  • Sessions (how many times people visited your site; sometimes one person will have more than one “session”)
  • Users (how many people visited your site)
  • Organic (how much traffic you got from search engines)
  • Page Views (how many pages users visited)
  • Bounce Rate (percentage of page views where users left without clicking to another page on your site)
  • Location (where users are coming from)
  • Pages (shows you which pages were visited the most)
  • Referrers (tells you what websites your traffic is coming from besides Google)
  • Searches (shows you what keywords searched when they found/clicked to your site)
  • Traffic (stats on what “channels” [search, direct, social media, other sites] users come from and whether they’re new or returning)
  • Technology (tells you what browsers, operating systems, and types of mobile device people use when visiting your site)
  • 404 Errors (lets you know if any of your pages have a “404 Not Found” error)
google analytics wordpress plugin reports

Using the dropdown on the left, you can set how far back you want this data to go, from Real Time (now!) up to Three Years (one day!).

wordpress google analytics plugin times

Google Analytics + WordPress = Done

Alright yall, that’s a bit on what Google Analytics is and how to add it to WordPress.

If you found our little tutorial here helpful be sure to check out our other written guides for more super helpful pro website tips and tricks.

See you over there!

How to Create a WordPress Contact Form for FREE
A Simple, Step-By-Step Guide To Creating A Contact Form For FREE

create-wordpress contact form free

Dale McManus

Co-Founder & Web Developer

Jun. 20, 2019


Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites through our interactive video tutorials and written guides. In this simple, step-by-step guide, we’ll get you up to speed quickly on how to create a WordPress contact form. For FREE!

  • Level of Expertise
  • Time To Complete
    30 Minutes
  • What You Get
    Full Website & Domain

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

Do you want to create a beautiful image slider for your WordPress website or blog? This tutorial shows you exactly what you need to do to create a stunning WordPress slider without any coding.

As always, here’s the video guide:

If you like the video and want more tutorials on creating a professional website you can also subscribe to our YouTube channel!

Now to the post…

What. Is. Going. On. Yall!

Today we’re gonna show you how to make a WordPress contact form the super easy way.

And for free!!

No matter what kind of site you have – whether it’s an online store, blog, or something else – always important to have a way for customers, clients, even potential partners to get in touch.

Don’t let those golden opportunities slip through the cracks because people don’t know how to reach out!

We’ve got four simple steps to walk through so you can learn how to add a contact form to your WordPress site and keep the growth train rolling.

When we’re done, visitors to your site will be able to fill out their name, email, and message, then you’ll get an email notification so you can follow up!

Alright, let’s get into it.

create wordpress contact form free

Why Do You Need a WordPress Contact Form?

Do you really need a contact form on your WordPress site?

Can’t you just add your email address and let people email you that way?

You could. Please don’t.

There was a time (like ’90s to mid-’00s) that most people did this.

And unfortunately, some still do.

Maybe you’re leaning that way because you think you’ll have to learn how to code to add a contact form to your site.

Good news: you definitely don’t friends!

And there are a few good reasons for using a contact form instead of just pasting your email on your contact page:


For us, this is more than enough reason to use a contact form.

If your site gets big enough, sure, create a “hello@[yourdomainname].com” and just know spam will be part of the daily email diet for whoever has to check that inbox.

In the meantime, don’t beg spammers to bombard your personal email by posting it on your website where it’s easily scraped by bots.


If you make visitors send you an email, you’ll get all sorts of different information from them as they try to figure out what you need to know to follow up with them.

Plus, they’ll all have different subject lines – which means you’re more likely to get confused about how/why that person is emailing you, and they’re more likely to forget they sent you that email and what it was about when they see your reply.

Set up your WordPress contact forms right, and you’ll be able to set a specific subject line so everyone knows what’s up, and you’ll be able to automatically collect certain information you need by adding fields for people to fill out before hitting send.

On top of that: when you use a solid WordPress contact form plugin, you can set up automatic confirmations via email or page redirects to let people know that they successfully sent their message and what happens next.

User Experience

Plain and simple: these days everyone knows what a contact form is and how to fill one out. So if they see yours, it’s that much easier for them to get in touch.

For starters, it’s less digging through your site to hopefully find your email, then copying it, opening a new tab to get to Gmail, then pasting in your email address.

Only to then have to think about what they want to say to you (see above).

Plus, for so many reasons, we sometimes avoid opening our emails (grandma sends us too many “forward this email or you’ll die” chains) – other people do that too!

Don’t make them have to face death or a thousand unopened emails to talk to you.

On top of that, contact forms just look awesome. So much more pro, and that’s what we’re going for here.

The Best WordPress Contact Form Plugin

Like we said above, you DON’T have to learn to code to add a contact form to your WordPress site.

We’ve got plugins friends!

Knowing there’s such a huge demand for these, quite a few WordPress developers have cranked away to create free and paid WordPress contact form plugins for you to choose from.

We’re fans of one simply called “Contact Form” by WPForms.

Besides the “of course this is what I need” name, there are a couple of reasons for that:

  • It’s dead simple, super beginner friendly; just drag/drop fields in their builder to create your form, paste a shortcode (more on that later) onto your page, done.
  • They’ve got a free version (WPForms Lite), always handy when you’re getting started. Bonus: they have a sweet paid version, so once you get more advanced with your web work you can get additional features you’ll need without having to switch up your plugin/redo everything (that sucks a lot).

Alright, contact form prep work out of the way, let’s dive into this tutorial!

How to Add a Contact Form in WordPress: 4 Simple Steps

Step 1: Install the WPForms WordPress Contact Form Plugin

First, we’ve gotta install that plugin!

From your WordPress dashboard, just head over to the “Plugins” tab, click the “add new” button, then search for “WPForms” and you’ll see it pop up.

create wordpress contact form free

Smash that “Install Now” button, then activate and we’ve reached the proverbial “good to go.”

create wordpress contact form free

Step 2: Create a Simple Contact Form

Next up, let’s create our new WordPress contact form.

Once you’ve gotten WPForms installed, it’ll send you to a screen to create your first form (if you somehow miss this, just click the “WPForms” tab in your WordPress Dashboard sidebar).

create wordpress contact form free

Scroll down and you’ll find the “create your first form” button. Handy, because that’s exactly what we’re trying to do!

Click that sucker and you’ll be taken to a page to get started.

wpforms simple contact form

Start by inputting a name for your form, then (for the purposes of this tutorial), select “Blank Contact Form.” WPForms has your back with a few templates like “Simple Contact Form,” “Newsletter Signup Form,” and “Suggestion Form.”

We’re going with “Blank” to show you all the basics, once you get this one done feel free to play with the templates.

wpforms contact form fields

From here, just need to click on one of the boxes in the “Add Fields” tab to start adding things to your form.

Name, email, and message (which in WPForms is called “Paragraph Text”) are the basics, so that’s what we added!

wpforms contact form fields

Since our paragraph text in this case is for their “Message,” just click on it and that’ll pull up the “Field Options” tab.

wpforms contact form fields

You’ll see “Label” there – change that bad boy to “Message.” Boom!]

Next, we’re going over to the settings tab all the way over to the left of your screen.

Here, under “General,” you can change a bunch of settings like the text of your submit button.

wpforms wordpress contact form general settings

For now, we’re just going to head to “Notifications” and change the email address that WPForms will send a notification to when someone submits our form.

Simple enough to do: just input your best email address into the “Send To Email Address.”

wpforms wordpress contact form notification settings

Then, head over to “Confirmation” and change the confirmation message if you want something a bit more custom, a bit more snazzy than the default text.

You can also direct them to a different page/URL on your site, for example if you have a fun little “thanks for reaching out, we’ll get back to you ASAP” video to share, you could post that on another page and send people who submit your for to it for bonus “I like you” points.

wpforms wordpress contact form notification settings

Done with confirmations?

Sweet, click “Save” and once the little spinning gear icon turns back into a checkmark, click the “x” right next to it to exit out of the form editor.

wpforms wordpress contact form notification settings

Step 3: Add the Form to Your WordPress Contact Us Page

Step three, we’ve got to add this WordPress contact form to one of your pages!

First up, create a contact page by mousing over to the “Pages” tab of the WordPress dashboard and clicking “Add New.”

wordpress contact page new

Keeping it simple for the tutorial, we’re naming this page “Contact” (feel free to get fancy with “Contact Us” if you’re feeling it).

Once you’ve added the name/title (that’s what WordPress calls page names), add your contact form by going up to the plus button at the top left of the page, scroll down to “Widgets,” click to open this part up and you’ll see “WPForms.”

wordpress contact form widget

Click on that and a dropdown box will pop up on the page that lets you choose a contact form, select the form we just made.

simple contact form wordpress

While we’re here, let’s add a bit of heading text to make it abundantly clear to visitors that this is our contact form (not that they’re dumb and don’t realize that, it’s just that we want to make it as clear and easy as possible for them to reach out!).

Click that plus sign again and add a “Heading” block, type out “Contact Me” or whatever you want to call this thing, then slide that heading up above the form.

Then click the blue “Publish” button in the top right corner twice (WordPress really wants to make sure you mean it when you publish a new page) and it’s live!

One more click, this time the “View Page” link that appears to check it out.

wordpress contact us page

Awesome, this is it. But it could look so much better…

Bonus Step: Make Your WordPress Contact Page Look Sweet with Elementor!

Elementor. Our favorite free WordPress page builder plugin.

Install it the same way you installed WPForms (go to plugins -> add new -> search “Elementor” -> Install Now -> Activate).

Then go to your Contact page and at the top, you’ll see a blue “Edit with Elementor” button.

For our tutorial, we’re going to add the form to Dale’s site’s homepage (since it’s already set up with Elementor).

elementor wordpress homepage

In this case, we’re adding it underneath the “Contact Me” banner (how handy he already had that setup and waiting for us!).

From here, click on the little plus sign under that banner to add a section.

elementor wordpress homepage

Then go over to “Search Widget” in the sidebar, type in WPForms, then drag/drop it into the new section we just created.

Select the form from the dropdown that appears in the sidebar, select our favorite (and only) form and you’ll see it show up on your page!

elementor wordpress homepage

Play around with the design from here by clicking the six dots that show up next to the plus sign we clicked earlier to edit the look of your form to your heart’s complete content.

elementor wordpress contact form design settings

Step 4: Send a Test Email from your WordPress Contact Form

Alright, last step here – let’s test our WordPress contact us form baby out!

Just head over to your contact page (“contact us” if you got fancy) then fill out your form: name, email, quick message (“This is a test” always seems to work for this type of thing).

wordpress contact form test message

Smash that submit button then open up the inbox for the email you set your form to send notifications to in step 2.

When we tried this, our test email wasn’t in our inbox.

It went to spam. Thanks Gmail! [facepalm]

wordpress contact form message sent to spam

We can fix this!

Head over to your email folders on the left side of Gmail, scroll down and click “More,” scroll down again and click the spam folder.

Find your test message in there (we cleared our spam folder for the sake of this tutorial so it was easy, search for the Subject line you set for your form email notifications in step 2 to find it if it’s buried because that’s the more likely scenario).

Once you find and open up the email, you’ll see a nice big “Report Not Spam” button at the top, click that and this test message plus any others your form sends you will end up in your Inbox!

remove wordpress contact us form message from spam

WordPress contact forms and GDPR

On May 25th 2018, the European Union’s new General Data Protection Regulation (GDPR) came into effect and with it, a lot of changes to the laws that concern the use of personal information online for people in the EU.

Why does this matter? Are we about to go all Matlock on you here (kudos if you get that reference without having to Google “Matlock”)?

No we’re not, it somewhat matters.

Because contact forms collect personal data, and if you fall under the jurisdiction of GDPR regulations (definitely if you live/host your website in the EU, probably if some of your visitors live there).

Definitely want to be clear we’re not lawyers and this isn’t legal advice!!

It’s just a few thoughts and tips you might want to consider when creating contact forms for WordPress.

So if you get in trouble don’t sue us please and thank you.

And realistically, if you take a couple of simple steps and don’t end up creating a giant website like Amazon, you’ll probably be fine.

WordPress contact forms GDPR Tips

  • Disable Tracking: If you use a contact form that tracks things like cookies or user IP addresses, you’ll need to disable this.
  • Don’t collect data you don’t need: All of the best WordPress forms plugins give you a choice of what fields to include. If you don’t need a piece of information, don’t collect it, saves many potential headaches – legal and otherwise.
  • Have a privacy policy: Every pro website needs one of these anyway, but GDPR is another reason to make one if you don’t have one that explains what data you collect and why.
  • Implement HTTPS: You should do this anyway for SEO purposes and if you follow our guides for setting up websites with WordPress it’ll just be one easy step included in the process 😉
  • Get absolute consent: Add a checkbox to your form for people to consent to you collecting their data (WordPress form plugins are starting to add this feature just for GDPR). Make sure there’s a message that says what you collect and why, and don’t have the box checked by default (users have to check it themselves).

Other best WordPress form plugins

WPForms is great, but there are a few other WordPress contact form plugins that are great too.

Here’s a bit more on the best WordPress forms plugins.

WPForms (Freemium)

WPForms best wordpress forms

WPForms is our favorite (and the one we used in the tutorial for a couple of reasons:

It’s got a free version that’s perfect for beginners, with a premium version that’s packed with powerful features like email subscriptions and multi-page forms so when you’re ready to get even more pro with your site and WordPress contact forms, you’re just a couple clicks away!


  • Super user-friendly drag and drop form builder
  • Free WPForms Lite version that includes all the basic form fields, captchas, email notifications, and thank you pages
  • Premium version packed with powerful features like multi-page contact forms, email subscriptions, geo-location, and more


  • You can get more features in other free WordPress contact form plugins than WPForms Lite offers

Check out WPForms

Gravity Forms (Premium)

Gravity forms wordpress contact page

Gravity Forms is a paid-only WordPress form builder plugin with all the advanced functionality and features you’d want in a contact form plugin.

They’ve also got a killer support staff that’s built to help advanced WordPress developers build super complex forms to save website owners loads of manual backend work trying to connect this form field to that app then trigger this other thing to pop out one of those jigamabobs.


  • Drag and drop WordPress contact forms plugin with over 30 form field types and conditional logic
  • Create surveys, quizzes, web directories and connect with tools like AWeber, Dropbox, Freshbooks, PayPal through add-ons
  • Premium support (FAQ, knowledge base, forums, email)


  • Premium only (starts at $59/year for one site)
  • User friendly enough but all the features add complexity/can be overwhelming

Check out Gravity Forms

Ninja Forms (Freemium)

ninja forms wordpress contact forms plugin

Ninja Forms is another freemium WordPress form plugin with a slick UI and plenty of functionality for beginners and experts alike.


  • Easy to use drag and drop builder with 27+ fields, templates, email notifications, easy GDPR compliance, and automatic translation into over 16 languages
  • Dedicated support with a 24 hour response time – even for free users
  • Fully mobile responsive and designed to match your theme’s existing CSS styles


  • Free version is a bit basic
  • Lots of addons – can save you $$ over other premium contact forms for WordPress if you only need one or two, more than that and you’re looking at more expensive premium plans

Check out Ninja Forms

Formidable Forms (Freemium)

formidable forms wordpress contact form

Formidable forms is a serious competitor to top of the game plugin Gravity Forms.

They’ve got tons of in-built features for beginners and extended functionality for developers who want to build super complex forms.

AND they have a free version!


  • Powerful drag and drop builder with all the basics covered plus…
  • Really unique features like online calculators, polls and surveys, digital signatures, and built-in graphs and charts to visualize form data without having to export to something like Google Sheets
  • Mobile responsive with visual styler so you can change colors, borders, etc without code


  • Even the cheapest premium option is double the cost of other best WordPress form plugins on our list
  • Email is the only support option

Check out Formidable Forms

Contact Form 7 (Free)

contact form 7 best wordpress form plugin

It’s the oldest and most downloaded for a reason – this tank of a contact form plugin is tried, true, and ready for battle on just about any WordPress site!


  • Free for now, free forever – this one’s a passion project from the community so you get it all without having to pay a dime (though donations are appreciated)
  • Covers the basics most will need in a form plugin – radio buttons, quizzes, checkboxes, dropdowns
  • Very minimal – easy to learn and won’t bog your site speed down by loading a bunch of extra code


  • Lacks features you can get in other free WordPress form plugins
  • Limited support (some decent Docs and FAQs, and the WordPress support forum is all you get)

Check out Contact Form 7

Contact Forms! We’ve got WordPress Contact Forms here!

That’s it friends – how to add a contact form in WordPress!

As always, we hope you found that super helpful.

If you want more tips, tricks, tutorials, step-by-step guides – all the help with creating an awesome, professional website, go check out our Youtube Channel for more of the good stuff!

Rumor has it that for every new subscriber we get, a good boy finds a date to prom…

Website Design Mistakes | Top 10 + Solutions
Take the Guesswork Out of Website Design

website design top 10 mistakes and their solutions featured image

Dale McManus

Co-Founder & Web Developer

Jun. 14, 2019

Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites. In this post, we'll talk about an edge-topic on the top 10 website design mistakes and their solutions.

  • Level of Expertise
  • Time To Complete
    10 Minutes
  • What You Get
    Working Knowledge

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

As always, here’s the video guide:

If you like the video and want more tutorials on creating a professional website you can also subscribe to our YouTube channel!

Now to the post…

If you’re reading this, then you already know the importance of building a website.

But if you’re not a professional website designer like we are, it’s really easy to make various mistakes that can wreck your site.

The mistakes covered in this post can make your website look unprofessional and make your visitors more likely to click on that X button, which we don't want.

But before we dive into the mistakes and their solutions, we want you to get into the right mindset.

Your mindset should be this:

Whenever designing your website, your ultimate objective is to minimize the amount of brainpower the visitor needs to use while on your website.

The easier you make it for them to read, navigate, and click around on your website, the more successful your website will be.

Website design should look for any and all ways to minimize time and mental bandwidth visitors use to get what they want.

With that said, let's get started!

website design mistakes

The 10 Bad Website Design Mistakes You Should Avoid (And Their Solutions)

Mistake #10 – Buttons That Blend

A button, especially at the very top of your homepage should be your most important call-to-action.

It should lead them to read more or check out your product

A lot of people get caught up in making their whole website match that they forget that this button should stand out apart from everything else.

This is the one thing that you want them to click on the most so it's much better for this button to be a completely opposite color that stands out.

You want your visitors’ eyes to be immediately drawn to this button.

For example, if it's the same color as the rest of your website, they might just skip right over it because it doesn't look important enough.

Our favorite colors to use are blue orange or green and you want to make them very saturated and bright, like in the example below.

Bright orange button

Mistake #9 – Too Many Calls-to-Action

While we're talking about call-to-action buttons, 1 or 2 is perfect but 3 or more presents visitors with too many options and your visitor is less likely to click on any at all.

If, for some reason, your website needs more clickable call-to-actions, just leave the most important one at the top and then create a bottom header below your main section with a lot more clickable buttons.

Bottom header

That way, they're still at the top of the page and people can find them easily but your main call-to-action is the single centered focus.

The reason you don't want a bunch of call-to-actions right at the top is because we want to minimize the amount of time it takes for your viewer to find exactly what they need.

Giving them fewer options is actually better. It makes them more likely to click and reduces their stress in deciding what option to click.

Simplifying a website visitors options also makes it more likely that they’ll stay and actually click the link instead of having information overload, exiting your website, and going elsewhere.

Mistake #8 – Too Much or Too Little Spacing

We see lots of websites that are too crowded and that makes it really difficult to focus on one piece of information, let alone the most important piece of information.

On the other hand, we also see lines of text that are way too spaced out and it kind of just throws off the whole balance of the website.

A very helpful rule of thumb is to group lines of text together that are supposed to go together and then create space around that group like a heading and a subheading.

Mistake #7 – Poor or Overly Complicated Writing

Writing can take way too long to read and it'll crowd up your website with a lot of unnecessary information.

The key is to simplify, simplify, simplify.

You understand your content at a level 10 but you should be writing it at a level 1.

The copy on your website should essentially read the mind of the visitor and answer their questions before they even know they want to ask them.

Here’s a helpful exercise:

Try asking a few friends to check out your website. If they have any questions at the end, then you know you have something that you need to rewrite.

One way to think about your writing is like a slippery slope.

This concept comes from legendary copywriter Joe Sugarman.

Basically, you want your readers to feel like they’re slipping down a slide when reading your copy – the words on the page.

That means grabbing their attention with a short sentence.

And another one.

Maybe one more.

Now they’re starting to slip and you keep the slide slick with simple sentences that build one on top of the other.

The key is to stay focused on one big idea (as best you can) for each section of writing.

This whole section, Mistake #7, has only been about simplifying your writing. We’re not talking about any other subject.

But when you’re ready to move on to another subject, use transitions like:

What you write is only one piece of the puzzle. The other piece is how the words look on the screen.

Mistake #6 – Poor Tracking and Leading

This is a really subtle mistake that is commonly overlooked when writing copy for your website.

“Tracking” is the amount of space between individual letters or words in your writing.

The tighter the tracking, the harder your text will be to read.

Try adding a little bit more tracking to give your words some room to be read easier.

“Leading” is the amount of space between lines of text.

This can also be referred to as line height. And once again, adding a little bit of space between lines of text can make things much easier to read.

We built a bunch of websites before realizing this one and it would have been awesome if somebody had told us this sooner.

Mistake #5 – Lacking Consistency

Having lots of different fonts and different font sizes is going to make your website look unprofessional and very inconsistent.

Try only using two different fonts and try to set definite font sizes for both H1 and H2 headings.

For example, H1 could be set at 36 points while H2 is 18 points.

Consistent header font sizes

Use these numbers throughout the rest of your website. This will ensure that everything looks clean and consistent and all you have to do is bold your text whenever you want something to stand out.

You’ll also notice in the image above that we designated one font for headers and the other font for normal text. This adds another visual layer that can enhance the look and feel of your website.

The idea is to work smarter, not harder.

Mistake #4 – Poor Image Choice

Now, there's nothing wrong with using a stock photography website to get your images.

A few of us here at CaPW are photographers and we still don't want to go out and shoot ourselves every time we need sweet photos for our sites.

So we use or ridiculously often.

But some photos can be too busy and distracting to absorb text or other important information on your website.

To overcome this, try using images that have a bit of empty space in them. That way you can put text over the top without them conflicting.

Or you can just try adding a background overlay.

A background overlay should be 50% or more white if you have black text, or 50% black for white text. Then you could use pretty much any image and still read the text.

Mistake #3 – Long Paragraphs

Long paragraphs immediately look really daunting and viewers might just skip over them to go find shorter pieces of information.

We recommend adding a few breaks every two or three sentences to make it easier to absorb.

This is as simple as just hitting the return key twice every two or three sentences.

It doesn't matter if somebody's reading a book or a website, people tend to read the first sentence of every paragraph to scan for the right information, so it makes the most sense to put the most important pieces of information in the first sentence of every paragraph.

And we know all you english majors reading this aren’t going to like this advice, but the reality is, internet readers (and readers in general today) prefer shorter, punchier writing.

Proof: the average reader online has the attention span of a goldfish.

Shorter paragraphs encourage people to keep reading and it helps to keep them focused.

Placing your logo in the center of your header may feel good because you're being different than everyone else but it does have a downside.

There is a reason most people put their logos on the left side:

Internet users have been conditioned to click on the logo to go back to the homepage since pretty much the internet was created.

So as soon as you put your logo in the center, you've now added an extra quarter second, maybe even a full second or so for the viewer to actually figure out how to get to your homepage.

This extra step reduces the user experience.

And like we said earlier, minimizing the amount of brain power they need to use is key for a great user experience.

It's best to stick to conventional methods and do what people expect – minimizing confusion.

Mistake #1 – Unresponsive Website Design

We left this for number one because having an unresponsive website is a sure-fire way to lose 50 percent of your visitors.

Not at all kidding…

Over 52% of global web traffic comes from mobile devices.

Making sure that your website also looks good on mobile is extremely important.

There is nothing more frustrating as a website visitor than to go to a website and you can't even click on the buttons or read the text.

But it’s not just users who want your website to be optimized for mobile:

Google wants it too.

In fact, on July 1st they’re rolling out mobile-first indexing.

This means that websites built to work well and look good on mobile phones will automatically start ranking higher in search engines than websites not optimized for mobile.

This is a major change and will upset a lot of website owners.

Which is why this is our #1 recommendation.

Making your website responsive to mobile is great for your readers and it’s especially great for SEO and ranking higher in Google.  

If you want to make a beautiful and fully responsive website, then check out this tutorial we made that walks you step-by-step on how to do exactly that.

Now It’s Your Turn to Fix Those Bad Website Design Mistakes

An ugly, dysfunctional, hard-to-operate website can quickly be turned into a beautiful, easy-to-use home for your blog or business.

If you follow all the steps in this guide, you’ll be well on your way.

And if you found this website design tutorial helpful be sure to check out our other written guides filled with all sorts of helpful website tips and tricks to help you launch your site in style!

How to Create an Online Store (eCommerce Website)
Step-by-Step Guide To Creating An Online Store

How To Make An Online Store Featured Image

Dale McManus

Co-Founder & Web Developer

Jun. 11, 2019


Hey, my name is Dale! My partner Alex and I have helped tens of thousands of people build beautiful websites. In this simple, step-by-step guide, you'll learn how to create your online e-commerce store. Get ready for some fun!

  • Level of Expertise
  • Time To Complete
    1 Hour
  • What You Get
    A Working WordPress Slider

For the record: It’s super important for us to keep this site 100% free for you and 100% high quality. To help us do that, we’ve partnered with some of the products we recommend and earn a commission if you buy through our links. Read our full disclosure and partners list here.

As always, here’s the video guide:

If you like the video and want more tutorials on creating a professional website you can also subscribe to our YouTube channel!

Now to the post…

Today we're going to show you how to make a website with an awesome, sleek design.

We're also going to show you how to create your very own products to populate your site.

Think of us as your spirit guide through this tutorial where I'm gonna show you step by step what to do to come out of this with an awesome ecommerce website.

How to make an online store
Creating an ecommerce website becomes much easier when you have an action-packed guide for reference.

Step #1: Secure Domain Name and Web Hosting

All right, step number one is to secure a domain name and web hosting

To do this, just follow this link to

It’s my special link just for readers of this blog.

Normally, Hostgator is about $12 or $13 dollars a year but I partnered up with Hostgator and got an awesome discount for you.

It'll be about $4.99 instead.

I actually use them for all of my websites. I'm not gonna pitch you anything that I don't actually use myself.

They are quick, easy, and affordable, and they also have great customer service.

Once we're on this page you'll see the hatchling plan, the baby plan, and the business plan.

Hostgator hatchling plan

The baby plan is best if you have multiple domains.

The business plan is best for if you're pulling in a lot of money with your website.

But we're gonna go ahead and select the hatchling plan.

After that, you’ll see the page where you can enter your domain name.

Hostgator mcmanus

Go ahead and enter your domain name and if you already have a domain name you can just click on “I already own this domain.”

Anyway, I decided to use my last name, which is often used for luxury ecommerce brands.

Unfortunately, my last name is taken.

You’ll see in the image above it’s unavailable and it’ll suggest other domains like .club.

I highly recommend sticking with a .com if you can. It legitimizes your website and a lot of people don't think to type in .site or really anything other than .com, .gov, .org, or .net.

So my solution today is to simply switch around a few letters in my last name and make it Mcmasun instead.

Hostgator mcmasun

After choosing your domain name and getting that .com (if you can), you want to make sure that “privacy protection” is checked

Hostgator domain protection

I highly highly recommend doing this.

I did not do this on the first website that I ever bought and my phone got bombarded with solicitors trying to sign me up for their plan to design my website and all this other nonsense.

I was getting literally 10 phone calls a day.

It was awful

The privacy protection is only $1.25 extra a month so there’s no good reason NOT to get it.

After that, you’re gonna scroll down to choose a hosting plan.

So the more months that you purchase for the lower the price will be.

Hosting plan

You can see $2.75 a month for 36 months, versus one month which is $10.95.

Now, all of these prices will actually be lower than they are when you use my coupon code: Createaprowebsite.

At the time of this writing, you’re saving about 60% depending on which one the plans you pick.

I recommend going with the twelve months because you're buying your domain name for twelve months so you might as well buy your hosting plan for twelve months, too.

Then again, if you want to maximize savings and you know your website is in it for the long haul, then commit to the 36-month plan.

Now, you’ll need to create a username.

I just used my name and entered in a simple in.

After that, you’ll enter in your billing info.

Once that’s complete, you’ll scroll down and see “add additional services.”

The top one tells you that you can assure safety to your visitors by including a free SSL certificate.

I highly recommend this.

An SSL certificate is that little secure tab up on the top of your website pictured below.

Ssl certificate

It signals to visitors that your website is safe and that any information they enter on your website is safe, too.

But, you can down and uncheck “protect your site from hackers” and “get your professional email backup” and so on.

You don't need these things right now.

I have other videos on my site that show you how to get that stuff for free or find a better-paid service.

Once you’re ready to checkout, go down and enter the coupon code: createaprowebsite.

Create a pro coupon code

Full disclosure:

This coupon code gets me a commission which helps fund these free tutorials and videos that I put out. So if you want to support (and get a sweet deal), simply using my coupon code is the best way to do it.

Once that’s done, agree to terms of service and click checkout.

Then you’ll be in the Hostgator customer portal, also called the cPanel.

Then go to the hosting tab and confirm that your hosting account is on your new domain name.

Step #2: Setup and Install WordPress

Next, we need to install WordPress.

But some of you may be wondering…

What is WordPress?

WordPress is just a software that you use to design and publish your website or your blog.

It’s by far the most popular website builder on the market and it powers about 30% of the internet.

WordPress comes with over 11,000 different themes that you can choose for your website and also over 55,000 widgets and plugins to help you optimize the functionality and the tools on your website.

It’s also free and open source.

So there are tons of developers all over the world working on it every day to make it better.

How to Install WordPress

To install WordPress just go over to WordPress one-click installation in cPanel.

Wordpress 1 click install

And now select your domain name. Don’t do anything in the field that says “directory”.

Just click next.

Select domain for install

Now you’re going to give your site a title.

I’ll go with Mcmasun.

For the admin I'll put in my first and last name and the same email.

Then agree to the terms and click install.

Basic domain info

After WordPress is finished installing, the first thing you want to do before anything else is to copy all of the information under “installation details.”

Copy installation details

Put this info somewhere safe because you’ll need it later.

Now go ahead and click login.

You’ll be brought to a loading page. Hostgator is sending your domain out to the whole world so everyone can find it, and this process takes anywhere from 20 minutes to 2 hours.

I’ve never had it take any longer than 20 minutes.

Once it’s complete, you can check out the status of your website by typing in the URL, like

It should say something like “website coming soon.” That means the install and everything was successful.

So now you need to login to your new WordPress powered website.

To do that, type your domain’s URL and after type /wp-admin.

See the pic below for an example.

Mcmasun wpadmin

After typing that in, click enter.

Now you’ll see the login page.

You’re going to need to pull out that crazy long password and username you saved earlier to log in.

Wp admin login

BAM! And you’re in.

You’ll see the WordPress dashboard.

Step #3: Reset WordPress Password

Step #3 is to reset your WordPress password.

This is an important step because you don't want to use that ridiculous password that you had to save from earlier every single time.

You want to create something that you can remember.

In order to do this just go down to users and click on your name and scroll all the way down to the bottom of the page and you can see “new password.”

Click “generate password.”

Generate new password

Delete that ridiculously long one that they give you and replace it with one you’ll remember.

Then click on update profile.

Step #4: Active a New Theme and Page Builder

Step #4 is to activate a new theme and page builder.

Real quick, I want to explain the difference between the two because some people get them confused.

What is the Difference Between a Theme and a Page Builder?

A theme is usually just what determines the look and the style of your website, but in this case, we're using a page builder to edit this homepage.

So really, the theme that we're gonna get is strictly just for the header – which is the whole white at the top of the page.

The builder builds all of the content below it, all the way down to the footer.

Activate WordPress Theme

So we're going to be using a free theme called ocean WP.

To get this theme, go over to appearance and click on themes.

Users themes

Then click the big plus button to add a new theme.

Add new theme

To quickly find OceanWP in the sea of other themes, just type it into the search bar.



If you would like to use a paid theme – and they do have a lot of advantages – then check out my video on the top 10 best and responsive WordPress themes.

The one I recommend most highly is called Divi.

Anyway, I spent days combing through free themes and testing them out for this ecommerce tutorial only to find out that there weren’t any good free themes out there that would give you the customization that I wanted you to have.

Which is why I used OceanWP and created a template that you can just download and use.

Install OceanWP

So first, just click install on the OceanWP theme.

Install and activate oceanwp
Recommended plugins

Now it’s activated and you can see there will be a notice at the top highlighted by a yellow bar that says “this theme recommends the following plugins.”  

One of those plugins is the page builder I’m going to show you how to use called Elementor.

Feel free to install the other plugins, too. They’re very useful.

Just click on “begin installing plugins” and it will install all three of them.

Begin installing plugins

Then check all three and hit apply.

Bulk actions apply

And if you want to install more plugins, or were missing the three pictured above, just go to plugins on the left side menu and click “add new.”

Plugins add new

Step #5: Install WooCommerce

WooCommerce is just a plugin that allows you to create products and product categories, set prices, and do all the fun ecommerce stuff.

It's what adds the ecommerce functionality to your website.

So to plugins and click add new.

Add new plugin

Type in the search bar WooCommerce.

Find WooCommerce and click “install now.”

Install woocommerce

Then click “activate.”

Activate woocommerce

And now WooCommerce is installed and activated. Woo!

OK, next you’re going to click add new plugin again.

This time we’re going to activate Stripe.

Stripe is what allows people that enter their credit card information to pay for products.

I’m going to show you how to set up PayPal and Stripe so that people can pay any way they want.

To get Stripe, type into the search bar Stripe and you'll see WooCommerce Stripe Payment Gateway. Click install and activate.

Now I'm just going to go through the WooCommerce settings in order to show you everything that you need to configure.

So find WooCommerce on the left side menu and go to settings.

Woocommerce settings

I’m going to walk you through all these different tabs.

First one is general.

Just put in your store address and then decide on what country or countries you’re selling to.

This is up to you, if you can only sell to specific countries or if you want to sell to all countries.

Same with shipping.

I would keep the default customer location as “geolocate.”

And make your decisions for the rest of the options here regarding taxes and coupons and preferred currency, etc.

When you’re done click Save Changes.

Cool, now we can go up to the tab labeled Products.

But the first thing we need to go over is our shop page which we don’t have yet. So let's go ahead and make one now.

Just find Pages on the left side menu and click add new.

Pages add new shop

Give your new page a simple title like Shop.

Page title shop

Now we're just gonna scroll down and make sure that our content layout in the ocean WP settings is at full width.

Oceanwp full width

Great. Go ahead and click publish.

Publish shop page

OK, so let’s go back to WooCommerce settings and return to the Products tab and select the newly create Shop page as our Shop Page.

We’ll be able to edit it later.

Then make sure that “Enable Ajax” is selected and “redirect to cart page” is not selected.

Under “Measurements,” you’re gonna put in how you want to weigh and measure your products.

And then enable reviews.

Enabling the star and review rating system lets your customers leave you awesome reviews (because I know your products are going to be awesome) which helps persuade other people to buy your products.

You could enable the “Show Verified Owner Label” option but I wouldn’t. It means only verified owners can leave reviews.

But in my experience, you just want regular customers to have the ability to leave reviews.

Then go all the way down and click “Save Changes.” Very important to always save your changes if they’re not saved automatically.

Now go the tax tab and fill out your tax info.

Now go up to Shipping Zone. Here you can add a shipping zone.

Add shipping zone

Next, go to Payments and determine how people will pay.

This is where I told you about PayPal and Stripe. We’re going to enable PayPal and we are also going to enable Stripe. And remember, Stripe allows people to pay with a credit card instead of using their PayPal account.

Once you’re done, click Save Changes.

Go up to the Accounts and Privacy tab, and this is where you can choose to allow guest checkout – meaning, people don’t have to create an account to buy your products.

You can also allow people to create accounts.

And you can set up your privacy policy. If you don’t know how to write a privacy policy, you can easily Google one for your industry.

You would just need to create a page for it and then select it here.

Step #6: Add New Pages

Step #6 is to add new pages.

In order to add these pages in, we're gonna have to create them.

Go to pages on the left side menu and select add new.

Title this one Cart. And what we need to do is add a small shortcode here that'll allow WooCommerce to put in some tools on the cart page for our customer.

Just type this:


woocommerce cart code

Pretty short and simple, right? Wouldn't really even call that coding.

Now just scroll down and change the content layout from default to full width. 

cart page full width

That’s super important, do not forget that.

Then scroll up and click Publish.

Now to Pages and press Add New again and title this one Account. 

We're gonna add shortcode in, too. Just type in the following:


my account page shortcode

Now scroll down and make sure you change the content layout to full width. Then click Publish.

Add another page. 

Title this Terms and Conditions. 

We’re not going to get into this page in this tutorial, but it’s good to have it created for the future.

So then click Publish.

Add another page. 

Title this one Privacy Policy. Click Publish. 

Now go back to WooCommerce on the left side menu and go to settings.

Go to the Advanced tab. 

Now you can put in the Cart page into Cart Page and so on. 

Here, you can also force a secure checkout so they need that SSL certificate on their page to be able to check out but I'm gonna leave that unchecked. 

secure checkout unchecked

Scroll down and Save Changes.

Step #7: Customize Your Website

OK, we’re finally into the fun stuff!

Step #7 is about customizing your website to look and feel like a real ecommerce site. 

But before we can customize a homepage, we have to make a homepage.

I’m sure you got this process down by now. Go to Pages and click Add New. 

Call this page Homepage.

Scroll down and make it a full 100% width. 

Then click “header” in OceanWP settings at the bottom there and disable the Display Top Bar. 

disable top barYou’re also going to go to Title and disable the Display Page Title option. 

disable page title

So now go up and press Publish. 

Then find your sites name in the upper left corner of the WordPress dashboard, hover over it, and click “Visit Site.”

Visit site

And then you’ll see the homepage of your site. WordPress automatically creates a basic page for you but we want it to reset to our new homepage. So click Customize on the top of the WordPress menu bar. 

click on customize

Now you’ll see the customizing menu on the left-hand side. 

Click on Homepage Settings.

homepage settings

Tell it to be a static page.

static page

Underneath that, you’ll see “Homepage” with a drop-down menu. Go ahead and select “Homepage” from the options and click publish.

click publish

Install Elementor Page Builder

Now we need to start editing the page using Elementor. 

But we need to install it first. 

All you have to do is upload the template. 

Here’s the link to the homepage and footer template.

And to upload them, click on the little X on the customize menu and go back to the WordPress dashboard. 

Scroll down and find Elementor on the left side menu and go to My Templates.

elementor my templates

Click on import templates.

elementor import templates

Then choose the files you downloaded. 

Here they are again in case you missed them.

Open the files and import Homepage.

homepage import elementor

Then go back up to your site name and click “visit site.”

Then click Edit with Elementor.

edit with elementor

And now the fun really begins!

This is Elementor, a wonderful drag-and-drop page builder. 

You can do a whole bunch of stuff with this.

For example, if you click on the Rubik’s cube thing in the upper right corner of the left side menu, you can add a heading, and change fonts and colors, add buttons and the list goes on.

elementor edit selection

And if you drag elements into the homepage you’ll see a blue line indicating where you will place, inside, above, below, or beside something. 

Pretty cool.

blue line add widgets

But lucky for you, I have everything pre-built. 

So just click on the folder icon – the add template button.

add template button

Then go over to my templates.

my templates

And now you can see the template that we just imported. Click “insert.”

insert template

It’ll ask you if you want to import the document settings. Click yes.

And now you’ll see the page I built for you.

There aren’t any pictures on it yet, but I’ll show you how to add those and replace the text buttons and so on. 

OK, so first, right click inside the main section where the text reads “New Summer 2018 Collection.”

So right click and select Edit Section.

right click edit selection

We’re gonna change the background now, so go over to the style tab.

style tab

And then open up the Background Overlay.

background overlay

Now we’re going to add images. 

If you want to follow along with the images I use, download them here

Then click on the plus symbol in here and you can now upload your files.

Click on upload files, then navigate to the follow along images that you just downloaded. 

navigate to follow along images

Then go to page images.

page images

And then choose the Homepage Background image and click open.

homepage background pic

And then you can click “insert media.”

edit heading

You can even link it if you want to, or change the size of the text. 

Then you have the HTML tag. 

It’s automatically set to Heading 1. 

Heading 1 is the largest heading and it goes all the way down to Heading 6. 

If you have the size already set, changing the heading won’t change the size. But if you don’t have the size set, then changing the heading will change the size. 

But you should keep it as Heading 1, since it is your main heading. The size can vary depending on how you want it to look.

Now we’re gonna scroll down again and add images to the options for Shop Men and Shop Women.

edit image advanced

Changing these backgrounds is going to be a little different.

So just right click and select Edit widget.

Then go to the Advanced tab.

Under Advanced you'll see Background. Just Background, not overlay.

Now we’re going to add an image here. Select files and upload the Shop Men photo. 

Do the same with the other photo and upload the Shop Women photo. 

Edit Banners

The banners are just headings with backgrounds so they work the same as the button.

Just click Edit widget and then go up to “advanced background” and then just put an image in there.

edit banner images

Go ahead and upload Banner Image. Do the same with the other one. 

Change Video

Right click on the pen tool.

right click on pen tool

Select edit widget and you can change the video URL to wherever your video streams from.

Now we’re going to move on to creating product categories so go back to the WordPress dashboard.

Step #8: Create Product Categories

Now we're just gonna click on products and then go to categories.

product categories

We're going to start with men in the name section and the slug. 

So put men and set the parent category as none.

Now go ahead and add the same thumbnail image that we used on the homepage. 

Now back to categories and create a category for women, following the same process and using the image used on the homepage for women. 

Then add another new category called Products. And for the product image, you can add the image of the bracelet. 

Finally, you can create a bunch of subcategories. 

Once you’re finished with all that, you can go back to your website and you’ll notice that if you go the Men’s page, for instance, there’s this sidebar. You want to get rid of this.


Just go up to customize and scroll down to WooCommerce and click on Archives and change the layout to full width.

We’ll start with the header.

Just go up to your website title and go to “visit site” and instead of editing with Elementor we’ll click the customize tab.

So first we're going to click on Header, and go to General, then to Style, and change it to medium.

Then scroll down and you'll see elements positioning and we're gonna change it to “logo first” and then social buttons and then search form.

You can change the padding to 10, 10, which I recommend. 

Then go back and go down to Menus and create a new Menu. You can call it the Primary menu or Header menu.

And just go down and check main.

Next and we're gonna add some items to this.

So just click the add items button.

main add items

Then search for your product categories.

header menu product categories

Then add men, women, accessories and then all of our subcategories.

After that, close that section and go up to pages and we're gonna add my account.

So go back to the Dashboard and scroll down to Appearance and Menus.

And then restructure these by dragging and dropping them. 

Then save the menu.

Next, I’m going to show you how to make a logo and put that on the header as well as your site identity.

In order to do this just go to a new tab and head over to 

You can browse by all these different categories of logos and it gives you just almost an endless page of good simple logos. You can also type in any sort of keyword for whatever you're looking for.

I chose a square mountain wave symbol, and you can resize it by going up to one of the corners and drag to resize.

drag to move

I also added some text by clicking on the T symbol and writing Mcmasun.

add text

Once you’re finished designing the logo, you can save it and you’ll be presented with 2 options.

One where you can buy it as a vector file, which is super high quality. And two, where it’s free but you have to give logomakr credit. 

After downloading it, go back to your site and go to Customize and then to Logo and add the image.

All right, now it's time to set up our footer.

Create the Footer

Go ahead and download the footer that I created for you if you haven’t already.

And go back to the Dashboard and down to Elementor and My Templates.

Then import a new template and choose the Footer.

From here, we're just gonna scroll down and go to theme panel and then go over to my library.

Click Add New. 

I just labeled it “create a pro website footer.”

Then make the content layout 100% and “save draft” or “publish” it.

Now go to Edit with Elementor. 

From here click “add template” and import the document settings. Then click publish.

Now visit your site and go to customize, scrolling down to Footer Widgets.

footer widgets

Click select template and go to see APW footer.

To make the footer fit perfectly, uncheck “add container” and change the padding to zero. cool so now if we go

Step #10: Create Products

Now comes the part you’ve probably been waiting for. 

The first thing to do to create products is go back to the dashboard, then to Products and Add New.

You can make 2 types of products:

  1. A simple product (which you’ll make more often).
  2. And a variable product (like a shirt with 3 different colors).

We’ll dive into each below.

Create a Simple Product

Here we’re gonna make a black and white bracelet.

Scroll down and you'll see a section called Product data.

Make sure you're on “simple product.”

And for this, I’ll say it costs $24 but it’s on sale for $19. It’ll actually X-out the regular price and show the sale price. 

Feel free to play around with the other sections like weight and dimensions. Moving on over to product image, we're going to upload the image of the black and white bracelet.

You can also add product tags, which lets people type in words in the search bar and find this bracelet. You could add as many as you'd like.

Then add it to three important categories: Men, Women, and Accessories. Then publish it. 

Create a Variable Product

Go ahead and add a new product. 

We’ll call it Baseball Tee. 

Make sure to change Product data to a variable product instead of a simple product.

Now you can set the price depending on the attributes of the product. 

Go to Attributes and add a new attribute and name it Size. And in the Values section, you can add size like this:

Small|Medium|Large, and so on. Make sure to use the “|” symbol to separate values. 

Then we’ll also add color as an attribute with red|blue|green values.

Now just click on save attributes.

And then just head on over to variations and we're just going to add a new variation.

Go over to create variations from all attributes and then click on go. 

So now you can set all the information for each variation, including price and an image. Go ahead and save the variations and then set the main Product Image.

When creating categories, it’s important to add it to the Shirts category because it is a shirt, but you should also add it to the main category shirts falls under, like Men or Women.

Then hit publish. 

Now there are a few last things we need to do to make it look good on your website. 

Go to OceanWP settings and then Content Layout and change it to just Full Width. 

And in order to get the different colors to show up, we need to set a product gallery.

So right below Product image is Product gallery. All you have to do is select the other colors of products you’ll be selling. Hold Ctrl when selecting products to select more than one at a time.

Create a Grouped Product 

Add a new product and let’s just say our grouped product would be an entire collection of shirts, so we'll call it the summer collection. Again, make sure that your settings are on full width, and then change this to a grouped product.

And then you have all the same values as the other products. Pretty simple. 

Publish this page and we’ll add the affiliate link. 

Create an Affiliate Product

Add a new product and we’ll call it Hostgator Web Hosting (which I actually do sell as an affiliate). 

Then scroll down to Product data and change it to External/Affiliate product. You can add in your affiliate link into the Product URL.

Step #11: Publish Your Website

Whenever you're ready to finally publish on any page, you’ll see the following message that I highlighted below:

your website is coming soon

All you have to do is click “Click Here.”

click here

And that’s how to make a complete ecommerce website!

Thank you guys for sticking around through the whole tutorial. I know it was a long one.

If you found this tutorial helpful be sure to check out our other written guides filled with all sorts of helpful website tips and tricks to help you launch your website!