How to Make A Business Website Using WordPress & Elementor

Learn how to make a website for your business using WordPress, Elementor, & Astra. These are all 100% free tools that I personally use.

In this how to make a website 2019 tutorial, I will show you more than just how to create a website, I will also teach you how to SEO optimize your website, and how to generate leads from it.

This tutorial is comprehensive, my longest how to build a website tutorial. I hope you enjoy it.

Things You Need:

• Hosting. I recommend SiteGround.
• A domain name.
• WordPress Theme. For this tutorial, we use the free Astra Theme.
• WordPress Page Builder. For this, we use the free Elementor page builder.

 Let’s get started!

Step 1: Buy a web hosting and domain name.

The most important part of your business website is hosting. The hosting is going to determine how fast your website loads which is a very important factor that impacts lead generation and conversion. Google also prefers faster websites with low bounce rates, so a faster website increases your chances of ranking on Google.

One thing I’d like to point out is to avoid EIG and GoDaddy companies as much as possible. EIG stands for Endurance International Group, and it controls over 60 hosting companies. It fires their in-house support staff and consolidates everything under one umbrella. What happens is the customer support, quality of hosting, and overall quality of service suffers.

Here are some of the well-known EIG companies:

• Hostgator
• BlueHost
• iPage
• Arvixe
• FatCow
• HostMonster Small Orange

GoDaddy also has a lot of bad reviews regarding quality and customer service, and the websites they host just load really slow.

You’re also going to want to avoid “mom and pop” hosts because they lack the resources to use advanced hosting technologies that will give your website an edge.

You also want to choose a hosting that provides free SSL certificates. Without an SSL certificate, your website will have this ugly “Not Secure” label at the top:

If you’re a business, you can practically say goodbye to potential clients with that label. If your hosting does not provide SSL certificates for free, one SSL certificate can cost you $50-$100 per year per website.

You also want a service that will allow you to upgrade to something called PHP7, which will make your website a whole lot faster.

Siteground, My Preferred Web Hosting Service

A hosting service that I found that satisfies all these criteria is SiteGround. SiteGround offers free SSL certificate, allows you to upgrade to PHP7, has quality hosting, and amazing customer support. It really is the best out there.

Here are SiteGround’s key features:

• Free SSL Certificate
• FAST Knowledgable Support
• WordPress Staging Environment
• Free Website Migrations
• 30 Days Of Backups

I’ve made an amazing deal with them to give a 70% discount to anyone who signs up using this link. So if you want to save money on your hosting, click on this link and purchase your hosting now.

To purchase your hosting from SiteGround, click on this link. Once you land on their homepage, you’ll see four different types of hosting:

Choose WordPress hosting and click Get Started. You’ll then see three pricing plans:

Choose one according to your needs and budget. You can also check out their comparison of each hosting plan to be able to decide which one suits your business needs.

Once you’ve picked a plan, click Get Plan. You’ll then be taken to the next step which is choosing a domain. If you already have a domain name, select “I already have a Domain”. But if you don’t have one, select “Register a New Domain” so you can buy a domain right inside SiteGround. This costs $15.95 per year.

Keep in mind that if the domain name that you want to purchase is not available anymore, SiteGround will let you know and you’ll have to choose another one. Once you have a domain name, click Proceed.

The next step to complete your purchase is providing your accurate personal and billing details. Once that’s done, click Pay Now. You now have a reliable web hosting and domain name.

Step 2: Install WordPress.

WordPress is the website creation tool that we’ll use to create your business website. It’s completely free, very easy to use, yet very powerful. It comes with thousands of plugins and themes that will let you do whatever you want with your website.

SiteGround actually comes with a one-click WordPress install that will quickly install WordPress for you.

Once you have completed your hosting purchase, you’ll see a screen with a link saying “Proceed to Customer Area”. Click on that and you’ll be taken to a page where you can set up your new hosting account. Under Set Up Your Website, select Start a new website.

You will then see a list of software that you can install. Select WordPress.

To complete the process, you’ll have to provide admin login details (email address, username, and password) for your website. These are the details you’ll use to access the backend of your website, so be sure to keep them secure.

Once that’s done, click Confirm > Complete Setup. And you now have a live, self-hosted WordPress website.

Step 3: Install SSL Certificate.

