Aumframe — the official guide

Aumframe is a visual designer for WordPress. It does not require a specific theme or any additional plugin.

1. How Aumframe works

Most page builders attach a layout to a post. Aumframe attaches a design to a rule, and the rule decides which front-end URLs that design takes over.

This routing model has two practical effects:

• One design can apply to every blog post, every category archive, the 404 page, or another set of URLs defined by its rule.
• When a design takes over a URL, it replaces the output that the theme would otherwise render for that URL. In the example below, the theme header and footer are therefore absent.

The interface describes the rule as follows: “The rules decide which front-end URLs this design takes over.”

2. Install

No additional configuration is required. Install and activate the plugin.

1. Aumframe is active and is the only plugin installed on this test site.
2. Aumframe adds one top-level menu item. Its sub-items (Forms, Inquiries, Content Model, Translate layouts) are described in later sections.

3. The Aumframe screen

1. New blank design — creates a design containing only a root frame and opens it in the designer. Use this option to create a design from scratch.
2. Saved templates — lists all saved designs together with their type, rule and priority. The list is empty on a new site.
3. Import a scene — accepts scene JSON. The browser compiles the scene to HTML and CSS before submission; PHP does not compile the node tree, so the product uses a single rendering implementation. Scene import is not required for the workflow in this section.

4. Create a design

Press New blank design. The designer opens.

1. INSERT — the eleven primitives. Click one to insert it at the end of the page, or drag it onto the canvas. Underneath, LAYERS shows the tree; a blank design starts with a single Page node laid out as a vertical stack.
2. The canvas in the middle. The dashed outline is the root frame.
3. INSPECTOR on the right — empty until an element is selected.
4. Save. Next to it, Preview and ▶ Live.
5. Desktop / Tablet / Mobile — selects the breakpoint displayed on the canvas. Values for individual breakpoints are set separately in the inspector; see §5.

4.1 Add a heading

Click Heading in INSERT. It appears on the canvas and is selected. The inspector opens on Style, so switch to Content to type:

1. Content — the text itself.
2. Tag — h1 … h6. This is the heading’s level in the document outline, independent of how large it looks. Pick the level that is true, then size it under Style.

4.2 Add body text

Click Text, switch to Content, type a sentence. Then look at the inspector:

1. Content / Style / Motion / Data — four tabs for the selected element.
2. Default / Hover / Pressed / Focus / Open / Scrolled … — the state assigned to the values currently being edited. Default represents “normally”.
3. Desktop / Tablet / Mobile — the breakpoint those values belong to.

Each value belongs to a specific state × breakpoint combination. If a change does not appear as expected, verify the selected state and breakpoint.

Under them, Style is grouped as Layout (visibility), Size (Width/Height, each Fixed · % · Fill · Hug with min/max limits), Position (In flow · Absolute · Sticky · Fixed), Spacing, and so on.

4.3 Configure design routing

A design that is not routed anywhere never appears on the site. Open ⋯ → Template settings:

1. Name — admin only. Visitors never see it.
2. Type — six options; this is what decides which URLs the design can take over:

Pick A single page, then pick the page:

1. Page — “You have to pick one. Left empty, this design never appears on any URL.”

Press Save settings, then Save in the top bar.

4.4 Verify the front-end result

Open the bound page:

The theme’s header and footer are gone. The design is the whole document.

Use the Site shell type to share a header and footer across multiple designs instead of duplicating them in each design. See §7.

5. Build a page layout

The preceding sections establish the interface controls (“where the buttons are”). Aumframe layouts are built from nested containers. Each container defines the direction, spacing and size of its child elements.

This section creates a two-column layout with text beside an image, then changes the layout to vertical stacking at the Mobile breakpoint.

5.1 Create the section container

Insert a Container. With it selected, open Style:

1. Arrangement — Stack · Grid · Free · Merge into parent. Stack arranges children in a single line and is appropriate for most linear layouts.
2. Direction — Horizontal · Vertical (+ reversed). This controls the direction in which the children are arranged.
3. Gap — the space between child elements. Spacing between siblings is controlled by the parent container rather than by adding margins to each child.
4. Padding — the space inside the container around its contents. The ⛓ toggle links the four sides; with the sides linked, entering a value for Top applies that value to all four.

Set Direction: Horizontal, Gap: 48, Padding: 56.

5.2 Nest elements

The INSERT panel indicates where the next element will be inserted based on the current selection:

To insert an element inside a container, select the container first. No separate drop zone is required.

With the section container selected, insert another Container. It is added inside the section and will serve as the text column. Set Width: Fill, Direction: Vertical and Gap: 16, then insert a Heading and a Text into it:

The LAYERS tree shows the current node hierarchy. In this example it is: Page → Container → Container → Heading, Text.

5.3 Fill, Hug and Fixed sizing

Every element's Width and Height uses one of four modes. The panel displays a description for the selected mode:

Width · limits (Min / Max) constrains the resulting size. An image set to Fill with Max 480 can grow with the layout but cannot exceed 480px.

5.3b Additional arrangement modes

The arrangement control provides four modes. Stack handles linear layouts; the other modes support grid, free-positioned and parent-merged layouts. The editor provides a one-line description for each mode:

Merge into parent removes the container's own box. The panel states: “Background, border, padding and radius stop working — there is no box left to paint.” Use this mode when the children need to participate directly in the grandparent's layout.

5.4 Add the second column

Select the outer section container again. Use its row in LAYERS to distinguish it from the nested text column:

If the text column remains selected, the next inserted element is placed inside the column instead of beside it. Verify the selected node in LAYERS before inserting the second column.

Now insert an Image. It lands inside the section, after the text column — a second column. Set its Width: Fill:

The resulting structure uses a horizontal container for the section, vertical containers for the columns, and content elements inside those columns.

5.5 Configure the Mobile breakpoint

Switch the top bar to Mobile, select the section container, and set Direction: Vertical:

1. Direction, changed only for Mobile. Desktop keeps Horizontal.

Breakpoint values are overrides rather than separate layouts. In this example only Direction is overridden for Mobile; values without a Mobile override continue to use the Desktop value.

What that produces, verbatim, in the compiled stylesheet:

.af-n_1 { display: flex; flex-direction: row; }
@media (max-width: 640px) { .af-n_1 { flex-direction: column; } }

5.6 Save, bind and verify

⋯ → Template settings, give it a name, Type: A single page, pick the page, Save settings, then Save.

The live page produces the following measured layout:

5.7 Two designs, one URL

If two designs match the same URL, only one is rendered. When their priorities are equal, the selected design may not be apparent from the front end. The Saved templates table shows both the rule and priority for each design; use it to diagnose routing conflicts.

5.8 Build a complete module

The previous examples use minimal styling to show the layout mechanics clearly. The following hero section uses the same controls and was built directly in the designer without importing a scene:

Everything it uses came from the sections above: one horizontal container (dark fill, 96 padding, 64 gap) holding a vertical text column (eyebrow at 13px with wide tracking and uppercase, headline at 58px / weight 700 / line-height 1.04, body at 19px / line-height 1.62), with an image beside it (Fill, max 560, radius 18).

A newly inserted Text inherits the typography of the preceding sibling. In the example above, the body paragraph inherited uppercase + tracking 2.4 + weight 600 from the eyebrow. After insertion, explicitly reset properties that should not carry over (Letter case: unchanged, Tracking 0, Weight: regular). A Heading uses a different preset and is not affected by this behaviour.

6. Bind designs to content

Static text entered directly in a design is specific to that design. Binding connects a node to a field from the content currently being viewed, allowing one design to render many posts or other content items.

6.1 The Data tab

Select any text node and open Data:

1. Content — where the text comes from. Not bound means “use what I typed”. Otherwise pick a field:

| | | |---|---| | post.title | the post's title | | post.excerpt | its excerpt | | post.content | its body, as rich text | | post.date | its date | | post.url · post.author.name · post.author.url | | | post.thumbnail.url · .alt · .hasImage | the featured image | | site.title · site.description · site.url · site.logo … | site-level values |

1. Link URL — bind where the element goes, separately from what it says. A card whose title says post.title and whose link is post.url is the whole of a “post card”.
2. Let a field decide whether it shows — conditional display. Bind it to post.thumbnail.hasImage and the element disappears on posts with no featured image, instead of leaving a hole.

After a binding is added, a fourth control appears: Show when there is nothing. Its value is rendered when the binding resolves to empty. If the field is left blank, the front end renders no fallback content for that node.

Build three of them — title, date, body:

The canvas continues to show the node's placeholder content because no specific post is being rendered there. The binding resolves on the front end.

6.2 Apply the design to a content type

