Skip to main content
  • .CA domains

How to build a one page website with LiteSite

By Meghan Graham
Digital Marketing Manager

Can you say everything you need to with a single page? Get the full details on how to create your very own, professional one-page website with LiteSite from Webnames.ca.

What is LiteSite and how does it work?

Sometimes, you can say everything you need to with a single web page. After all there’s beauty in brevity, right? Well, for situations where a little content goes a long way, there’s the LiteSite Website Builder from Webnames.ca.

LiteSite bills itself as an easy-to-use platform you quickly build a simple yet professional-looking one-page website on. In fact, they claim it’s possible for you to get your page live and online in under an hour. We’ll show you how to get there with our step-by-step build guide.

But first things first: Who would be the target audience for a one-page website builder over—say—a more robust platform like Wix or Squarespace?

Well, if you own a restaurant, for example, you may just want a straightforward, no-frills way of showcasing a bit about yourself, along with your menu and operating hours.

A one-page website could also serve as a professional resume with embedded links to past and current work. Graphic designers might use their one-page website as a type of “calling card” with a summary of who they are, along with links to portfolio pieces and social media handles.

Developers could showcase their brilliant new app with a single-page site that provides a bit of tantalizing background info, and then—as users scroll further—a clickable button to download and try the app.

Really, for any business offering up services or products that don’t require a ton of careful explanation, one-page websites can provide visitors with just enough information to pique their interest and act. 

For whatever you might need, LiteSite offers five, mobile-ready website templates. For as little as $2.95 USD (roughly $3.70 CAD) a month, or $35.40 USD a year (about $44.50 CAD), you can get your hands on a free .CA domain, a branded email account and the website builder itself. That’s not too shabby cost-wise.

(Psst – speaking of .CA, we can help get you hooked up with the perfect Canadian domain!)

Before we get into the build guide, let’s get a few things straight. Unlike the full featured web building platforms, LiteSite doesn’t support e-commerce, nor can you install any outside plugins or apps to boost functionality.

You’re also limited to just 5MB of file storage, you can’t export your website to another platform and—of course—you’ve got a single page to work with. Now, if these limitations don’t scare you off, you might be pleasantly surprised at how much customizing you can do on one page.

Get started building your LiteSite page

Now that you’ve got a better idea of what LiteSite is and how/why you might use it, let’s dive into creating your single-page masterpiece!

First things first – you’ll need to create a Webnames.ca account. Once that’s taken care of, log in and navigate over to Account >> Manage and then click on the LiteSite tab followed by the “Open LiteSite Editor” button.

Side note: In terms of hosting, your LiteSite website is built on Webnames.ca’s secure servers located in Canada. That means there’s no need for you to purchase a separate hosting plan.

Once you’ve launched the LiteSite editor, you’ll be prompted to choose from five different templates for your website. Now, five templates doesn’t sound like much, but they each serve a specific purpose. There’s a template for your virtual “business card,” a couple of different “business” templates, a virtual resume and a “restaurant” template.

Think carefully of what you’re trying to accomplish with your one-page website and choose accordingly. Each template can be previewed by selecting a template and then clicking the “Preview template” button.

And don’t worry if you change your mind down the road—you can always go back and select a different template for your website.

Add content and publish your LiteSite page

Next, it’s time you start adding content to your website. Similar to other website builders, like Wix and Weebly, LiteSite features a “What You See is What You Get” (or WYSIWYG) editor. That means anything you do within the editor will closely match how your finished website will look when published.

You’ll find that each template comes pre-populated with place saver Latin text that helps show you the sizing and layout of each section. To add content—like a text block or image—click on the “+” button on the top-left corner of each section. After you’ve finished editing, hit the “Apply” button on the lower-right.

You can also add content to the bottom of your page by clicking the “Add Content” button at the very top of the editor. Whenever you add something, it’ll automatically size within whatever section it’s been added. Don’t like where a section is located? Simply click and drag content (or entire sections) to another part of your page.

Now, let’s take a closer look at adding text, images, videos and more. Again, click the “Add Content” button and then select whatever content type you’re looking to insert.

Text

