An introduction to the Site Manager

Use the Site Manager to organize the pages and folders in your website project.
Tip: Make sure all pages of a website are part of the same project, this way Web Builder will 'know' that the pages belong together and generate optimal HTML for your website.

Websites always have a home page which is usually named index, so for this reason Web Builder automatically adds this page to each new project. The names of the items (pages) in the site tree are the actual file names of the target HTML files, If you name a page index, it will be published as index.html. Do not name your home page Index, INDEX, or Home, because this may confuse the web server.

Important note:
The Site Manager does not show the folder structure on your hard drive. Instead, it shows the structure that will be created when you publish your website. The pages and folders in the Site Manager will be generated when you publish the website. The pages and site structure information will be stored inside the wbs project file.
The Site Manager toolbar has the following commands (from left to right):
Command
Description
New Page
Adds a new page to your website.
New Folder
Creates a folder to organize pages.
New Page from Template
Creates a page based on a template.
Insert External File
Adds an external HTML or PHP file reference to the project.
Edit Page
Opens the selected page for editing.
Clone Page
Creates a copy of the selected page.
Remove Page
Remove the selected page from the current website.
Page Properties
Display the page properties of the selected page.
Move Up
Move the selected page up amongst its siblings.
Move Down
Move the selected item down amongst its siblings.
Move Left
Make the selected item a sibling of its parent.
Move Right
Make the selected item the child of its preceding sibling.
The first item in the Site Structure tree is the filename of the website (also called the root). The root can have one of more pages and each page can also have sub pages.

The home page of a website should usually be named index. For this reason, Web Builder automatically adds this page to each new project. The names of the items in the site tree are used as the file names of the published HTML files. For example, if you name a page index, it will be published as index.html.

If you did not save your website yet, it will probably be called Untitled. Use the File menu to save your website and give it a more meaningful name like 'MyWebSite'. Note that Web Builder automatically adds the .wbs extension to the filename.

Add a New Page to Your Website

  • In the Site Manager, select where you want to insert the page. For example, select the root item to add the page at the top level.
  • Click New Page on the toolbar.
  • Web Builder adds the new page to your project and opens it automatically, so you can start building the page.
  • To create a child page, select the parent page first, then click New Page.
Initially Web Builder will give the new page an unique name like page1. You can easily rename this to something else by selecting the name and hitting the F2 key. Or right click the pagename and select Rename Page from the context menu. Next you can specify the new name. Press Enter to save the new page name or Esc to cancel renaming.

Add a New Folder to Your Website

Select the position where you want to insert the folder, for example select the root (the top level item) to insert the folder to the first level.

Open an existing page

Select the item you want to edit, then click Edit Page on the toolbar. Another way to open a page is to simply double click its name.

Clone an existing page

To make an exact copy of an existing page, select the item (page name) you want to clone and click the 'Clone' button on the toolbar to insert a copy of that page.

Remove a page

Select the item (page name) you want to remove and click the remove button on the toolbar or press the Delete key on the keyboard.
Note: You cannot remove the last page in your website.

Rename Page

Select the item (page name) and press F2 to enter the new name.
The software will automatically update all (internal) links for you so you don't have to reassign existing links to the renamed page.

New Page from Template

Create a new page from one of the available website templates.

Select a template category from the drop-down list, then choose a template from the thumbnails on the left. The available pages for that template are displayed on the right, where you can select the specific page you want to add.
Click OK to insert the selected page into the current project. The new page is automatically added to the Site Manager tree, where you can rename it, edit its content, and organize it like any other page.

The Template Library includes online templates as well as templates installed on your computer.

Insert External File

Use this option to include an external file in your project. This makes it easy to link to the file and include it in the site structure or sitemap.
Although the feature was originally intended for HTML files, it can also be used with other file types.

Please note that the file is only added as a link or reference. It cannot be edited directly in WYSIWYG Web Builder.

Arrange Items

You can arrange items by using drag and drop, select the item and drag it to the position where you want to move it to or you can use the context menu (right click) to move the items to another position.

Tip:
You can also arrange pages by using drag and drop. Hold down the CTRL-key if you want to prevent the dragged item to become a child of the drop target. In this case the page will be moved below the drop target.

Using the context menu

When you right click on an item in the Site Manager the context menu will be displayed. By using the context menu you can quickly access the available commands for the specific item.

Search

The Site Manager has a built-in search option to filter the displayed pages in the Site Tree.
To display the search box, right click in the window and select Enable Search Box.

Find Referrers

This will display a list of the pages that are linked to the selected page. This may be helpful if you want to remove the page but are not sure which pages refer to it. It can also be used to see which pages use the selected page as master page.

Pin to List

You can 'pin' pages that you are currently working on or pages that you update frequently, so they are always easy to find. To view pinned pages, click the Pinned icon at the bottom of the Site Manager.

Multi-Page Properties

The Multi-Page Properties tool lets you modify selected properties for multiple pages at once. For example, you can quickly change the master page for a group of pages, update background settings, edit meta tags, change the page extension, and more.

Only the properties you modify will be applied to the selected pages. All other properties remain unchanged.

Import a page from another project

To import a page from another project, right-click in the Site Manager and select Import -> Import Page from Another Project.

Site Manager Views

At the bottom of the Site Manager there is another toolbar. This makes it possible to switch between different modes:


  • Site Tree
    Display the Site Tree. This is the default view

  • Pinned
    This option displays a list of pinned pages, so you mark the pages you are currently working or pin pages that you frequently update.
    You can add a page to the pinned list via the context menu (right click).

  • Recently modified
    Displays a list of recently modified pages. This may be useful to quickly continue where you left off, the next time you open the project

  • Need review
    Displays a list of responsive pages where one or more breakpoints need to be reviewed due to changes to the page or master page.

Related Tutorials

Site Manager Tutorial on YouTube