Velox Component Manager

Velox Component Manager organizes front-end customizations as self-contained components instead of scattered snippets. Each component keeps its HTML, CSS, optional JavaScript, notes, status and usage information together.

Create a component once, insert it with a shortcode or the Gutenberg Velox Component block, and manage its code from one focused interface.

Component-first workflow

• Keep HTML, CSS and optional JavaScript together.
• Activate or deactivate the whole component.
• Organize components with lightweight Groups.
• Duplicate components safely; duplicates start inactive.
• Select multiple components and apply common management actions in bulk.
• Export one component or all components as portable JSON.
• Imported components start inactive so imports cannot immediately change the public site.

Scoped CSS by default

Velox automatically wraps rendered components and scopes their CSS selectors to that wrapper. This reduces accidental style collisions between unrelated customizations.

CSS scoping can be disabled per component when global styles are intentional, such as a CSS-only component targeting theme or page-builder markup.

Conditional static assets

Velox discovers the components needed by a page and combines their code into cache-friendly static assets under the WordPress uploads directory.

• One page-level CSS bundle when CSS is required.
• One page-level JavaScript bundle when JavaScript is required.
• Hashed filenames for cache busting.
• Site-wide asset mode for intentionally global customizations.
• Graceful inline fallback when static files cannot be written.

Know where components are used

The Used On index shows which content references each component. Velox understands normal shortcodes, the Gutenberg Velox Component block, and Avada Fusion Code content.