Scroll

Widgets: Structure

1. Row
2. Container

1. Row

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

"Row" widget's height is equal to the height of the input widget. Row’s width is equal to the width of selected section. You can input row widget into another row, container or section. Amount of input rows is unlimited. If you haven’t choose 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 section’s width. Section takes 100% screen width.

"Fixed" - type of width that sets fixed widget’s height and creates small gaps on both sides of the Row widget.

One column is used by default. You can choose up to 6 columns for your row widget.

Each of 6 toggle buttons separates section’s width on columns. All columns have equal width if "Fluid" type of width is enabled.

If "Fixed" type of width is enabled - the left side and the right side columns will have increased width (in comparison to other columns).

Empty row widget has a grey border and won’t be seen on the live site.

When you select or hover the Row widget, border color will be highlighted.

If you wish to place a text object within a Row widget - you need to drag & drop object over the Row column, so it will highlight 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 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 amount of columns to 1, then the rest 5 columns from the right side will be removed (including content within them).

"Top Spacing" - this feature allows you to set necessary spacing for the top side of the row.

"Bottom Spacing" - this feature allows you to set necessary spacing for the bottom side of the row.

"Disable Column Spacing" - this feature allows you to disable column spacing for 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.

"Vertical Alignment" - this feature allows you to set the type of content alignment within the row columns.

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

"Anchor" - this feature allows you to set the anchor in any part of the page and enter this section immediately after you use a redirect option with the anchor feature enabled.

Design

This tab allows you to set background color for each column within the Row widget.

2. Container

This widget allows you to place various objects on your site’s page. Container can be customized with various styles (including margin and padding features, colors, background image and borders). In comparison to the "Row" widget, it has only one column and no grid-gutter-width feature, however style options makes it indispensable widget during the site’s editing process.

"Container" widget is separated into two main tabs: "Settings" and "Design".

"Settings" - this tab provides the following features: "Padding", "Margin" and "Anchor".
"Padding" feature creates a gap between container’s border and object within it, while "Margin" feature creates a gap between container and other objects. Indent is set to 0 by default.
"Margin/Padding Preferences": You can only use symbols 0-9 for setting values, other symbols are not valid and it’s not possible to use them. Minimal length of characters - 1. Maximum length - 3. Acceptable values: 0-999 px.
You can see the example of how it works on the screen shot below.

In order to increase/decrease value of margin/padding tools you can either use arrow buttons or "Numeric Stepper Tool" (in such case please click on the numeric  value). Numeric Stepper tool allows you to set necessary value manually without using arrow buttons.

"Anchor" - this feature allows you to set an anchor in any part of the page and enter this section immediately after you use a redirect option with the anchor feature enabled.
 

"Sticky" - this feature provides possibility to make container visible until you scroll to its top side. Once it is done, container will be visible and will stick to the top side of the screen.

"Design" - this tab allows you to modify background color or image, it’s size, position, tile and border style, within the container widget.

"Background" tool allows you to edit color/background image within the container. Container is transparent by default.

"Color" - this feature allows you to change background color of your container widget.

There are presented 25 preset colors and 5 additional (independent) colors. If you wish to change colors, please click More Colors link.

Within the color picker section you can choose any color. "Current" field shows your current color, while "New" field shows color, which will change your current color. In order to save results please click "Ok" button. If you wish to abandon changes - please click "Cancel" button.

"Background Image" - this feature allows you to add/remove background image of your container.
If Background Image wasn’t set yet - please click + button, so you will be redirected to the site’s Media Library. To change/remove the image you need to press "Edit"/"Remove" button.

Please choose necessary image from the list of images within the popup area and click "Apply" button. 

Your Background Image section will change it’s appearance (Edit/Remove buttons will appear on the right side of the section).

"Size" - this feature appears, when you create Background Image for your site. It has 3 different options: "Original" (default), "Cover" and "Contain".

"Original size" option displays default (original) image with it’s default size.

"Cover size" option stretches image on the entire screen, preserving the original proportions.

"Contain size" option stretches image’s height in reference to lowest parameter (height or width), preserving the original proportions.

"Position" - this feature relocates image’s position according to the chosen arrow button (Left Top arrow button is used by default).

"Tile" - this feature allows you to repeat your background images within container widget.

"Don’t Repeat" feature is used by default.

"Repeat" feature allows you to reflect background image on the page in various proportions. 

"Repeat X" feature allows you to reflect background image in reference to the area’s width. 

"Repeat Y" feature allows you to reflect background image in reference to the area’s height. 

"Parallax" - this feature allows you to enable parallax effect for the background image of your Container widget. If Parallax feature is enabled, Fixed background feature will be disabled and vice versa. You can see the effect of parallax only in preview mode.

"Fixed" - this feature is enabled by default. It allows you to use fixed position for your background image. If "Fixed" feature is disabled, then background image will move simultaneously with content.

"Border" - this block allows you to modify borders of your container widget. It contains 3 main sections: Color, Style and Width.

"Style" - this feature modifies your border’s style. “None” style is used by default. You can also set one of additional styles: "Solid", "Dashed" or "Dotted".

"Color" feature is using the same features, which are presented in "Fill Color" feature.
"Width" - this feature allows you to set/edit border’s width of your container widget. Default width is set as 0. In order to increase/decrease width value you can either use arrow buttons or Numeric Stepper tool (in such case please click on the numeric  value). Numeric Stepper tool allows you to set necessary value manually without using arrow buttons.
"Width Preferences" - symbols 0-9 can be used for setting values, other symbols are not valid and it’s not possible to use them. Minimal length of characters - 1. Maximum length - 3. Acceptable values: 0-999 px.

"Corners" - this block allows you to modify rounding feature of corners within the container widget. Default value is set as 0. In order to increase/decrease rounding value you can either use arrow buttons or set value manually.

"Corners Preferences" - symbols 0-9 can be used for setting values, other symbols are not valid and it’s not possible to use them. Minimal length of characters - 1. Maximum length - 3. Acceptable values: 0-999 px.

Have more questions? Submit a request

Comments

Powered by Zendesk