Website design: How to design a website for a small business

Table of Contents

All businesses now need a website for brand awareness, credibility or simply to generate leads. If you are an aspiring professional website designer or a business owner wanting to create your own website, this article will give provide you all the steps you need to design a website for a small business as well as the cost to design a website.

Step #1 – Choose the best platform TO DESIGN A WEBSITE FOR A SMALL BUSINESS

Before you start thinking of website design for you or your business, you need to know which platform you wish to build it on. There are DIY platforms which come at a cost of around US$20-US$35 per month which allow you to design websites with easy drag and drop widgets. However, These have limitations both in terms of design, functionality and also regarding how much you can optimise them for search engines.

The majority of websites worldwide run on wordpress. WordPress is an open-source content management system largely used by website designers and power around 40% of the internet’ websites. Now, you need to make sure you choose the “right WordPress”.

WordPress.org

WordPress.org is commonly referred to as WordPress and is open source. You can download it and install it on your server and use it as you wish. It is a free software and you are free to use your own hosting and your own domain name. WordPress.org is manages by Non-Profit WordPress Foundation.

WordPress.com

WordPress.com is build on the wordpress.org CMS and makes it easier for you to build your website at the expense of some flexibility. It is a For-Profit business.

Choosing between WordPress.org and wordpress.com for your website design

For this tutorial, we will be using WordPress.org as we want to build a website and be able to customise it completely and have full control on every aspect from design, functionality, performance and SEO.

You don’t have to download wordpress as most premium hosting providers now offer 1-click wordpress installation.

Step #2 – Purchase your domain name and hosting

Usually, you would choose your domain name with the same provider as your hosting. This makes it easier. However, if you choose to purchase your domain name separately, then you will need to change the name servers to point it to your hosting company ones as this is where your wordpress installation will be.

Siteground offer
Siteground offer

The number 1 hosting provider which is also officially recommended by wordpress is Siteground. Siteground has servers in major vicinities, have fast and reliable servers as well as an extremely responsive and helpful help desk. Choosing a hosting provider which is reliable is key to your website’s success as you want it to be online, secure, accessible rapidly and backed up regularly.

included with siteground
included with siteground

Siteground offers all this and their cost is also affordable for everything included in their offer. They also offer free SSL certificates which is essential for your SEO as well as for your website’s and business online credibility.

siteground plans details
siteground plans details to design a website for a small business

All you need to do is to choose your package and follow the prompts. You will then be able to start creating your website. The first thing you will do is create a website and choosing your domain name. You can see the step in the video below.

Step # 3 – Install WordPress

Once you have purchased your domain and hosting you can head to “create a website” and purchase your domain name at the same time. You will choose to start a new website and it will install a fresh copy of WordPress on your hosting.

wordpress login to design a website in wordpress
wordpress login.

Once the installation is finished, you will be able to access the backend of your website by typing your URL followed by /wp-admin. For example, if your website is www.websiteexample.com, then your login path would be www.websiteexample.com/wp-admin.

Step # 4 – Choosing the best page builder for WordPress

Elementor Pro
Elementor Pro

Once you gain access to your WordPress dashboard by logging in, you will need to install a page builder before starting your website design. A page builder will allow you to design your website pages and insert your text and images.

We use exclusively Elementor Pro. Elementor Pro is a drag and drop page builder and you will be able to build amazing web pages without any coding knowledge. The free version has a lot of functionalities, but if you want to build a professional website, you will need the pro version to get access to all the widgets as well as to the theme builder.

Elementor pro packages for website design
Elementor pro packages for website design

Choose your Elementor Pro package here. If you are a small business, we would recommend choosing at least the advanced package. That way, if in the future you decide to branch out some services or simply create a sub domain for a new section of your website, this will require a new WordPress installation and thus another licence. You will then not have to purchase a new licence.

elementor pro dashboard
elementor pro dashboard

After purchasing your desired package, you will have access to your dashboard. Look for the download button and get your ZIP file. If you are using Safari, the file will automatically be UnZipped. You will need to compress it again to create a ZIP archive.

Once your ZIP file is saved on your computer, go to your WordPress dashboard>Plugins>add new and search for Elementor. Install the plugin and then activate. Then go to >Plugins>add new>upload. Select your ZIP file. Then install and activate your plugin.

Step # 5 – Install the Hello Theme

choosing the hello elementor theme
choosing the hello elementor theme

Elementor works best with the Hello Theme which was developed specially for it. This is a blank theme on which you will be able to easily build your new website. Go to appearance on your dashboard and select Theme. Then, search for hello elementor, install and activate the theme.

Step # 6 – Create a coming soon page

elementor coming soon
elementor coming soon

