The Row Formats window

Step 4 - Pages > Page Layout Table and Toolbar Commands >

The Row Formats window

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

This window opens when you press the Row Formats button in the toolbar of the page layout table in the Page Creation window. You can use the commands in this window to define the graphic format of the rows, where groups of objects are placed horizontally on the page.

This window is structured as follows:

Full Height
Click to expand/collapseReference: Commands in the General section

This section includes:

a layout of the page's configuration as it was defined in the Page Creation window;
a Toolbar;
the list of available options.

Select the row you want to work on and use the available options to define its format. The selected row will be shown in blue and its number appears in boldface.

There is a dot next to each row which is shown full or empty, depending on whether the row format has already been defined or not.

Consecutive rows can be linked together so they have the same format. It is also possible that rows are linked together automatically, as a result of how the objects are arranged in the page layout table or of how they are re-arranged in responsive websites.

The Toolbar placed above the grid reports the following commands:

Cut, Copy and Paste

You can set the same style you already defined for another Row (by cutting or copying it) for another  (by pasting it). You will find the same commands in the context menu you can open by right-clicking on the Row itself.

Extend to the width of the browser window

With this command you can extend the style you defined for a Row to the full Browser width.

On the layout grid the Row for which the Extend function has been activated are easily to be identified because they are wider than the columns which build up the page. By clicking again on the Extend to the width of the browser window button, the Rows reduce their width and adapt to the Page width.


This command creates an anchor and associates it with the object selected in the page layout table. If you click on the arrow next to the button, you will see a menu with these options: Insert Anchor..., Edit... and Remove.

An anchor is a reference that helps identify the position of an object within a page: it is used to set up links directly to the object. It can be set on an Object or a Row and it is used to create direct links to a specific section of the Page


You can apply a colored filter, no matter the background you set. You can set the filter with the following commands:

Color:this indicates the color to use for the background's overlay.
Opacity: this value indicates the transparency of the overlay color.  Values closer to 0 increase transparency, letting the row's background show through.
Enable color transition: select this option if you want to animate the background's overlay. The animation is a loop transition from the initial color to the End Color, passing through the Intermediate Color., if there is one.


This activates the parallax effect on the selected row. The parallax effect is a visual technique you can use to create a 3D illusion of depth and enrich your graphic layout by making the images move at different speed and perspectives. This effect turns the page scrolling into a more engaging experience for your visitors.

You can choose among different kinds of parallax effects:

Inverse Parallax;
Fixed Parallax.

The parallax effect is based on images moving at different speeds, therefore it cannot be used if the row's background is a solid color.

Once you have selected the row, or group of rows, to work on, the first thing to do is specify the type of Background you want for the row, and you can choose from:

Colored: the background is filled with a solid color.

Gradient: the background is filled with shaded color and you can specify the first and final colors, and the direction of the shading.

Image: an image is used as the row's background.

Image list: a slideshow is used as the row's background: the pictures appear one after the other, in a continuous cycle.

Animation: An animation is used as row background.

Video: a video is used as the row's background.

Map: a map is used as the row's background.

You can now specify the Settings for each background style. The possible options are:

Color: specifies the color to be used as the background filler color.
Start Color / End Color: specify the first and final colors of the shading.
Diffusion: indicates whether the first or final color is the most important, defining the space (as a %) in which the transition from the first and final color is to occur.
Direction: set the angle width according to which the shade is oriented.
Local File on PC: indicates the image file (.JPG, .GIF, .PNG.) for the picture to use as the background. You can search the image on the File Selection window by clicking on the   button.
Repeat: indicates whether the page background image is to be repeated, or not. It can be repeated horizontally, vertically or in both directions so that it occupies all the available space. The background image can also be resized so that it adapts to the available space.
Alignment: you can specify how the background image is to be aligned inside the row area.
Add... / Remove: you can create a slideshow to use as the row's background, adding new files (in .JPG, .GIF, .PNG format) or removing selected files that have already been added.

Click on the triangle in the Add... button to display a sub-menu with the Add Image... and Image from Online Library... items.

Move up / Move down: use these options to change the order of the pictures in the slideshow.
View: this option specifies how the slideshow is displayed in the row's background. You can choose from:
Pictures in timed sequence: the pictures are displayed in sequence according to the effect and the timing you have freely set.
Pictures scrolled: the pictures are displayed one at a time, with no transition effect. Passage from one picture to the next is by manual scrolling.
Pictures overlaid: the pictures are all shown at the same time, one on top of the other. In this case, best results are obtained if you use pictures in .PNG format with transparency and apply the parallax effect.
Video type: this indicates whether you are using a Local File on PC, a Internet file or a YouTube Video URL as the video for the background.
Local File on PC / Internet file / YouTube Video URL: you will see one of these options, depending on the selected Video type, and you can now select the video file to import or type in its URL, if the video file is already online.
Cover image: you can specify a preview picture to associate with the video. Again, you can search the image on the File Selection window by clicking on the   button.

The preview picture appears before the video and fades out when this starts. Setting up a preview picture is, therefore, particularly useful for mobile devices where videos are never started automatically.

Address: this is the address to be shown on the map that is used as the row's background.
Style: this indicates the type of map, which can be Roadmap, Satellite, Hybrid or Terrain.
Zoom factor: this gives the zoom factor for displaying the map.
Opacity: you can set the amount of transparency of the background color/shade/image/video/map. Values closer to 0 increase transparency, letting the page's background show through.
Click to expand/collapseReference: Commands in the Full Height section

Using the commands in this section, you can make each Line (or group of Lines as a unit) always take on at least the height of the Browser window, regardless of the height of the content they each contain. The result is that the Page's navigation displays the Lines as though they were a series of slides. Depending on the transition you select, they can either follow one after another, or overlap.

In order for each Line to always reach the exact height of the Browser window, you need to choose the Enable Full Height view for all the rows of this Page option.

Once you've activated this, you can specify how the transition from one Line to another should take place:

Enable Auto-scrolling: by selecting this option, scrolling through the page reveals the beginning of the next Line, then the Page scrolls automatically to display the Line in its entirety.

In addition  you can also set Navigation Commands:

Show Scroll Down buttons: displays a button, superimposed at the bottom of the Line, which allows the page to scroll automatically and display the next Line.
Buttons View: available if the Show Scroll Down buttons option was selected, allows you to decide if the scroll buttons should be always visible or visible on mouse hover.
Buttons Style: available if the Show Scroll Down buttons option was selected, this allows you to upload an image to be used to define the appearance of the button, or choose one from a preset library.
Show Navigation bullets: displays an icon that tells the User the number and/or position of the Lines into which the Page is divided. The User can click directly on the icons to scroll through the page and bring up the Line they are interested in.
Buttons Style: available if the Show Navigation bullets option was selected, this allows you to choose between different sets of graphics to determine the appearance of the Icon itself.
Alignment: available if the Show Navigation bullets option was activated, this allows you to decide how to align the Icon within the Page.


Read the guides:


How to work on the layout grid rows


How to work on the Row Formats to create a horizontal band displaying a background color or image


How to set a link on an Anchor


How to set the parallax effect


How to set the Full Height effect