News Scroller - XSitePro Website Design

Home Previous  Next


Brought to you by XSitePro Website Design Software

professional website design made easy      




The News Scroller script presents simple lines of text in sequence. Each text item will scroll vertically into view, pause on screen for a few moments and then will scroll out of view again. The script cycles through all the text entries you have entered for this script.



Although it’s called a “news” scroller, there’s no reason why you couldn’t use this script for a multitude of other purposes:


Customer Testimonials

Site Announcements

Special Offers

New Product Lists

Affiliate Product Listings

Recommended Resource Lists



Instructions for Entering New Items


Selecting this script from the list of scripts (how), and clicking the button_widget_wizard_edit_settings button loads the following screen:





When you first load this screen there will of course be no news entries listed. So, the first thing we need to do is add some entries. To get started, click the button_add_news_item button. This will load the following screen:





In this screen we need to enter five pieces of information in order to create our scrolling news item.


News Item Text – This is the actual text that will scroll into view on the visitor’s display. You can choose to enter either plain text (simply by typing into the text box provided) or richer content, which you can enter by clicking the button_add_news_item_designer button.


Clicking the designer button launches the standard XSitePro designer window into which you can type, embed images and other content as required. All of your design within this window will be scrolled into view by the News Scroller script.




If entering content via the designer window, click the button_add_news_item_ok button to save your design, and return to the ‘add news item’ screen.



News Item Title – This is for your reference, within the new items list screen, only. This title does not appear anywhere on the page when the news item is scrolled into view. The only text that appears on the visitor’s screen is the “News Item Text” above.



URL – This is the URL to which the visitor should be taken if they click any of the scrolling text, while it is in view. Entering a URL is optional, but it’s a great way of leading the visitor to more information about a given headline, feature, product or offer. This allows you to be incredibly focused in your copy-writing for this script, yet while also being able to offer more information at the click of a mouse.


Note: If entering a URL, take care to ensure that the full path (including: http://) is entered, or else the link will not work when your site is published.



Font – By clicking the drop-down font selector you can change the font in which the text will be presented. This should ideally be as clean, readable a font as possible for maximum effect. Using overly stylistic fonts will render your scroller ineffective, since the visitor will struggle to read your messages.



Font Size – Select the desired font size for the scrolling text, using this control. You can choose anything between 12pt and 150pt as required.



On entering the news item data, described above, you may complete the item entry by clicking the button_add_news_item_save button, which will return you to the news items list screen.


The news item you just entered should now be featured in the list (you should see the title that you entered, in the list).


If you wish to enter more news items, simply repeat the process above, entering the relevant information and saving the item to the list.


Tip: When entering new items (or other informational content as required) try to keep the entries grouped along a similar informational ‘theme’ to avoid confusing your visitors. You can use different scripts to group different content-types together (so, ‘News’, ‘Offers’, etc.) so that the visitor can readily identify where, on your page, to look for the different types of information.



Editing / Deleting news item entries in the list


To edit or delete entries in the list of news items, simply click the corresponding “edit” or “delete” links alongside the relevant entry.



Instructions for Script Settings


With your news items all entered, you may now adjust the script settings which govern how the script will display your information on the visitor’s Web page.


To access these settings click the settings button in the News Scroller settings screen.




This will load the following screen:




We have four settings that we can adjust here.


Time – This value determines the length of the pause, in seconds, each individual news item scrolls back out of view. Click the drop-down arrow button_news_item_drop-down to select from the available values: 1 to 10 seconds.


Tip: Obviously, the more text you have featured in your news items, the longer the user will need to read each item (and so the higher this value should be). Time how long it takes you to read your largest entry, and set the time value to this number of seconds, to ensure your visitors will be able to read all of your messages.



Width – This sets the width of the ‘frame’ in which your news items will be displayed – and is measured in pixels. To change this value, either over-type the number already in the box, or use the up/down arrows to adjust the width one pixel at a time.


This value can be set to a width appropriate to your page design – so it opens the possibility of, say, featuring a scrolling testimonials box in your right-panel.



Height – Like the width, above, this value sets the overall height (in pixels) of the frame in which the scrolling news items will appear, on your Web page. To change this value either over-type the number already in the box, or use the up/down arrows to adjust the height one pixel at a time.


Tip: An important point to remember here is that your news items will scroll upward, to the top of the frame before pausing. Therefore, your frame dimensions should be wide/tall enough to accommodate the whole of your largest text entry while it is paused.


If you set your frame too small, there will not be enough room for your text in the frame, and the new item will appear to be ‘chopped-off’ at the bottom. This would of course render the item partially unreadable – not the desired effect.



Background color – This is the background color of the frame in which your news items will appear. This setting effectively enables you to match the background of your frame to the color of your web-page –giving the impression that the new items are in fact scrolling into view within the overall page design – not within a frame, as is actually the case.


These sorts of details can make all the difference in terms of quality of presentation when time is taken to set them up properly.



When you have finished entering all of your news items, and you are happy with your overall script settings, simply click the button_image_gallery_insert button to insert the script into your Web page at the cursor-point.

Home  Previous  Next