How to work with the Text Object

Best Practices > Step 4 - Pages >

How to work with the Text Object

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

Double-click on a Text Object in the page layout table or select it and then click on the button to open the Text Object window. In this window, you can  use an editor to enter and format texts.

Click to expand/collapseHow to use a web font to format the text

It's very easy to format text: just select it and choose the font you want to apply from the relative editor menu. This menu will display only a few fonts that can really be used: the so-called Safe fonts, which are those present on every device, such as Arial, Verdana, Georgia and a few others. What normally happens is that if you use a font that is installed on your computer but not on the computer of your website visitor, that computer will display the text with a default font, thus changing your original layout (see Safe fonts and web fonts).

There now exists a solution to this problem: use web fonts.

Web fonts may not be installed initially on your computer, but you can get them from:

portals such as Google Fonts™ (for free): they offer ready-to-use web fonts that are linked to the website page CSS stylesheets.
portals such as Fontsquirrel: you can download new fonts to your computer, so that they can be published on the website's server.

To use a web font, you must first obtain it from the Internet and then add it to WebSite X5.

Once you have done this, the new web font will appear in the list of available fonts that can be applied to the selected text.

The font names in the various menus have the following icons shown next to them, so that you always know what kind of font you are choosing:

The font types can be easily identified by the icon next to them:

Google Fonts: fonts added from the Add web fonts window of WebSite X5 and linked to Google's server.

Online Web Fonts: fonts added from the Add web fonts window of WebSite X5 and linked to server of service that offers fonts.

Offline Web  Fonts:  fonts added from the Add web fonts window of WebSite X5 and published on the website's Internet server.

Click to expand/collapseHow to create a text with a scroll bar

When you add a Text object to a page, its height is automatically set to display all the contents. If the text is long and you want to display it in a small window, you can set its height manually and force the addition of a scroll bar.

Add a Text Object to a page and then open the Text Object window to enter and format the text.
Click on the button to open the RollOver window.
Select the Enable Rollover option and set the Movement option as None - Show Scrollbar.
Set the value in pixels for the Height.
Click to expand/collapseHow to create a scrolling text

One way to display, for example, a series of news articles is to scroll the headlines. You can do this either horizontally or vertically.

Add a Text Object to a page and then open the Text Object window to enter and format your text.
Click on the button to open the RollOver window.
Select the Enable Rollover option and set, for example, the Single Slide option as Movement, specifying the Direction.
Use the various parameters to define the effect and select the Stop on Mouse Over option: if there is a link for further details on a particular article, visitors can stop scrolling and click on the article they want to read.
Click to expand/collapseHow to display text in tabs

Often, when you have a complete presentation of a product/service to show, or you want to talk about a particular subject in full, you find you need to divide the information in various levels of depth and use several pages that are linked together.

Instead of organizing all this information in several pages, an alternative way is to use several tabs of a single text object, using the tab display feature.

Click to expand/collapse

If you are using the Professional edition of WebSite X5, you can create a tab text as follows:

Insert a Text Object in a page and then open the Text Object window to enter and format your text.
Right-click the Tab1 tab at the bottom of the work area: click on Add a Tab in the menu to create a new tab.
Give this tab a suitable name and add its contents.
Follow this procedure to complete all the tabs you need: all the commands you need to add, delete, rename and move the tabs are in the context menu.
Go to the Text Object | Tabs Style section and choose the Display Mode: set, for example, Tabs - Horizontal and define all the various options for the size, style and effects.

If you combine the versatility of the Text Object (where you can add not only text, but also images, links and portions of HTML code) with the possibilities offered by displaying text in tabs, you can obtain some amazing results: imagine how online recipe books, or an online estate agent would appear, not to mention catalogs for all sorts of products, if you used this feature.

 


Best practices:

-

How to use web fonts

-

How to download a font from Fontsquirrel


Further information:

-

Safe fonts and web fonts