Page builders

Snipfire works with any page builder: CSS and JavaScript load on the pages you choose, and shortcode snippets work in every builder's shortcode element. For Elementor and Bricks there's more: an element that places a snippet with its attributes as controls, and your builder's global colours and fonts in the editor's CSS autocomplete.

The Snipfire snippet element #

Like the Snipfire block in the block editor, the Snipfire snippet element puts a shortcode snippet on the page, without typing a shortcode.

Elementor #

1. In Elementor, search the widgets for Snipfire snippet (it's in the General group).
2. Under Snippet, choose one of your shortcode snippets. Switched-off ones are marked (off).
3. Fill in the snippet's attributes. Snipfire finds them in the code ($atts['name'], or the defaults in shortcode_atts()) and shows one field for each, with the default as a placeholder. They accept Elementor's dynamic tags.
4. For an attribute Snipfire didn't find, use Other attributes, one per line: name=value.

Bricks (beta) #

When Bricks is your theme, its elements include Snipfire snippet, with the same Snippet, attribute and Other attributes controls.

The Bricks element is beta: it follows Bricks' documented element API but hasn't been tested with a real Bricks site yet. If something doesn't work, tell us, and meanwhile use Bricks' shortcode element with [snipfire id="…"].

How it renders #

• On the site, exactly like the shortcode: the same conditions, crash protection and cookie consent. A switched-off snippet, or one whose conditions don't match, shows nothing.
• In the builder, you see the snippet's output. If there's nothing to show, a notice says why: Nothing to show in the editor: the snippet is off, prints nothing, or its conditions don't match here. Check the page on the site. A snippet that was switched off or deleted gets Snippet #12 is switched off or no longer exists, so this element shows nothing.
• Elementor never caches the widget's output, because a snippet can differ per visitor.

Who sees which snippets #

The same as for the Snipfire block: people with Snipfire access see all shortcode snippets in the list; other people who can edit the page see only the switched-on ones. Anyone who can edit a page can place a snippet, like the [snipfire] shortcode, so escape attribute values in your snippet before printing them: see Using attributes.

No shortcode snippets yet? The list says No shortcode snippets yet. In Snipfire, set a PHP or HTML snippet to run "As a shortcode".

Other builders #

Breakdance, Oxygen, Divi, Beaver Builder and others don't have a Snipfire element yet. Use their shortcode element with [snipfire id="12"] or your snippet's own tag: it renders the same way.

Design tokens in CSS autocomplete #

In CSS, SCSS and LESS snippets, the editor suggests your site's design tokens: the colours, fonts and sizes your theme and page builder define, as CSS custom properties.

• Type -- where a value goes, for example after color:. Pick a token and the editor writes var(--…) for you.
• Or type inside var(: the list shows the tokens to choose from.

Each suggestion shows the token's value (a colour swatch for colours) and where it comes from.

The list is worked out once and kept until your theme's styles or the builder's globals change, so it's always up to date without slowing the editor down.

.promo-bar {
    background: var(--wp--preset--color--accent);
    font-family: var(--e-global-typography-primary-font-family);
}

Developers can read the same list with GET /design-tokens.