Compatibility:

WebSite X5 Evo and Pro

As you know, WebSite X5 reports a grid with rows and columns where you can work in order to add contents and define the page layout. You can define some graphic settings for both the single cells and for the grid rows so t get a nicer and more functional page layout.


If you work on the Row formats you will be able to create some horizontal bands which help highlight the contents during the page scrolling. 


In this article we will cover the following topics:


Once you've learned these basic aspects, you will be able to work on the row formats to:


How the Row formats section is structured

To work on the Row style you will need to go to Step 4 - Page Creation and, after you added the wished contents on the page, you have to click on   Row Formats on the toolbar above the layout grid.


The Row Formats window is divided in two sections:

  • General:  It reports the page layout grid with the added contents. You will find a toolbar above this grid where you will find the options to define the row style. 
  • Full Height:  you will find the options to set the scrolling slides.

   

How to set the style for a Row

In order to define the style of a row and therefore create a horizontal band on the page, you need to proceed this way:

  • Go to Row Formats> General and select the wished row.
  • Define the wished Background: a color, a gradient, an image, an image list, an animation, a video or a map.
  • Use the reported specific options and set up the style you want. 


Don't forget that in the Row Formats section:

  • the Rows for which you haven't defined a style report a light-colored dot;
  • the Rows for which you have defined the style report a darker dot.


#tip - See how to better customize the row style here: How to work on the Row Formats to create a horizontal band displaying a background color or images


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.