Welcome to the SiteBuilder User Guide. If you find anything lacking from this user guide or you have any further questions that were not answered in the guide, please do not hesitate to contact support.

Introduction

What it is

SiteBuilder is an innovative HTML5 site builder from Maega which allows users to create their own modern, eye-catching websites in minutes without the need for any programming experience or knowledge of HTML/CSS. Our intuitive builder UI allows users to drag & drop blocks onto a canvas to create pages and combine multiple pages into full sites.

In addition, SiteBuilder lets users publish created sites and continue working on them at a later time, allowing users to use SiteBuilder as a lightweight Content Management System.

SiteBuilder was developed by chilly_orange and licensed for use by Maega.

Block Approach

SiteBuilder takes a block oriented approach to building web pages and web sites. What this is means is that SiteBuilder provides the user with a selection of pre-designed blocks, such as headers, content sections, forms, footers, etc. which are combined onto a canvas to create fully functional web page.

Drag & Drop

SiteBuilder uses an easy to use and intuitive drag and drop interface. Use the left sidebar to select your blocks and drag them onto the canvas. Once dropped onto the canvas, blocks can easily be re-ordered using the same drag and drop functionality.

SiteBuilder uses a block approach to building web pages

Editing text

SiteBuilder allows users to edit all written content within certain elements. To edit text, simply click on the text you'd like to edit to activate the inline content editor and edit away.

SiteBuilder comes with an awesome inline text editor to edit written content

Editing images and using the image library

SiteBuilder allows users to edit images within blocks as well.

SiteBuilder makes a distinction between "my images" and "other images". My Images are uploaded by users themselves and are stored in their image libraries. Other Images are free use assets provided by Maega and can not be removed by regular users. When accessing your image library from the top menu, you will see two tabs, one for your own images and one for the other images.

SiteBuilder gives users access to their own image library

When changing an image, simply click on the image on the canvas to open the style editor. Once open, click the "Image" tab and then click the gray button labeled "Open image library". This will bring up your image library allowing you to select an image or upload one.

SiteBuilder gives users access to their own image library

SiteBuilder allows users to edit links by either providing a URL, a block (to link to another section on the same page) or by choosing another page to link to.

Link to a URL, block or page

Editing Styles

SiteBuilder allows users to edit certain styling properties for elements. To edit an element on the canvas, first hover the mouse cursor over the element. If a red border appears around the element, it means the element is editable and you can click it. Once clicked, the style editor will open on the left side of the page. After making any changes, you'll need to click the green button labeled "Apply Changes" to see the changes take effect.

Editable elements will display a red outline when hovering the mouse cursor over them When clicked, the style editor will open on the left side of the page

If you don't like the changes after seeing them in the canvas, you can click the orange button labeled "Reset" to restore the styling of the elements to its original settings.

Editing Videos

SiteBuilder allows users to edit Youtube and Vimeo videos as well. To edit a video, click the video you'd want to edit. This will open the left sidebar panel where you can enter a Youtube video ID or a Vimeo video ID. You can alter between these as you please, the application will detect which platform you're using and update the video accordingly.

SiteBuilder allows Youtube and Vimeo videos to be inserted in a page

Cloning Elements

SiteBuilder allows users to clone elements on the canvas. This comes in handy when working on a navigation for example, when you need an additional entry, you can clone the last item of the navigation.

