Sections and Containers
Sections and containers are the structural foundation of pages built in Atomicat.
A section is a major block of the page. A container sits inside a section or another container and holds page elements such as text, images, buttons, forms, videos, and other components.
How sections and containers work​
Atomicat pages are stored as a nested structure. The builder uses this structure to render the page canvas, show items in the Navigator, and preserve layout when you save or publish.
| Structure item | Purpose |
|---|---|
| Section | Main page area, such as hero, benefits, testimonials, pricing, FAQ, or footer. |
| Container | Layout wrapper used to group and align elements inside a section. |
| Element | The visible content or interaction placed inside a container. |
When to use a section​
Use a section when you are creating a new major part of the page.
Examples:
- Hero area
- Product benefits
- Social proof
- Video sales letter
- Lead capture form
- Pricing or offer block
- FAQ
- Footer
When to use a container​
Use containers to organize layout inside a section.
Common examples:
- A two-column hero layout with text on one side and media on the other.
- A row of benefit cards.
- A form block centered inside a section.
- A nested area that groups image, title, description, and button elements.
Containers are especially important for responsive design because they control how child elements align, stack, and size across desktop, tablet, and mobile views.
Selecting sections and containers​
You can select sections and containers directly on the canvas or through the Navigator.
Use the Navigator when:
- The element is deeply nested.
- Multiple containers overlap visually.
- You need to understand the page hierarchy.
- You want to reorder items more precisely.
Responsive layout considerations​
When building responsive pages:
- Keep nesting as shallow as practical.
- Use containers to group elements that should stay together.
- Check mobile view after changing widths, alignment, spacing, or order.
- Avoid using unnecessary empty containers.
- Use consistent spacing across repeated sections.
Best practices​
- Build from broad structure to detailed styling.
- Keep related elements in the same container.
- Use the Navigator to confirm that elements are placed where you expect.
- Save after major structural changes.
Related docs​
FAQ​
What is the difference between a section and a container?
A section is a major page block such as a hero, benefits area, or footer. A container groups and aligns elements inside a section or another container.
Why should I keep nesting simple?
Simple nesting makes the page easier to edit, improves responsive behavior, and helps teammates understand the layout in the Navigator.
When should I use the Navigator?
Use the Navigator when an item is hard to select on the canvas, when containers overlap, or when you need to confirm where an element is nested.
What should I test after changing structure?
Preview desktop, tablet, and mobile layouts, then test forms, buttons, videos, and other interactive elements inside the changed sections.