Widget: Row

This widget allows you to place various objects on your website’s page. It affects the responsive part of the template and allows you to preview the site on various devices correctly. You can apply different styles for this widget.

"Row" widget has the following features: "Width", "Row Structure", "Top Spacing", "Bottom Spacing", "Disable column spacing", "Vertical Alignment", "Grid Behavior".

This widget also has the following common features: "Anchor".

"Row" widget's height is equal to the height of the input widget. The row’s width is equal to the width of the selected section. You can input a row widget into another row, container or section. Amount of input rows is unlimited. If you haven't chosen a section - you won’t be able to put widgets in it.

This widget has two types of width: "Fluid" and "Fixed".

"Fluid" - type of width which is used by default. It covers 100% of the section’s width. Section takes 100% screen width.

"Fixed" - type of width that sets a fixed widget’s width and creates small gaps on both sides of the Row widget. You can adjust the value for Fixed Width under Design > Size and Value > Fixed Row Width.

"Row Structure" - this feature allows you to separate "Row" widget into columns (up to 6). One column is used by default.

Each of 6 toggle buttons separates the section’s width on columns. All columns have equal width.

If you wish to place a text object within a Row widget - you need to drag & drop the object over the Row column, so it will highlight the object and border with yellow color. You can put unlimited amount of objects within the Row widget’s column.

Each column is separated with the dotted line. "Grid-gutter-width" is set to 30 by default (15 on the left and on the right sides). It means that there will be a slight gap between object area and dotted line.

If you want to delete a row - please select it and click "Delete" button on the keyboard.

If you have reduced the amount of columns, from a higher value to a lesser value (for example, from 6 to 1) - you will see the following notification: “The content of columns would be removed. Would you like to proceed?” If you press “Yes” button - system will remove fixed amount of columns (depending on your previous choice). The columns will be removed from right to left side. It means that if you have filled these columns with content - it would be lost permanently.

Example: The amount of columns is set to 6. All columns are filled with content. If you change the amount of columns to 1, then the rest 5 columns from the right side will be removed (including content within them).

Each column has the following features: 1) the column can be drag & dropped to the left and to the right side within the Row widget to change its position; 2) the column can be duplicated if the maximum amount of columns is not exceeded; 3) the column can be removed.

"Equal Column Width" feature allows you to make the width of all columns identical, which will re-align the content within them accordingly.

"Spacing" - is a common widget feature.

"Disable Column Spacing" - this feature allows you to disable column spacing for the current Row widget and all Row widgets, which are nested within the current one. To enable column spacing for input rows you need to disable this setting in the main Row widget.

"Adjust to Fit the Screen Height" - this feature allows you to make a Row widget's height adapt to the full height of your screen, stretching the widget's content across it.

"Vertical Alignment" - this feature allows you to set the type of content alignment within the row columns. Available variants depend on the maximum column height, which affects the alignment of all other objects within the "Row".

"Grid Behavior" - this feature affects grid behavior for mobile devices (columns will either group in a horizontal row or shift vertically one over another on the mobile device and also can group shift vertically one over another on the tablet device).

"Anchor" feature allows you to redirect the site's visitor to the specific place on the page after he clicked on the redirect object.

"Sticky relative to the parent widget" - this feature allows you to pin a Row widget to the top side of the screen, so it will be always visible while scrolling the page. "Spacing to Top" feature allows you to enable/disable spacing between the Row widget and the top part of the page while scrolling the page.

Design

This tab allows you to set background color, background image and background video for your Row widget.

When background image is enabled within the "Image" field, additional features (such as "Image Size", "Image Tile", "Position", "Fixed" and "Parallax") will be available.

For video background it's recommended to use the same video in two different formats - .mp4 and .webm for cross-browser compatibility.

You can enable "Loop" feature for the video background, so it will always repeat itself while the visitor navigates through the page. Otherwise, it will show static part of the video end once it's finished.

"Top Shape Divider" and "Bottom Shape Divider" features allow you to add a specific shape to the Row widget to make it more attractive.

"Shapes" feature allows you to select an available shape from the list which can be applied to the Row widget.

"Inverted" feature changes the visible effect of the shape, creating it's inverted state.

"Mirrored" feature changes the visible effect of the shape, making it mirrored.

"Shape Height" affects the visible height of the shape within the Row widget's area.

"Repeat" creates additional copies of the shape all over the Row widget's area from left to right.  

"Opacity" enables setting the transparency of the curly dividers.

"Shape Color" changes the color of the applied shape.

"Position" allows you to position shape either over or below the content.

"Vertical Divider" feature allows you to create a visible separator between columns, where you can set custom height, edit its preset via the Design - Widgets tab. You can also enable the "Custom Design" option and select the style, color, and thickness of the separator line.