Containers
Containers are the main building blocks for page structure. They group other elements (headings, buttons, images) and define layout and spacing via Auto Layout.
What is a container?
In Figmentor, a container is a Figma Frame (or group) that becomes an Elementor Container widget. It doesn’t display content by itself — it holds other elements and controls how they’re arranged: in a row or column, with padding and gap.
Containers map to the flexible layout system in Elementor: direction (row/column), alignment (justify and align items), padding, and gap between children. Use them for headers, hero sections, feature grids, footers, and any repeating block structure.
Naming convention
Name the frame with the prefix el-container followed by a colon and a descriptive name (lowercase, hyphens only):
el-container:name
Examples: el-container:header, el-container:hero, el-container:main-content, el-container:footer, el-container:features, el-container:card.
The name is for your reference and for clarity in the layers panel; Figmentor uses it to create the Elementor container and preserve hierarchy.
How to create in Figma
- Create a Frame (F) or use a group. This will be the container.
- Name it
el-container:your-name(e.g.el-container:header). - Add Auto Layout (Shift+A). Set direction (Horizontal or Vertical), alignment, padding, and gap. Figmentor reads these and maps them to the Elementor container.
- Place inside it the elements that belong to this section: buttons, headings, text, images, or nested containers.
Containers can be nested: e.g. el-container:header can contain el-image:logo and el-container:nav, which in turn contains el-button:contact. The same nesting is preserved in Elementor.
What carries over
Figmentor reads the following from the container frame and applies them to the Elementor Container:
| Figma | Elementor |
|---|---|
| Auto Layout direction (Horizontal / Vertical) | Flex direction: row / column |
| Primary axis alignment (Min, Center, Max, Space between, Space around) | Justify content |
| Counter axis alignment (Min, Center, Max, Stretch) | Align items |
| Padding (top, right, bottom, left) | Container padding |
| Gap between items | Container gap |
| Fill (solid, gradient, image) | Background color / gradient / image |
| Stroke | Border |
| Child order and nesting | Same structure in Elementor |
For the full Auto Layout → Elementor mapping, see Auto Layout. For fills and strokes, see Styles & Properties.
Common patterns
Header (row)
Frame named el-container:header, Auto Layout Horizontal, with padding and gap. Children: logo image, nav container or buttons. Becomes a horizontal bar in Elementor with the same spacing.
Hero (column)
Frame named el-container:hero, Auto Layout Vertical, centered. Children: heading, text, button. Becomes a vertical, centered section in Elementor.
Footer
Frame named el-container:footer with copyright text and social icons. Direction and alignment define how they sit (e.g. space-between for copyright on the left, icons on the right).
Best practices
- Always add Auto Layout to container frames so direction, padding, and gap are exported.
- Use descriptive names (
el-container:hero,el-container:features) so the structure is clear in both Figma and Elementor. - Keep a single root frame for the page; place all sections (header, hero, footer, etc.) inside it as direct or nested
el-containerchildren.