Before doing anything else, I want to first show you how to install an SSL Certificate to get rid of the Not Secure label I showed you before. Under My Accounts, click Go the cPanel.

CPanel is where you can install different software and tools for your website. If you scroll all the way down, you should see a section called Security. Under this section, click on Let’s Encrypt.

Select the domain that you want to install the SSL certificate on, select Let’s Encrypt SSL, and click Install.

Now it’s time to log in to your new website. Click My Accounts again at the top and click the Installations tab. Here you will see the domain name that you registered. Across it is a green Go to Admin Portal button. Click on this button to go to your WordPress login page.

WordPress login pages usually follow these formats: yourdomain.com/wp-admin and yourdomain.com/wp-login. Yours might be different. But you have to remember or note your login page URL so that next time, you’ll be able to access it by directly typing the URL into your address bar and without having to log in to Siteground anymore.

The WordPress login page looks like this:

Enter your username and password here to log in to your website for the first time.

Once you’re inside, the first thing you need to do is tell WordPress that you have an SSL Certificate. This is quite simple to do.

On the left sidebar, go to Settings > General. On the screen, you’ll see two boxes with your domain name: WordPress Address (URL) and Site Address (URL). You have to type the letter “s” after “http” and before the colon “:” for both boxes.

Once you’re done, click Save Changes. Your website should now have a padlock icon right next to the domain name:

Now the last thing we need to do for the SSL Certificate is to make sure that people who type “http” into their address will be redirected to your “https” URL. We need a plugin to do that.

To install a plugin, go to Plugins > Add New. On the search bar the top right, search for the plugin Really Simple SSL. Install and activate it.

You will then see this pop-up message on your dashboard:

Click the blue Go ahead, activate SSL! button. You will be logged out, and once you log back in, the Really Simple SSL plugin is in full effect.

Step 4: Install Astra Theme and Astra Sites.

For a business website, you want a theme that has a clean code and flexible features to make customization as easy and quick as possible. There are a lot of quality WordPress themes out there, but the theme that we’re going to be using here is Astra Theme.

Astra Theme is a free WordPress theme that has excellent speed and simplicity. What I like most about it is it configures itself based on the tools that you need, and this makes things easier on your end. There is also a Pro version if you want to access premium features.

Here are the features that I love most about Astra:

• One Of The Fastest Themes Available
• Over 100 Starter Sites (Most Are 100% Free)
• Flexible Mega Menu Feature
• Powerful Add-on Package
• Extensive WooCommerce Support

To install Astra, go to Appearance > Theme > Add New. Search for Astra, click Install, and Activate.

Another awesome thing about Astra is the fact that it has a plugin called Astra Starter Sites. This plugin has a library of pre-built free and premium templates that you can use on your own website with just a few clicks. We’ll be using an Astra Site template to cut our website creation time in half.

After installing Astra, you’ll see this message on your dashboard:

Click Get Started. This will install Astra Starter Sites for you. You can also install Astra Sites by going to Plugins > Add New. Search for Astra Sites and install and activate it. To access Astra Sites, go to Appearances >Astra Starter Sites.

Choosing Your Page Builder

After Astra Sites is installed, you will be asked which page builder you prefer: Gutenberg, Elementor, Beaver Builder, or Brizy. In this tutorial, I’m going to use Elementor.

Elementor is a WordPress page builder that took page building to a new level. It has a deep feature set yet it’s very easy to use and master. The free version is enough to build a decent webpage, but if you want more advanced features like being able to add contact forms, sliders, pricing tables, and more, you can upgrade to the Pro version.

Choosing Your Astra Site Theme

Once you’ve chosen your page builder, you’ll be taken to the library of Astra Sites templates. There are tons of sleek, professional-looking templates – both free and premium – that you can choose from. The templates are organized by the following categories: Blog, Business, eCommerce, Free, and Other. Since you’re creating a business website, it’s best to browse in the Business section.

Take your time in choosing which template you feel will most closely align with your brand. These templates are fully editable with the page builder that you chose, which means that you can easily change the text, images, layout, buttons, and basically everything on the page.

For this tutorial, I’m going to use the Accountant template because it looks amazing and easy on the eyes.

To install a theme, you just have to click on it to be taken to the preview. If you like what you see, click the Import Theme button and make sure the boxes are all checked.