To apply the bound design across a content type, open ⋯ → Template settings → Type: Content template:

• “Every post, or everything of one content type.”
• Content type — post for posts, page for pages, or the slug of a custom type.
• “One rule takes over every piece of content of that type. With no specific ID it applies site-wide.”

The rule this writes is literally {"kind":"singular","post_type":"post"}.

6.3 Verify the content template

Two different posts, same design, nothing else written:

The design defines the presentation while WordPress supplies the bound content. New posts that match the rule use the same design without additional changes in the designer.

6.4 Lists — a query and a Loop

A bound node displays a field from the current content item. A list, such as a blog index, “related work” or three featured items, requires two parts:

1. a Data query, which says which content to fetch;
2. a Loop, pointed at that query. Its first child is the template for one row, and the loop repeats it once per result.

Insert a Loop. The inspector identifies it as a Repeater, and the INSERT panel states “Laid out as a 3-column grid”. A Loop is therefore a container with Grid arrangement enabled by default.

Its Data tab has a Loop source section, and at first it has nothing to offer: “This loop has nothing to repeat over yet.”

Create the query

Data → Data queries → ＋ New.

1. Data source — Content · Terms · This page’s query · A field on this content · Breadcrumb. Content means “go and fetch some posts”. This page’s query reuses the results WordPress has already resolved for the current URL: “Search result pages must use it, and archives need it to paginate.”
2. Content type — Posts · post, Pages · page, or any custom type on the site.
3. How many.
4. Order by — Publish date · Title · Manual order · Random · Comment count · Custom field, with a separate Direction.

Below those: Filter by taxonomy, Exclude the current post (turn it on for “related posts”, or the post you are reading appears in its own list), Only where a field is…, and Follow the current term.

Set it to 3 posts by publish date:

Connect the Loop to the query

Select the Loop again and set Repeat over to the query:

• Repeat over — when unset, the Loop renders no output on the front end. If a list is missing, verify that this field points to the intended query.
• Name for one row — defaults to post. Child bindings use this name. Changing it after creating the bindings requires those bindings to be updated.

Build the row template

Insert a Container inside the Loop. Add a Heading bound to post.title and a Text bound to post.excerpt, using the binding process from §6.1. The first child defines the row template; the Loop repeats it for each result.

Save the design and bind it to a page. The resulting page is shown below:

The stored data is:

queries:  { "q1": { "postType": "post", "limit": 3, "orderby": "date", "order": "DESC" } }
Loop:     { "as": "post", "queryId": "q1" }
children: post.title · post.excerpt

Known issue, fixed in 1.21.0. Before that version, selecting a Loop and opening the Data tab crashed the designer — the Loop source panel did not exist, so a loop's query could only be set by importing scene JSON. Update older builds before following this section.

6.5 Archives and the current page query

§6.4 uses a custom query to fetch content. An archive works differently: WordPress has already resolved the posts for the current URL, such as a category, tag or post-list page. The design should render that existing query. Creating a separate content query would ignore the current archive context and break pagination.

So the query's Data source is set to This page's query:

“Uses this page's own query results. Search result pages must use it, and archives need it to paginate.”

Then ⋯ → Template settings → Type: Archive template:

1. Taxonomy — category, post_tag, or a custom one. *“Leave it empty for the post list page.”*
2. Content type — leave empty for any.

Leave both empty and the design covers every archive on the site; fill one in and it covers only that.

Pagination

An archive that shows ten of forty posts needs links to the other thirty. Insert a Form / shortcode primitive and give it [aum_pagination]:

What comes out, measured on a category with four posts and “Blog pages show at most 2”:

On page 2, the Loop displays a different set of posts while the design remains unchanged. This confirms that the Loop is using the current page query.

When the number of posts does not exceed one page, WordPress emits no pagination links and the shortcode renders no output.

The site root is not an archive. With Settings → Reading set to “Your latest posts”, / reports itself as the front page, not an archive, so an archive template does not cover it. Give the root its own design with Type: Front page (added in 1.24.0 — before that the option was missing from the list even though the engine supported the rule).

7. Site shell: shared header and footer

When a design takes over a URL, the theme header and footer are not rendered. A Site shell provides shared structure around those designs.

A shell does not match a URL by itself. Instead, page designs render inside it. The settings page describes the behaviour as follows: “A shell takes part in no URL matching. Drop in a ‘slot’ primitive and the content template’s output fills it. It works under any theme — the header and footer come from here, not from the theme.”

