Atomic Framework Forge for Elementor

Build and manage your Elementor design system

Atomic Framework Forge for Elementor (AFF) gives developers a dedicated workspace for organizing, editing, backing up, and synchronizing the CSS variables that power Elementor V4’s atomic architecture.

Colors. Fonts. Numbers. Manage your variables in one place instead of hunting through your Elementor configuration.

Requires Elementor and Elementor Pro.

The problem

As a site built on Elementor’s new V4 Atomic framework grows, its design variables can become difficult to see, organize, and maintain. Colors accumulate. Spacing values multiply. Typography settings spread across a project. Making a change can mean searching through an increasingly complex design system.

Atomic Framework Forge gives developers a dedicated workspace for managing these variables as an organized system: find them, organize them, edit them, back them up, and synchronize them with Elementor — while keeping the developer in control of when changes are written back.

Three types of variables, one workspace

Colors — Build and maintain an organized color system.

• HEX, RGB, HSL, and alpha editing with a visual color picker
• Generate tints, shades, and transparency variants
• Organize into categories and sub-categories
• Add notes and classifications to variables

Fonts — Keep font variables organized and accessible.

• Manage Elementor font variables, organized by category and sub-category
• Edit font-related CSS custom properties
• Preview font values within the management interface

Numbers — Manage the numeric foundation of your design system: spacing, sizing, gaps, radius, layout values, and other numeric CSS variables. Unit-aware editing for px, rem, em, %, vw, vh, ch, and CSS function values (e.g. clamp()) when needed.

Organize your design system

AFF is not limited to a flat list of variables. Create your own categories and one level of sub-categories to reflect the design system you actually use — for example, Colors organized into Brand / Neutral / Status / Surface, or Numbers into Spacing / Radius / Layout / Sizing. The categories are yours to define.

Work with Elementor — not around it

AFF reads Elementor’s V4 variable data and brings it into a dedicated management environment: fetch the variables from your active Elementor kit, organize and edit them in AFF, review which variables are synced, modified, new, orphaned, or in conflict, then commit — explicitly, when you’re ready — to write the changes back.

A deliberately controlled write process

AFF is designed around a read-first workflow. Reading Elementor data does not modify Elementor. Writing changes back is always a deliberate, user-triggered action — never automatic or in the background — preceded by a summary showing exactly what will change (modified, new, and deleted variables).

Recommended: use AFF on a staging or local development site, and export a project backup before committing changes to Elementor.

How AFF interacts with Elementor

Read: AFF reads global variables directly from the active Elementor kit’s _elementor_global_variables post meta — the same authoritative data store Elementor itself uses. This happens only when you click “Fetch Elementor Data”. It is purely read-only; nothing in Elementor is touched.

Write: When you click “Write to Elementor”, AFF writes the current variable values back to _elementor_global_variables on the kit post — the same authoritative data store, updated the same way Elementor itself updates it. This is the primary and authoritative write. As a secondary, best-effort step, AFF also patches the active kit’s generated CSS file directly, so the page reflects the change immediately instead of waiting for Elementor’s own regeneration on next load; if this secondary step is skipped or fails for any reason, Elementor’s own cache-clear and regeneration (triggered by the post meta update) still produces the correct CSS. AFF writes to no other Elementor data.

Every write is user-triggered (no background or automatic writes, ever), preceded by a confirmation dialog showing exactly what will change, and limited to variables you have managed in AFF. AFF does not touch anything else in your Elementor configuration.

Use on staging or a local development environment only. A corrupted write could damage your Elementor kit’s variable data. Always export a project backup before writing to Elementor.

Bringing an existing Elementor site into V4?

AFF can import Elementor V3 Global Colors into your AFF project — both system and custom colors. The four standard Elementor system colors are identified with their familiar roles (Primary, Secondary, Text, Accent), so you never lose track of what each color controls. Bring those colors into your V4 variable-management workflow and map your existing color system as you rebuild your site.

Projects, backups, and portability

AFF supports multiple independent projects within a WordPress site. Each project can be:

• Saved — create a persistent project containing your managed variables
• Backed up — every save creates a timestamped backup snapshot; up to 50 backups per project (configurable)
• Restored — return to a previous backup from the project/backup picker
• Exported — downloaded as a portable .atfrfo.json file
• Imported — brought into another WordPress site running AFF

Know what changed

AFF shows status throughout the variable views, so you have visibility into the state of your design system before committing anything:

• Synced — the AFF value matches Elementor
• Modified — the value has been changed in AFF
• New — the variable exists in AFF but hasn’t been committed to Elementor yet
• Orphaned — AFF has a variable that no longer corresponds to current Elementor data
• Conflict — AFF and Elementor contain differing information that needs your attention

A workspace built for developers

AFF uses a four-panel interface: a top menu for project, sync, print, and preferences; a navigation panel for moving through Colors, Fonts, Numbers, and their categories; the edit space for working directly with variables; and a data management panel for projects, backups, import/export, and Elementor sync. AFF’s own interface supports light and dark mode, saved per WordPress user.

Print and PDF

AFF includes a print/PDF workflow for documenting selected portions of your variable system — useful for client documentation, design-system reviews, or keeping a human-readable record of your variables.

Designed for professional Elementor development

Atomic Framework Forge is built for WordPress developers, Elementor developers, freelancers, and agencies maintaining large Elementor sites or establishing reusable design systems. If you’re building one page, Elementor may be all you need. If you’re managing the system behind many pages, AFF gives you another level of control.

Where the framework is going

The current release focuses on Variables. Future development extends the framework toward Elementor V4’s other atomic assets: Variables → Classes → Components. Classes and Components are not part of the current 1.4.3 feature set — the goal is an increasingly complete environment for managing the building blocks of an Elementor design system.

Architecture

AFF is built for future portability. The data layer contains no WordPress dependencies and is designed to be ported to a standalone Windows or Mac application in a future phase.

Credits

Developed by Jim Roberts / Jim R Forge — https://jimrforge.com