If you’ll notice, there’s a box that says “Install Required Plugins”. Checking this box will install all of the required plugins for the theme to look exactly the way it is. For this theme, it installed WPForms Lite, a plugin that lets you create simple contact forms, and Elementor, the page builder I will be using. You can click on the little question mark beside it to see what plugins are going to be installed.

WPForms is a plugin that can help you get quality leads for your business through effective forms. You can check out my WPForms review to know more about it. if you want to use a different forms plugin, you can just deactivate/delete WPForms in Plugins > Installed Plugins and install your preferred form builder.

Importing the theme may take a while. Don’t close your browser or hit refresh. Wait it out, and when it’s done, you’ll see a blue View Site button. Click that button to be taken to your website that now has the theme that you just imported.

Step 5. Choosing design elements.

Your website now looks stunning, but you’ll want to make it your own. To do that, you need your own color scheme, typography, and logo.

Let’s start with your color palette. If you already have your brand color, this is going to be easier.

Choosing a Color Palette

A website normally has a set of 2-3 colors: the primary, accent, and pop color. The primary color is the dominant color of your website and most likely your brand color. This is the color that you want people to remember your brand with.

When choosing your primary color, you have to research into color psychology or how colors affect people’s perception or behavior. Certain colors make people feel something, e.g. red makes them feel apprehensive, so you need to consider these things when choosing your primary color.

The accent color is usually used to make certain elements stand out than the rest like headings or post titles.

Lastly, the pop color contrasts with the rest of the colors to make important elements of the website stand out such as call-to-action buttons or lead generation forms.

There are two tools that I like using in choosing a color palette. The first one is Coolors.co, a website where you can browse different color palettes to get ideas or inspiration. If you see something you like, you can quickly copy the Hex code to use it on WordPress.

If you click Explore on the heading, you will see this vast collection of palettes:

If you see a palette that you like, hover your mouse over it, click View, and you will be taken to a new window where you’ll see the Hex codes of each color.

These Hex codes are what you need to use these colors on your website. Later I’m going to show you how to use these Hex codes on the WordPress backend.

Another cool tool is Colorzilla. This is a Google Chrome extension that lets you get the Hex code of any color you see on any website just by clicking on it.

If you want to get the Colorzilla extension, click here. Then click Add to Chrome.

You’ll then see this icon on your toolbar:

So now, if you want to know the Hex code of a color you saw on a website, just click this icon then click the color that you want to copy. The Hex code will then be automatically copied. You can paste this Hex code in specific areas in WordPress.

Customizing Typography

You also want to use your own typography that matches your brand identity and helps your website stand out. Websites normally have 2-3 fonts. Just like with colors, you’ll have a primary font which are fonts for headlines or menu. You also need a body font for paragraphs of texts and also an extra “pop font” to help some texts stand out.

Like colors, you need typography that stays true to your brand, looks pleasing to the eyes, and sends out the right message about your brand.

One of my favorite tools when choosing typography is Fontpair.co. This is a website that shows you how two different fonts look together.

If you see something you like, note what it’s called so you can search for it inside WordPress and use it on your website.

I also like using WhatFont, a Google Chrome extension that tells you what font is used on any website just by hovering your mouse over it.

To install WhatFont, click here then click Add to Chrome. Then you’ll see this icon on your toolbar:

To know the name of a font, click this icon and hover your mouse over the text. WhatFont will tell you the name of this font, and if you click on it, you’ll also see the font size, color, family, style, weight, and more.

Getting a Logo

Lastly, your business needs a beautiful logo that speaks of what your brand is all about. You can go with three different routes here. You can create your logo by yourself using a free tool called Canva, a popular designing tool that makes designing really easy even for beginners.

You’ll be surprised with how many logo templates Canva has, and they all look amazing. You can modify these templates to make them your own.

You should know, however, that you need to upgrade to Pro if you want to export the logo with a transparent background. There’s a one-month free trial though, so what you can do is upgrade to Pro, export your transparent logo, and cancel before the trial ends.

You can also hire a logo designer to do it for you. You can try websites like Fiverr.com or 99design, but you have to be careful in choosing an artist based on their style, track record, reviews, ratings, and more.

The third route, and probably a good idea if you want a strong brand logo is to hire a design strategist/consultant. People like these are professionals who take the time to understand what your brand is about, where your business is going, and what your core values are so they can incorporate that into the logo.

