Manual web-based workflow

This workflow is for users who intentionally want to copy from the Pixflow website instead of using the plugin.

The plugin is still the recommended route for most users. This page documents the older manual workflow clearly for users who still need it.

Before you continue

Confirm that:

• you are using Bricks Builder
• you know which framework the destination site uses
• you understand this is a manual copy-and-paste workflow
• you are ready to check the pasted result inside the destination site

If you choose the Pixflow Framework target, you must also import the required Pixflow Framework files before relying on copied layouts.

If you choose a custom mapped framework target, that custom mapping must already be set up before you copy.

The legacy workflow

The legacy web workflow is now only the copy-and-paste method.

1. Open the Pixflow website.
2. Find the layout or component you want to use.
3. Choose the framework target before copying.
4. Use Quick Copy or Rename and Copy.
5. Paste the copied output into Bricks.
6. Check the result in the builder and on the front end.

Choose the framework target

Before copying, choose the framework target that matches the destination site.

Available targets:

• Pixflow Framework: keeps Pixflow variables and requires Pixflow Framework files on the destination site.
• ACSS: rewrites variables for an ACSS-based site.
• Advanced Themer: rewrites variables for an Advanced Themer-based site.
• Core Framework: rewrites variables for a Core Framework-based site.
• Raw CSS: outputs static values instead of framework variables.
• Default: uses the default Pixflow website copy setting.

The selected framework affects only the copied output. It does not change the source layout in the Pixflow library.

Choose the copy method

Quick Copy

Quick Copy copies the item with its default class naming.

Use it for:

• fast tests
• simple imports
• layouts you do not plan to heavily customise

Rename and Copy

Rename and Copy lets paid users set a new main BEM block class before copying.

For example:

.content-1
.content-1__container
.content-1__image

can become:

.about-intro
.about-intro__container
.about-intro__image

Use this when:

• you need a long-term variant
• you want clearer project-specific naming
• you want to avoid class collisions
• you are using multiple variants of the same layout

Custom mapping limitation

Custom mapping in the web-based workflow is a one-time setup.

This means:

• mapping must be configured before you copy
• the copied output uses the mapping that existed at that moment
• changing the mapping later does not update anything already pasted into Bricks
• the main web workflow is not designed for repeatedly changing a site’s mapping setup

If you need to set or change custom mapping at any point during a project, use the Pixflow plugin. The plugin stores mapping per site and lets you adjust it later.

After pasting into Bricks

After the item is pasted:

• it becomes native Bricks content
• it is editable inside the destination site
• it is no longer synced to the Pixflow website
• future framework changes must be handled in the destination site’s own setup

Common mistakes

• Choosing Pixflow Framework but not importing the Pixflow Framework files.
• Expecting web-based custom mapping to be editable like plugin mapping.
• Using Raw CSS for a large site that really needs a design-token system.
• Pasting into a site where the selected framework is not installed or configured.
• Forgetting to use Rename and Copy before creating multiple heavily edited variants.

Next step

Review Frameworks before copying into a real project.