Live Chat Software by Kayako |
Knowledgebase: XSitePro Version 2 & 2.5
|
Customizing your Links Page design
Posted by - NA - on 13 November 2008 03:25 PM
|
|
|
Using the settings within the Links Page module, you can quickly adjust the look-and-feel of your links page (be it a single or multi-page links page). The sections that follow explain, in detail, exactly how to go about setting up your links page design so that all the links you add in future will sit perfectly in the links' pages, and the pages themselves will complement your overall site design. The steps that follow are: STEP 1: Links Page Type STEP 2: Links Page Style STEP 3: Link Page Detail Style STEP 4: File names and Meta Data STEP 5: Pagination STEP 1 - Links Page Type When you arrive at this first step, the screen will resemble that shown below:  In this first screen, you can choose which of the four available 'links page types' you wish to employ in your site. If you want to read more on what each of these options represents, then visit the section in the Tools manual entitled: Simple Links Page vs Multipage Links Page. The options from which you may choose, in this screen, are: Basic (simple, alphabetical list of links) Simple Categorized (categorized on a single page) Multi-Page Categorized (categorized across multiple pages) Maximum Page-Count categorized (categorized across multiple pages, with extra pages) To choose your preferred page structure from the list, click the radio button to the left of the option text. This will select the option in the list. Once you have made your selection, click the 'Next' button to proceed to the next step.  STEP 2 - Links Page Style When you arrive at this second step, the screen will resemble that shown below:  The Page Style settings on this screen give you complete control over how your links page(s) will appear. The screen is divided into two parts: settings on the left and a preview on the right. As you make changes to the styles used in your links page, the preview will update in real-time to show the effect those changes will have on your pages' appearance. The settings that you can adjust from this screen are described below: Page Title: Page Title - This is the actual text that the links' pages will use at the very top of the page. As well as entering static text in the text-box provided, you can make use of special text called 'tokens' which enable XSitePro to dynamically substitute page-specific information into each of your different links' pages, at the time of publishing. A token is used in this heading text, by default: {{Web siteTitle}} which will be substituted for the title of your Web site at the point of publishing. For details of the different tokens available for use in this text-box, see the description of the tokens button, below. Sub Category Page Title - As with the title box, above, the sub category links' pages can have custom heading text at the top of the list of links. This text can also feature 'tokens' as described above, and as listed below (in the 'tokens' description). Page Title Font - This font setting affects both sets of title text, above. To select the font you wish to be used for this heading text, click the drop-down font selector and select your preferred font from the list that appears. Page Title Font Size - Again, this setting affects both sets of title text, above. To specify the font size for this heading text, click the font size drop-down and select your preferred point-size (6pt - 72pt) from the list that appears. Page Title Font Style - To make your title text bold, italic or underlined, simply click on the appropriate button. Page Title Font Color - Using the color text-box/selector we can specify the color of our title text. Either type the color into the text box provided or click the 'browse' button to the right of the text-box to launch the color-picker tool. For more details of the color picker tool, see the section in the Tools manual entitled: 'Color Picker'. Page Title Text Alignment - To align your title text, left, center or right of the page simply click the appropriate option in the list provided. This will align your text accordingly. Page Title Tokens Button - To insert a token value into either of the title text-boxes described above, click the 'tokens' button to load a small list of available tokens. The window will resemble the one shown below:  To select a token, click the token name in the list and then click the 'Insert' button. This will insert the token variable at your cursor position, within the appropriate title text-box. The tokens available are described below: {{Category}} - Inserts the name of the category to which this page applies. {{Web site Title}} - Inserts your Web site title. {{Parent}} - Inserts the name of the parent category above this sub-category (above this category in our category structure). {{CatDescription}} - Inserts the description entered for this page's category (if entered, at the time of creating the category). {{CatKeywords}} - Inserts the keywords entered for this page's category (if entered, at the time of creating the category). Top and Bottom of Page Text: Insert Top of Page Text Option - If you would like to include some text/HTML code at the top of every links page generated you may specify this by checking the 'Insert Top of Page Text' option and then by clicking the 'Edit' button. This will load a designer window into which you can type your text (or enter your HTML, as preferred). Insert Bottom of Page Text Option - If you would like to include some text/HTML code at the bottom of every links page generated you may specify this by checking the 'Insert Bottom of Page Text' option and then by clicking the 'Edit' button. This will load a designer window into which you can type your text (or enter your HTML, as preferred). Tip: Categorized links' pages are of course tightly-focused content, and as such may well be fertile ground for Adsense blocks. You can insert adsense on all your categorized links' pages using the 'Top/Bottom-of-page text' feature. Category Links Text: Category Links Font - To select the font you wish to be used for the Category Links text, click the drop-down font selector and select your preferred font from the list that appears. Category Links Font Size - To specify the font size for the Category Links text, click the font size drop-down and select your preferred point-size (6pt - 72pt) from the list that appears. Category Links Font Style - To make your Category Links text bold, italic or underlined, simply click on the appropriate button. Category Links Font Color - Using the color text-box/selector we can specify the color of our Category Links text. Either type the color into the text box provided or click the 'browse' button to the right of the text-box to launch the color-picker tool. Category Links Text Alignment - To align your Category Links text, left, center or right of the page simply click the appropriate option in the list provided. This will align your text accordingly. Category Description Text: Category Description Font - To select the font you wish to be used for the category description text, click the drop-down font selector and select your preferred font from the list that appears. Category Description Font Size - To specify the font size for the Category Description text, click the font size drop-down and select your preferred point-size (6pt - 72pt) from the list that appears. Category Description Font Style - To make your Category Description text bold, italic or underlined, simply click on the appropriate button. Category Description Font Color - Using the color text-box/selector we can specify the color of our Category Description text. Either type the color into the text box provided or click the 'browse' button to the right of the text-box to launch the color-picker tool. Category Description Text Alignment - To align your Category Description text, left, center or right of the page simply click the appropriate option in the list provided. This will align your text accordingly. Page Links Text: Page Links Font - To select the font you wish to be used for the Page Links text, click the drop-down font selector and select your preferred font from the list that appears. Page Links Font Size - To specify the font size for the Page Links text, click the font size drop-down and select your preferred point-size (6pt - 72pt) from the list that appears. Page Links Font Style - To make your Page Links text bold, italic or underlined, simply click on the appropriate button. Page Links Font Color - Using the color text-box/selector we can specify the color of our Page Links text. Either type the color into the text box provided or click the 'browse' button to the right of the text-box to launch the color-picker tool. Page Links Text Alignment - To align your Page Links text, left, center or right of the page simply click the appropriate option in the list provided. This will align your text accordingly. Page Links Description Text: Page Links Description Font - To select the font you wish to be used for the Page Links description text, click the drop-down font selector and select your preferred font from the list that appears. Page Links Description Font Size - To specify the font size for the Page Links description text, click the font size drop-down and select your preferred point-size (6pt - 72pt) from the list that appears. Page Links Description Font Style - To make your Page Links description text bold, italic or underlined, simply click on the appropriate button. Page Links Description Font Color - Using the color text-box/selector we can specify the color of our Page Links Description text. Either type the color into the text box provided or click the 'browse' button to the right of the text-box to launch the color-picker tool. Page Links Description Text Alignment - To align your Page Links description text, left, center or right of the page simply click the appropriate option in the list provided. This will align your text accordingly. Spacing: Spacing between categories - To increase or decrease the spacing between list entries, for your categories in the page list, increase/decrease the values in the text box using the up/down arrows appropriately. You will notice the spacing changing in the preview window, to the right. Spacing between links - To increase or decrease the spacing between the actual link entries themselves, increase/decrease the values in the text box using the up/down arrows appropriately. Again, you will notice the spacing changing in the preview window, to the right. When you are happy with the style changes you have made, you may proceed to the next step by clicking the 'Next' button. STEP 3 - Link Page Detail Style NOTE: This step only appears if you selected the "Maximum Page Count" option in Step 1. If you did not select this option, this tab will be removed and the following steps will become STEP 3 and STEP 4 appropriately. When you arrive at this second step, the screen will resemble that shown below:  This screen is similar to the previous one insofar as it is split into two parts - settings, left, and preview, right. It also gives control over page design but this time for the link-specific details pages that are only featured if you selected the 'Maximum Page-Count' option back in Step 1. The settings we can adjust on this screen are as follows: Links Page - Page Title: Page Title - Enter the title text you would like to display at the top of every link details page. Note: You can also use 'tokens' in this text-box, these are described below. Page Title Font - To select the font you wish to be used for the page title text, click the drop-down font selector and select your preferred font from the list that appears. Page Title Font Size - To specify the font size for your page title text, click the font size drop-down and select your preferred point-size (6pt - 72pt) from the list that appears. Page Title Font Style - To make your page title text bold, italic or underlined, simply click on the appropriate button. Page Title Font Color - Using the color text-box/selector we can specify the color of our page title text. Either type the color into the text box provided or click the 'browse' button to the right of the text-box to launch the color-picker tool. For more details of the color picker tool, see the section in the Tools manual entitled: 'Color Picker'. Page Title Text Alignment - To align your page title text, left, center or right of the page simply click the appropriate option in the list provided. This will align your text accordingly. Page Title Tokens Button - To insert a token value into the page title text-box described above, click the 'tokens' button to load a small list of available tokens. The window will resemble the one shown below:  To select a token, click the token name in the list and then click the 'Insert' button. This will insert the token variable at your cursor position, within the title text-box. The tokens available are described below: {{Category}} - Inserts the name of the category to which this page applies. {{Web site Title}} - Inserts your Web site title. {{Link Title}} - Inserts your Web site title. Links Page - Link Text: Links Font - To select the font you wish to be used for the Links text, click the drop-down font selector and select your preferred font from the list that appears. Links Font Size - To specify the font size for the Links text, click the font size drop-down and select your preferred point-size (6pt - 72pt) from the list that appears. Links Font Style - To make your Links text bold, italic or underlined, simply click on the appropriate button. Links Font Color - Using the color text-box/selector we can specify the color of our Links text. Either type the color into the text box provided or click the 'browse' button to the right of the text-box to launch the color-picker tool. Links Text Alignment - To align your Links text, left, center or right of the page simply click the appropriate option in the list provided. This will align your text accordingly. Links Page - Links Description Text: Include Description Option - To include a description of the link (the description you entered when creating your link entries) simply check this check-box. Description Font - To select the font you wish to be used for the Link description text, click the drop-down font selector and select your preferred font from the list that appears. Description Font Size - To specify the font size for the Link Description text, click the font size drop-down and select your preferred point-size (6pt - 72pt) from the list that appears. Description Font Style - To make your Link Description text bold, italic or underlined, simply click on the appropriate button. Description Font Color - Using the color text-box/selector we can specify the color of our Link Description text. Either type the color into the text box provided or click the 'browse' button to the right of the text-box to launch the color-picker tool. Description Text Alignment - To align your Link Description text, left, center or right of the page simply click the appropriate option in the list provided. This will align your text accordingly. Links Page - Link URL: Include Link URL - To include a URL to the page/site being described in this details page, simply check this check-box. Link URL Font - To select the font you wish to be used for the Link URL text, click the drop-down font selector and select your preferred font from the list that appears. Link URL Font Size - To specify the font size for the Link URL text, click the font size drop-down and select your preferred point-size (6pt - 72pt) from the list that appears. Link URL Font Style - To make your Link URL text bold, italic or underlined, simply click on the appropriate button. Link URL Font Color - Using the color text-box/selector we can specify the color of our Link URL text. Either type the color into the text box provided or click the 'browse' button to the right of the text-box to launch the color-picker tool. Link URL Alignment - To align your Link URL text, left, center or right of the page simply click the appropriate option in the list provided. This will align your text accordingly. Links Page - Link Screenshot Thumbnail: Display Thumbnail Option - Checking this box will cause the thumbnail (captured when you first added the link) to be displayed on the link details page. Thumbnail Alignment - Using this setting you can align the thumbnail image in the page. The options available are: Top Left Top Center Top Right Left of Text Right of Text Bottom Left Bottom Center Bottom Right Enable Large Screenshot Pop-up - If checked, this will cause your thumbnail image, described above, to serve as a clickable link. On clicking your thumbnail image, in the links detail page, a large screenshot image will appear in a pop-up window. This achieves two things: First, it is an useful preview for your visitor without having to leave your site and, secondly, it's the "extra mile" in the eyes of the site owner whose link you've featured - by this we mean that in doing so much to neatly and comprehensively list their site on your own the chances of reciprocal links are greater than were you simply to feature a flat link on a simple links page. If you were to e-mail the sites featured in your links' pages and tell them that you had gone to the trouble of creating a dedicated page with thumbnail and full sized page preview, etc., there's a good chance you will get a favorable response in return. They do not have to know of course that XSitePro did all of this for you! When you are happy with the style changes you have made, you may proceed to the next step by clicking the 'Next' button. STEP 4 - File Names and Meta When you arrive at this step, the screen will resemble that shown below:  In this screen we can modify six pieces of information relating to the file names of our links' pages, along with the meta data that will be used within the pages themselves. The settings are: Page Title - This text will be the name of the links' pages as appears in the meta data (and in the top-left corner of the visitor's browser window). By default this value is 'Links Page' but it could just as easily be changed to: Links Recommended Resources Our Partners Related Sites Link Directory and so on... File Name - This is the name of the actual links page filename as will appear in the address-bar of the visitor's browser. This is also the name of the links page HTML file itself. If you change the file extension (.html by default) all of the derivative links' pages (including the categorization pages, etc.) will all use the same extension also. Note: The filename referred to above is for the top-level links page itself. Sub-pages are generated with derivative filenames based on this main page name. Menu Text - This is the label for the top-level links page. This is the text that will be used when you feature your links page in any of your navigation menus throughout your site. Folder - By default the links page is published to your root folder (alongside your home page). If you would like to specify a different folder, you may do so by entering the folder name into this text-box. Description - The description text will be used on all of your links' pages, and so should be written appropriately. Remember, this data is not visible to visitors but will be read by search engines when visiting your site. Tip: You can use tokens in the description text-box, and so you can 'tailor' your different links' pages so that the meta data reflects, say, the category of links. Keywords - The keywords/phrases you enter in this text-box will be those used by the links' pages as the meta keywords. Again, you may use tokens in this field and so a category, or parent category, could be one of your keywords. Once you have filled out the information on this screen, click the 'Next' button to proceed to the next (and final) step. STEP 5 - Pagination When you arrive at this step, the screen will resemble that shown below:  If your site features a long list of links it may be a good idea to split this list up over several pages so that visitors to this section of your site are not overwhelmed by a huge list of links and categories. To do this we simply need to adjust some settings on this tab, within the Links Page design settings. Within this screen, there are a number of settings we can adjust: Pagination - To set your links' pages so that they 'break' over multiple pages after a certain number of links, make a selection from the listed options. You can choose from: All links on one page - If selected, all links will be presented on the same, single page. Start new page after 10 links - If selected, a maximum of 10 links will be presented per page. Additional pages will be generated (with navigation links between them added) across which remaining links will be spread out. Start new page after 20 links - If selected, a maximum of 20 links will be presented per page. Additional pages will be generated (with navigation links between them added) across which remaining links will be spread out. Start new page after 30 links - If selected, a maximum of 30 links will be presented per page. Additional pages will be generated (with navigation links between them added) across which remaining links will be spread out. Start new page after 40 links - If selected, a maximum of 40 links will be presented per page. Additional pages will be generated (with navigation links between them added) across which remaining links will be spread out. Start new page after 50 links - If selected, a maximum of 50 links will be presented per page. Additional pages will be generated (with navigation links between them added) across which remaining links will be spread out. Start new page after 100 links - If selected, a maximum of 100 links will be presented per page. Additional pages will be generated (with navigation links between them added) across which remaining links will be spread out. Custom - If selected, you must enter a value in the text-box provided. This custom number of links will be the limit for how many links will be presented per page. Once that limit is met, the links will be split over additional pages. This option can be useful if you find, when previewing your links' pages, that you have only a few links spilling onto a new page, and you wish to increase the limit to bring the links back onto the same page. Next Page Link - If you have specified any kind of pagination described above then the 'next page link' option will be activated. At the top of your links' pages, if the page is split over multiple pages, there will appear two links for navigating forward and backward through the paginated links' pages. By editing the text in the text box provided you may specify what label text you wish to use for this navigation link. By default, the text is 'Next >>' but you can change this to something else if you prefer. The image below shows these navigation links in action, in a links page.  Previous Page Link - Just as with the 'next page link text', above, you can edit the previous page link text, too. Simply over-type the default text ('<< Prev') and this will become the new backward page navigation for multi-page lists of links. Top Of Page Text - You can specify how the Top of Page Text (if you specified any, back in Step 2) is handled across multiple pages (where pagination takes place). The options available are: 'Top of Page Text' just on the first page - This will only insert your specified 'Top of Page Text' on the first of the pages where pagination occurs. The other pages (over which remaining links are spread out) will not feature the Top of Page Text. 'Top of Page Text' on all the links' pages - The Top of Page Text will feature on all pages. So, for example, if you have 100 links spread out over pages with a maximum of ten links per page (so ten pages in all) then each of the ten links' pages will feature the Top of Page Text. Do not include 'Top of Page Text' on any page - None of the links' pages will feature the Top of Page Text you specified back in Step 2. Bottom Of Page Text - You can specify how the Bottom of Page Text (if you specified any, back in Step 2) is handled across multiple pages (where pagination takes place). The options available are: 'Bottom of Page Text' just on the first page - This will only insert your specified 'Bottom of Page Text' on the first of the pages where pagination occurs. The other pages (over which remaining links are spread out) will not feature the Bottom of Page Text. 'Bottom of Page Text' on all the links' pages - The Bottom of Page Text will feature on all pages. So, for example, if you have 100 links spread out over pages with a maximum of ten links per page (so ten pages in all) then each of the ten links' pages will feature the Bottom of Page Text. Do not include 'Bottom of Page Text' on any page - None of the links' pages will feature the Bottom of Page Text you specified back in Step 2. When you have made any necessary adjustments, and you are happy with your settings for your link page design, you can complete this wizard by clicking the 'Finish' button at the bottom of the window. This will close the design settings window and return you to the main links page screen. Tip: Before you save and close the design settings window it is a good idea to quickly preview your design settings using the 'Preview' button. This preview process is described in a little more detail in the following section. Previewing your links page The links' pages for your site may be previewed quickly and easily at any time using the handy 'preview' button contained within all of the Links Page screens.  Located in the bottom-left corner of all of the links page windows, clicking this button loads your links page complete with all your current links and of course all of your current design settings applied. This is a great way to quickly review your links page (even to check your progress as you make changes to the design settings). The preview will appear in a new browser window and will not apply your page layout - you will see a clean set of link data with the style applied as per the links page settings. This will allow you to focus verifying that the links page data is being presented exactly as you want it. To preview the links page data within the overall site design you will of course need to preview your site and click on the links page link from one of your navigation menus. | |
 (158 vote(s)) This article was helpful This article was not helpful |
|
Comments (0)