Step 6. Customize your website.

Once you have a color palette, fonts, and logo for your website, it’s now time to use them on your website. If you’re in the WordPress backend dashboard, go to Appearance > Customize to open the theme customizer.

You can also go here if you’re on the frontend of your website. There should be a black bar at the top of your screen, which is only visible to those who are logged in to your website. Click Customize to open the theme customizer.

Once you’re inside the theme customizer, you’ll be able to add your logo, change colors, change the site layout, and much more.

On the left sidebar, you’ll see various options to modify your website. Each theme has different customization options, so if you’re using a different theme, what you see here might be a little different from mine. All the changes you make here are shown real-time on your website.

In this theme, to change your site colors, go to Colors & Background. You’ll have the option to change base colors, breadcrumb, header, and footer bar.

The Base Colors are the theme color, link color, text color, and link hover color of your website. To change the base colors, click Base Colors. Inside, you’ll see buttons that say Select Color. Click on these buttons to change a specific color.

For example, to change the Theme Color, click Select Color beside it. You’ll then see two ways to select a color. First, you can paste a Hex code in a box. If you remember what we talked about regarding Hex codes in the previous step, it is in fields like these that you can enter those Hex codes.

So if you found a color in Coolors.co or any other places, you can paste the Hex code here. You can also select a color in a built-in color selection tool.

Next is changing your typography. Go back to the customizer by clicking the back arrow at the top of the sidebar and click Typography. You’ll be able to change base, breadcrumb, content, and blog typography.

Lastly, to upload your logo, go to Layout > Header > Site Identity. Under the Logo section, click the Change Logo button and upload your logo.

Astra also lets you use a different logo for retina or high-resolution devices, as well as for mobile devices. You can also adjust the width of the logo. If you scroll down, you’ll also be able to change your site title, add a site tagline, and a site icon or favicon.

I suggest that you explore the theme customizer to see the different things you can do here. Astra Theme lets you do more like change the layout of your header and footer, change blog post structure, change how wide your site is going to be, and many more.

Once you’re done customizing, don’t forget to click Publish to make your changes go live on your site.

Step 7. Customizing your website with Elementor.

Now that your website colors, typography, and logo are all set, it’s time to jump into Elementor and completely change how the website looks to make it match your brand. We’re going to change the images, texts, buttons, layout, and much more.

There are two ways to edit a page with Elementor. First, if you’re in the backend, go to Pages and you should see a list of all the pages of your website. This includes the pages that Astra Site automatically created. Pages that were made with a specific page builder (e.g. Elementor) will be labeled as such:

Hover your mouse over the page that you want to edit with Elementor and click Edit with Elementor.

That’s going to take you inside Elementor.

If you’re on the frontend of your website, you can enter Elementor by going to the page that you want to edit and click Edit with Elementor on the black bar at the top:

The Elementor interface is simple to understand and get used to because it’s pretty similar to the theme customizer. The majority of the screen shows the page that you’re editing while on the left is a sidebar with the controls and options.

If you noticed, the header can’t be seen inside Elementor. The reason is the free version of Elementor is not able to edit headers and footers. This feature is only available to Elementor Pro.

The left sidebar is where you can find the elements that you can add to your page. As you can see, you can add a heading, image, video, button, divider, and more. You can add these elements by dragging and dropping them in your desired area.

Elementor also allows inline text editing which means that you can change the text on the content area itself. Here are some of the things that you can do with texts inside Elementor:

As you can see, you can edit or delete the text right on the content area which makes it so much easier. You’ll find more customization options on the sidebar such as changing the size, color, weight, typography family, and shadow. You can also add animations like simple fades, zooming, bouncing, and more.

You would also want to use your own images to fully make this website your own. You can easily replace or remove an image if that’s what you want. To customize an image, just click on it and the options will appear on the left sidebar. You can upload a new image, change its size, add a border or shadow, add an animation, and more.

For my website, I want to remove this image altogether and just use a different background image. To delete an image, hover your mouse over it and right-click the blue pen icon on the upper right corner. A pop-up menu will appear. Click Delete to remove the image.

To customize the heading, hover your mouse over it and click the dotted icon at the top:

The customization options for the heading will then appear on the left sidebar. To change the background image of your heading, click Style and go to Background. This is where you can upload a new background.

