Perfex Visual Designer – Real-Time UI Styling Tool

The Perfex Visual Designer – Real-Time UI Styling Tool allows administrators to visually customize the appearance of the Perfex CRM interface without writing any CSS code. Modify layout, spacing, typography, colors, dimensions, and visibility of elements directly from the CRM using an intuitive visual editor.

Built to integrate seamlessly with your existing Perfex CRM setup, this module requires no core file modifications. Simply install the module, activate the visual editor using the shortcut, and instantly personalize both admin and customer panel interfaces with real-time preview and persistent styling.

How to Use

• Activate Visual Designer Mode with Shortcut Keys
  Open any admin panel page and press the shortcut:
  Windows/Linux: CTRL + ALT + D
  Mac: CMD + OPTION + D
• Select Element
  Hover and click on any element to open the Visual Designer panel.
• Customize Design
  Modify spacing, typography, colors, dimensions, visibility, and more using the visual controls.
• Preview Changes
  Click Apply to instantly preview styling changes without saving.
• Save Styling
  Click Save to store design changes permanently for the selected page.
• Manage Styles
  Go to Utilities → Visual Builder to edit, or delete all saved styling rules.
• Customize Customer Panel
  Impersonate any customer to access the customer panel and apply styling using the same visual editor.
• Exit Visual Designer
  Press the shortcut again to return to normal mode.

Features

• Seamless integration with Perfex CRM (v3.1.0 and above)
• Visually customize CRM interface without writing CSS
• Real-time design editing with instant preview
• Modify spacing including padding and margin for each direction
• Typography controls including font size, weight, alignment, spacing, and font family
• Color customization for text, background, and borders
• Dimension controls including width, height, min/max sizes, and overflow
• Show or hide elements using simple visibility toggle
• Advanced styling support using custom CSS textarea
• Works on both Staff Panel and Customer Panel
• Support for styling customer interface via impersonation
• Manage all saved styles from Utilities → Visual Builder
• Enable or disable all custom styling globally from module settings
• Styles automatically applied on page load for consistent appearance
• Keyboard shortcut to quickly enable or disable designer mode
• Safe styling architecture using CSS output in head for better performance
• No core file modifications – fully modular and update-safe
• Quick installation and setup – no coding knowledge required

What’s Included

• Visual Designer Module
• Documentation