How to work on the Row Formats

Best Practices > Step 4 - Pages >

How to work on the Row Formats

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

When you are working on the Page Creation and you have added at least one object to a cell in the Page layout table, you can format the row that the cell is in. Select the row and click on the button to open the Row Formats window.

Click to expand/collapseHow to join rows so they have the same format

A row is a horizontal band along the page. Rows can be as wide as the page (which, in turn, depends on the template) or as wide as the browser window. The row's height depends on the height of the tallest object in one of the cells in the row.

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

Open the Page Creation window and insert the objects in the page layout table as required.
Click on the button to open the Row Formats window. In our page layout table below, all the rows have a dot next to them. The dot is empty or full, depending on whether the row format has been defined or not.
Released state before joining the rows

Released state before joining the rows

Move the mouse so it is halfway between the dots next to the two rows to be joined together: a lock appears.
Mouse along the line

Mouse along the line

Click on the lock: the two rows are joined and the lock changes aspect.
Click on the lock to join the rows

Click on the lock to join the rows

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.
Released state after joining the rows

Released state after joining the rows

You can repeat this operation as often as necessary.
Click to expand/collapseHow to divide joined rows

It's just as easy to divide rows as it is to join them together:

Move the mouse onto the lock between the dots.
Click on the lock to divide the two rows.

If two rows are joined together and given the same format, when they are divided the first row maintains the new style but the second row 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.

Click to expand/collapseWhen 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.

Example


The object in column 1 occupies rows 4, 5 and 6: these are automatically joined and cannot be separated

The object in column 1 occupies rows 4, 5 and 6: these are automatically joined and cannot be separated

Even if you give different formats to rows 1 and 2 and then insert an object that occupies both rows, they will be automatically joined and row 2 will take on the format of row 1. It will not be possible to divide them without changing the position of the objects.  

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 in differing rows.

Step 1


When you define the viewport corresponding to a breakpoint, the order forms groups of objects on different rows

When you define the viewport corresponding to a breakpoint, the order forms groups of objects on different rows

Step 2


Final situation: with the given order, rows 1 and 2 have been joined and look the same

Final situation: with the given order, rows 1 and 2 have been joined and look the same

Click to expand/collapseHow format a row

It's very easy to format a row:

Open the Row Formats window and select the row, or group of rows, to work on.
Use the available options to define the required format.

When you are working on the row format, you should remember that:

in the page layout table shown in the Row Formats window, the rows which have not been given a format have a white background and an empty dot next to them,
in the page layout table in the Row Formats window, the rows which have a specified format have a blue background and a full dot,
click on a row with the righthand mouse button to open a menu with the commands for copying and pasting the row format.
Click to expand/collapseHow to create a colored band as wide as the browser window

If you want to create a colored band that is as wide as the browser window, and not only as wide as the page, follow these steps:

Open the Row Formats window and select the row, or group of rows, to work on.
Select Colored for the background Background and use the available options to specify the color and opacity.
Select the Extend to the width of the browser window option and look at the preview to check the effect of the band you have created.

Following a similar procedure, just changing the type of Background, you can create a band with a gradient, a slideshow, a map, a video or a picture instead of a full color.

 

Click to expand/collapseHow to create a website with a parallax effect

The parallax effect is often used to give depth to a page and make it more attractive for visitors. When the page is scrolled, the background and foreground images move at different speeds, creating a 3D effect.

If you want to use the parallax effect on a page, follow this procedure:

Open the Row Formats window and select the row, or group of rows, to work on.
Select Image for the Background and use the available options to import the graphic file to be used and set parameters for the alignment, arrangement, etc.
Select the Effect option and choose the parallax effect you want to apply. Look at the preview to check the effect.
If you want to make the parallax effect even more evident, you can also select the Extend to the width of the browser window option so that the band covers the width of the browser window.

When you use the parallax effect, you can use a gradient, a slideshow, a map, a picture or a video as the row's Background, but not a full color.

 


Further information:

-

The Box Model in WebSite X5