Now that you have installed Elementor Pro, head to Elementor>tools and click on the maintenance tab. From here, you can set your website into maintenance mode. That way, your website visitors will see a nice coming soon page instead of seeing your website while it is under construction.

Choose the coming soon option and if you haven’t created a “coming soon” template yet, click on the “create one” link. Choose a name (commonly “coming soon”) and select publish and then edit with elementor.

Now you will have access to the editor for the first time. For coming soon pages, usually you don’t have headers and footers. Setting the page to “Elementor Canvas” will automatically remove any header/footer from the page.

From here, you have 2 options. Creating a page from scratch or using one of Elementor’s multiple blocks and pages. On the editor, click on the folder icon and you will open the library.

ELEMENTOR PRO LIBRARY
ELEMENTOR PRO LIBRARY

You can choose any preset and edit it to match your brand.

Step # 7 – Plugins

Now that your website visitors are redirected to your coming soon page, you can start working on your website. Before starting the website design, it is very important that you make your website secure and SEO friendly to have a good foundation.

installing wordpress plugins
installing wordpress plugins

To install the required plugins to achieve this, head to plugins>add new and search for the plugins by name. Then install and activate the plugins.

SEO plugin rank math

Rank Math will be extremely useful in setting up your website’s SEO. The free version offers plenty of functionalities like optimising blogs, website copy, creating a sitemap and many more technical aspects. The paid version will also allow you to track your keywords. They have tutorials for each functionality and is extremely easy to use for anyone.

Wordfence for Security

Securing your website and protecting it against attacks is essential. Wordfence offers a great deal of security with the free plugin and it also offers a pro version which gives more flexibility and advanced options like country ban. This can be quite useful to block countries with which you have no business and which are famous for hacking like China or Russia.

Performance plugins

You will also need to have a performance plugin to boost your website’s loading speed. There are a lot of plugins available for this and our favourite ones are autoptimize, wp-optimize and nitropack.

Autoptimize
Autoptimize
WP-optimize
WP-optimize
Nitropack
Nitropack

All of them come with quite similar functionalities and offer both free and paid plans.

However, our favourite remains Nitropack as it is extremely easy to use and has brought the best results so far. You will be required to create an account on their website. Then , on your WordPress dashboard, head to Nitropack and click connect. This will require you to login with your login credentials you just used to register on their website. This will connect your account automatically and start optimising in the background.

Step # 8 – Start the website design and Create pages

You are now ready to design a website in WordPress.

Design a website in WordPress

Go to pages and click on “add new”. Choose a name for your page (Ex. home, about etc.). Just as in step #6, you will use the editor to create a page and you can access the library to insert blocks or entire pages.

Headers and footers

themebuilder
themebuilder

Elementor pro has a theme builder which you can use to build headers and footers which will display on the pages you select.

You can go to Templates > Theme builder and if it is not yet activated, you will see an option to try the new visual theme builder.

Elementor theme builder
Elementor theme builder

Now you can create a header or a footer and just as with the normal page editor, you can start from scratch or import one of Elementor’s template from the library.

Elementor library for headers
Elementor library for headers

You can repeat the exact same step for footers.

how to create a header or footer in elementor pro
how to create a header or footer in elementor pro

When you are happy with your design, hit publish and then choose where you want the item to be displayed on your website. Usually, for convenience, you can on add condition and select “Entire site”. Save and close.

Responsive design for website

responsive design for website
responsive design for website
website with responsive design
website with responsive design

Make sure to use elementor’s responsive UI to check your mobile and tablet version while designing. Most traffic is mobile nowadays and if you want to provide a good user experience and rank in Google, responsive design for website is essential.

Make sure to click on the responsive icon at the bottom of your editor and checking each page. You can then toggle between breakpoints on the top of the editor screen.

Elementor allows you to change dimensions for images, text and columns for specific viewports. So, changing a dimension for the mobile viewport won’t affect your design for the desktop one.

Step # 9 – Internet Marketing

When you are done with your website design, you must now make sure that your website is optimised for search engines and that it is discoverable. We have a very comprehensive article about internet marketing but here is a summary of the essential tasks to perform on your website:

Website copy

rank math seo on elementor
rank math seo on elementor

You will notice that each page has a SEO score (if you installed Rank Math SEO). Rank Math integrates seamlessly with Elementor to give you step by step instructions on how to raise your SEO score. This score is based on SEO best practice and guidelines and reaching 100% is not absolutely necessary as each website is different; However, a decent 80% or more is expected.

Content is and will always be king. This is how Google will rank your website.

Blogs for SEO

Content is king but you also need fresh content. One way of publishing fresh content regularly is to publish blogs. Make sure you do your keywords research and write about trending subjects in your industry.

Publishing at least 2 blogs per week would be good to start with. If you are not sure what to write about, reach out to SEO experts who can take care of this whole process for your.

