WebSite X5 Evo and Pro since version 13

There are always more and more websites, one-page and "traditional" ones alike, having wide horizontal band on their pages.  Such bands, which often exceed the width of the contents and are as wide as the browser window, enrich the page and attract the visitors' attention: use them on your website to highlight the most important contents. 

In this article, we will look at:

How to create a band

To create a horizontal band you need to work on the Row formats, which is very easy:

  • On Step 4- Page Creation, add your contents and then click on the button to open the Row Formats window.
  •  Select the row, or group of rows, to work on and define the color, the gradient, the image, the image list, the video or the map you want to use as Background. Use the available options to define the required format.
  • If you want your band to be as wide as the browser window is, choose the option Extend to the width of the browser window.

#tips - Row size.  A band can be as wide as the page, whose width depends on the Template, or as the Browser window is. The height of a band, on the other hand, depends on the Objects which are used on the row. Still, it is possible to set it so it is as high as the Browser window is (see: How to use the Full Height option to create scrolling slides on your pages). 

  • Finally, if you want to activate a parallax effect on a row background, click on Effect and choose the most appropriate kind of parallax effect among the reported ones (see: How to set the parallax effect?).

When you are working in the Row Formats window, you should remember that:

  • the Rows which have not been given a format have a white background and an empty dot next to them,
  • the Rows which have a specified format have a blue background and a full dot,
  • by right-clicking on a Row you open a menu with the commands for copying and pasting the defined Row Format.

How to join Rows so they have the same style

It is possible to join consecutive Rows together so that the chosen Row format applies automatically to all of them:

  • In the Grid reported in the Row Formats window, move the mouse so it is halfway between the dots next to the two Rows to be joined together: a lock appears.
  • Click on the lock: the two Rows are joined and the lock changes its aspect.
  • A line now appears that joins the two dots, indicating that these two Rows are joined together. All the formatting in the first row will be automatically applied to the second one, too.
  • You can repeat this operation as often as necessary.

How to divide joined Rows

As well as joining Rows so to give them the same format, you can also divide them so to make them independent.

  • Move the mouse onto the lock between the dots joining the Rows.
  • Click on the lock to divide the two Rows.

If two Rows are joined together and have the same format, when they are divided the first Row maintains the new style but the second one resumes its original style.

If more than two rows have been joined together, they can be divided at the point where the lock appears. For example, if Rows 1, 2, 3 and 4 are joined together and you click on the lock between Rows 2 and 3, you will end up with Rows 1 and 2 joined together and Rows 3 and 4 joined together.

When it is not possible to divide joined Rows

Rows are sometimes joined together automatically, according to how the objects in the page layout table are positioned or how they are ordered for differing viewports of a responsive website, and it isn't always possible to divide them.

1st Case. Page layout

If an Object in the page layout table occupies more than one Cell, and these are on different Rows, all the Rows involved are joined together automatically. The lock that appears on the line that joins the dots between each Row is gray, instead of blue, to indicate that it cannot be removed. The only way to change this situation is to change the layout of the Objects.

In the image, the Object in column 1 occupies Rows 4, 5 and 6: these are automatically joined and cannot be separated.

2nd Case. Responsive website

If you are working on a Responsive website, when you have to specify the order of displaying objects in the various Viewports, combinations may occur that cause two or more Rows to be joined automatically. This usually happens when, as in the following example, an Object is followed by another which is not to its right (on the same Row) but, instead, is below it (on a different Row): this causes the automatic creation of groups where Objects are placed on differing Rows.

When you define the Viewport corresponding to a breakpoint, the order forms groups of Objects on different Rows.

Final situation: with the given order, Rows 1 and 2 have been joined and take on the same style.