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 an 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 the container’s border and an object within it, while "Margin" feature creates a gap between the 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 screenshot 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, the 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, the 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 the 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 works 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!
You can select the Outset, Inset shadow and the None shadow. You can configure the following features for your shadow effect: X offset, Y offset, Blur, Spread and Color.
"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.
This widget belongs to the Structure widget category. Check out the other widgets in this category at the following link: Row.
Comments