Container element
The Container element groups other elements so you can lay them out together: side by side in a row, stacked in a column, or nested to build two-column popups with an image beside the content. It has its own background, border, size and spacing, and is display-only, with no action or automations.
Available on: all platforms.
How it works
Drop elements into a container and they follow its Layout: direction, alignment and gap. Containers can be nested inside other containers to any depth. You can add a container as a column (elements stacked) or as a row (elements side by side), and switch direction later.
Options
Option | What it does | Values / default |
|---|---|---|
Style | Background (color, image or gradient), border, radius, shadow, opacity, scale | — |
Edge | Shapes one edge of the container: Straight, Curve, Diagonal, Arch or Wave, on the Left edge, Right edge or Bottom edge | Straight |
Size | Width, height, min and max width and height, overflow | Top-level containers: full width, 200 px minimum height |
Layout | Direction (row, column, reversed), justify, align, wrap, gap | Column, centered, no gap |
Spacing | Padding and margin | 10 px padding |
Position | Static, relative or absolute placement | Static |
Device, Animation | See Widget elements | — |
Behavior details and limitations
- Edge shapes are made for an image or colored panel beside the content: the shaped edge faces the content. On phones, where a side panel usually stacks on top, Personizely uses a matching shape for the bottom automatically.
- Rows don't stack on phones by themselves. To stack a row on small screens, switch the editor to mobile view and set the container's direction to column. That change applies to screens up to 480 px wide.
- Hiding a container hides its children. Show on: Desktop on a container removes everything inside it on phones.
- Overflow hidden clips children that are larger than the container, for example an oversized wheel or image used for effect.
- Background images need room to show: set a minimum height when the container has little content.
Example
A two-column popup: a row container with an image container on the left (background image, Edge: Curve on the Right edge) and a column container on the right with a headline, text and a form. In mobile view, the row's direction is set to column so the image sits on top.