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:
- How the Row formats section is structured
- How to set the style for a Row
- How to join Rows so they have the same style
- How to divide joined Rows
- When it is not possible to divide joined Rows
Once you've learned these basic aspects, you will be able to work on the row formats to:
- create bands reporting a color, an image of a video (see: How to work on the Row Formats to create a horizontal band displaying a background color or image);
- create bands which are as wide as the browser window (see: How to create a band which is as wide as the browser window);
- use the parallax effect (see: How to set the parallax effect);
- use the Full Height function to make the page scrolling more immersive (see: How to use the Full Height option to create scrolling slides on your pages).
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.