Website Editor

How to Work with Navigation Trees

Navigation Trees are used to give your visitors access to particular pages (and also to the products) which you created in the page tree. Navigation Trees are used to generate links to pages, making them accessible. It is just a link list that is used in combination with a function to build together a menu which your visitors can use to navigate through your website.

Navigation Tree allows you to create Navigation Trees (hierarchical structures of your pages) that can be used for generating a menu for your website. This section serves only for creation of Navigation Trees, if you want to use them (generate the menu), you have to go to the particular page and insert a navigation function in its code. It is necessary to create your page tree first (or some pages at least), because without pages you can’t create Navigation Trees.

There are 3 types of Navigation Trees you can create: Static Navigation, Dynamic Navigation, Product Category Navigation.

In all types of trees you are able to add new links to the menu, edit names that are displayed to visitors or delete them.

If you are looking for something more advanced, you can add external links, links for download from your File Manager or change the code a little bit and add some links manually.

The main difference between the Static and Dynamic Tree is that the Dynamic Tree is created automatically. You do not manually select pages you want to add. The usage of Static and Dynamic Tree also depends on how your page tree is organized (because if the structure is not well arranged, the generated Dynamic tree can be unusable).

Note

If the structure of your page tree requires, you can create more Navigation Trees, use them in code but display them to visitors as one fully functional menu.

Product Category Navigation is used for creating a menu for an online store, because the items (links) in this menu are created directly from the products, specifically from the Category Tree and its hierarchy.

Static Navigation Tree, Dynamic Navigation Tree

There is only one prerequisite for creating a Navigation Tree - you need some pages. Without them there is nothing for which you can create list of links. If you need more information about how to create pages, you can see this help-site.

If you decide to use a Static Navigation Tree, you must remember that every time you create a new page (which you want to include in the menu), you have to edit this Navigation Tree and add this page manually. Otherwise it won’t be displayed to visitors.

If you decide to use a Dynamic Navigation Tree, you should remember that every page you don’t want to include in this tree must have disabled in the Include in Navigation setting.

How to add a new Static Navigation

  1. Run the Website Editor - Tools and Settings. Click the Navigation Trees application.

  2. Click the New button on the little arrow and select the Static Navigation.

  3. Fill both required fields:

    • Name - The Name is used only in BizBox Admin and it is never visible to your visitors.
    • Internal Name - The Internal Name is a unique system name (also never visible to your visitors).
  4. Click the Tree tab and start adding particular pages (nodes of the Tree) by clicking the Add button. You will select the page you want to add in this Navigation Tree and a parent Node (the Node which will be above the inserted one in the hierarchical structure). Confirm the added page by clicking the Add button. You can also click the Add and New button, which will let you automatically insert another node to your tree.

  5. In case you want to change (edit or delete) some nodes, there are 2 icons on the right.

  6. When you are done, just click the Save button and your Navigation Tree is ready for use.

How to add a new Dynamic Navigation

  1. Run the Website Editor - Tolls and Settings. Click the Navigation Trees application.

  2. Click the New button on the little arrow and select the Dynamic Navigation.

  3. Fill all required fields:

    • Name - The Name is used only in BizBox Admin and it is never visible to your visitors.
    • Internal Name - The Internal Name is a unique system name (also never visible to your visitors).
    • Page - Select the page from which the Tree will be generated.
    • Page Depth - Defines how many levels of the page hierarchy will be generated. For example a number 2 will generate a 2-level tree.
    • Display Root option displays or hides the root pages in the tree.
  4. Click the Save button.

  5. Click the Tree tab and you can see the generated tree.

Product Category Navigation

Unlike the other two Navigation Trees, Product Category Navigation doesn’t require pages but a Product Category Tree. This Product Category Tree needs to be created in the Products module. Product Categories unite products you sell on your online store. Thanks to this you can create a typical online store menu of products.

