Compatibility:

WebSite X5 Evo and Pro

Lately, a new page scroll method has become more and more popular on websites, presenting a series of individual sliding blocks, each one as high as the browser window, instead of a unique section for the whole page. You will get a clearer picture by having a look at the homepages of CV Power or Blossom Corner, two templates which we have created using this method.


Do you want to find out how to get this same page scroll effect for your next project?


Use the Full Height function in the Row Formats section, it is easier than you think. That's what you need to know and do:

 

Introduction

As we all know, WebSite X5 employs a page layout table to represent the pages of a website: the Page is divided into rows and columns, and the contents are added in the resulting cells (see: How to set up the page layout table). By default, :

  • the width of the page reflect the width of the chosen Template;
  • the column width is obtained by dividing the page width for the number of columns;
  • the row height is determined by the highest Object added in the row.   


By using the Full Height you can make all the rows taking on the same height of the browser window. In this way, when you scroll down a page you will display one single row after the other, thus creating some stand-alone blocks.

So, if you use this function the row height isn't fixed anymore, but it varies according to the viewport: if the available space is reduced, the contents on the row will determine the minimum height. On the other hand, if there is much available space, the contents will be aligned in the center. 


Preparing the rows

You need to think about the page as a series of blocks: each block needs to be autonomous, as they will be displayed the one after the other like in a slideshow.


Now this aspect is clear, you need to:

  • Go to Step 4 - Page Creation and add all the contents on the wished page.
  • Click on the button to open the Row Formats section.
  • In the Geneal section, connect the rows which need to be part of the same block. Click on the lock icon displayed when you put the mouse on space between the dots next to the rows (see: How to work on the layout grid rows).


Activating the Full Height

  • Go to Row Formats > Full Height.
  • Activate the Enable Full Height view for all the Rows of this Page option.
  • By activating the Auto-scrolling option, when the beginning of a new block is displayed, it is quickly brought on the foreground, by occupying the whole viewport.
  • You can also activate the Show Scroll Down buttons option to show a button at the end of the bock, so to make the page automatically scroll towards the next section. You can choose whether this button must stay visible on if it has to be displayed on mouseover only. You can also choose the Button Style.
  • Finally, you can activate the Show Navigation bullets option and define their style and alignment on the page: with this tool, the user will easily be able to switch section.