How to make the most out of page and level properties

Best Practices > Step 3 - Map >

How to make the most out of page and level properties

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

The fundamental elements of the website Map are the levels, pages and separators (see Step 3 - Map): if you liken the website to a book, then the pages are the pages, the levels are the chapters and the separators are book marks.

Pages and levels have properties that give different graphic and functional results.

Click to expand/collapseHow to include a link to another website in the Main menu

WebSite X5 creates the navigation menu on the basis of the website Map. When you test the website on your computer, you can check that the links on the items in the menu work correctly: the links on levels display a submenu, and links on pages open the corresponding page.

You can also insert items in the navigation menu that have different kinds of links, for example a link that opens another website.

The procedure for doing this is as follows:

In Step 3 - Map, add a New Level and give it a name.
Select this new level and click on the Properties button to open the Level Properties window.
Click on the Hide the Drop Down Menu for this Level option and then click on the button of the Link to be executed on item click option to open the Link window and choose the action to associate with the level.
As you want to link to another website, select File or URL and type in the URL of the website in the Internet file field.

You can use this method for all the various actions available in the Link window to create particular items in your website's navigation menu..

Click to expand/collapseHow to change a page's background        

Generally speaking, all the pages in a website have the same design, that is given by the chosen template (see Template Settings). However, some elements in a page can be changed. One of these is the background, which is the area outside the page that is visible when the browser is opened with a higher resolution than the website.

Click to expand/collapse
Example

To change the background of a single page, you have to do the following:

In Step 3 - Map, select the page you want to work on.
Click on the Properties button to open the Page Properties and then open the Graphic section.
In WebSite Background for this Page only use the Image File option to import the picture you want to use as the background for this page. Use the Repeat and Alignment options, if necessary, to correctly position the image with respect to the browser window.
If the background image is to be fixed (it mustn't scroll with the page), select the Fixed Background.
If you need to add a link in the page's background, use the Link option to open the Link window and select the type of link to add.

You can add a link to the page's background to insert an advert, for example. When a visitor clicks on the background, he will land on a page that gives the details of the advert.

<%%EXTOGGLE>How to change the background of the contents of a single page  

Another element that you can change for a single page, with respect the template that sets the design for the whole website (see Template Settings) is the background of a page's content (the central area of the page that contains the actual contents).

Click to expand/collapse
Example

To change the background of a single page's contents, you have to do the following:

In Step 3 - Map, select the page to work on.
Click on the Properties button to open the Page Properties window and then open the Graphic section.
In Page Content Background for this Page only use the Image File option to import the image to use as the background. Use the Repeat and Alignment options, if necessary, to correctly position the image.
Click to expand/collapseHow to create an Info popup window

You may sometimes need to create a page that gives further information on a particular topic: you can create a popup window, with a different size and design with respect to the template, for this.

Click to expand/collapse
Example - Page displayed in a popup

The steps to create this popup are:

Create a normal page and add the extra information you want to give as the contents.
In Step 3 - Map, select the page and click on the Properties button to open the Page Properties window and then open the Graphic section.
Select the Create the Page without the Template option and specify the Page Width in pixels.
Select the element (the text, for example) on which to add the link which will open the popup window and click on the button to open the Link window.
Select WebSite Page as the action, then select the new page and tick the Open in a popup window option, giving the size in pixels of the popup window (which must be the same as the size given above for the page).
Click to expand/collapseHow to add icons next to items in the navigation menu

You can add icons next to the items in the navigation menu.

Click to expand/collapse
Example - Menu item icons

If you want to associate a particular icon with a specific item, you have to use the Page or Level Properties (according to the position of the item in the website Map):

In Step 3 - Map, select the page or level to work on.
If you are working on a page, click on the Properties button to open the Page Properties window and then open the Graphic section and select the image to use as the Icon for the Menu item.
If you are working on a level, click on the Properties button to open the Level Properties window and select the image to use as the Icon for the Menu item.