7.1 Create a Site shell

New design → ⋯ → Template settings → Type: Site shell → Save settings.

Then build it in the order the page will read:

1. a Container for the header — set Direction: Horizontal, give it padding, put a Heading in it;
2. a Content slot (Primitives, bottom-left);
3. a Container for the footer.

The resulting shell has the following layer structure:

Page
  Container      ← header
    Heading
  Content slot   ← every page's own design lands here
  Container      ← footer
    Text

Press Save. There is no routing to set: a shell has none.

7.2 Verify the Site shell

The designs from §5 and §6 are unchanged. After the shell is saved, each design is rendered inside it:

Three different designs — a post rendered by a content template, an index built with a Loop, and a one-off page — all with the same header above them and the same footer below. The active theme is still Twenty Twenty-Five; it contributes none of this.

7.3 Site shell requirements

A shell with no content slot renders without the page design. Because the shell applies site-wide as soon as it is saved, add the required content slot before publishing the shell.

Use one slot per shell. The slot is named (content by default), and the page output is rendered into the slot with that name.

Needs 1.22.0 or newer. Before that the Content slot primitive did not exist — the settings panel asked for a slot the interface could not insert — and pressing Save settings made the next Save fail with “This design was changed elsewhere after you opened it”. If you are on an older build, update first; both are fixed.

8. Reuse: composites, components and instances

The INSERT panel provides three reuse mechanisms with different behaviours.

8.1 Composites: pre-built node trees

Site header, Button, Section and Row are pre-arranged node trees. After insertion, the nodes are independent from the original composite; editing one inserted copy does not affect any other copy.

8.2 Components: one master, multiple instances

The Components tab holds two groups: the shared library that ships with the site (hollow icons) and user-created components (filled). If no user-created components have been saved, only the shared library is shown:

To create a component, build it once as a normal container, select the container in the layer tree, and press Save as component:

It asks for a name inline:

Use a reusable, content-based name for a component. For example, Contact band remains accurate when the component is used on a contact page, in a footer or on a landing page.

Now it is in the library, marked as yours, and the note under the grid changes to “Instances follow the component. Edit it once and every use changes.”

8.3 Component instances

Place it a second time and select it. The inspector no longer says Frame — it says `Instance`:

• `Contact band · used in 2 places` — the count is live, and it counts uses across the whole site, not just this design.
• Component content — each instance can override the text of its parts, here Heading and Text. “Left empty, it follows the component default.” Structure and styling remain shared while content can vary between instances.
• Edit component opens the master. “Structure and styles changed there reach every instance.”

Saving a component publishes its changes to every template on this site that uses an instance of that component. Review component edits with site-wide reuse in mind.

1.22.0 and older: when no user-created component was saved, the panel listed the shared library and displayed “No components yet” directly underneath it. The list was correct; the message counted only user-created components. Fixed in 1.23.0.

9. Motion

The Motion tab provides four independent drivers plus a set of pre-tuned text effects. Multiple drivers can be enabled on the same element.

9.1 Canvas animation state

A design full of entrance animations would be a canvas full of invisible elements. So the canvas shows every animation finished, and there is a ▶ Play once button to watch it: “otherwise the element is transparent and impossible to select.”

The canvas therefore shows the final animation state rather than the initial state.

9.2 Configure Entrance

• Entrance style — From below and the rest.
• Springiness — “Left is crisp, right is soft and bouncy.”
• Trigger point — “How much of the element has to be visible before it starts.” 0.2 means a fifth of it.

9.3 Disable motion below a viewport width

Above the drivers, Only from width → Minimum viewport width defines the viewport width below which motion is disabled:

“Below this width the element has no motion at all and simply shows its final state — the way to keep a wall or a tilt off phones without building a second copy of the section.”

This allows motion to be disabled for smaller viewports without creating a second design.

9.4 Effects

Pick one: None, Letter by letter, Liquid text. “The parameters are already tuned — strength is the only knob left to you.” These are whole-element treatments rather than property animation, so they sit apart from the four drivers.

9.5 Scroll driver

Enabling Scroll driver adds an Effect control with four presets: Parallax rise, Fade in on scroll, Shrink on scroll, and Rotate on scroll. The default is Parallax rise.

The driver operates continuously with the page position, as described in the collapsed state: “Interpolates with the scroll position every frame — not ‘fires once at a point’.” An element therefore progresses through the effect as the page scrolls and reverses when the page scrolls back. This differs from Entrance, which plays once after its trigger condition is met.

