This widget allows you to place various elements on your website’s page. The container may be customised with a variety of styles (including margin and padding options, colours, background image, borders and shadows). In comparison to the “Row” widget, it has only one column and no grid-gutter-width feature, yet it is a necessary tool for the site’s editing process because of its far superior styling options.
“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 space between the container’s border and elements within it, while the “Margin” feature creates a space between container and other objects.
“Margin/Padding Preferences”: You can only use numbers 0-9 for setting values, other symbols are not valid and it’s not possible to use them.
You can see the example of how it works on the screenshot below.
“Anchor” – this feature allows you to set the anchor point in any part of the page and enter this part of the website immediately after you use a link with the anchor feature enabled.
“Sticky” – this feature provides the possibility to make the container and once you scroll to its top side the container will stick to the top side of the screen.
If the “Sticky” option is checked, you may also turn on the “Sticky on Mobile” option to have it behave similarly on a mobile device.
“Adjust to Fit the Screen Height” – if this feature is enabled, the Container will have the height of the screen it is being viewed on.
“Design” – this tab allows you to modify the background colour or image, it’s size, position, tile and border style, within the container widget.
“colour” and “Image” features allow you to change the background of your Container widget. If you’re wanting to use Colour, simply pick a hue from the colour picker. If you’re wanting to use an Image, the Media Library will open up and you can select an image.
There are 3 types of background: 1) Not Selected; 2) Regular Background Image; 3) Gradient Background.
“Not selected” feature disables the ability to select the background image for this Container widget.
“Regular Background Image” feature allows you to select the background image and customise its size, tile, and other settings.
“Gradient Background” feature allows you to create a simple mix of two colours 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 and coverage of the Container area.
“Image Tile” allows you to repeat the same image over the background of the Container’s area.
“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!
“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, colour 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 colour 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 colour settings.
“Copy from Normal” feature allows copying all the previously specified custom settings and applying them to the state, activated upon hovering.
