The Container widget helps you structure the website and have a better design by controlling the layout and distribution of the widgets. The Container widget facilitates arranging widgets and creating more complex layouts. Use the Container widget on any page to assemble the required elements inside it. This enables you to have the same arrangement for every screen size. You can drag and drop the required widgets into the container to create a layout and style it according to your brand design. The widget also allows you to add some space without affecting the position of other elements on the page.
Adding a Container Widget
To add the Container widget:
- Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
- Navigate to the required page through the Page button on the Top Bar.
3. Open the Widgets list on the left panel.
4. Type the widget name in the search bar, or expand the Essentials group to access the Container widget.
5. Drag and drop the Container widget onto the Layout Canvas.
Upon placement on the page, the Container widget is initially displayed as a row with a solid grey background and a minimum height of 20 pixels. However, these predefined styles are removed when any widget is dropped into the Container or when adjusting its properties.
Configuring the Container Widget
Customize the Container widget through its Property Panel comprised of Style, Content, and Settings. If the Property Panel is inactive, access it by clicking the Container widget.
To configure the Container widget:
- Go to widget Styles to customize the widget's general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
- Go to the widget Content to add clickable links to external sources, Ecommerce products, collections and collection items, phone numbers, email addresses, headings, as well as main or system pages such as FAQ, Home, About, etc. This allows your customers to conveniently navigate to interconnected information by simply clicking on the provided relevant links.
- Go to the widget Settings to set the widget visibility (see Visibility Settings) on the website based on criteria such as your customers' location, session status, device type, browser, language preference, etc., to tailor it to specific user segments or conditions.
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.