Scroll

Widgets: Structure

1. Common features 
2. Row
3. Container

1. Common features

Common features are available for most part of the widgets within the Control Panel. The following features are presented in the list: Spacing, Devices, Alignment, Visible On, Link To, Background, AnchorAnimation, Preset Name.

1. "Spacing" - this feature allows you to generate space around content (increase/decrease internal indent between the widget and border from 4 sides: left, right, top, bottom). This editing can be made through 4 drop-down lists, which contain the following sizes: "Auto", "0", "Small", "Medium", "Large". "Auto" size is used by default.

You can choose one of the available spacing features by clicking on it's title and choosing necessary option from the list: "Auto", "0", "Small", "Medium", "Large".
804.jpg

2. "Devices" - this feature allows you to set settings for various devices: desktop, tablet, landscape phone, portrait phone.

"Alignment" - this feature re-aligns your widget's position, depending on the alignment side: left, middle or right. You can also re-align any object for each device if combined with "Devices" feature.

3. "Visible On" - this feature allows you to enable/disable spacings for various types of devices (tablet, mobile landscape, mobile portrait). Disabled device will be grayed out. Desktop is set by default and can't be disabled.

4. "Link To" - this feature enables click action option for your widget. There are several alternative options: "None", "Go to Page", "Go to Blog", "Go to Post", "Go to Store", "Go to Category", "Go to Product", "Open URL", "Mail To", "Open in Lightbox", "Open File".

"None" - if this feature is enabled, click action for chosen object would be disabled.
"Go to Home" - this feature allows you to enter Home page of your site. In store templates you can either use regular home page or enable Store as a home page of your site within the Store - Settings - General tab.
"Go to Page" - this feature allows you to open required site’s page. You can choose any page from the list of created pages.
"Go to Blog" - this feature allows you to enter main Blog page of your site.
"Go to Post" - this feature allows you to open required post of your Blog section.
"Go to Store" - this feature allows you to enter Store page of your site (if Store plugin is available).
"Go to Category" - this feature allows you to enter required category page of your Store
"Go to Product" - this feature allows you to enter required product page of your Store
"Open URL" - this feature allows you to open external URL. You can type necessary URL in the second field.
"Open In" - this feature provides possibility to open URL in the new window or in the current window.
"No Follow" - this feature won’t allow search engine to index required URL.
"Mail To" - this feature opens a form field, where you can specify e-mail account and receive e-mails.
"Open in Lightbox" - this feature allows you to open image file from your Media Library and preview it in full size.
"Open File" - this feature allows you to open file from the Media Library. You can either preview or download it (depends on the file type).

You can also enable "Force Download" feature for the "Open File" option - in such case file will be downloaded without preview. Internet Explorer does not support this function.
754.jpg

You need to specify file title with it's extension (for example test.pdf) within the "File Name" field.

5. "Background" - this feature allows you to edit color/background image within the widget.

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

There are presented 25 preset colors and 5 additional (independent) colors. If you wish to set color which is not available in the color palette - please click "More Colors" link and choose necessary color.

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 widget.
If Background Image wasn’t set yet - please click + button, so you will be redirected to the site’s Media Library.

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, which allow you to choose alternative image in the Media Library or remove "Background Image". Also you will be able to use additional features: "Size", "Position", "Tile", "Fixed", "Parallax".

"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 the "Container" widget.

"Don’t Repeat" feature is used by default and allows you to preview background image without repeating itself within the "Container" widget's area.

"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 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.

6. "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.

7. "Animation" - this block allows you to set custom animation type effects for your widget's first appearance.

Animation effects can be seen during the "Preview" mode on the live site and within the visible area in Control Panel.

 8. "Preset Name" - this feature allows you to choose visual appearance of the widget and edit it's preset features via "Design" section. Each theme has various number of unique presets. Each widget has different amount of presets.

2. 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 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. 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 width and creates small gaps on both sides of the Row widget.

"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 section’s width on columns. All columns have equal width if "Fluid" type of width is enabled.
795.jpg

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

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.
797.jpg

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.
798.jpg

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).

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

"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. 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).
 

Design

This tab allows you to set background color for each column within the "Row" widget. You can only choose theme related colors. Custom colors can't be used.

3. 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".
799.jpg

"Settings" - this tab provides the following features: "Padding", "Margin".

This widget also has the following common features: "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.
800.jpg 

"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.
801.jpg

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

 

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

"Style" - this feature modifies your border’s style. “None” style is used by default.
805.jpg

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.
806.jpg

"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.
807.jpg

"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