Introduction

This document covers the functionality of the Container widget and illustrates the two best practices on how to achieve certain layouts by using the Container widget.

Overview

The Container widget helps structure the website and have a better design by controlling the layout and distribution of the widgets. Use the Container widget on any page to assemble and arrange the required elements inside and have the same arrangement for every screen size. The latter also supports adding some space without affecting the position of other elements on the page.
The Container widget facilitates the process of arranging widgets into groups and creating more complex layouts. Check out different use cases presented in the given article.

How to Use Container

Switch to the Visual Editor from the Dashboard Left Panel, and take the following steps:

Access the required page through the Page: Homepage button on the Top Bar.
Access the Advanced group of widgets from the Left Panel to drag and drop the Container widget into the Layout Canvas.

By default, the Container widget appears on the page as one row with a solid grey background and a min-height of 20 px applied to it.

When dropping any widget into the Container or adjusting the Container properties, the hardcoded styles are removed. The Container Property Panel becomes accessible on the right side when dropping the Container widget into the Layout Canvas.
Drop the required widgets into the Container while holding the Ctrl key down.
Customize the Container and alignment of widgets inside it using the Container Styles and Settings.
To activate the Container Property Panel with the Styles and Settings sections, click the Container widget while holding the Ctrl key down or use the Arrow at the upper left corner of the Property Panel.

The Styles section comprises several stylistic features:
- FLEX - a widget-specific style feature.
- Global Styles - the group of all the other available features typical to all the widgets.
  
  Use the FLEX feature to modify the direction and alignment of the widgets inside the Container as well as justify and wrap them.
  
  📘
  For all the other stylistic features, read the Global Styles article.
  
  The Settings section includes:
- Visibility - adjust it by selecting/entering the browsers and operating systems for displaying the widget.
Click the Publish button for the changes to apply.

Adding Widgets to a Container and Aligning Them

Access the Advanced group of Widgets from the Left Panel to drag and drop the Container into the Layout Canvas.
Customize the Container using its Property Panel on the right to set the Container Spacing, Size, Alignment, etc., as required. Check Global Styles for more details.
Access the Position dropdown on the Container Property Panel to set it as Relative.
Assigning the Relative position to the Container allows locating the widgets with the Absolute position inside the Container relatively to it.
Access the Basic group of widgets from the Left Panel to drag and drop the Image widget into the Container while holding the Ctrl key down.
To select the required Image, access the Settings section of the Image Property Panel, activating it by clicking the Image while holding the Ctrl key down or using the Arrow available at the upper left corner of the Property Panel.

The Settings section comprises:
- Change Image - redirects to the Media with the options to:
  - Choose an image from your Media.
  - Upload an image from your computer.
  - Upload an image from Free Stock.
  - Provide an image URL link.
Customize the Image using the Image Settings section:
- Object Fit - provides a dropdown to choose one of the three options: Cover, Contain, and Fill.
- Visibility - adjust it by selecting/entering the browsers and operating systems for displaying the widget.
Access the Basic group of widgets to drag and drop the Button widget into the Container while holding the Ctrl key down.
The widget appears in the Container as set by the Container Alignment.
Access the Position dropdown on the Button Property Panel to:
- Set a Z Index (the recommended one is 20) based on your layout for defining the order of overlapping elements.
- Choose the Absolute position from the dropdown.
Use the Position Adjustments to locate the Button widget as required by:
- Choosing one of the available options (px, %, em, rem, vh, vw, -) from the dropdown list,
- Inserting the necessary value.
Design the Button widget as required using the Global Styles.
Access the Basic group of widgets to drag and drop the Title widget into the Container while holding the Ctrl key down.
The widget appears in the Container with the Heading label. Use Global Styles to customize the widget.
Locate the widget at the necessary position using the Move feature of the Transforms group from the Title Property Panel.

Adjust the X, Y, and Z axes to position the widget as required. Check the Global Styles article for more details about the Move feature.

Click the Publish button for the changes to apply.

📘
It is possible to place a widget at the required position in the Container using either the Transforms Move feature or the Position Adjustments.

Placing a Predesigned Widget Group on an Image

A recommended way of getting started is to add an image and a container as two different widgets in the same column and then place one on the other.

Access the Basic group of widgets from the Left Panel to drag and drop the Image widget into the Layout Canvas and upload the required image as described above.
Access the Advanced group of widgets from the Left Panel to drag and drop the Container widget into the Layout Canvas while holding the Ctrl key down.
Design the Container as required adding and aligning several widgets into the Container as described above.
Select the Column containing both widgets and access the Position dropdown on the Column Property Panel to set it as Relative.
This step allows you to locate the widgets inside the Column relatively to it.
Access the Position dropdown on the Container Property Panel to set it as Absolute.
This step places the Container widget on the Image widget.
Adjust the size of the Container widget using the Container Property Panel.
For example, if you need it to be the same size as the Image widget, set the size of the Container widget as 100%.
Click the Publish button for the changes to apply.

👍
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.