Setting up a website
Woohoo, you're building your new website! We'd like to walk you through the steps. Below you'll find animated images and written instructions to help you.
- Pick a design
- Upload a logo
- Choose your colours
- Select fonts
- Choose pages and sections
- Add images
- Edit website settings
- What next?
- When choosing a design, use the design filter options to help you narrow down the choices. Some of the designs are not Ecommerce enabled or don't have a portfolio option, so be sure to choose a design that has the capabilities that you need.
- Look at the overall style of the designs; Fonts, colours and page layouts can all be changed.
- You can click on the view demo button next to each design, to view a demo website for that design.
- Click Choose design to select a design.
- To preview the design that you've chosen, click on the eye icon in the top right. And click on the same spot to return to the editor.
- You can swap designs as often as you like, even after your website has gone live. Just bear in mind that each design has different colour schemes and font options (and you will loose colour palette selections that you have made when you switch designs).
It's best if you use a high quality PNG version of your logo, which will be on a transparent background. Make sure there is no extra white space around your logo too.
A header image logo is an alternative logo that you can use if you are using header images on the website. This alternative logo will usually be a lighter whiter version of your logo and will show up against the header image. For more info on header images, click here.
It's obviously best if the colours on your website match your branding and logo. You can ask your graphic designer to give you the hex codes for the colours of your logo and you can then type the hex codes into the colour selection boxes and get an exact match. Otherwise just try to get the closest match that you can. Try to limit your website to 3-4 colours, using different shades of each. The website 0to255.com is great for getting different shades and tones.
- Go to Website > Settings > Colour.
- Have a look at our Sample palettes, click to choose one.
- Or click on the coloured squares listed to adjust each colour; then you can choose from the range of colours on the left hand side; colours that you've recently used for that particular website element will be stored there. Or you can click and drag on the little circle in the big gradient square to alter the colour; or simply enter the hex code of the colour you want to use.
- When you change a colour, it'll be shown in the website preview (on the right-hand side).
- If you want to preview your website, click Update colours at the bottom of the screen to save your colour changes.
4. Select fonts
Try to choose fonts that closely match the fonts in your logo or branding. We use Google web fonts, so if there is a particular font that you'd like to try, get in touch and ask us to plug in the new font for you. For each theme, you can choose a different font for the text, headings, buttons, navigation etc.
- Go to Website > Settings > Fonts.
- Under Fonts, select which fonts you'd like for different parts of your site (i.e. Body copy, headings, site title, etc).
- You'll see each font change in the preview panel on the right hand side.
- Click Update fonts to save your changes.
When creating pages and sections for your website, remember to try to keep the number of pages in the main website navigation to a minimum. Creating sections can help you to group pages in a logical way and you can use a sub navigation widget on the pages of each section, to help users to navigate within the section. In the settings tab for each page, you can choose to use controllers if you want a page to display products, FAQ's, portfolio, blog etc.
How to add a page
- Go to Website > Pages & sections.
- Right-click on the Section in the site tree that you want to add the page to. You can't add a page to a page in the site tree, only to a section, e.g. the Home Section or a new section that you have added. You can also add a page by clicking on a section, then choosing Add page (top right).
- A drop-down menu will appear, choose Add page.
- Enter a Title for your new page.
- If you don't want the page to go live straight away, change the Status to On-hold.
- Click Add page.
How to add a section
- Go to Website > Pages & sections.
- Right-click on the section in the site tree you want to add a new section to, and choose Add section from the drop-down menu. Alternatively, click on the section, and choose Add section (top right).
- Enter a Title
- If you don't want the section to go live straight away, change the Status to On-hold.
- Click Add Section.
How to edit the content and layout for a page
Here's a quick video to watch if you're still stuck:
- Page content
- Adding a link
- Controllers (relevant if you want to set up a blog, FAQ's page, Events page etc)
- Tips for writing web content
- Tips for a good homepage
- Tips for formatting content
6. Add images
To add images to the general content of your website, you have several options:
- Add an image directly onto a page
- Add a Header image (which is only possible on some of our designs)
- Create an image slideshow using a widget (Great for larger images, as a focal point on a page)
- Create an image gallery using a widget (Displays images in square tiles that users can click on to enlarge)
- Create an image list using a widget (Great if you want to display images in a list with text beside or under them)
- Create an Instagram gallery, using a widget, which pulls images from your Instagram profile
You'll need to edit the website settings to add your contact details and social media links to the footer of your website.