Compatibility:

WebSite X5 Evo and Pro

Setting up and using styles to define the way a text is displayed on a page of your website brings two important advantages:

  1. you can save time: applying a style is faster than defining all the formatting settings every time;
  2. you can create a website with a uniform and coherent style: you don't risk formatting in a different way texts sharing the same function. 


In WebSite X5 all texts are automatically applied to the styles defined for the chosen Template. You can customize these style in this way:

  • On Step 2 - Template Settings, click on Text, Filed and Button Style.
  • In the Text Style window select from the menu the Page Item you want to work on. Alternatively, you can directly select the page item from the Preview.
  • Use the available settings to define the style for the selected element.


You can set a style for the following elements:

  •  Page Title: this is the Title of the Website Pages. It is taken from the name given to the Page when the website Map is created in the Sitemap Creation window, or, if otherwise specified, from the Extended Page Title in the Page Properties window.
  •  Page Path: this is the text that appears immediately below the Page Title, and it shows the path to this page in the website ("breadcrumb navigation") that leads to the page itself. The Program adds the path automatically.
  •  Headings: you can define the paragraph and subparagraph titles on a Page as Headings. It is possible to define up to 6 Heading levels: in the Pro edition, by activating the Set H1..H6 tag for the Template Headings option available in the Statistics, SEO and Code > SEO window, when you choose a Heading Style the corresponding<h1>..<h6> tag is automatically applied to the text. 
  • Page Text: this is the text of the single paragraphs that are added using the Text Object. The style indicated here is applied by default to text entered using the Text Object editor. When a style is changed, all the texts to which it has been applied are automatically updated. You can use the editor's commands to make further changes and customization, which can always be deleted with the Reset Format button.

    The page text style is also applied to text that is added automatically by the Program, such as pages in the Members' Area, the Blog, the built-in search engine and the website Map.

    The font that is defined for this item is used as the Default Font for the website's texts and appears in the drop-down menu for selecting the Font Type.

  • Link: these options refer to hypertext links created with the Text Object. A link can change its appearance according to its state: active, on mouseover, already visited. Visually distinguishing an active link from an already visited one helps the visitor to navigate the website, reminding him which parts he has already seen.
  •  Date: namely the dates that can be reported in different places on the website, for example, in relation to e-commerce, Blog, Comments and Rating, Contact Form and Portfolio Objects, as well as the Online Control Panel.
  • Field /  Button: these are the fields and buttons in the forms that are created with the Contact Form Object, the Search Object or the e-commerce shopping cart, the login/logout fields of the Members' Area, etc. When you create a new Contact Form Object the fields and buttons in it take on the style defined here by default. You can subsequently change the style of a particular form using the options in the Contact Form Object > Style section.
  • Scroll-to-top: this is the back to top button, shown at the bottom of the page, which takes the visitor back to the top of the page, without having to scroll.


Like we said, the style options available vary according to the selected page element. For some elements you will find, among the others, the option Visible. With this option you can, for example, hide the page titles, so to report them with images or animated texts (for example by using the Objects Textillate or Animated Headlines).


It's important to specify though that hiding a page element doesn't mean it will be removed from the page source code as well: going back to our example, the corresponding tag <title> for the Page Title will be reported in the HTML code anyway, even if you hide it.