The Row Formats window

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

The Row Formats window

Previous pageReturn to chapter overviewNext page

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.

The Row Formats window shows:

a layout of the page's configuration as it was defined in the Page Creation window,
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. For more information on this, see How to define the row format.

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.

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 choose an image file from the online library, using the button to open it, or from an offline folder on your PC, using the File selection 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.

A collection of over 900,000 royalty-free pictures is available in the window that opens with the Image from Online Library... command, and it's easy to select the one you want to import.

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, fading out after 3 seconds.
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 choose an image file from the online library, using the button to open it, or from an offline folder on your PC, using the File selection 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.

As well as choosing a particular background, you can also apply an Overlay, which is a sort of colored filter, indicating these parameters:

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.

Finally, you can use these Options:

Extend to the width of the browser window: the row format is extended for the full width of the browser window, and not just to the width of the page contents.
Effect: this starts the parallax effect on the selected row. Parallax is a visual technique whereby the background and foreground images move at different speeds. This creates a 3D illusion when the page is scrolled down, giving an attractive element of depth to the overall effect, which visitors appreciate. You can choose different types of parallax: Parallax, Inverse Parallax and 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.


Best practices:


How to work with the Row Formats

Further information:


The Box Model in WebSite X5