As you can see, after uploading the image, I adjusted the background overlay to make sure the image is clearly seen. I did this by going to Background overlay and adjusting the opacity.

I also adjusted the color of the text to make sure it can be seen, and I adjusted the width of the text so that it doesn’t overlap with the image. I did this by going to Advanced > Custom Positioning and selecting Custom for the width.

Building a stunning webpage is so easy with Elementor. There are just so many options available, so it’s just a matter of exploring every nook and cranny. You can explore it at your own pace, and if there’s something you don’t understand, you can reach out to me via the comment section below or even search Elementor’s comprehensive knowledge base.

I also have an Elementor tutorial where I show you how to get started with Elementor fast. You can watch it here.

Step 8. Secure your website.

It’s also crucial for a business website to be as secure as possible from possible hacking and identity theft schemes. The fact of the matter is some of you might be vulnerable to cyberattacks due to weak passwords, plugin vulnerabilities, and outdated software. These things leave a hole to your website, and you need to find a way to block these holes.

The best WordPress plugin I’ve found so far that does this is iThemes Security. The free version of this plugin already offers you strong security features, and you can activate it just one click.

To install iThemes Security, head over to Plugins > Add New then search for iThemes Security.

Once it’s activated, you will see a new option in the sidebar called Security. Go to Security > Settings and you should see a message about the different features that iThemes can do for you.

Enabling all of these features takes just one click of the blue Secure Site button. Once you click that button, you will see this message:

The Network Brute Force Protection is a feature where users who tried breaking into other sites that are members of this network are automatically banned from breaking into yours. This is a pretty good feature that only iThemes has, so to activate this just provide your email address and click Activate Network Brute Force Protection.

In just a few clicks, your website is now secure. You can do so much more with this plugin, and if you want to learn more about it, you can watch my iThemes Security review and setup tutorial here.

Step 9. Backup your website.

You also have to back up your website to save yourself from the possible unfortunate event of losing any of your data. For this, we’re going to use UpdraftPlus Backup.

To install this plugin, go to Plugins > Add New and search for UpdraftPlus Backup. Install and activate it.

Once it’s activated, it will create a new option under Settings called UpdraftPlus Backups. Click on it to start configuring your backup settings.

Once you’re inside, click Settings. Here, we will set it up so that offsite automatic backups are being made regularly. For the Files backup schedule, I recommend setting it to weekly and retaining one backup. Files don’t change often so that’s good enough.

As for the Database backup schedule, since this changes often, set it to daily and retain 7 backups.

Once you’ve set the schedules, scroll down and hit Save Changes. Then scroll back up again to choose where you want to store your backups. I usually recommend Dropbox because it’s very easy to use, but you can use anything and as many as you like.

Click your preferred remote storage and click Save Changes again. You will then see this message:

You have to click this link to authorize UpdraftPlus Backups to store backups to your selected storage. In this example, since I chose Dropbox, clicking this link will lead me to the Dropbox sign-in page. Once I sign in, I will see this message:

I just have to click Complete setup, and I will be taken back to UpdraftsPlus backend in WordPress with this confirmation message at the top:

If I wanted to make a backup, all I have to do is click the blue Backup Now button. UpdraftPlus will also create backups according to the schedule I made earlier and push those into DropBox.

If you want to restore a backup, just click on Existing backups and click the Restore.

Step 10. Optimize your website.

We’re down to the last step, and in this step, we’re going to see how to optimize your website for search engines like Google. I’m sure most of you have already heard of SEO or search engine optimization. In a nutshell, it’s the practice of making sure your website is optimized the right way to make it easier for search engines to find your pages and show you on the results pages.

SEO has an aspect called on-page SEO, and these are practices that you can implement on your website right inside WordPress to clearly communicate to search engines what your website and content are about.

These are some on-page SEO best practices that you need to implement:

• Write a meta title and meta description for every page and post.
• Add keywords or key phrases and use them throughout the content.
• Add ALT TXT for every image on your page/post.

Now if you’re not familiar with what these things are, that’s okay. They’re pretty easy to learn. The meta title is the title that shows up on Google Results and the meta description is the short description below the title. Here’s an example:

The keyword is what users type in the search engine to search for something. The meta-title is the title of the result, and the meta description is the short description below. These are important details because they tell Google what the page is all about and that it’s relevant to the key phrase “salon new York”.

