The Live Customizer empowers you to take complete control over your AI platform’s appearance—no coding required. Whether you’re a beginner or an advanced user, this intuitive feature makes it easy to personalize your platform’s design with just a few clicks.
Key Features:
Real-Time Preview: Instantly see how your changes affect the design before applying them.
Visual Styling: Customize a wide range of design elements including:
Colors
Fonts and typography
Buttons
Shadows
Borders
And more
Flexible Design Options: Create anything from a clean, minimal interface to a bold, branded experience that aligns with your identity.
Style Import/Export: Save your custom styles for future use, or import pre-saved configurations to quickly replicate designs across multiple installations.
Update-Safe Customizations: Your style settings are safely stored and remain intact even after software updates.
Foreground Color
The Live Customizer includes a Foreground Color option, allowing you to easily change the text and element colors across your site. This setting controls the color applied to text, icons, and other foreground elements, ensuring visual consistency with your brand. Any changes made to the foreground color are instantly reflected on the site through the real-time preview feature.
Background Color
The Live Customizer includes a Background Color option that lets you change the background color across your entire site. Whether you’re updating section backgrounds, content areas, or the overall layout, this setting helps you maintain a consistent and visually appealing design. All changes are instantly visible through the real-time preview, allowing for quick adjustments before saving.
Border Color
The Live Customizer provides a Border Color option that allows you to change the color of borders across your site. This includes borders around buttons, cards, input fields, and other UI elements. Customizing the border color helps enhance visual separation and align the design with your brand. Changes are immediately reflected through the real-time preview for easy fine-tuning.
Primary Color
The Live Customizer includes a Primary Color option, allowing you to define the main color used throughout your site. This color typically applies to key elements like buttons, links, highlights, and other interactive components. Setting a primary color helps establish a strong visual identity and ensures a cohesive look across the platform. All updates are shown in real time for quick and accurate customization.
Secondary Color
The Live Customizer also features a Secondary Color option, which lets you set an additional accent color for your site. This color is used to complement the secondary color in various elements. Changes to the secondary color are instantly previewed, making it easy to create a harmonious and visually appealing interface.
Accent Color
The Live Customizer offers an Accent Color feature that lets you customize the color of key visual elements like bars, graphs, and highlights throughout your site. This accent color helps draw attention to important data and interactive components, enhancing the overall user experience. Changes are reflected immediately in the real-time preview, allowing you to fine-tune your design with ease.
Gradient
The Live Customizer allows users to modify gradients used across the site. This feature lets you create smooth color transitions for gradients used across your site, adding depth and a modern look to your platform. Changes to gradients are instantly visible in the real-time preview, helping you achieve the perfect style effortlessly.
Random Colors
The Live Customizer includes a Random Color Generator feature that lets you quickly apply random color schemes to your site. This is a great way to explore different color combinations and discover fresh, unique looks for your platform with just one click. You can preview these changes instantly and save the scheme that best fits your brand.
Typography
The Live Customizer lets users easily change the typography across the site. You can customize both the heading fonts and body fonts to match your brand’s style and improve readability. These changes are reflected instantly in the real-time preview, allowing you to experiment with different font styles and sizes until you find the perfect combination.
Navbar
The Live Customizer includes options to customize the navbar links, allowing you to adjust the border radius for rounded or sharp edges, change the foreground color of the links, and set a distinct active foreground color to highlight the currently selected menu item. These settings help you tailor the navigation bar’s look to fit your site’s design and improve user experience, with all changes visible instantly via the real-time preview.
Components
The Live Customizer enables users to personalize the styling of key components such as buttons, input fields, and cards. You can easily adjust colors, borders, shadows, and other design details to create a consistent and polished look across your site. All changes are previewed in real time, making it simple to customize your interface exactly how you want.
Dark and Live Mode
The Live Customizer includes a Dark/Night Mode toggle feature, allowing users to switch the site’s appearance between light and dark themes effortlessly. This enhances user comfort, especially in low-light environments, and provides a modern, sleek look. Changes take effect instantly, letting you preview and customize the mode to suit your brand’s style.
Export and Import Styles
The Live Customizer offers style export and import options, allowing you to save your custom design settings and reuse them across different installations. You can export your current style configuration, then easily import it later or on another platform to quickly apply the same look and feel without rebuilding from scratch. This ensures consistency and saves time when managing multiple sites.
Save Customizations
The Live Customizer includes a Save button that lets you securely save all your design customizations. Once you’re satisfied with your changes, simply click this button to apply and store your settings permanently. This ensures your custom styles are preserved and remain effective even after refreshing or updating your platform.
Reset Customizations
The Live Customizer also provides options to discard changes or reset customizations. If you decide not to keep your recent edits, you can easily discard them to revert to the last saved design. Alternatively, you can reset all customizations to return your platform’s appearance back to its default settings. These features give you full control and flexibility over your design process.
