Understanding containers and their properties

Modified on Fri, 10 Mar 2023 at 11:23 AM

Containers are the most important and powerful module on any Mini-Page because they have a major hierarchy and everything within them will follow any edits made to the main Module; however, Container is just a technical name to specify the verb of "containing" something, this module is specifically called Column but we will keep calling them Containers throughout this article as the name suggests its function and it's easier to remember.

Containers are the only modules that can contain other modules, and practicing with them will allow you to make easier edits.

To begin, identify the container by selecting any module; if the module says "Container" at the top, we have found our correct module to begin editing; remember that to enter any module's editing mode, simply press the pencil icon when the module is clicked, or simply double click within the module:

DISCLAIMER: Keep in mind that any changes you make to any Container will affect the appearance of any modules placed within them.

Let's have a look at every possible feature within containers:

General Properties:
Within General Properties, we can change the look of the Container by adding an image as its background. To add an image, click Upload, and then use the Position, Size, and Repeat options to define how the image will look.

Positioning:


Absolute Position
This option causes the selected container to be placed inside the nearest container, and if we try to move it, it will move inside it without affecting the other objects. This option is rarely used and should be avoided if you do not want to lose complete control of the container.

Alignment
Left, center, right and justified alignment options that can be applied to the container.

Horizontal, Vertical and Layer Position
This allows you to move the Container horizontally and vertically, as well as the depth order of the Module by deciding whether it is on top of or behind anything else using Layer Position.

Items Alignment:
Options for determining the alignment of the objects contained within the container.

Sizing:
To change the Container's aspect by choosing its Width and Height.

Borders:


Corner Rounding
Define the squareness or roundness of a border.

Border Width
This will give the Borders a stroke effect.

Border Color
You can sample any color from your brand or choose any from the color palette.

Animations:
Animations can give your Mini-Page a unique look; you'll have access to a variety of animations on the go; simply click the one you like, and it will be applied to the currently selected Module.

Shadows:


Horizontal and Vertical Offset
Move the shadow horizontally or vertically from the center of the Module.


Blur 
Apply blur effect to the shadow.

Shadow Color
To define the color of the shadow.

Coloring:
You can use this option to apply solid or gradient colors to any Module, as well as make them transparent when erasing the color code.

Margins:
Options for defining the invisible space around the borders of Modules and Mini-Pages.

Actions:
The Actions Properties allow you to assign a specific action to the selected Container, so that when it is clicked, the specified action, such as visiting a website, is launched.



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article