Compatibility:

WebSite X5 Evo and Pro

There are different ways to make your web page more interesting and more appealing: a solution, which has become very popular lately, is to create horizontal bands which go beyond the template margins and adapt to the full browser width.


How to get this effect? It depends on the band contents. 


If there is a single Object on the band

If you placed a single Object on the Band, you need to work on the layout grid directly. Watch this video to find out how to proceed:



Alternatively, please keep reading:

  • Add the wished Object into the layout table on Step 4 - Page Creation: it has to occupy all the cells in the row and it doesn't have to be flaked by other Objects.
  • Select the Object and click on the   Extend button. 


On the layout table, the extended Objects are easily recognizable because they are lager than the Page columns. 


If you click again on the Extend button, the Object will go back to its normal size and will adapt to the normal Page width, and no longer to the browser window one. 


If there are different Objects on the band

If the band you want to create is more complex because it includes more Objects, possibly on multiple rows, the steps you need to follow are different:

  • Go to Step 4- Page Creation and add the wished contents. Then, select to open the Row Formats section.
  • Stay in the General section: select a row or a row group and set the background you want (see: How to work on the layout grid rows).
  • In order for the band to extend to the full browser window width, click on Extend to the width of the browser window.

Just like in the case of the Objects, the Rows for which the Extend function is active are wider than the Page columns. 


By clicking again on Extend, the Row goes back to its normal width and adapts to the Page. 


#tip - Row size.  A band can be as wide as the page (its width depends on the set Template) or as the whole browser window.  The height of a band depends on the other hand on the  Objects placed on it, but it can also take on the same height of the browser window (see: How to use the Full Height option to create scrolling slides on your pages).