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​
When should I use this Sections and Containers page?
Use this page when you need to understand the workflow, settings, or decisions related to Sections and Containers. It is most helpful before editing a live asset, publishing changes, or troubleshooting behavior in an Atomicat workspace.
What should I check before changing Sections and Containers?
Confirm that you are in the correct workspace, project, page, funnel, site, or account area. Review access permissions, saved changes, publishing status, and any connected integrations before making updates.
How do I verify that Sections and Containers is working correctly?
Preview the affected page or feature, test the main user path in a fresh browser session, and confirm that forms, redirects, tracking, products, quizzes, or publishing states behave as expected.
What should I do if Sections and Containers does not work as expected?
Recheck the configuration described on this page, save the changes again, clear browser cache if needed, and test with a simple version of the setup. If the issue continues, collect the page URL, workspace details, and screenshots before contacting support.