How to Create a Website

You want to build a website, but don't know where to start? Perhaps it's been in your too-hard basket, or you thought that you'd need to learn about coding and web design first?

Well, you don't need to know anything about web design or HTML/CSS coding! In fact, you can build your own website today!

How to Build a Website in One Day

Yes, it is completely possible to build a basic website in one day. This means you can set up a website which has a home page, about page, shopping page and products, blog page, contact page and T&C page in one day

We will walk you through how to:

  • Get website hosting on NZ's top website platform
  • Register your domain name
  • Design your website
  • Add content to your website
  • Going live

Register a Domain Name

A domain name is like the address of your website. You need to register your domain name in order for it to be connected to your website so people can visit it.

Generally people register domain names for a period of 12 months or longer. It is best that you register your domain name with the same company whom you are using for website hosting. We recommend Website World for both of these.

To register a domain name, you first need to check that it is available. Enter your preferred domain name and suffix into the search box on the Website World Domain Name Registration page. 

If your domain name is available, follow through with the purchase and registration process. If it isn't, try a different variation. The article Tips On Choosing a Domain Name will help you identify other possibilities.

Building Your Website Using a Website Builder

Building a simple website is achievable for anyone, no matter what their level of website experience. We recommend using the free website builder provided by Website World for your new website. Since 2000, they've been helping customers throughout New Zealand and the world build self managed and DIY websites.

Use the Setup Wizard on Website World to Create a Trial Website

Sign up for a free trial website by:

  • Clicking upon the Start Your Trial button
  • Clicking on the Select button on the Decor Theme website template (you can select another theme if you prefer, just know that during this example, we will demonstrate using the Decor Theme template).

Next you will need to choose from one of the pre-designed templates. You can change your template at a later stage too.

After you've chosen your template, you'll be asked to select the type of website you want to build (restaurant, shop, trade ordering, accommodation, artist, blogger, appointment scheduling, tradie). This lets us pre-populate your website with the appropriate pages for your industry. We've chosen to build a shop for our demonstration, as this includes a built in shopping cart to sell online with.

Next you will need to enter your contact details, along with a name for your website. For this demonstration, we will use the name My T-Shirt Shop

You will now receive an email from Website World which contains login details and a temporary password for your trial website. After entering your temporary password, you will be directed to the welcome page inside the CMS (content management system). It is here where you will be editing and designing your new website.

The template and type of website we chose resulted in some pages being automatically added as example pages. As the site is not live, you will be able to add and remove pages, or rename them without any penalties from search engines (which could occur if the site was live).

Below is the Welcome Dashboard for your new website. It is on this dashboard that you can edit everything for your website.

Adding, Removing and Renaming Web Pages

To add a new page to your website, click on the Add Page button on the left hand site of your screen (red arrow), or from the drop down menu of the Web Pages tab, the Add Page button (yellow arrow).

On a new screen, you will be asked what kind of page you would like to add. For the purposes of this course, we will add a Single Page (Drag and Drop).

You will then be asked to add information about this page: the menu button text, page heading and SEO file name. Below is a screenshot of the information we have added for this course, for the new page which will be an About Us page.

After clicking on the Add New Page Now! button, you will be directed to your new About Us page. It will also be automatically added to your menu display on the left hand side of your screen, plus your menu bar on your website.

Deleting and completely removing a page from a website when it is not something we recommend due to SEO reasons. You should instead change the visibility of the page to block it from being found and viewed, plus remove it from the menu. If you must delete it, be sure to redirect it's URL to a live page.

As a trial site, which your website is currently, it is fine to remove a page and delete it. To do this, click on the Web Pages button, which will in turn open up a site map page listing all of your current pages. For this example, we are going to delete the Subscribe page. First click upon the wheel cog icon next (red arrow). 

This will then open up a screen giving you options for this page. Choose the Delete This Page button option. A warning message will pop up. Click on the Delete Page Now button, then close that screen by clicking on the X in the corner.

Renaming a page is also done via the web pages site map page. Click on the Web Pages button, and select the Shopping page wheel cog icon this time. The area you want to edit are the button text, page heading and SEO filename. Be aware that once your website is live, you should not change any SEO filename as to do so creates broken links on your website, and search engines believe that as it has a new filename, it is a new page. You consquently lose any SEO benefits that page had. You can change your filenames without penalties if your site is still in trial mode however.

