|
|
 |
Contents of this page: Working with buttons | Simple site with 1 level | Simple site with 2 levels | Complex site with 2 levels
Working with buttons
While making a simple site is a piece of cake, making a more sophisticated site navigation system may be rather complicated.
- Navigation in QwikZite involves 2 options in the 'Button' menu:
- Button visible on all pages or belongs to page ...
- Button refers to page ...
- Besides, it involves an option in the 'Page' menu:
- Page inherits buttons from page ...
How it works is explained below with the help of 3 examples.
- Example 1: Simple site with 1 level
Site with an identical series of buttons on all pages.
- Example 2: Simple site with 2 levels
Site with standard series of buttons and extra buttons on the 2nd level.
- Example 3: Complex site with 2 levels
Site with differentiated button series, where the homepage series of buttons is no longer displayed on all pages.
Example 1: Simple site with 1 level
Site with an identical series of buttons on all pages:
| | | | Page
100 HOME: | Page
200 PRODUCT: | Page
300 MANUAL: | Page
400 CONTACT: | | HOME | HOME | HOME | HOME | | PRODUCT | PRODUCT | PRODUCT | PRODUCT | | MANUAL | MANUAL | MANUAL | MANUAL | | CONTACT | CONTACT | CONTACT | CONTACT |
The texts are the button 'Titles' which are displayed at the frontend of the site.
Requirements in the 'Button' menu:
Beside the above button 'Titles', the following input is made:
| | | | 100 HOME | visible on all pages | refers to page: 100 | | 200 PRODUCT | visible on all pages | refers to page: 200 | | 300 MANUAL | visible on all pages | refers to page: 300 | | 400 CONTACT | visible on all pages | refers to page: 400 |
The left column texts are the 'Working titles' of the buttons. Though invisible, their alphabetic order determines the order of the 'Titles' at the frontend.
Requirements in the 'Page' menu:
None.
The pages do not need to inherit button series, as all buttons are already made visible on all pages in the 'Button' menu.
Example 2: Simple site with 2 levels
Site with the following series of buttons on the pages:
| | | | Page
100 HOME: | Page
200 PRODUCT: | Page
300 MANUAL: | Page
400 CONTACT: | | HOME | HOME | HOME | HOME | | PRODUCT | PRODUCT | PRODUCT | PRODUCT | | MANUAL | New products | MANUAL | MANUAL | | CONTACT | Old products | Introduction | CONTACT | | MANUAL | Requirements | | | CONTACT | Functions | | | | Problems | | | | CONTACT | |
| | | | Page
210 New products: | Page
220 Old products: | etc.
|
| | HOME | HOME | | | | PRODUCT | PRODUCT | | | | New products | New products | | | | Old products | Old products | | | | MANUAL | MANUAL | | | | CONTACT | CONTACT | | |
Requirements in the 'Button' menu:
This is the input of the buttons which are visible on all pages:
| | | | 100 HOME | visible on all pages | refers to page: 100 | | 200 PRODUCT | visible on all pages | refers to page: 200 | | 300 MANUAL | visible on all pages | refers to page: 300 | | 400 CONTACT | visible on all pages | refers to page: 400 |
The following buttons are only visible on page 200 PRODUCT:
| | | | 210 New products | belongs to page: 200 | refers to page: 210 | | 220 Old products | belongs to page: 200 | refers to page: 220 |
The following buttons are only visible on page 300 MANUAL:
| | | | 310 Introduction | belongs to page: 300 | refers to page: 310 | | 320 Requirements | belongs to page: 300 | refers to page: 320 | | 330 Functions | belongs to page: 300 | refers to page: 330 | | 340 Problems | belongs to page: 300 | refers to page: 340 |
With the above input, all buttons on the pages 100, 200, 300 and 400 are now defined.
And, in fact, at the same time specific button series have been defined belonging to page 200 (button series 210/220) and page 300 (button series 310/320/330/340). These pages are hereafter referred to as 'parent pages'.
Requirements in the 'Page' menu:
If, at present, the button 210 New products would be pushed to open the page 210 New products, you would only see there the buttons visible on all pages (buttons 100/200/300/400) since no other buttons have been defined to belong to that page.
To make the buttons 210 and 220 also visible on the page, you utilize the 'inherit' function included in the 'Page' menu: indicate the 'parent page' from which the button series shall be taken over. In this case:
| | | page 210 New products | inherits buttons from page: 200 PRODUCT |
Now, from parent page 200 the button series 210/220 is taken over on page 210.
This shall be applied to all pages of the 2nd level, so also:
| | | page 220 Old products | inherits buttons from page: 200 PRODUCT | | page 310 Introduction | inherits buttons from page: 300 MANUAL | | page 320 Requirements | inherits buttons from page: 300 MANUAL | | page 330 Functions | inherits buttons from page: 300 MANUAL | | page 340 Problems | inherits buttons from page: 300 MANUAL |
Example 3: Complex site with 2 levels
Site with differentiated button series, where the homepage series of buttons is no longer displayed on all pages:
| | | | Page
100 HOME: | Page
200 PRODUCT: | Page
300 MANUAL: | Page
400 CONTACT: | | HOME | HOME | HOME | HOME | | PRODUCT | PRODUCT | MANUAL | PRODUCT | | MANUAL | New products | Introduction | MANUAL | | CONTACT | Old products | Requirements | CONTACT | | | Functions | | | | Problems | |
| | | | Page
210 New products: | Page
220 Old products: | etc.
|
| | HOME | HOME | | | | PRODUCT | PRODUCT | | | | New products | New products | | | | Old products | Old products | | |
Requirements in the 'Button' menu:
These are the buttons visible on page 100 HOME:
| | | | 100 HOME | visible on all pages | refers to page: 100 | | 200 PRODUCT | belongs to page: 100 | refers to page: 200 | | 300 MANUAL | belongs to page: 100 | refers to page: 300 | | 400 CONTACT | belongs to page: 100 | refers to page: 400 |
Major difference with example 2 is that the home page buttons are no longer visible on all pages and that page 100 HOME has become the parent page for the button series 200/300/400.
It is common usage to make the 'Home' button visible on all pages, to avoid that visitors land at a dead end.
The following buttons are only visible on page 200 PRODUCT:
| | | | 200a PRODUCT | belongs to page: 200 | refers to page: 200 | | 210 New products | belongs to page: 200 | refers to page: 210 | | 220 Old products | belongs to page: 200 | refers to page: 220 |
For reference to page 200 an extra button with the working title '200a PRODUCT' is made, belonging to page 200. This is not the same button as '200 PRODUCT' since that button belongs to page 100 and is only visible there.
Both buttons refer to the same page and have the same title, 'PRODUCT', but belong to and are displayed on different pages.
In the same manner, the following buttons are only visible on page 300 MANUAL:
| | | | 300a MANUAL | belongs to page: 300 | refers to page: 300 | | 310 Introduction | belongs to page: 300 | refers to page: 310 | | 320 Requirements | belongs to page: 300 | refers to page: 320 | | 330 Functions | belongs to page: 300 | refers to page: 330 | | 340 Problems | belongs to page: 300 | refers to page: 340 |
Requirements in the 'Page' menu:
First of all, the pages of the 2nd level:
| | | page 210 New products | inherits buttons from page: 200 PRODUCT | | page 220 Old products | inherits buttons from page: 200 PRODUCT | | page 310 Introduction | inherits buttons from page: 300 MANUAL | | page 320 Requirements | inherits buttons from page: 300 MANUAL | | page 330 Functions | inherits buttons from page: 300 MANUAL | | page 340 Problems | inherits buttons from page: 300 MANUAL |
As on page 400 CONTACT the same buttons shall be displayed as on page 100 HOME, also here you can utilize the inherit feature:
| | | page 400 CONTACT | inherits buttons from page: 100 HOME |
Go to top | Simple site with 1 level | Simple site with 2 levels | Complex site with 2 levels
|
|
|
|
|
|
Latest changes in this page |
|
|
|
|