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:

General
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,
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.

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.

The Image from Online Library... command opens a window containing an Online Library with millions of Premium Images and Free Images where you can the images 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.

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 Row Formats

-

How to set the parallax effect

-

How to set the Full Height effect