Common features are available for most part of the widgets within the Control Panel. The following features are presented in the list: Spacing, Alignment, Visible On, Link To, Background, Anchor, Animation, 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".
2. "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 hide/show widget with "Visible On" feature for any device (e.x. hide it on Desktop version and show it on mobile version). The yellow line indicates the active device and the greyed icon indicates the disabled device.
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" - action option is 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.
"Open Popup" - this feature allows you to open popup.
"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 (if Store plugin is available).
"Go to Product" - this feature allows you to enter required product page of your Store (if Store plugin is available).
"Open URL" - this feature allows you to open external URL. You can type necessary URL in the second field.
"Mail To" - this feature opens a form field, where you can specify e-mail account and receive e-mails.
"Call To" - this feature allows you to make a call to the selected number.
"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 enable "Force Download" feature for the "Open File" option.
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.
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/alternative sticky 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.
"Alternative Sticky Color" feature means that the background color of the Container may be different in the normal mode and in the "Sticky" mode.
"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".
Video (.mp4) and Video (.webm) - these features allow you to enable background video for the Container widget.
8. "Image 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.
9. "Position" - this feature relocates image’s position according to the chosen arrow button (Left Top arrow button is used by default).
10. "Image 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.
9. "Adjust to Fit the Screen Height" - this feature allows you to set widget's height according to the height of the screen, which is used while previewing the site. In addition, you can configure the content's vertical alignment in the section.
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 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).
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.
"Equal Column Width" feature allows you to make the width of all columns identical, which will re-align the content within them accordingly.
"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.
"Adjust to Fit the Screen Height" - this feature allows you to make 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).
"Sticky relative to the parent widget" - this feature allows you to pin 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.
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 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 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 available shape from the list which can be applied for 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.
"Shape Color" changes the color of the applied shape.
"Position" allows you to position shape either over or below the content.
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 contains the following features: "Padding", "Margin", "Anchor", "Sticky", Adjust to Fit the Screen Height", "Visible On".
"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 the 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 the possibility to make the 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.
If the "Sticky" option is enabled, you can also enable the "Sticky on Mobile" option to have the same effect on the mobile device.
"Adjust to Fit the Screen Height" - if this feature is enabled, Container will cover the entire height of the visible screen part.
"Design" - this tab allows you to modify background color or image, it’s size, position, tile and border style, within the container widget.
"Color" and "Image" features allow you to change the background of your Container widget. If you are using Color feature - you can select any color from the Color picker tab. If you are using Image feature - you can select an image via the Media Library (please click on the Edit button to proceed).
There are 3 types of background: 1) Not Selected; 2) Regular Background Image; 3) Gradient Background.
"Not selected" feature disables possibility to select the background image for this Container widget.
"Regular Background Image" feature allows you to select the background image and customize its size, tile, and other settings.
"Gradient Background" feature allows you to create a marvelous mix of two colors with its own gradient direction.
"Video (.mp4)" and "Video (.webm)" features allow you to enable video background for the Container widget. It's recommended to use both formats to improve user experience on all browsers.
"Image Size" feature allows you to select Original, Cover or Contain sizes for your image background, which affects the image's position in the Container area.
"Image Tile" feature allows you to repeat the same image through the Container widget's area or disable such possibility.
"Fixed" feature allows you to fix your image within the Container area while scrolling the page. This effect work only on the desktop!
"Parallax" feature allows you to receive a special effect on the image while scrolling the page. This effect works only on the desktop and only in Preview mode!
"Enable Shadow" feature allows you to enable/disable the shadow effect for the Container widget.
You can configure the following features for your shadow effect: X offset, Y offset, Blur, Spread, Color and Inset.
"Border" feature allows you to enable a border for the Container widget. It has the following border Styles: None (disabled), Solid, Dashed and Dotted.
"Corners" feature allows you to increase/decrease corners for the border of your Container widget.
"Hover" effect allows you to change the hover color of the Container widget when you place a mouse cursor over it. Also, you can select a transition time (delay) of the effect to appear.
"Enable Shadow" feature allows you to enable a shadow effect for both normal and hover state, configure its position, spread, blur and color settings.