Building your site

editing your site

As part of the design and development process of your site, there may be dummy text or stock images that you wish to replace. This is really simple and straightforward to do using our intuitive CMS...

site editor

With the site editor you can make any changes to your site, as well as add new elements. On the left hand side of the screen is the 'tools' section in the grey box, and the main view is made up of the live preview of your site.

Your site is made up of many 'elements', which could be text boxes, images or buttons etc, and each of these elements can be edited. As you move your mouse around the screen, these elements are highlighted in blue. Once highlighted, you can 'copy' the element with the arrow tab on the top left of the highlighted box, or 'delete' it with the X tab on the top right. You can also move the element by dragging the middle handle.

Editing text

Any text you see can be edited, this can be titles, body text and captions. Hover your mouse over the text to highlight it in blue, then click it to enter into 'edit mode', you'll then need to click into the text box, and you can start typing. A tool box will also appear, so you can change the text colour, size, alignment etc.

Once you're happy with your changes, click away from the element to exit edit mode.

images

Images are placed on your website in different ways, these include single images, background images, gallery images, and even slideshows. Here you'll learn how to edit each of them.

Pro tip: To keep your site performing well, make sure your images are optimised for web and saved at 72dpi

Single images

Single images are just one image, placed anywhere on the page - usually to accompany text to illustrate the content. Click on the image element to enter 'edit mode', then click on the image to bring up the options dialogue box. From here you can edit the image, replace it, and adjust the parameters.

You can click 'edit image' to crop, apply filters and play around with the colours.

To change the image click 'replace image' then 'upload photo from your computer' where you can select your own image and replace the existing one.

Once your changes are complete, click away from the element to exit 'edit mode'.

Image gallery

A gallery is a preview grid of images, which when clicked on shows a full size version, and can be scrolled through. The image gallery element has 2 edit modes. You can edit each image and edit the gallery settings.

To edit the images, click on the image gallery element to enter 'edit mode', then click on the image to bring up the options dialogue box. From here you can delete the image, add a link, add a caption and move it by dragging it around.

Once your changes are complete, click away from the element to exit edit mode.

To change the gallery settings, click on the image gallery element to enter 'edit mode', then click anywhere within the element (being sure NOT to click any of the images) to bring up the options dialogue box. From here you can add images, change the columns and adjust other parameters to customise the appearance of your gallery.

Once your changes are complete, click away from the element to exit edit mode.

Image slideshow

An image slideshow allows you to display multiple images in one place, with customisable transitions.

To add images, change the order and add links and captions, click on the image slideshow element to enter 'edit mode', then click on the element to bring up the options dialogue box.

From here you can add images by clicking 'add/edit photos', which takes you to the slideshow editor. Here you can add images, delete, and caption them by clicking the corresponding icons. You can also change the order by dragging the images. Once you have finished your changes, click 'save' in the top right of the dialogue box.

To change the slideshow settings, click on the slideshow element to enter 'edit mode', then click anywhere within the element to bring up the options dialogue box. From here you can adjust the slideshow parameters to customise the appearance of your slideshow.

Once your changes are complete, click away from the element to exit edit mode.

Pro tip" If you move your mouse over the grey bar and scroll down, you'll be able to access even more exciting and useful tools...

Adding elements

All of your site's 'elements' can be found on the left hand side of your builder, in the grey box. Each one is clearly labeled, and can be easily placed on your site. Just drag and drop by left clicking and holing the mouse down on the element you wish to place, move it over to your website preview, and a blue indicator bar will appear. This blue line highlights all the positions your element can be placed. You may wish for it to go above, below, or next to another element. Once you are happy with the position, let go of the mouse and it will automatically align.

editing the site structure

Your website is made up of a 'header' at the top, 'sections' in the middle, and a 'footer' at the bottom. To edit the properties of each section, just click on the background space. This will bring up a new dialogue box which allows you to edit the background, move, or delete the section. You can also change the size of a section by dragging the blue dot handle at the bottom.

Edit the background

Clicking the 'edit background' tab brings up a new options panel. From here you can add and image, colour, gradient, or even a background video. Select the type of background you would like, and if applicable, you can upload your own image or video.

Pro tip: enhance your website with our new 'scrolling effect' options found in the edit background dialogue box

Move a section

You can completely move an entire section including its contents. Click on the background, then click 'move'. You'll then get the option to move the section to a different part of the page you're currently working on by selecting 'move up' or 'move down'. To move the section to another page click 'to another page' and select the page you wish to move it to.

Copy a section

To copy a section click on the background, then click 'copy', then select the page you wish to copy the section to.

Delete a section

To delete an entire section including all of its contents, click the background then click 'delete', where you'll get a prompt to make sure you wish to delete everything. If you delete a section by mistake, it cannot be recovered, and your work will be lost.

Edit the footer

The footer is the very last section of your site, and can be edited by clicking the section. This enters into 'edit mode' and allows you to make all the changes like you would on any other section, only this time when you click the orange 'save footer' button, all the changes apply across all of the pages on your website.

building up your website

You can build upon and add to your website using the elements provided in the tool bar to the left of your site editor. Elements are the building blocks of your site. Nearly all of the content you add to your pages will be built with Elements.

Adding text, images, and more is as simple as going to the Build tab and dragging an element onto your page.

As you add more elements to your page, the page section will expand to accommodate them. You can also choose to add multiple sections for content using the Sections element.

When adding a new section to your page, you can choose a pre-made layout and modify its content or you can start from scratch and add any elements you like. In the example shown above you can see one of the pre-made “Contact Us” layouts - this adds a map, contact form, and text that you can customise.

You can place elements side by side or stack them vertically. You’ll see a blue line indicating where the element will be positioned when you drop it. A vertical line will appear when placing elements side by side, and a horizontal line will be shown when stacking elements on top of one another.

Placing elements side by side will automatically create columns across the page, and you can stack additional elements inside each column. You can adjust the space between these columns by dragging the vertical bar between them to the left or right.

All elements have a blue border that appears on mouseover; this shows you the boundary of the element and allows you to perform basic functions using the 3 top buttons.

The "X" in the upper right allows you to delete the element. Deleted elements can’t be restored, so be cautious when using this option.
The arrow in the upper left allows you to copy an element to the same (or another) page or move it to a different page.

And clicking on the button between the "X" and arrow buttons allows you to grab and drag the element to move it to a new spot.

create a blog post

Adding a blog to your website is a great way to keep your content fresh, share your opinions and knowledge, and increase visitor engagement. Best of all, you can update your blog on the go on your mobile device.

If you haven’t already created a Blog of your own, give us a call to upgrade your site.

To create a New Post, click on the New Post button at the bottom of your blog page.

Your blog post has a title and a content area. The title is like the headline of a newspaper article, so it should generally be short.

You can add content to your post in the same way content is added to a regular page. Drag elements into the post, and edit them to add content.

Once you've added your content you can select a variety of options for this particular post. Click Post Options.

Click Add Categories if you’d like to tag your post. These tagged categories will appear on your sidebar, making it easier for visitors to your blog to find posts that cover certain topics. Categories can be whatever you like, or you can forgo them altogether.

From here, you can also schedule your post for a later date and time, and turn comments on or off.

When you’re all done, you have a number of options related to publishing and sharing.
In the upper right, there are two buttons: Save and Post. Clicking Post immediately publishes this Post to your website, and clicking Save will create a draft so you can go back and edit it later.

When you click Save, you’ll see a Drafts button is added to the lower right. Clicking Drafts lets you view all your works in progress to edit and post them when you’re ready.