Your guide to launching your first website with UK2

Where To Find Website Builder

You can access Website Builder through your Control Panel in CHI. It’s sign-posted on the navigation menu on the left hand side of the dashboard by this icon…

 

Once you’ve clicked on this icon, you need to select the ‘Manage’ tab, shown below, then click on the ‘Launch Website Builder’ button. This will take you to the place where the magic happens.

 

Step One: Choose A Template

Before you do anything, you’ll need to select a template for your website. There are 200 to choose from.

You can scroll through each template one by one on the tab at the bottom of the Website Builder dashboard page. There’s an example of what it looks like below…

 

If you haven’t got time to browse through all 200 templates, you can filter your results depending on how you intend to use your website. You can do this using the menu on the left hand side of the dashboard page, shown below…

 

Don’t worry if you don’t like the colours of the template, you can change them later.

Step Two: Tailor Your Template

How To Change The Colours

You can gently tweak the colours on your template by using the ‘Theme Colours’ tab on the top left hand side of the Website Builder dashboard page, shown below….

 

Click on this tab and you’ll be given a list of colour options.

For more noticeable colour changes, you can change the colour of a row or column.

To do this, click on the row or column you want to unlock on your template and a tab full of icons will appear. Make sure you don’t click inside a widget at this point, because this will bring up an entirely different menu.

Click on the cog icon and a list of options will appear. Ignore these for now and click on the plus symbol at the bottom of the list of options. A new box will appear that looks like this…

Click on the button that says ‘Add Row Style’ and a big menu of options will appear at the bottom of your screen. You can use this menu to change the background colour of your row or column. You can also add borders to the row or column and change the colours of those, too. If you are happy with your changes, click the ‘Save Changes’ button.

How To Add Extra Columns

 

Click on the row you want to add extra columns to on your template and the following menu will appear. It’s the same menu you use to change the colour of a row.

Choose the second icon that looks a little like two curtains. Click on this and you can divide your row up into extra columns. Just so you know, this will affect the placements of any images or text that you have already placed inside the row and its existing columns.

How To Change The Colour Of A Newly-Added Column

Once you’ve added a new column to a row, you can change its colour by clicking on the cog icon that appears at the top right hand corner of the new column.

 

When you click on this cog, a drop down menu will appear. Ignore this for now and click on the plus icon that appears at the bottom of the drop down menu. A box will appear like the one below…

Click on the Add Column Style button and you can choose the colour you want your column to be.

How To Undo A Step

The best way to undo a step is to use your computer keyboard. Hold down CTRL and Z on a PC or use cmd-z on a Mac.

Step Three: Add Images

Look for the ‘Media’ tab in the menu on the left hand side…

 

Click on the row that says ‘Images’ – shown above, below files. Then click on the add tab. This will allow you to select an image you have saved on your computer. Try to upload images in JPEG format, because some other types of images, like PNGs, can slow down your site once it’s live.

Once you’ve uploaded your images – in the image above three images have been uploaded – you can drag and drop them onto your web page.

(To do this, just click on the image you want to move but don’t let go of the mouse button. The image will then go wherever you move your mouse. To set an image down somewhere, release the mouse button.)

Every image you place on a page will have a menu linked to it, which looks like this…

 

The first icon is the image replace button, you can use this to replace the selected image with another one.

The second icon opens the images setting panel where you can play around with the image.

The third icon is the resize function, which lets you reset an image back to original size

The fourth is the image drag handle, which lets you drag an image to a different row.

The fifth icon is the image delete button, which lets you remove an image from page without deleting it from media tab.

Add a Little Bit of Magic To You Images

To take your website images to the next level, you can use the rollover function. This lets your website users roll over and image on your page to make it change or get bigger.

To apply these special effects to your image, enter the image settings using the icon that’s displayed second from the left in the example above. The following box will appear at the bottom of your screen.

To get your image to change to another one when your website user moves over it with their cursor, drag and drop an image into the box where the image of London is above.

To get your image to grow when your website users scroll over it, drag and drop a new image into the box where the book are, above.

Step Four: Add Text

First things first, you need to know that text needs to be unformatted when you add it to your template. This means, you shouldn’t copy and paste text from other website or formatted documents like PDFs.

To add text to your website, you’ll need to insert it into a text box. You can do this by simply copying and pasting your text from a word document. You can change the font and colour of the text by clicking on the settings tab in the menu that is attached to the text box – this is the first cog-shaped icon shown below.

When you click on the cog icon, a second menu will pop up, which is shown below. You can use this to change the font and colour of your text.

Step Five: Add Widgets

A widget is a small application that can be installed onto a web page to do something useful using information from an external website, such as a social media site. A number of widgets can be installed through Website Builder. You’ll find a collection of all of them in the left hand menu of the Website Builder dashboard, shown below.

 

Some of the most popular widgets to install include…

The Twitter Widget

 

This widget can be found in the red social tab shown above. Add this to your page and your website will display your live twitter feed.

To get this widget working, you’ll need to open an area of a row or column for editing by clicking on it or unlocking it. Then drag and drop the twitter widget into the area you are editing.

This widget will have a menu attached to it. Click on the cog icon to go to the settings and the following box will appear…

Add your twitter handle to the Search box, without the @. This will turn your twitter feed on.

A Facebook Like Button

 

 

This widget can also be found in the red Social tab shown above. This allows your users to ‘like’ your page and publish the like directly to Facebook.

To get this widget working, you’ll need to open an area of a row or column for editing by clicking on it or unlocking it. Then drag and drop the twitter widget into the area you are editing.

It will work as soon as you publish your website live.

Google Maps

 

You’ll find the Google Maps widget under the grey content tab shown above. When you add this widget to your website, you can display a specific location to customers, like the location of your business for example.

To add this widget to your website, open an row or column for editing and drag and drop the icon in.

This widget comes with it own menu, shown below.

To tailor the location shown on your google map widget, click on the cog icon. This will open the following settings window at the bottom of your page.

 

To customise the map, add your location into the Find Address tab, shown above.

Step Six: Get Noticed By Google

You’ll need to submit your site to Google so the search engine can index it.

You can submit your website to google by following this link…

Go to http://www.google.com/addurl

Once you’ve done this you’ll need to keep adding quality content to your site to move your way up the search engine rankings.