The Container Widget allows you to place and customize various elements on your website’s page. This widget, unlike the “Row” widget, has only one column and no grid-gutter-width feature, but it provides superior styling options with two main tabs: ‘Settings’ and ‘Design’.
Settings Tab
This tab includes features for customization:
- Padding: Adjusts the space between the container’s border and the elements within it. Only numbers 0-9 can be used for setting values.
- Margin: Sets the space between the container and other objects on the page. Again, only numbers 0-9 can be used for setting values.
- Anchor: Allows setting an anchor point anywhere on the page for quick navigation.
- Sticky: Enables the container to stick to the top side of the screen as you scroll. You can also enable this feature for mobile devices.
- Adjust to Fit the Screen Height: This feature, when enabled, adjusts the container to match the height of the screen on which it is viewed.
Design Tab
The ‘Design’ tab allows you to change the look and feel of the container:
- Background: Choose between colour or an image for your container’s background. If you want to use an image, the media library will open up for selection.
- Background Types: You can select one of three background types – Not Selected (disables background image), Regular Background Image (allows customization of image size, tile, etc.), or Gradient Background (creates a mix of two colours with its own gradient direction).
- Video Background: You can enable a video background using either .mp4 or .webm format for the best user experience.
- Image Settings: Adjust the size, tiling, position and more of your image. You can even fix the image while scrolling or apply a parallax effect, but these features are desktop-only.
- Shadow and Border: Enable or disable shadow effect and select border style for your container. For the shadow, you can configure X offset, Y offset, Blur, Spread, color, and Inset.
- Corners: Adjust the roundness of the corners of your container’s border.
- Hover Effect: Change the hover color of the container and select a transition time (delay) for the effect. You can even enable a shadow effect for both normal and hover state, configure its position, spread, blur, and color settings.
- Copy from Normal: This feature allows you to copy all previously specified custom settings and apply them to the state that is activated upon hovering.
With these tools and options, you can ensure that your container fits perfectly with your website’s design
