Page Builder
The Atomicat Page Builder is the visual editor used to create and edit landing pages inside Atomicat.
Use the builder to add page sections, arrange containers, insert elements, edit content and styles, configure page settings, preview responsive layouts, save changes, and publish the page.
What you can do in the Page Builder​
The Page Builder combines page structure, design, settings, and publishing controls in one workspace.
| Area | Purpose |
|---|---|
| Canvas | Shows the page being edited and lets you select sections, containers, and elements. |
| Sidebar | Opens element groups, global style controls, page settings, page summary, and publishing actions. |
| Drawer | Shows components, navigator, or the edit interface for the selected element. |
| Header | Contains page name, preview, responsive controls, undo and redo, save, download, and publish actions. |
| Navigator | Shows the page structure so you can select, expand, collapse, and rearrange nested sections and containers. |
| Settings | Controls SEO metadata, delay, pixels, custom code, page features, page speed, and revisions when available. |
Builder layout​
The builder workspace is organized around the page canvas.
- Use the left sidebar to choose what you want to edit.
- Add elements from the component drawer.
- Select an item on the canvas or in the navigator.
- Edit content, style, advanced options, or templates from the drawer.
- Preview the page across devices before saving or publishing.
Main sidebar options​
The builder sidebar includes these main areas:
| Sidebar option | What it opens |
|---|---|
| Text | Paragraph, headings, animated text, and advanced text elements. |
| Media | Images, video, audio, icons, sliders, tabs, charts, alerts, testimonials, and related visual elements. |
| Button | Button and redirect button elements. |
| Blocks | Structural and conversion elements such as containers, forms, countdowns, dividers, accordions, menus, HTML, iframe, product, and other page blocks. |
| Singular | Floating or page-level items such as Cookie, WhatsApp, Notification, and ScrollUp. |
| Global Style | Page-level visual styling controls. |
| Settings | Page settings such as SEO, tracking, custom code, page speed, and revisions. |
| Page Summary | A summary view of the page configuration and content. |
| Publish | Opens the publish workflow for the current page. |
Important builder guides​
Start with these guides when you are reviewing a page for launch:
| Guide | Use it when |
|---|---|
| Elements | You need to choose the right content, media, form, product, quiz, or conversion element. |
| Sections and Containers | You are structuring the page layout or fixing nested content. |
| Global Style | You want broad typography, color, and visual consistency before editing individual elements. |
| Preview and Responsive Views | You need to test desktop, tablet, and mobile layouts. |
| Page Summary | You want a quick review of page structure, settings, scripts, pixels, and modal behavior. |
| Settings | You need SEO, tracking, custom code, page features, page speed, or revisions. |
Editing an element​
When you select an element, the edit drawer can show different tabs depending on the selected item.
| Edit tab | Use it for |
|---|---|
| Content or Layout | Text, URLs, media, form fields, container layout, and element-specific content. |
| Style | Visual styling such as spacing, colors, typography, borders, backgrounds, and alignment when supported. |
| Advanced | Additional element behavior and configuration options. |
| Template | Element template options when the selected element supports templates. |
| Page or Logic | Quiz-specific controls when editing quiz pages or quiz options. |
Some elements, such as custom HTML, iframe, spacer, and comment elements, have limited style controls because their behavior is controlled by their content or structure.
Save, preview, and publish​
The builder header includes the controls used most often while editing:
- Preview: Toggle preview mode to view the page without normal editing overlays.
- Responsive controls: Switch device widths and check how the page adapts.
- Undo and redo: Move backward or forward through recent editing states.
- Save: Manually save the current page.
- Download: Download page HTML when your account has access.
- Publish: Open the page publishing workflow.
Atomicat also autosaves eligible page edits when content changes, but you should still use Save before leaving the builder or publishing important changes.
Recommended workflow​
For a reliable page-building process:
- Start with the page structure: sections and containers.
- Add content elements such as headings, text, images, videos, forms, and buttons.
- Use Global Style for broad visual consistency.
- Edit individual element styles only where the page needs specific adjustments.
- Use the Navigator to review nesting and selection.
- Check desktop, tablet, and mobile views.
- Configure SEO metadata, tracking, custom code, and page features in Settings.
- Save the page.
- Publish or download the page when ready.
Best practices​
- Keep section and container nesting simple so the page is easier to maintain.
- Use headings in a logical order for readability and SEO.
- Preview mobile layouts before publishing.
- Save before testing pixels, forms, or custom scripts.
- Use the Navigator when selecting deeply nested elements.
- Avoid adding unnecessary custom code unless it is required for tracking, compliance, or integrations.
Related docs​
- Sections and Containers
- Elements
- Preview and Responsive Views
- Navigator and Layers
- Autosave and Save
- Settings
- SEO and Metadata
- Forms
- Product Element
- Interactive Quiz
FAQ​
What should I check before publishing a builder page?
Review page structure, mobile layout, SEO metadata, forms, buttons, pixels, custom code, products, quiz steps, and the final published URL. Use Page Summary for a quick page-level review.
Why do some elements have different edit tabs?
Atomicat shows tabs based on the selected element. Containers use Layout, most elements use Content and Style, and quiz-related elements can show Page or Logic controls.
Where do I configure SEO and tracking?
Open Page Builder Settings. SEO metadata, pixels, custom code, delay, page features, AtomicTracker, and related options live there rather than inside most element drawers.
How should I troubleshoot builder issues?
Start with Builder save issues if changes are not persisting, Publishing issues if the live page is stale, and Pixel or Forms troubleshooting if the problem is tied to tracking or submissions.