How to add a new Product Category Navigation

  1. Run the Website Editor - Tools and Settings. Click the Navigation Trees application.

  2. Click the New button on the little arrow and select the Product Category Navigation.

  3. Fill all required fields:

    • Name - The Name is used only in BizBox Admin and it is never visible to your visitors.
    • Internal Name - The Internal Name is a unique system name (also never visible to your visitors).
    • Node Depth - Defines how many levels of the hierarchy will be generated. For example a number 2 will generate a 2-level tree.
    • Root Node - Select the root node from the Category Tree.
    • Display Root option displays or hides the root node.
  4. Click the Save button.

  5. Click the Tree tab and you can see the generated Tree.

Product Category Navigation

If you want to delete a Category from your online store menu, you have to delete the whole Category.

How to Create Pages for Other Cultures

It is very important to create particular pages from your page tree in every Culture to that you want to localize on your website. If these pages don’t exist, your visitor will not be able to display them (regardless of inserted translations).

Usually there are two options you want to use with the pages from other Cultures:

  1. You want to translate them. You want to keep the content from the parent page (the one in the default Culture which is at the top of the Culture Tree) and translate it. In that case you will only generate particular pages for particular Cultures in the All Website Cultures application located in the Localization application in the Website Editor (you can see the whole step-by-step guide below). After that you will insert translations (you can use the Translation Center, export all translated strings from the default Culture, translate them and import them back). It is realab-localizationlly simple.

  2. You want to create different content in the other (non-default) Cultures. It means that you are not able to use translations - you have to create brand new content for these pages.

    • In case you want to create only slightly different content, you can create the Pages in the non-default Cultures as content copies of the default one. Then you are able to change the content, hide something, add something - as you want. Pages like that are created manually and you can see the step-by-step guide below.
    • You want to create totally different content which is not dependant on the default Culture. In this case you will create a blank page which you create and code according to your needs. You can see the guide below.

Pages for all non-default Cultures from your Culture Tree can be created manually or automatically.

Manual creation of Pages for non-default (translated) Cultures - This is used in case you just want to create specific pages in the target Culture. If you want to create all of them, use the automatic generation.

  1. Pages are always created in the Website Editor. Run the particular website for which you want to create new pages in non-default Cultures.
  2. Stay on the pages tab. Here change the Culture with the big Culture button. Select the one in which you want to create new pages.
  3. The page tree will be reloaded and you can see all the pages from the default source Culture. A crossed page name means that it is not added in the selected Culture yet. Click it and select one of the suggested methods for page creation. For more info about the particular methods, visit this help-site. Remember that if you only want to translate the page (and not to create different content), use the first Copy with Translations option. If you want to use the content but change it a little, use the second Copy with Content option. The last Set Empty Page option creates an absolutely blank page with nothing inherited from the parent one. A parent page is the page which is located right above the newly created page in the Culture Tree.
  4. Your new page is created according to the method you have selected and you can add the translations or modify it according to your needs.

Automatic generation of pages in non-default (translated) Cultures - This is used in case you have a multilingual Website and you just want to create translations without making some changes to the particular pages. You can add all the pages from the default Culture Tree manually, but there is a more effective way - automatic generation.

  1. Go to the Website Editor.
  2. Go to the Tools and Settings* tab and run the **Localization application.
  3. Here (at the bottom) is a table with all the Cultures you have added to the Culture Tree of this Website. For every Culture a count of pages that are currently added to this Culture’s page tree is displayed.
  4. Select the Culture for which you want to create pages.
  5. To create all pages click the Add Pages button and a new window appears. Here select the Culture you want to use as the parent one – the translations will be taken from the selected Culture. Click the Yes button and all pages will be automatically generated. This is the only action you have to perform to prepare pages in a Culture for localization.
  6. Now you are able to insert translations (using the particular page’s translation tabs or the Translation Center).

This application can be also used to delete pages created in some of the Cultures you have in your Culture Tree.