Karthik Balachander
Building your own website can seem like a tough chore, especially for small businesses and freelance professionals who are stretched thin for time and tech knowhow. A website is an essential part of every business in today’s digital-first world, and Webnames’ LiteSite Website Builder helps you check that box, in under 60 minutes, in 6 easy steps. Here is a complete guide to build and launch your website, using LiteSite Website Builder.
What you need
An idea:
What is the objective of your website – is it a brochure for a service or product you offer, is it your resume, is it a gateway to your social media feeds or to your Behance or GitHub portfolios? Consider what you want your website to do for you, and this will help you plan the sections, links and content for your website.
Time:
An average LiteSite website can be built in 1 hour. It may take you anywhere from 30 minutes to a few hours, depending on how long you want your 1-page website to be, the ready availability of content, images and other artifacts for your site.
A Domain Name and LiteSite Website Builder plan:
Customers on the Webnames.ca Classic pricing tier get LiteSite included for free with their domain names. If your domain with Webnames does not include free LiteSite (we’ll show you how to check this a little further down in this post), you can always purchase LiteSite for your domain name.
Six steps to build your 1-page website
Launch your one-page website in 6 easy steps using LiteSite, just follow this guide below and your website could be ready within an hour!
1. Login to your LiteSite editor
If you already have services with Webnames, login to your Webnames account and navigate to Domain Management and click on the domain name for which you would like to launch a website.
Navigate to the LiteSite Tab. If this is the first time you are accessing the tab, you may see a message as shown below:
Click on the Learn More button to find out whether LiteSite is free with your domain or if you need to purchase it as an add-on. Proceed with the steps on screen, depending on your scenario to arrive back at the following screen, where you can open the LiteSite Editor using the button.
2. Select a template for your website
LiteSite includes 5 professionally designed website templates that are mobile friendly and easy on the eye. You can choose from the following templates:
· Catalog – Ideal to showcase a menu or list of services and products; catalog website example
· Portfolio – A great option for a professional resume with flexible sections; portfolio website example
· Calling Card – A snappy, short card-style website for punchy and creative results; calling card website example
· Business – A popular business website template with all the important sections built-in; business website example
· Business template with a sidebar – A static sidebar website which can highlight your logo and links; business sidebar website example
When you choose a template to build on, the sections in the LiteSite editor will automatically get updated. You can change the template of your website at any time, before or even after you publish your website.
If you have already customized the content in your website before you decide to switch templates, you will have the option to retain the old content or reset to the default content (this could vary depending on the type of template since some templates do not have the space for too many sections).
Understanding LiteSite Templates
All 5 templates available on LiteSite are composed of Sections and Content elements. Sections act as containers for various types of content elements and define the number of columns in that part of your website. Content elements can be of multiple types: Text, Images, Video embeds, Maps, Contact forms etc.
3. Add your website content, sections and images
Once you have selected a website template, the intuitive and easy to use LiteSite editor will open with your template and default content. The editor is designed to be WYSYWYG (What you see is what you get), and as you hover the mouse around the various elements of the page, you will notice that blocks are highlighted, with options to edit appearing against each element.
Getting around the LiteSite Editor
The top bar of the LiteSite editor contains all the essential tools you need to build and publish your website. Adding content and modifying design is controlled by the options on the left half of the top bar, while the site-level actions such as Settings, Preview and Publish actions are on the right half.
Saving updates: LiteSite editor saves your changes every few minutes automatically (except if you are using the text editor function). You also have the option of manually saving your updates by clicking the save button on the top right corner of your screen.
Undo: The arrow icon beside Site Settings in the screen shown below allows you to undo the most recent action or change on your website. The Undo option is available if your updates have not been published by clicking the Publish button.
Editing Text:
Editing the design or content of any element on the template is as easy as point-click-change on that element. To edit text on a section that already exists in the template, simply hover on the section and click the ‘Edit Text’ button that will appear. Clicking that option will open a text editor tool that works like popular word processors such as Microsoft Word and supports shortcuts for bold, italics etc.
If you are a pro-user or are comfortable working with HTML, the text editor also includes an ‘Edit code’ option which allows you to paste HTML snippets or directly work on the HTML version of the block.
Edit Section:
To edit the design of a section, such as the background image or a background colour, hover over the section and click the ‘Edit Section’ option which will open the editor screen shown below.
Add new section:
A section, or a fold occupies a full-width swathe of vertical space in your website and acts as a container for content types. To add new sections, click on the Add Section option in the top bar and select one of the 4 column options. New sections get added at the bottom of the template, drag-and-drop to rearrange the position of the section.
Add new content:
LiteSite Website builder supports 7 types of content, pictured below. You could also add other embedded content types using the Text Editor’s ‘edit code’ option. To add new content to a specific section, select the section and then click the ‘Add Content’ option on the top menu. Select the type of content you wish to add and continue configuring the content in the screens that follow.
Adding Images:
The best websites have pleasing design aesthetics and pleasing images that are highly relevant and carefully chosen. LiteSite website builder allows you to search for royalty-free images from Flickr and automatically place them on your website (or) you could upload images from your computer.
To edit an image (or add a new one after adding the Image content type), select the ‘Edit Image’ option after hovering on the element. This opens the below editor, which features an ‘Upload image’ tab or the ‘Image Search’ tab which uses Flickr.
To insert the image, click on the image you would like from the search results or upload the image you need and use the cropping tool to resize your image for the website.
Add a Contact form:
If you wish to receive feedback or sales queries or business inquiries from your website, you can either use the built-in email button or the contact form feature that helps protect your email from spammers. To insert a contact form, select it from the content types and configure the form to meet your needs in the below screen:
4. Website Title, Meta Data, Analytics scripts and settings
Website titles and meta descriptions are useful for search engine optimization and can help attract more traffic to your website from search engines such as Google. LiteSite allows you to edit these setting through the ‘Site Settings’ section of the top menu, through the ‘Metadata and Scripts’ option.
The Metadata and Scripts section also allows you to add header and footer scripts or tags. These tags may be used to place your website traffic analytics scripts such as Google Analytics, Facebook Analytics or pixel or Google Tag Manager scripts.
5. Preview Publish and Test (incl. SSL)
As noted earlier, the LiteSite editor offers a ready preview as you make changes. However, you can preview your website, as it would appear to an external visitor. To preview your website, click on ‘Preview’ in the top menu to open this in a new tab or window.
Once you have previewed your website and are ready to publish, hit the publish button. If you are publishing your website using LiteSite for the first time, you will see the below message which will update your domain name settings to change it from its previous configuration to the website that you have just now built. And voila, your website is now up and running!
Congratulations on building and launching your new website! Your website will automatically have HTTPS installed, when it is built using LiteSite. If you need to make changes to your website, you can open the LiteSite editor and make changes as required and publish to see them take effect immediately.
6. Configure your branded email
When we started this article, I did say there were 6 steps to getting your website live, and that is because your email address is a critical part of your web presence. Although your website may have been published by step 5 above, your LiteSite package entitles you to a Professional Email account with 500MB storage on an email address such as yourname@yourbiz.ca.
You can setup your branded email account as an inbox or as an email forwarder to another email address you use. To create and managed your branded email address, follow the Email Account creation and administration instructions. To configure your branded email on your computer and mobile devices, refer to Email Client Settings.
We hope this complete guide to building a website using LiteSite was useful. If you have any questions, refer to our detailed help documentation for LiteSite or contact Webnames support.