The select can also display Custom. This is a status for stored values that no longer match a preset, for example when a design was created by a kit or an earlier version. It is not a preset that can be selected directly.

9.6 Pointer tracking

1. Effect — 3D tilt, Magnetic pull, Horizontal shift.
2. Measured against — Itself, Parent, Window. “Whether the cursor position is measured against the element itself or the whole window.” Itself limits the response to pointer movement over the element; Window continues responding to pointer movement across the page.
3. Springiness — “Left is crisp, right is soft and bouncy.” The slider controls the combined spring response instead of exposing stiffness and damping separately.

Enabling 3D tilt can add perspective to the selected element's parent. The panel states: “Needs perspective on the parent — the panel adds it for you.” If the parent has no perspective value, Aumframe adds perspective: 900. This perspective is required for rotateX and rotateY to produce a visible 3D result.

9.7 Continuous motion

1. Effect — Float up and down, Breathing scale, Pulsing brightness, Drift side to side, Slow spin.
2. One cycle — “In seconds. The longer, the quieter.” The supplied presets use cycles of 2.4s for pulse, 4s for float, 7s for drift, and 24s for slow spin.

Continuous motion has no trigger: “it moves from the moment the page loads.” The selected motion therefore runs continuously while the page is active.

9.8 Combining motion drivers

Entrance, Scroll, Pointer and Continuous motion are independent drivers. They can be combined when they control different properties. For example, Scroll can control vertical offset while Continuous motion controls scale because transform components are handled separately.

A conflict occurs when two drivers write the same property. In that case, the later-bound driver supplies the active value while the earlier value remains stored. The binding order is Scroll, then Loop, then Pointer, so the later driver in that sequence takes precedence when a property overlaps.

The editor displays a warning for these conflicts:

For example, the default Parallax rise Scroll effect and the default Float up and down Continuous motion effect both write vertical offset. Enabling both produces the warning and provides an action that removes the duplicated property from the overridden driver.

Three additional conflicts use the same warning pattern:

These conflicts do not produce a rendering error. The overridden setting remains visible in the panel, but its effect is not applied. Use the conflict warning to identify and remove the overlapping property.

10. Content Model: content types without code

Sites often require structured content beyond posts and pages, such as bikes, case studies, job openings or FAQs. Aumframe → Content Model defines these content types and their fields without requiring code or an additional plugin.

“Definitions live in the database, not in code — so you can export them as a model pack and import it into the next site in the same industry.”

10.1 Create a content type

• Singular / Plural name, and an Identifier. The identifier cannot be changed without creating a different type: “changing it means a different type, and existing content is orphaned.” Choose a short, lowercase identifier before creating content.
• URL prefix and Menu icon.
• Visible on the front end (has its own URL) and Has a listing page (archive) — “The listing page is the URL an Aumframe archive template can take over. Data-only types such as FAQ or downloads do not need it.” Turn the listing page off for things that are only ever shown inside another page.
• Built-in areas — Title, Content, Excerpt, Featured image, Order, Comments. Switch off what the type does not have, and the editing screen stops offering it.
• Use this type as a product catalog — “Lets layouts bind price and a call-to-action through the same paths an e-commerce or inquiry site uses, so one product card works on every kind of site.” This is what lets the same card design serve a shop and a make-an-enquiry site.

10.2 Fields

+ Add field gives the type its own data. Seventeen types:

Each field type becomes available for binding in the designer's Data tab (§6.1). For example, a Frame size field on a bike can be displayed by a Text node.

Deleting a field does not delete content: “Existing content is not deleted, but the front end will no longer be able to read it.”

10.3 Taxonomies

+ Add taxonomy defines how content is grouped. The Hierarchical setting controls the behaviour: “‘Hierarchical’ behaves like categories (one bike belongs to one series). Unchecked behaves like tags (many per item).”

10.4 Model packs

Export writes the whole model — types, fields, taxonomies — as JSON. The next site in the same industry pastes it into Import.

• Import only adds by default: a type that already exists keeps its current definition.
• Replace everything is available and is labelled dangerous: overwrites current definitions. Use it only when the existing definitions should be replaced.

11. Forms and inquiries

Aumframe → Forms is a form builder; Inquiries is where the submissions land.

11.1 Create a form

