Getting Started

A container is a well-organized and adaptable layout designed for web pages. Multiple containers & elements can be added inside a container and styled differently.

How to take a Container?

You can add a container by clicking the +Add New Section button and then choosing your desired sized container.





💡 When you take a section, there comes a Root Container, which basically acts as a Row, and a Child Container inside it, which acts like a column.

Container Editorial Mode

Container editor mode comes up with 3 sectors, which are General, Styles & Advanced.

General

In general, there are four editing options for Containers. Refer to the screenshot below:

Container Settings

Here, you can set height, width, alignment, and element gaps inside a container.





🔷 Max Width

The Root Container gets the Default width from the Global Settings, while 100% width fills the entire window width.





💡 To know more about Global Container and Column Settings, check the documentation below.

Container and Column Settings | Global Styles



🔷 Width Mode

In the second container, you can choose between Custom and Global for its Width Mode. With Custom, you can adjust how much space the content width takes up from 1% to 100%. With Global, it follows the width settings set globally.

Refer to the GIF below:





🔷 Min. Height

You can decide the minimum height for the container. Refer to the GIF below:





🔷 Containers Height

The container height offers two choices: Auto and Equal Height. With Auto, the container adjusts its height based on its content. On the other hand, Equal Height is useful when you want all containers in a row to have the same height.


Refer to the GIF below:





🔷 Horizontal Alignment

This setting allows you to align the contents horizontally within the container.

Refer to the GIF below:





🔷 Vertical Alignment

This setting allows you to align the contents vertically within the container.

Refer to the GIF below:






🔷 Gap Between Elements

Using this style, you can generate spaces between the elements within a container.

Refer to the GIF below:

Advanced Flex Style

Here, you'll find advanced options for customizing flex styles.






🔷 Content Width

You can adjust the content width here from 0% to 100% ratio as per your design or requirement.

Refer to the GIF below:





🔷 Direction

This setting determines the positioning direction of elements within the container.

→ - Align your element to the right side of the container.

↓ - Align your element at the bottom of the container.

← - Align your element to the left side of the container.

↑ - Align your element at the top of the container.


Refer to the GIF below:






🔷 Justify Content

Using this style will vertically align the elements within a container at the start, center, end, evenly between, around, or spaced evenly.


Refer to the GIF below:





🔷 Align Items

This option enables you to horizontally align all elements within a container, choosing from options such as start, center, end, or stretched.


Refer to the GIF below:





🔷 Wrap

In Container:

- Wrap: Allows content to wrap within containers.
- No Wrap: Content maintains original size, no wrapping.
- Reverse: Reverses wrapping behavior for dynamic adjustments.

Refer to the GIF below:

Individual Container Styles

🔷 Align Self

This feature enables containers to position themselves at the top, middle, or bottom, or to stretch according to the adjacent container.

Refer to the GIF below:





🔷 Order

When there are multiple containers in a row, you can arrange their order using negative or positive numbers based on their position.

Refer to the GIF below:





🔷 Flex Grow

It’s a feature that allows an item to grow and occupy available space within a container. If the containers inside the main one don't fill up all the space, you can use flex grow to make them expand.

Refer to the GIF below:

Background

Here, you can customize the container's background with colors, gradients, images, or videos. You can also define hover styles for when users interact with the container.






🔷 Background Color

You can set the background of a container as a solid color. You can choose the color from the Global color or use the color picker.

Refer to the GIF below:






🔷 Background Gradient Color

There are three gradient background color options available for a container. You can choose any gradient color palate from Simple, Advance & Library options as per your design.




Refer to the GIF below:





🔷 Background Image

You have the option to set the container's background as an image by either uploading your own or generating one using AI.

Refer to the GIF below:





🔷 Background Video

You can add a video to the container's background. Just upload either an MP4 or WEBM video file.

Refer to the Screenshot below:

Related Articles

Styles tab in Editor

Updated on: 13/05/2024