Not sure which website builder is best for your business website? In this post we assess three popular codeless builders to help you decide.
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:
- Squarespace
- Wix
- Weebly
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.
- Includes SSL certificate
- Customizable domain name
- 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
- Sales analytics
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.
Need a logo for your small business? Click here to hire a creative freelance designer now
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.
If you’re not sure which pages your website needs, our post about Sitemap design will help you.
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
- 500MB storage
- 500MB bandwidth
Combo plan $10/month (billed yearly)
- Removes Wix ads
- Clean custom URL with Wix branding removed
- 3GB file storage limit
- 2GB bandwidth limit
Unlimited plan $14/month (billed yearly)
- Unlimited bandwidth
- 10GB storage
- All Wix ads removed
- Visitor analytics
Pro plan $19/month (billed yearly)
- Everything in Unlimited Plan
- Unlimited bandwidth
- 20GB storage
- Clean custom domain
- 2 hour HD video upload limit
VIP plan $27/month (billed yearly)
- Everything in pro plan
- Priority support
Business basic plan $18/month (billed yearly)
- Minimum plan for ecommerce websites
- Unlimited bandwidth
- 20GB storage
- 5 hours of HD video upload limit
Business unlimited plan $28/month (billed yearly)
- Everything offered in Business Basic Plan
- 35GB storage limit
- 10 hours of HD video uploads
Business VIP plan $38/month (billed yearly)
- Everything offered in unlimited plan
- Priority support
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).
Weebly pricing for small businesses
Weebly offers 4 different subscription plans.
Free plan: $0/month
- Displays a Weebly ad at the bottom of every page
- Does not support ecommerce website
- URL is a subdomain of Weebly
Personal plan: $9/month, or $6/month billed annually
- Clean customizable URL
- Weebly ads are still displayed.
Professional plan: $16/month, or $12/month billed annually
- Removes all Weebly ads
- Clean and customizable domain name
- Supports ecommerce websites
- Unlimited storage space
Performance plan: $29/month, or $26/month billed annually
- Everything offered in the Professional plan
- Advanced ecommerce features such as automated abandoned cart emails and integrated shipping solutions.
How to build a small business website with Weebly
We will be assessing Weebly’s free subscription. After ssigning up to a Weebly account we are asked to select the type of site we want to build. Since we are creating a website for a small business we’ll select an ecommerce store.
This then takes us to the quick set up process where we’re asked to specify a website name and business address. Once that’s done and our template design is selected, we can start designing.
When the editor loads, we need to select our domain name, or URL. Since we’re using Weebly’s free theme, we can only settle for a subdomain. Once a subdomain for our search phrase is available, we’ll click ‘Choose’
Clicking the blue ‘Publish’ button in the top right will publish our website and display our URL. If you click on the URL it will open your website in a new tab and you can keep referencing it to keep track of your design progress. Just make sure you refresh it every time you check it.
Now let’s start making the home page our own. First we will edit the site title in the upper left. Any changes will be reflected across all pages. You can either specify an alternate title, upload your logo or remove it completely.
We like a clean and spacious website so we’ll remove it completely.
If you need a logo for your business, hire a talented freelance graphic designer today
Clicking on any of the elements on the page will instantly reveal their editing options, so it’s difficult to get lost in the design process. We’ll change the headline text and background image
To save your work after making a change, hit the green ‘Save’ button in the top right.
To delete an element, hover over it and click on the red X in its top right corner.
To add a new element to your template simply drag your desired widget from the left menu and drop it into the location indicated by a blue line.
If the widget menu on the left ever disappears, clicking ‘Build’ in the top menu will instantly reveal it.
To edit any of the other pages, click pages in the top menu and select the page you want to work on. You can also create new pages from here.
How to add an anchor link to a Weebly website
Let’s insert an anchor link so that when the CTA button on our banner is clicked, the web page auto scrolls down to the headline ‘Be One with the Mountains’
First we need to drag and drop a code block into our intended destination.
You’ll need to click on ‘see all elements’ in the left hand widget menu to uncover the code block widget.
We need to insert some HTML code to turn this widget into an anchor point.
First we need to think of a unique anchor ID without any spaces. We’ll choose ‘onewithmountain’ to relate our anchor to its position the page.
We’ll then paste the following HTML code into our codwidget and replace YOURID with our anchor ID.
<div class=”anchor”><h2><a name=”YOURID”> </a></h2></div>
It’s important to include a space at this point in the coding to prevent any text being displayed in our HTML block.
To connect our button to our anchor point, we’ll click on our button, navigate to link > website link and then paste the URL of our current page followed by a hashtag and our anchor ID.
For example, if the URL of the page we’re adding an anchor link to is:
PennyFarthingEuroTours.com
Our anchor link will become:
PennyFarthingEuroTours.com#onewithmountain.
We’ll then paste this URL into our button.
How to add an ecommerce store to a Weebly website
Now let’s add an ecommerce store to our wonderful website.
To do this we’ll click on pages in the top menu, hit the plus button, then select ‘Product page’. This will direct us to the product dashboard where we can upload our inventory, set pricing and create product descriptions.
After all our products are added they’ll be accessible via the dedicated store link in the main menu.
How to add a contact form with Weebly
To add a contact form to your small business website with Weebly, drag the contact form widget into your intended destination on the page.
You can specify the email address all contact form submission are sent to by clicking on the form and selecting ‘Form Options’
All the data from each form entry will then be sent directly to your specified email. This will save you from having to continuously log in to check for any new entries.
Adding a contact form to the bottom of each web page will always give your visitors the option of making contact without the inconvenience of locating and loading a separate ‘Contact Us’ page.
Weebly for small business websites final thoughts
Weebly gives small businesses the opportunity of instantly publicizing their services online for free without having to wait for the appropriate marketing funding to be raised.
Even though Weebly’s free subscription comes with Weebly display ads and a branded URL, you can still build a professional looking business website that effectively advertises your services and even accepts contact form submissions.
Freelancers can you take your small business website to a competitive level
The business landscape is more competitive than ever and to effectively stand out you need to implement the most advanced customer acquisition strategies.
That sounds pretty expensive right?
Not necessarily.
Freelancers can help you elevate your standard business website to an elite level at a fraction of the cost of hiring professional agencies. The freelancer route also avoids the logistical nightmare of working with multiple businesses, all hired talent and associated costs are conveniently managed through the single platform