Aumframe → Forms lists what exists, with the submission count beside each form:

Add new opens the builder:

Give it a title, add fields, and set what happens on submit:

11.2 Add a form to a page

The sidebar provides the shortcode [aum_form id="12"] and identifies where it can be used:

“Works in the block editor, the classic editor and widgets. On a page built with Aumframe, drop in a ‘Form’ node instead.”

Inside an Aumframe design, use the Form / shortcode primitive and select the form. In the block editor, classic editor or widgets, insert the shortcode instead.

11.3 Inquiries

Each submission is stored in Aumframe in addition to being sent by email. Stored submissions can be filtered by form and remain available even if the notification email is rejected or classified as spam.

12. Translate layouts

The empty state describes the division of responsibility between Aumframe and the multilingual plugin:

“No languages are available. Install and configure a multilingual plugin first — this screen translates the layout; that plugin translates your content.”

Aumframe does not translate post content. It extracts text entered into the design, such as headings, button labels and embed consent text, and makes that text available to the configured multilingual plugin. Translated pages can therefore retain the same Aumframe layout.

12.1 Language availability

The language list is populated through the aumframe/translatable_languages filter rather than by scanning installed plugins. If nothing supplies this filter, it returns an empty array and the screen remains in the empty state shown above.

A language becomes available when the site has one default language and at least one additional language. Translation completion is not required; this screen lists available languages, not translation progress.

Language discovery and layout-text translation

Language discovery and layout-text translation are separate capabilities. On sites using WPML or Polylang, they can be provided by different plugins:

With WPML or Polylang, the screen can therefore list the configured languages even when no installed component can translate the layout text itself. The notice at the top of the screen reports that condition. WPML and Polylang translate post and page content; text stored directly inside a design is outside that content.

If a translation request returns no translated strings, Aumframe stops instead of creating an unchanged translation and marking it as current. It distinguishes between no available layout translator and an available translator that returned no result, such as after an expired key or exhausted quota. Partial results are saved: any strings not returned remain in the source language.

12.2 Translate layouts in use

When languages are available, the screen lists each design for the selected language:

1. Language — selects the language represented by the table.
2. Translate everything out of date — runs the translation action across all out-of-date designs for that language.

Each row represents one design, shows its slug, and reports the following values:

Translate everything out of date updates multiple out-of-date layouts in one operation, which is useful after changes that affect several designs.

13. Additional primitives

Six primitives have only been referenced earlier in the guide. This section documents each one. Quoted text is reproduced from the corresponding Aumframe panel.

13.1 Icon

1. Pick one — provides 29 built-in icons, described as “29 built in, all following the text color.” The icons are inline SVG using currentColor, so they inherit colour from the surrounding text context and do not require a separate colour setting.
2. Custom SVG — accepts custom SVG content. “Write only what goes inside `<svg>`, drawn on a 24×24 grid. Fill this in and the icon picked above is ignored; clear it to go back.”

Custom paths should therefore use the 24×24 coordinate system. When custom SVG is present, it overrides the selected built-in icon; clearing the custom field restores the selected icon.

13.2 Shape

Shape provides three fields for custom SVG content:

1. viewBox — “Defines the internal coordinate system — it decides how the numbers inside the SVG convert.” For example, 0 0 300 70 defines a 300×70 internal coordinate space independently of the element's rendered size.
2. Scaling — Stretch to fill, Keep proportions · centered, Keep proportions · top left. The panel describes the intended distinction: “‘Stretch to fill’ suits things that may deform, like a line chart; ‘keep proportions’ suits artwork.”
3. SVG contents — “Write only what goes inside `<svg>`. Use currentColor to follow the text color.”

Unlike Icon, Shape defines its own viewBox. This allows coordinate spaces other than 24×24, including wide charts and full-width divider graphics.

13.3 Canvas

Canvas has no primitive-specific Content fields. It renders an empty <canvas> element and retains only the controls shared by all elements.

The canvas is intended as a drawing surface for component behaviour or custom scripts while remaining part of Aumframe's normal sizing system. It does not draw content by itself.

A newly inserted Canvas is 260px tall and set to Fill. Because a canvas has no intrinsic content height, using Hug for its height can resolve to 0.

The WebGL effects in the Motion panel (Cursor ripple, Liquid warp) are not available on Canvas. They are available only for images, video and containers.

13.4 Audio