Adding text is as simple as typing or copying and pasting in your content. Keep in mind that the text formatting will follow your chosen template’s theme. However, you can override this by applying your own formatting within the text editor tool.

Upload and embed images

When adding images to your LiteSite page, remember that all of your content (including images) can’t exceed 5 MB. If you try uploading an image larger than 1 MB, LiteSite will suggest you resize the image with this tool. Not only will this help you cut back on the actual file size, but you can also ensure the image will fit your desired space properly.

Another option for sourcing images is Flickr, a popular image sharing platform. Using LiteSite’s “Image Search” option, you can search Flickr for specific photos, like “sushi” or “kayaks”, then upload what you need.

Add videos

LiteSite also lets you add YouTube videos to your page and the process for doing so is super straightforward. Click “Add Content” at the top of the LiteSite editor, then “Video.” All you need to do now is paste the URL of your desired video—no HTML embed code needed. Remember: any videos that you insert need to be hosted and publicly available on an external site, like YouTube or Vimeo.

Button links

Clickable buttons are another easy piece of content to add. Just enter whatever text you’d like to appear on the button, i.e., “watch the video,” “contact me,” etc., and then paste the URL of where you’d like your button to link. 

Maps

To add a map to your business, you’ll need to go to Google Maps, enter your desired address, click “Share or embed map” and then grab the HTML embed code. Then, on your LiteSite page, click “Add Content” followed by “Maps” and paste the HTML in the “Map HTML Markup” box.

Social media icons

For the social media inclined, LiteSite supports adding social media icons and links from your Facebook, Twitter, Instagram and LinkedIn accounts.

Contact forms

The last major type of content that can be added is a contact form. All that’s needed here is a header for your contact form, e.g., “We’d love to hear from you…”, then select the contact fields you’d like to collect, such as a customer’s name, phone number or email address. You can even add a default thank you message as an additional friendly touch.

Remember—any changes or edits you make are automatically saved. LiteSite does also provide a dedicated “Save” button in the top bar of the editor that creates a restore point that you can roll back to if needed. There’s also an undo button that will reverse the last auto-saved change you made.

Keep in mind—for any changes to be reflected in the public version of your site, you’ll need to hit the “Publish” button first!

Finalize and publish your LiteSite page

Once all your content is added, it’s time to launch your web creation. Head over to “Site Settings” and then “Metadata and Scripts.” Once there, you’ll be able to edit the title of your LiteSite page. This is how it’ll appear in search engine results.

Next, edit your site description. Think of it as a brief, catchy description of your site. Aim for around 150 to 160 characters and make sure you provide people with a compelling reason to click.

Finally, it’s time to save and publish your LiteSite! To push your one-page wonder live, hit “Publish” and then “Publish and Activate” (if it’s your first time publishing your site)! Of course, you can always go back, tweak and refine your layout, but at the very least, we hope we’ve helped set you up on the path to success to build your  first webpage with LiteSite.

Quick LiteSite build questions and answers

What makes LiteSite different from other web builders?
LiteSite is designed specifically for creating simple, stripped down, one-page websites.

Why might you want a one-page website?
You may need a simple page to showcase your business, host a professional resume or serve as a calling card with links to your portfolio of work.

How many templates does LiteSite offer, and can you customize them?
LiteSite offers five distinct templates that offer a good amount of customization options. LiteSite uses a drag and drop editor, so tweaking your page is straightforward and requires no coding experience.

Can you host files on LiteSite?
Yes, but file hosting space is limited to just 5 MB. You’ll want to host any high-res images or videos externally.

What comes with a LiteSite subscription?
You get a free .com or .CA domain, a branded email address and access to the LiteSite webpage builder.

About Webnames

Webnames was founded by the innovator behind the .CA domain extension and is a certified minority and women owned domain registrar and hosting company based in Vancouver, British Columbia.

About the author
Meghan Graham

Meghan Graham is the Digital Marketing Manager at CIRA. She brings over 10 years of experience in marketing and communications in non-profit, technology, SaaS, and UX. She has a Bachelor of Journalism from the University of Ottawa joint program with Algonquin College.

Loading…