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

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.

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.

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.

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.

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

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.

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.

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

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

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.

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.

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.

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

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.

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.

You can repeat the exact same step for footers.

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

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

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.

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

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.

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

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

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.

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.

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.

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 aesthetics. 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 amortized 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