Locate and submit your sitemap

You need to submit your sitemap to Google search console to make sure that it gets indexed and crawled regularly.

rank math sitemap settings
rank math sitemap settings

To do this, on your WordPress dashboard and go to Rank Math>Sitemap Settings and copy the link of your sitemap.

Google search console
Google search console

Next, go to Google Search Console. If you have a Google account and are already signed in, it should bring you to the above screen. Otherwise, create a google account before heading to the search console page.

Insert your website URL with the http or https protocol and hit continue.

html tag manager search console
html tag manager search console

Now choose HTML tag as your verification method and copy the code to your clip board. Keep this page open in a separate tab.

header and footer
header and footer

Back to your WordPress dashboard, head to the plugins area and search for “Insert headers and footers” by WPBeginner. Install and activate the plugin.

insert header and footer for wordpress
insert header and footer for wordpress

Now head to Settings>insert headers and footers and paste the code in the head section. Scroll down to the bottom and click on save.

verify website on google search console
verify website on google search console

Now, you can go back to the search console tab and click on verify. It will verify your website and you will have access to your search console dashboard.

sitemap in left panel of search console
sitemap in left panel of search console
sitemap submission field on search console
sitemap submission field on search console

Now that you have access to your search console dashboard, go to sitemap and paste your sitemap URL in the respective field and submit.

Step # 10 – Setting default home page and permalinks

One last thing to do before publishing your website is to make sure that your homepage is set to the correct page. Usually you want your “Home” page to be the landing page when users type in your website address.

wordpress customiser
wordpress customiser
wordpress homepage settings
wordpress homepage settings

To verify and change this is necessary, on your WordPress dashboard, go to appearance>customise. Then select the page you want to be your homepage.

Step # 11 – Disable coming soon mode

Your website is now ready and all you need to do is make it accessible to the internet! Go back to Elementor>tools and go to the maintenance tab and deactivate the maintenance mode. Don’t forget to save your changes.

Your website is now live!

Cost to design a website

The cost to design a website depends largely on the hosting provider you will choose as well as the tools you will purchase. In our model, you will spend around US$300 per year for your hosting with Siteground for premium quality hosting and customer service, between US$49 to US$79 per year for your Elementor Pro licence and if you choose to optimise your SEO and security you can count an additional US$59 per year for Rank Math and US$ 99 per year for Wordfence.

Key learning points

Website design is not just about aesthetic. It is also about performance and discoverability. The cost of website design to an individual can be relatively high. It is often better to go through an agency. You will gain TIME, get better QUALITY and the agency often has agency packages for each of these required purchases and the cost is amortised on their sales.

This means that you will end up paying less for these functionalities. You should rather invest in areas where you are not an expert like: DESIGN, SEO.

AB designs builds custom designs and is very performance orientated. SEO remains our core focus when we build websites.

If you want a unique website design and you want it to reach your audience, then ask my team how!

We can help.

Recap

how to design a WordPress for a small business with Elementor Pro

This is a recap of all the steps you need to design a website for a small business

Completion of project 1 day

STEP #1

wordpress login to design a website in wordpress

CHOOSE THE BEST PLATFORM TO DESIGN A WEBSITE FOR A SMALL BUSINESS

Step # 2

Siteground offer

PURCHASE YOUR DOMAIN NAME AND HOSTING

STEP # 3

siteground websites

INSTALL WORDPRESS

STEP # 4 

Elementor Pro

CHOOSING THE BEST PAGE BUILDER FOR WORDPRESS

STEP # 5

choosing the hello elementor theme

INSTALL THE HELLO THEME

STEP # 6

CREATE A COMING SOON PAGE

STEP # 7

installing wordpress plugins

PLUGINS

STEP # 8

elementor library

START THE WEBSITE DESIGN AND CREATE PAGES

STEP # 9

rank math seo

SEARCH ENGINE OPTIMISATION

STEP # 10

wordpress customiser

SETTING DEFAULT HOME PAGE AND PERMALINKS

STEP # 11

elementor coming soon

DISABLE COMING SOON MODE

Estimated Cost: 480 USD

Supply:

  • Laptop or desktop computer

Tools:

  • Siteground hosting
  • Elementor Pro
  • Rank Math
  • Wordfence

Materials: none

Share this post

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

DIGITAL CREATIVES

RESPONSIVE WEBSITE DESIGN | SEO | DIGITAL MARKETING

Our team of digital creatives takes care of designing a tailor-made online identities for businesses adapted to their professional activities and respective needs. More than creatives, we are experts in digital marketing and search engine optimisation.

Recent articles

HOW TO BECOME A PINTEREST MANAGER Learn what a Pinterest manager does