Click the element you want to clone (if it's clonable, a red outline will appear when moving the mouse cursor over the element). Once clicked, the left sidebar will appear. You can now clone the element by clicking the dark blue button labeled "Clone".

Elements on the canvas can easily be cloned

Please note that a cloned element will always get inserted right after the original element!

Editing HTML

SiteBuilder allows users to edit the source HTML of each block on the canvas. To access the HTML editor, hover over the block action icon and wait for the block tool bar to slide in. Next, click the dark blue button labeled "source".

The SOURCE button is located in the block toolbar SiteBuilder comes with a full source code editor, allowing you to modify the underlying html

The HTML editor also comes with a HTML validator. When working on a block's underlying HTML, the validator will automatically list validation issues below the editor.

Page Settings

SiteBuilder allows users configure certain settings for each page within a given site. To bring up the page settings window, click the gray dropdown button labeled "Settings" towards the right edge of the screen:

Page Settings can be found in the far right dropdown Page Settings can be found in the far right dropdown

Within the page settings window, you can configure the page title, meta description, meta keywords and add additional code to be included in the HEAD section of the markup when either exporting or publishing your page or site.

Site Settings

Next to settings for individual pages, you can also configure certain settings for an entire site. To configure these settings, locate the gray button towards the right edge of your screen labeled "Site Settings" and click it to display a dropdown menu:

Site Settings can be found in the far right dropdown

Click the "Site Settings" link to bring up the site settings window. Besides the Site Name, you'll find a panel containing FTP settings. These settings are required if you want to publish your site using FTP to a live web server. The first item, labeled "Public URL" is not required to publish over FTP (this is only used to display the external link). All other fields are required to use FTP publishing.

Using the FTP browser

If you're not sure what remote path to use, you can use the built-in FTP browser. To use this, make sure you have entered the correct server, username, password and port number (if you're not sure about the port number, just leave it at 21). Next, click the blue button labeled "Browser Server". This will bring up a small panel showing you the files and folders located on your server.

Using the FTP browser, you can locate the correct location on your server

You can use the FTP browser to locate the folder in which you want your site to be published. Once done, click the green button labeled "Save Settings" to save your details. You will get a final confirmation letting you know if all is OK. Once you see this confirmation, you can publish your site!

Exporting Your Site

SiteBuilder allows users to export their sites at any given time. When you're ready to export your site, simply click the blue button labeled "Export".

SiteBuilder allows you to export your site, including all assets

Clicking the export button will bring up a modal window. Here, before you export your site, you can choose an alternative Document Type (by default it's set to HTML5 which is the recommended setting).

Click the "Export Now" button to download a ZIP archive of your entire site, including all CSS files, Javascript files and images.

Publishing Your Site

SiteBuilder allows you to publish your site to a live server

Instead of exporting your site, you can also choose to publish it to a live web server using FTP. Please note that this function will only work if you have entered correct FTP settings. If you haven't entered FTP connection details yet or if you have entered incorrect FTP connection details, publishing won't work and you'll be presented with a warning message.

Assuming you have provided correct FTP connection details, you can publish your site by clicking the dark gray button labeled "Export". If you have unsaved changes, you will be asked to save these changes first after which you can proceed to publishing your site.

The "Publish" button will bring up the publish window. Here, you can choose which assets and/or pages to publish. When you're publishing your site for the first time, you will want to choose ALL assets and ALL pages. After having published your site for the first time, you want to only publish those assets and pages which have been changed, as this will speed up the publication process significantly.

Choose which assets and pages should be publihed

Revisions

Use revisions to revert back to older versions of your page

Each time a page is stored, a copy of the previous state of that page is maintained as well (this applies both to pages saved automatically as well as to pages saved manually). For each page, you can access the existing revisions through the "Older revisions" drop down. For each revision, three are three buttons available (right next the revision date):

  • The first button allows you to the preview the revision by opening it into a new browser window.
  • The second button allows you to restore the revision, by replacing the current page with that revision. Before the current page is replaced with the revision, an additional revision is created so you can always revert back.
  • The third button allows you to remove a revision.

Custom CSS

SiteBuilder allows you to provide custom CSS to modify a single page or an entire site.

To apply custom CSS for an individual page, use the "Page CSS" field under "Page Settings".

To apply custom CSS to the entire site, use the "Global CSS" field under "Site Settings".

When supplying custom CSS, please do not include the style tags, as these are added by SiteBuilder automatically.

Responsive Views

Use responsive view modes to make sure your page looks good on any screen size

SiteBuilder allows users to switch between different view modes, this to ensure the resulting page will look good on mobiles, tablets and desktop screens. To toggle between modes, use the three buttons to the left of the main toolbar.

Global Blocks

Use responsive view modes to make sure your page looks good on any screen size

SiteBuilder allows users to configure so-called "global blocks". These are blocks that maintain the same appearance and settings across different pages. This feature comes in handy when configuring navigations and footers for example.

Each block on the canvas has a check box labeled "Global". When checked, changes made to this block will be applied to the same block on all pages in your site, assuming those other blocks are marked as "global" as well.