Build your small business website yourself without any coding knowledge
So you're a small business in need of a website, but funding is a little tight. If you were in this situation a few years ago, your only option would be to hire an expensive web agency to have your website coded from the ground up by professionals.
But it's 2020 and web development technology has evolved rapidly.
Now you can build a spectacular business website yourself without coding knowledge and at the fraction of the cost of a hiring professional web agency.
In this post we'll show you how to build your very own small business website with 4 different website builders:
Building a small business website with Squarespace
We'll kick off our list with the stunning codeless website builder Squarespace. Squarespace offers a variety of world class template designs that can be readily edited for any type of business.
Squarespace pricing for small businesses
Squarespace offers 4 different subscription plans
Personal Plan: $16/month, or $12/month billed annually
Best for display (or brochure style) websites.
Does not accommodate online sales.
WHOIS privacy to protect domain registration information
Business Plan: $26/month, or $18/month billed annually
All features offered in Personal Plan
Minimal plan for selling products online
Basic Commerce Plan: $30/month, or $26/month billed annually
All Squarespace transaction fees removed from online sales
Ecommerce integration with instagram
Advanced Commerce Plan: $46/month, or $40/month billed annually
All features in Basic Commerce plan
Abandoned cart recovery emails
API integrations for 3rd party software
Integrated shipping solutions
How to build a small business website with Squarespace
Now let's attempt to actually build a small business website from scratch using Squarespace. The first thing you'll need to do is
sign up to a Squarespace account. It's free to sign up and build a website but you'll need to sign up to a paid subscription to publish your website on the internet.
Once signed up, the first thing we'll need to do is select a template design to edit. This is what makes building a website with Squarespace so quick and easy, once your template is selected it's then a simple matter of editing the text and images to reflect your business identity. Adding additional elements is also seamless, we'll show you how to do that too.
With our template design selected, we'll click on 'start with this design' and then follow the quick step by step setup to upload our logo, select our color scheme and topography style.
Once the quick setup is complete, we're taken to the entry screen for our website builder. At this point it's a good idea to create all the pages you'll need for your website.
To create a new page click on pages in the left hand menu, followed by the plus icon.
To delete an existing page, click on its corresponding cog and then scroll down to 'delete page'
You'll also notice an SEO option in the left menu. This will allow you to edit the title and meta description of each page which makes
optimizing all of your website pages to rank on page 1 of Google super easy.
To start editing your website design, select a page and then click 'edit' at the top.
Let's make this home page our own.
First we'll edit the headline and tagline. To do that, click on each text field and type over it. This is how you edit all text fields.
To edit the button text, click on the button and then the pencil icon.
To change the background image, we'll hover over the background and then click on its associated pencil icon.
To change the opacity of the background image (make it darker or lighter) click on its pencil edit icon, navigate to 'background' and then adjust the opacity slider to your liking.
To save your work, hover over the 'Done' option in the top left and then click 'Save'. Make a habit of always hitting that save button to keep your hard work preserved.
How to add an anchor link with Squarespace
When an anchor link is clicked, a web page scrolls down to a specified location. Let's add an anchor link to our orange 'Learn more' button so that when it's clicked, the page scrolls down to the first block of content underneath.
First, we'll add an anchor point to our intended destination. We'll hover over the title of our scroll destination until we see a black bulb indicating an entry point like so:
Clicking on the black bulb will reveal all of the elements we can add in this spot. We need to select a code block.
Even though Squarespace is a codeless web builder, we need to insert some HTML code into this code block. Don't worry we'll make it really easy for you.
First we need to think of an anchor ID for this location. To help you keep track of all your anchor ID's make them relevant to their locations by summarizing the headline they are referring to.
Here is our anchor ID:
meetingroomsbooked
An anchor ID can't include any spaces.
Now, we need to insert our anchor ID into this line of HTML code and replace ANCHORID with our ID:
<p id="ANCHORID"> </p?
Make sure you include a space between the two opposing brackets towards the end so that your anchor ID is hidden and not displayed as text.
We now need to insert an anchor link into our button that points to this anchor ID.
The anchor link is simply a hashtag followed by our anchor ID, so in our case it will be
#meetingroomsbooked
To add this anchor link to our button, we'll click on the button's edit option and then paste this URL in the clickthrough field.
How to add a new section with Squarespace
To insert additional sections into your Squarespace template simply click the plus icon and choose the item you want to add at that point.
Let's add a new section beneath our text block.
Squarespace offers a variety of section designs that can be added. Clicking the categories on the left will preview all the associated section designs to help you choose the optimum design.
We want to insert a pictured list.
Editing this new section is the exact same process as before, simply clicking the edit icons and modify its contents.
How to add an ecommerce store to a Squarespace website
Let's turn up the technical meter and append an ecommerce store to our website. We'll make this button link to our online store.
To add an online store, navigate to pages, click the plus icon and then select 'Store'
Keep in mind that you'll need to sign up to at least the basic commerce plan to facilitate an online store.
Next, select your online store design. We'll choose the second option.
To edit any of the products simply click on them and then select 'edit product' at the top.
To rearrange any of the store products, click on them and drag them into your preferred order.
To delete a product, double click and then select 'Delete'
How to add a contact form with Squarespace
To make the most of every visitor you need to offer them the opportunity of seamlessly initiating contact. The most effective way of doing this on a budget is with a well placed contact form.
Here's how you add a contact form with Squarespace.
Click on the plus icon in the area you want to insert a contact form.
Then select a from style within the form category.
Once inserted, click on any of the fields to edit them.
Squarespace for small businesses final thoughts
Squarespace is an intuitive website builder offering a gorgeous selection of readily editable templates. With Squarespace you always have the option of upgrading your display website to an ecommerce store within just a few clicks. Squarespace is a great choice for small businesses that want to leave a lasting impact on their visitors without the heavy web development agency price tag
Building a small business website with Wix
We move on from Squarespace to its greatest rival, Wix. You may not have heard of Wix before, they're rather 'subtle' with they're advertising efforts. It's not like they troll every Youtube video you watch or anything.
In fact, because you're reading this post, don't be surprised if in the near future, your houseplants start transmitting messages about how easy it is to build a website with Wix.
All jokes aside, let's see whether a small business really can build a Wix website in minutes.
Wix pricing for small businesses
There are 8 different Wix pricing plans to choose from but only the business plans offer ecommerce functionality.
Free Plan
Wix ads are displayed on all pages of website
Website URL is a branded subdomain. Example, username.wixsite.com/siteaddress
Combo plan $10/month (billed yearly)
Clean custom URL with Wix branding removed
Unlimited plan $14/month (billed yearly)
Pro plan $19/month (billed yearly)
Everything in Unlimited Plan
2 hour HD video upload limit
VIP plan $27/month (billed yearly)
Business basic plan $18/month (billed yearly)
Minimum plan for ecommerce websites
5 hours of HD video upload limit
Business unlimited plan $28/month (billed yearly)
Everything offered in Business Basic Plan
10 hours of HD video uploads
Business VIP plan $38/month (billed yearly)
Everything offered in unlimited plan
How to build a small business website with Wix
Now let's sit ourselves behind the controls and test Wix's website building capabilities.
After
signing up to a free Wix account we are presented with two different building options, we can either build a website with Wix ADI or via the conventional builder.
Wix ADI auto builds a website based on your answers to a series of questions, then, all you have to do is replace the text and images.
Creating a website through the Wix Editor gives you more control over its features and aesthetics so we'll choose that option.
We then need to choose a template design to work with. Wix has over 300 template designs (3x more than Squarespace!) so it might take you some time to choose one. Our post discussing
11 amazing free Wix templates might help speed up your decision.
Once you've chosen a template, click 'edit' to start sculpting it.
Clicking on any of the text fields will allow us to instantly type over them.
To change the font or text sizing, double clicking on a text field will display its customization options. Make sure you highlight all of the text you want to adjust.
To delete an element with Wix simply right click and select delete.
Undoing an action in Wix is the same process you follow on your computer. Hit CTRL+Z on Windows and Command + Z on a mac
To change the background image, click on it and then select the 'Change Strip Background' button. You can replace the background image with a video if you like, but this does deplete some web storage. Using a compressed image will save your storage space while ensuring your website follows
best SEO practices by loading as fast as possible.
To make our headline text more readable, we'll need to decrease the opacity of the background image. To do this click on the background image > Change Strip Background > Settings, and then adjust the opacity slider.
How to add an anchor link with Wix
Let's add an anchor link to that when visitors press the 'Book Now' button on our banner, the webpage automatically scrolls down to a specified location, which is our case is the title of our next content block.
The first thing we'll need to do is drag and drop an anchor to our scroll destination. To do this click on the plus icon on the left then navigate to Menu > Anchors > and drag and drop the anchor into plac.
Once the anchor is dropped into place we;ll need to give it a unique identity. To help you keep track of multiple anchors on the same page, give it the same name as the text it's linking to. For best web development practices, don't include any spaces.
You should then see a nice visual representation of your anchor's location.
We now need to add a link to this anchor in our 'Book Now' button. To do this, double click on the button then navigate to link > Anchor > Anchor on this page > Select your anchor
And that's it!
To test a newly added web page function at any time, hit the 'Preview' button in the top right.
There is also a Save option up there that's worth checking every now and then. Wix is usually pretty quick with auto saving your work. You'll see 'Saved' displayed in the top right when your work is autosaved, otherwise you can hit the 'Save' button.
For small businesses offering services, Wix provides a gateway to process service purchases.
To add a services blade hit that lovely plus icon on the left again (are you noticing a pattern yet?) then navigate to Bookings > Service list
Double clicking on this services blade and clicking on 'Manage Services' will take you to the services dashboard where you can set your pricing and services details.
There is even a booking calendar that will display all of your booked services. This booking management system also prevents double bookings so you can completely outsource your annoying booking admin to Wix. Pretty cool.
You will need to upgrade to the Wix Business Premium Plan to use this services feature.
Adding new sections to a Wix template is a simple matter of hitting that plus icon on the left and dragging a new section into place.
Let's add a new quote block to this point.
To change the background of the right column, click on the background and then select 'Change column background'
To reposition any of the elements in the block, click on them and drag them into place.
How to insert a contact form with Wix
Lets create a Contact Us page and insert a contact form. To do this we'll navigate to the drop down pages menu in the top left then select 'Manage Pages'
This is also how you access other pages of your website you want to edit, select them from this drop down menu.
After clicking 'Managing Pages' we'll then select 'Add Page' and name our new page.
To insert a form on the page, select the plus icon from the left menu > Contact & Forms and choose a contact form design.
To pop the hood and tinker with the form settings, click on the form and then select 'Form Settings'
In the 'Submit Message' tab you can specify the form submission actions. This could be a redirect to another URL or a file download link if you're
offering free resources to generate leads.
You can also set an automation sequence that's activated with each form submission. This could be as simple as a thank you email with next step prompts, or an instant chat message that automatically pops up with your custom message.
Wix for small businesses final thoughts
We hate to admit it, but Wix's obnoxious ads are actually true. You really can create a stunning website in minutes with Wix. Even though Wix has a greater variety of web templates, they're still eclipsed by Squarespace's stunning designs. That being said, the impressive breadth of website functionality on offer means that any small business can create a powerful website with Wix without knowing a single line of coding.
Building a small business website with Weebly
Weebly is a powerful website builder that offers a free subscription, so if you're a
sstartup in desperate need of funding you can create a Weebly website without begging your parents for some cash (again).