Perfex Visual Designer Documentation ☰

Introduction

This documentation provides complete guidance on the installation, configuration, and usage of the Perfex Visual Designer – Real-Time UI Styling Tool. This module allows administrators to visually customize the design and layout of the Perfex CRM interface without writing CSS code.


Designed as a plug-and-play add-on, this module enables users to modify spacing, typography, colors, dimensions, and visibility of interface elements directly from the CRM using an intuitive visual editor. Changes can be previewed in real-time and saved instantly, allowing quick personalization of both staff and customer panel appearance while maintaining system stability and performance.

System Requirements

  • Perfex CRM v3.1.0 or higher

Installation

Installing the module is quick and simple, It takes just a few minutes :

  • Extract the main .zip file and locate the visual_designer.zip file.
  • Log in to the Perfex CRM admin panel as an administrator and go to Setup → Modules.
  • Click Choose File and select the visual_designer.zip
  • Click Install to complete the process.
Module Installation

Once the module is installed, it will appear in the list of available modules below. Simply click the Activate button to enable it.

Module Activation

Configuration :

Once the module is installed and activated, you'll see three options, Deactivate, Settings. Click on the Settings button to quickly access the Visual Designer Settings

Module Activation

Alternatively, you can navigate to Setup → Settings → Impersonate to access its configuration options, which include :

  • Enable Visual Designer – When disabled, Restricts users from using visual designer.
  • Enable Navbar Button – When disabled, There will be no visual builder button on navbar.
  • Enable for Shortcut Key – When disabled, Visual builder will not activate with shortcut keys.
  • Staff Custom CSS – CSS that will apply across admin panel for staff and admins.
  • Staff Login Custom CSS – CSS that will apply on staff login page.
  • Customer Custom CSS – CSS that will apply across customer panel.
  • Customer Login Custom CSS – CSS that will apply on all non-authenticated pages.
Module Activation

Usage

Once the Perfex Visual Designer module is installed and activated, follow the steps below to customize the CRM interface:

  • Activating Visual Designer Mode
    • Open any page inside the Perfex CRM staff or customer panel.
    • Click on Visual Builder button on navbar
    • Or Press the keyboard shortcut :
    • Windows / Linux : CTRL + ALT + D
    • Mac : CMD + OPTION + D
    • The page will enter Visual Designer mode and all elements will be highlighted.
  • Selecting an Element
    • Hover over any element to see a visual highlight.
    • Click the desired element to open the Visual Designer modal.
    • The selected element will be marked with a highlighted border.
  • Customizing the Design
    • Adjust spacing using padding and margin controls.
    • Modify typography settings such as font size, weight, alignment, and letter spacing.
    • Change colors including text color and background color.
    • Control element dimensions such as width, height, and overflow.
    • Hide elements using the visibility toggle option.
    • Add advanced styling using the Custom CSS textarea if needed.
  • Previewing Changes
    • Click the Apply button to preview design changes instantly without saving.
    • This allows experimentation before committing changes.
  • Saving Changes
    • Click the Save button to store the design permanently.
    • Saved styles will automatically load whenever the page is opened.
  • Removing Saved Styles
    • Click the Remove button to delete the saved design from the database.
    • The element will revert to its original default appearance.
  • Exiting Visual Designer Mode
    • Click on Visual Builder button on navbar
    • Press the shortcut again :
    • CTRL + ALT + D (Windows/Linux)
    • CMD + OPTION + D (Mac)
    • Or simple the refresh page
    • The page will return to normal mode.
  • Applying Global CSS
    • Navigate to the Visual Designer settings page.
    • Use the Global CSS textarea to apply site-wide styling rules.
    • Global CSS is applied across the entire panel.
  • Managing Saved Styles
    • Navigate to Utilities → Visual Builder to view a complete list of all styles created across the CRM.
    • Admins can edit, or delete previously saved styling.
    • This allows easy management and cleanup of design changes applied throughout the project.
  • Styling the Customer Panel
    • Admins can impersonate any customer using the impersonation feature to access the customer panel.
    • Once impersonated, activate Visual Designer mode using the shortcut to customize the customer-side interface.
    • All styles applied within the customer panel will be saved separately and loaded automatically for customer users.

Support

For support, please reach out to us at codeonstring@gmail.com. We will respond as soon as possible, typically within one working day.

Changelog

VERSION 1.0.0 – Initial Release