For the purposes of this course, we are changing the button text from Shopping to Shop, and the Page Heading from Shopping to T-Shirt Shop.

To save the changes you have made so far on your website, please click on the green Publish button. This will not make your site live, but will instead publish the changes to your trial site, saving them.

Adding a Logo to Your Website

One of the best ways of branding your website is to add your business logo to it. Hover over the Design option button on the menu, then choose the Background or Logo Images option.

Under the Design Options page which opens up, you'll see that the Text Logo (website name) is being shown by default. We're going to replace this with a logo image. Click the image icon (change image) to add your logo. 

Once again you will be taken to the Image Wizard where you are able to browse and then upload an image from your device (it's best if your logo is already the size it needs to be, which is 910x120px). This time, select the logo option from the Resize drop down - 910x120 Logo. Your logo will be automatically placed where the website name text was, above the menu. Press Publish to save your work so far.

Design Your Website

Now you're website has been built, you need to learn how to change the colours and fonts of it, to make it your own.

Changing Your Font Type & Font Size

Changing your font type and size can be done through the Design option on the menu (for the entire website) or on each page (for individual pages). First we will focus on the font for the entire website. From the Design menu, select Colours & Fonts.

Scroll down the page until you see the Fonts box options. Here you will be able to edit the: General Font, Heading Font, Font Size and Line Height. 

Changing the Font on a Specific Website Page

Open up your T&C page, as it is here we will change the font type and size for this page alone.

First, highlight the sub-heading 'Returns Policy' and then click the drop down arrow next to the Font Family box in the editing toolbar. Note that this will look different if you use an alternate editor other than the one we are currently using, TinyMCE3510 (top right corner is where you can see the current editor name, and change to a new editor mode).

Select the font Comic Sans MS and your highlighted text alone will change to this font, while the rest of the page remains the same. Highlight the 'Returns Policy' text again, and this time click on the drop down arrow next to Font Size, and select the 24pt option. You will also note that this heading was by default an H3 or Heading 3, which is fine for this page. Your T&C page now looks like this (see red arrow -where the sub heading is larger and of a different font):

Changing Your Website's General Colours

Changing the general colours for your entire website is done via the Design Tab, then selecting the Colours and Fonts option. Once on the Design Options page, you will be able to edit the colours for many different areas on your website. 

Colours are given a Hex code or colour number, making them more specific than simply being called 'dark blue' for instance. You can enter your hex code in the box next to the item you want to change colour for, and then click in another box to save it. Or you could click on the Pick Colour button and then manually choose a colour from the Colour Wizard and then select the Use Colour button.

IMPORTANT - write down the individual hex code for each of your colour choices somewhere safe such as a diary or a file on your device, as this will help you should you need to edit your website design (as in Section 1 of the Intermediate level course).

Here are the colours we have chosen to use:

Save your work by clicking the Save Changes and then the Publish buttons.

Changing Text Colour On Individual Web Pages

Open up your T&C page again. You will see that the heading colour has been changed according to the colour you picked in Design Options. This has been a site-wide change.

But it is possible to change the colour of text on an individual page, and that's what we'll do next. Highlight the heading Returns Policy, and then select the drop down box next to the Text Colour icon. This will open up a pre-selected range of colours to choose from, as well as giving you and option for others by clicking on the More Colours option.

Click the Save Changes and then the Publish buttons to save your work so far.

Add Content to Your Website

Add Page Titles, Sub Headings & Paragraph Text to a Page

To edit a page to add titles, headings and paragraph text, click on the page name under the Web Pages tab on the left hand side of your screen. This will then open up the page to edit. In this example, we're going to edit the About Us page, as seen below, using the Innova Studio Drag and Drop Editor.

As the About Us page is open, we can add sub headings and paragraph text. You can do this either by clicking inside the paragraph text box which is already in the middle of the page by default, or by selecting a snippet from the right hand side column which contains the type of text you would like.

We added some text to the existing paragraph snippet box, and then clicked on and dragged over the Heading H2 snippet box above it. We then added a title to that heading snippet, as in this image:

There are two ways you can change the page title, or Heading 1 (h1). First you can follow the instructions in the previous step of renaming a page. Or secondly, you can open the SEO tab from the blue menu, then select Optimise Web Pages Meta Tags. 

This will then open a page from where you can edit your SEO meta tags, including your page title (page heading). We will leave it as About Us for now.

Upload and Add an Image to a Web Page

Open up your About Us page again by clicking on it's title which can be found in the column under Web Pages on the left hand side of the screen. 

There are two ways you can add an image to a page. The one you use will depend on the image itself you want to insert. 

  1. To insert an image into an existing text block, position your cursor where you want the image to go (red arrow), then click the + sign in the editing bar (purple arrow). - Note that if you position your cursor next to any text, it will alter the position of the text. If you want to have the image beside text, you are best to use a snippet box -This opens up a box asking what you want to insert (image. link or form field), so choose Insert Image. To upload an image from your device, click the browse button to open up your image files on your device and double click on the image (jpeg file is best) and then click the blue Upload button.

The Image Wizard in the CMS will open your image ready for editing, if required. It will show you the true size of your image as it is now, the existing file name it has and some options to crop, rotate, resize and convert to JPG. We are going to resize this image to fit on the About Us page. Click on the drop down arrow for the Resize box, and select the image size 448x448 Blog option. Change the file name if required, then click Save Changes.

Another box will open which allows you some editing options for your image, including its position, border and padding around the image. For this example, we will go with the default border, alignment and padding, and then click the blue Insert Photo Now button.

Your About Us page will now look like this from the CMS editing area:

Adding a New Product 

We will now be moving onto working with the shop or eCommerce section of your website. To add a new product, select the Shopping button from the main menu when logged in to the CMS. It is here that you will be able to find and edit all details regarding the shop section.

Click on the Add New Products button, and you will see the below screen, from which you can choose the type of product you wish to add. 

Click on the Add General Stock Item button, and you will open up a screen where you can enter the main details of the product. In this screenshot below, we have added example details to show you. We have left the Stock numbers, Promotion/Visibility and Supplier Details empty. The SEO file name we used is the same as the Title (adult-long-sleeved-t-shirt).

Click the Add Product button, and you will see a screen where you can edit specific details about this product.

First, we will upload the main product photo. Click on the button Upload a Photo and then select a photo to upload from your device (as in Beginner Course Section 1). 

Note that the image we used needs to be cropped and resized. Here is a video on how to do that:

You will then see a screen from which you can edit more details of this product:

You will note the Product Options menu on the right hand side of the page is also accessible via the menu tab area above when editing a product too. Save your changes so far.

Adding Variations to a Product

If your product is open for editing, you can continue on. If it is closed, you can find it to edit by selecting Shopping - Edit Products and Categories, then selecting the product by clicking the Edit button. By default, the Edit Product tab will open.

To add the variations of t-shirt colour and sizing, you will need to select the Options/Sizes tab.

You will then be seeing a screen which looks like this:

Click on the Manage Colours button which opens up a page that looks like this:

We are going to add each colour individually into the Add Colour box (white, red and blue). Into the Option Name area, we will add the colour name, leave the Price Adjustment box empty, not add an image swatch at this stage (but this is where you would add a specific colour swatch or photo of the specific product colour if you wanted to), and then click the Add Colour button.

Our screen now looks like this:

Next we will add some sizing options. Scroll down this same page until you see the Manage Sizes button, which is in the Product Options - Selection Layout area. Click the Manage Sizes button.

Add the t-shirt size options the same way you did the colour options. Add the size to the Option Name box, leave the price adjustment empty (though this is where you would add a different price if a different size cost more or less), and at this stage, don't add an image swatch, then click the Add Size button. Here is what our screen looks like:

Close this box by clicking on the X button in the top right corner, then close the remaining Shop box by also clicking on the X in the top right hand corner. Click the green Publish button to save your work so far, and close the Publishing Now box once the Publishing Complete message appears.

It's now time to make your website live! 

Making Your Website Live

Once your website is live, you can continue to add new products, written content and images. A website is like a living thing, and is meant to change and grow. The only thing you should be wary of is deleting products or pages. Instead, these should be left live on your site, the products set to out of stock and hidden. 

To make your website live, click the Go Live button, assign your domain name to it and pay your first month of web hosting in advance. It's a good idea to set up an automatically monthly payment for it, or for a discount, purchase it for one year in advance.

The New Zealand based team at Website World are here to help! Make sure you check out their Training and Tutorials for some great free help in creating and managing your website. Remember, the websites they host are SUPER FAST too!

© Copyright Business Networking NZ - Site map
Auckland New Zealand

Edit Website