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