Rows & Columns
Element Overview
Think of Rows as the largest building blocks for any layout within the Fusion Page Builder. Recognizable by their vertical dark bars, they are built to contain Columns (horizontal dark bars), and the individual Elements (horizontal bars) that are placed inside of the Columns. It is also possible to nest one Row inside of another to create more complex, versatile layouts. Rows can be re-ordered by dragging-and-dropping them into position.
Learn More in the Rows & Columns Overview
Element Options
Width
This option allows you to choose whether the Row is wrapped in a container (default) or is full width. Background colors and images will remain full width. Background colors and images set on nested Rows will span the full width of the Row they are contained within.
Seamless
This option allows you to enable seamless Columns with no left/right margins for the Row being edited. For example, if you want a row of three images with no margins between them, enable this option.
Background Image
Set the background image for the Row using this option.
Learn More About Adding Images
Background Image Repeat
Choose whether the background image set for the Row repeats or not.
Background Image Position
Choose the position of the background image using any of the predefined options, or choose “Custom” to input a specific x-y position in pixels (e.g. 20px 20px).
Background Image Attachment
Choose whether the background image for the Row is set to “Scroll”–which will make the background scroll along with the page–or to “Fixed”, which will make the background fixed within the viewport, meaning the page content will move independently of it in a parallax-like fashion.
Background Image Size
Choose from three background image size options for the Row: Auto, Cover, and Contain.
Auto will output the image at its actual size within the viewport. Cover will scale the width of the image to fill the viewport entirely; as a result, some areas of the top and bottom of the image may not be in view. Contain will scale the image so that both the width and height will fit within the viewport.
Element Advanced Options
Style
This option allows you to choose a style for the Row. Light–which is active by default–will inherit globally set text color. Dark will adopt text color set within the Row for headlines and links, which is useful for when you have a dark background color set and want to customize the colour of headlines or links so that the text displays legibly within the Row.
Function
The Row Function allows you to control whether the row is visible (default) or collapsed. If “Collapsed” is chosen, the Row will be hidden and can be triggered and revealed by a Button.
ID
An ID input here will allow the Row to be targeted for triggering via the Button Element if its Row Function is set to “Collapsed”. Or, the ID can be used to target the Row for an anchor link that jumps a user down to that Row on the page.
Element Style Options
Every Element has a standard set of style options available to it that allow for margins, padding, background color, CSS classes, and more to be set.