Getting Started with WebBuilder Live

Quick Overview...

Below are a few tips to help get you going with WebBuilder Live.
After logging in as Admin you can hover the mouse cursor over any elements, text, menus or images to reveal the Edit option.
Click on to the small arrow to the right of the Edit button for more options specific to that area.

Detailed instructions...

Step 1: Login to WebBuilder Live

To login to WebBuilder Live, type the following in to the address bar of your web browser, your WebMate username. followed by you'll then be prompted to login with your WebMate username and password.


info icon

In the example address it says username.
This needs to be your WebMate username.

info icon

First time users will be prompted to login to the admin area straight away, you can manually reach the admin area by adding /admin.php to the end of your WebMate web address.


WebBuilder Login image
Step 2: Edit Modes

The website content is pre-populated so you can see the idea and have a quick play around before putting your own content in. Live mode is where you’ll do most of the work.
There are two different modes available where you can edit your website.
Live Edit Mode & Advanced Admin Mode.

Live Edit Mode - The default layout
This mode allows you to make changes to the website by simply placing the mouse over the area of the web page that needs to be modified, then you can click the Edit button to make the required changes.

Advanced Admin Mode
This mode does allow you to edit pages too, but not in the WYSIWYG way like the Live Edit mode. You’ll generally only need to come back here to make confirguration changes etc, most of your editing should be done in the Live view.

info icon

Click here for more info about the main menu on the left

home page image

Admin image
Step 3: Edit the Title & Logo
To edit the title and the logo, go to Website Settings in the menu on the left.
Just type your website name and the slogan in the the text boxes.

To upload your own logo, click Find and select a file on your computer.

Click Save when you are done.
Add a title & logo image
Step 4: Change Themes & Colours
You can change the entire look of your website by changing the theme, go to the menu on the left and choose Layout design.

Click on to the Add a Template button, a list of template images will appear for you to choose from.

Select the one that you like then click Preview, on the next page, you can choose the colours that the theme will use.
After choosing the theme colour click Continue then click the green Install or Upgrade button.

That's it! your new theme is ready.

Step 5: Add a New Page
To add a new page to your website, move the mouse over your site's menu, click on to the small arrow to the right of the Click Here To Edit button.

Choose Add a new subpage from the menu.

Add a name for the webpage and click Add, this name will display in the main menu when complete.

To edit the new page, click on your new menu button.
Step 6: Change the Layout
You can also adjust the page content layout to single column, two column or a three column layout.

You can also choose a full width page, to do this the side bar must be turned off.
Step 7: Add Content
The website content, text & images can easily be updated in Live Edit Mode & Advanced Admin Mode , just place the mouse cusor over the area that you would like to change and click Edit.

The section will then open in Edit mode, to change / add text, select the text that's already there and start typing or place the mouse cursor where you would like to add more text.

content image

The icons above found in the tool bar allow you to add links, images and video content to your web pages.

After clicking on to the image or video buttons you will get the opportunity to upload from your computer or you can re-add content that you have already uploaded to the website.
content image
Step 8: Add a Module
Extend your website functionality with WebBuilder Live modules.

To add a module to your page - drag a selected module from the list to the desired content area.

To edit an exising module, find it on the page and click Edit button.

There are lots of modules available to help you easily build more functionality in to your website, here's just a few of them...

  • Photo Galleries
  • Contact Form
  • Calendar
  • Location Map
  • Shop
  • RSS Feed
  • Blog
  • News Letter

Not all modules are displayed in this view, click Manage Modules to see even more great add-ons.


Add a Module image
  • 99 Users Found This Useful
Was this answer helpful?

Related Articles

How To Create Your Own Blog

Quick Overview... If you want to add a blog to your WebBuilder Live site you can do it...

Need some help?

Quick Overview... Need help making your Web Builder Live website?Below is a list of places...

Add Google Analytics to your WebBuilder Live website

Quick Overview... After signing up to Google Analytics you will receive an Analytics...

Web builder Live – Onsite Editor tools

Quick Overview... How do I make changes to my website in Live Onsite Edit mode?This...