Adding details of sub-pages into pages at a higher level - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

Once you have created some sub-pages on your site you can then reference those pages in any of the pages at a higher level.

 

For example, if you have a category page that talks about one and two bedroom cabins and you've added several pages of plans underneath that page you can, with just a couple of mouse clicks, include either a bulleted or numbered list on that page. This list can appear anywhere on the page and it can be just a list of the page titles or it can include the page titles and the short description for each of the sub-pages.

 

Here's how to do it.

 

1.

Select the main page, i.e. the page that has the sub-pages underneath it. On the page list below the main page could be 1 and 2 Bed Basic Cabins.

 

example_sub_page_list_list3

 

 

2.

Click on the Design tab. You can now design this page as you normally would, by adding text and graphics.

 

 

3.

Position the cursor where you want to include the list of cabin plans (i.e. the list of sub-pages) and right click.

 

window_insert_sub_page_list

 

 

4.

Select 'Insert Links To All Sub-Pages' from the context sensitive menu that appears. If you can't see this menu option on the menu that pops-up it means that you have positioned the cursor in an inappropriate position. If this is the case put the cursor in another place and try again.

 

 

5.

Select 'Bulleted List' from the sub-menu and then 'With Descriptions'.

 

 

6.

A styles window now appears, from which you can adjust the appearance of your sub-pages list. The window will resemble the one shown below:

 

window_subpage_list_settings

 

By default the settings will pick up on your panel settings. If you want to make changes you may do so by adjusting the following values:

 

Link Font - Select the font you wish to use for the sub-page link using the font drop-down selector)

 

piece_subpage_list_font

 

 

Link Font Size - Using the piece_subpage_list_font_size drop-down list, choose a size for the link text.

 

 

Link Font Style - If you want to make your list entry links bold, italic or underline simply click the respective style button.

 

piece_subpage_list_font_style

 

 

Link Color - To change the color of the link text, enter the color name in the text-box provided or alternatively click the button_application_image_browse button, to the right of the color text-box. this will load the color picker tool, with which you can select a text color.

 

 

Link Hover Color - When a visitor's mouse hovers over the link, in the list of sub-pages, the text color will change to the color you set here. Click the button_application_image_browse to load the color picker tool, to change the color.

 

 

Underline (Hover) Option - If checked, the text will underline while the visitor's mouse cursor hovers over the link text. When the cursor moves away from the text, the underline will then disappear.

 

 

Link Visited Color - Once clicked, the link text will change to this color. This helps visitors remember which links they've visited, and which they have not. Set the color either by entering the color name into the text-box, or by using the button_application_image_browse button to launch the color picker.

 

 

Underline (Visited) Option - Like the other underline option, above, this check-box (if checked) will cause the link text to remain underlined if visited.

 

 

Bullet Color - The bullet color (or numbers, if a numbered list) can be set to any color you like, using this setting. Click the button_application_image_browse button to launch the color picker tool.

 

 

Spacing - To increase/decrease the spacing between list entries, use the piece_subpage_list_arrows arrows to increase/decrease the spacing value appropriately. Alternatively you may simply over-type the value in the box.

 

 

Description Font - If your list choice features descriptions then you can set the font used for the description text here. Click the drop-down to choose the font you like.

 

piece_subpage_list_font

 

 

Description Font Size - Click the font size drop-down piece_subpage_list_font_size to select a font-size for your description text (if featured in the selected list-type).

 

 

Description Font Style - You can make your description text either bold, italic or underlined by clicking one or more of the style buttons, shown below:

 

piece_subpage_list_font_style

 

 

Description Color - The description text color is set using this control. Enter the color into the text-box or click the button_application_image_browse button to launch the color picker tool if you prefer.

 

 

Once you've set the styles to suit your preferences, click the button_application_ok button to insert the list.

 

 

7.

A marker saying BULLETED SUB-PAGE LINKS WITH DESCRIPTIONS will have been placed in the Designer window at the point where you had positioned the cursor. If you click anywhere on the marker you will see a frame appear around it and if you put the cursor anywhere over the frame it will turn into a move symbol that will let you drag and drop the marker to anywhere on your page.

 

piece_subpages_placeholder

 

 

8.

If you clicked on the button_application_preview button you would now see the page with the sub-page details inserted at the place where you positioned the marker.

 

piece_subpages_preview

 

 

Every time you add a sub-page under this page the page title and the description you enter on the Info tab of that page will automatically be included in the list. This means you can add pages whenever you like, but not have to worry about manually updating other sections of the site - this will all be handled for you.

Home  Previous  Next