This is a short list of on-page SEO techniques because there’s literally so much you do here. But for now, we’re going to focus on these.

To do these things, we need a plugin. One of the best on-page SEO WordPress plugins is Yoast SEO, and we’re going to use that in this tutorial. To install this plugin, just go to Plugins > Add New and search for Yoast SEO. Click Install Now and Activate.

Now, when you go to any page or post, you’re going to see this new box below the editor area:

This is where you can add your meta title, meta description, and keywords. To add a keyword, type it in the box below Focus keyphrase:

To add a meta title and description, click the Edit snippet button.

Under SEO title is where you should add your meta title. It’s a good practice to include your focus keyphrase here. In the meta description field, you should give a clear idea of what the page is about and also include the keyphrase here.

As you type something in the SEO title and meta description field, you will see an orange progress bar running below it. This means that the text is still too short. Once it turns green, that means that the length of your text is just right. If it turns red, it’s too long and you should shorten it. Lengthy titles and descriptions get cut off in results so it’s better to stay in the green area.

Another thing that you want to do is to make sure that your sitemap is enabled and actually working. To do that, go to Yoast SEO > General > Features. Scroll down until you see XML sitemaps. Make sure this is enabled, and then click the blue question mark icon. You will then see a link that says See the XML sitemap. Click on this to view your sitemap.

For many of you, this may lead you to a 404 page. But don’t fret. The fix is quite simple. All you have to do is go to Settings > Permalinks. Select Post name and hit Save Changes.

Now, when you try to access the XML sitemap again, you’ll see something like this:

Wrapping Up

And that wraps up this tutorial on how to create a business website with WordPress. I’d like to give you a tap on the shoulders because you’ve done so much and achieved so much by following this tutorial. If you have any questions, just drop them below in the comments section and I’ll be happy to help.

SiteGround

SiteGround is a highly recommended web host online because they have catered to WordPress users and yet still have affordable pricing. They are most known for their fast performance and equally fast support.

Key SiteGround Features:

• Free SSL Certificate
• FAST Knowledgable Support
• WordPress Staging Enviroment
• Free Website Migrations
• Daily Backups

SiteGround is a solid choice for your web hosting needs. They cater to WordPress websites and offer fewer resources than their competitors, but higher reliability.

Check Out SiteGround

Astra Theme

Astra is a free WordPress theme that is focused on speed. Optionally you can purchase the Pro version for $59 which adds some additional settings and options.

Key Astra Theme Features:

• Fast Multipurpose WordPress Theme
• Lots Of Free & Paid Demo Sites
• Newly Added Header / Footer Builder
• Flexable Mega Menu Feature
• Custom Layouts Options
• WooCommerce Support

Astra Theme is a fair choice for any WordPress web design project. I suppose the biggest question is if you even need to purchase a theme these days as page builders are doing all of the same things you would need a theme for.

There are still some good reasons to purchase a pro theme, but for most people, they most likely will be fine with a free theme.

Astra being over 3 years old, in a sense, operates similar to Apple Computers. They wait for others to innovate and bring new ideas, then when a certain feature becomes expected, they implement it there way. This is not a bad thing in any way, when you are responsible for over 1 million websites, it good to be cautious.

Astra's free version offers very limited customizations when compared to other similar themes. So if you were not wanting to purchase a theme, you may want to look elsewhere if you want more options.

Astra Pro on the other hand is a solid choice of theme.

Check Out Astra Theme

Elementor

Elementor is a WordPress page builder that has taken WordPress web design by storm. It has the deepest feature set, yet is very easy to use and master. Elementor is the most full-featured free page builder. There is also a Pro add-on to add additional developer features.

Key Elementor Features:

• Live Front End Page Editor
• Website Personalication Features
• Template & Block Library
• Extensive Mobile Responsive Options
• Most Powerful Popup Builder
• PRO Create Custom Headers / Footers
• PRO Create Post Type Layouts

Elementor is the strongest page builder currently available. They consistently release new features that are in line with current design trends. This means you will be able to keep your website relevant.

Elementor Pro is an incredible value considering all the additional modules and power features that it includes.

If I were starting a new website project today, Elementor would be the page builder that I would choose. I consider it a must have WordPress page builder that is a pleasure to use.

Check Out Elementor