1. Source — selects an item from the Media Library. The panel notes: “Inside a loop, bind it to an audio field instead — one clip per row.” Binding the source inside a Loop allows each result to render its own player (§6.4).
2. URL — text form of the same source, for externally hosted files.
3. Controls — Native or None. “Off when a behaviour (Audio list) supplies its own play button.”
4. Preload — None, Metadata, or Auto; the default is None. This avoids requesting multiple audio files before playback when a page contains many players.

13.5 Embed

1. URL — accepts services such as maps, video and booking calendars. “Map, video, booking calendar. Paste the whole `<iframe>` snippet if that is what you were given — the address is taken out of it.”
2. Shape — 16:9, 4:3, 3:2, 1:1, 21:9, or Fill the box.
3. Ask before loading — enabled by default. “On: a placeholder the visitor clicks. A third-party frame contacts that third party and may set cookies as the page loads, so this is both the privacy-safe and the fast default.”
4. When the consent gate is enabled, Button text and Small print become available. The defaults are “Load this content” and “Loading it contacts a third party and may set cookies.”

Raw HTML (advanced) appears below these controls and is described as “used only when no URL is set above”. If a URL is present, the raw HTML value is not used.

13.6 Form / shortcode

The primitive contains one field, prefilled with [aum_form id="1"]. When forms exist on the site, one can be selected from the list. If none exist, the panel states: “No forms yet. Create one under ‘AumCreate → Forms’, or just type another shortcode here.”

The field also accepts shortcodes provided by other WordPress plugins, allowing shortcode-based output to be placed inside an Aumframe design.

13.7 Controls shared by every element

The following sections appear for every selected element:

The additional composites beyond Site header are Button (“Frame + Text + a hover state”), Section (“A full-width band with a centred content column that follows the theme's content width”), and Row (“A horizontal container with two equal-width cells”).

14. WordPress-managed page data

The design replaces the front-end rendered output. The page remains a WordPress page, and WordPress continues to manage:

• the post title and the permalink,
• the SEO description and og:description, which are still derived from the post’s own content even though that content is no longer displayed,
• everything else attached to the post — author, date, revisions, comments settings.

In the example above, the visible body is rendered entirely by the design while <meta name="description"> still contains the original page content.

Do not remove the WordPress page content solely because an Aumframe design takes over its front-end rendering. That content is no longer displayed, but it remains the source used for the description in this verified configuration.

15. Troubleshooting

“Found unsaved changes from just now — the last session probably ended unexpectedly. [Restore] [Discard]” Aumframe keeps a local draft while a design is being edited. If the tab closes, the browser exits unexpectedly or navigation occurs before saving, the draft is offered the next time the design is opened. Restore loads the unsaved draft. Discard removes the draft and keeps the database version. Discarding cannot be undone. If the draft contents are uncertain, restore it first and review the result before deciding whether to discard it.

A change does not seem to apply. Check the state row and the breakpoint row in the inspector (§4.2). A value set on Hover × Mobile will not appear while Default × Desktop is selected.

The design does not appear on the site. Open ⋯ → Template settings and check the routing. A design with no bound page or matching rule does not render on the front end.

16. Optional integrations

The integrations in this section are optional. All workflows in this guide were verified with Aumframe as the only plugin under a stock WordPress theme.

The AumCreate theme

A design covers the URLs its rule matches. Everything else — the 404, the cart, the account page, author pages — is still the theme's. Measured on this site, the same two URLs under both themes:

The AumCreate theme does not change the output of URLs already taken over by Aumframe. For URLs not matched by a design, it renders the shell through its own header.php and footer.php, providing consistent site-wide framing.

AumKit

A kit bundles Aumframe designs, a content model and media. Before installation, AumKit checks the requirements declared by the kit and reports each one as missing · inactive · too old · ok.

AumNexCart and AumReserva

Both are standalone plugins and neither references Aumframe directly (zero files in either plugin mention it in the verified build). Integration occurs through the §10 option “Use this type as a product catalog”. Once a content type is marked accordingly, a card design can bind price and call-to-action data through the same paths regardless of which plugin supplies the data.

A multilingual plugin

See §12. Aumframe exposes text stored in a design, while the multilingual plugin translates post content. The two responsibilities remain separate.

17. Preview, Live and hidden branches

The top bar provides three controls for different preview and editing tasks.

Use Live to inspect motion and interaction, Preview to open the saved front-end result, and ◌ to reveal conditionally hidden branches on the canvas.