Introduction
Creating custom dashboard pages has never been easier, thanks to the diverse selection of Wix Design System style elements available in Wix Studio, Blocks and the Wix Editor. By combining these with other components like containers, repeaters and more, you can design interfaces for managing complex data, whether for your clients or personal projects.
But what happens when you need an element that isn't available out of the box?
In this guide, you'll find the steps needed to create a component stlyed like the Wix Design System Colour Picker to take your custom dashboard to the next level.
About the project
On a recent personal project, I developed a dashboard to streamline the management of weekly publications for a local organisation I volunteer for. Each publication is uniquely themed and assigned a specific color. The goal of the dashboard page was to create a user-friendly interface for uploading, editing, and managing these publications while maintaining consistent data formatting.
The site's frontend utilizes repeaters and dynamic pages to display the data, ensuring that each publication's themed color is prominently featured for a cohesive and visually appealing experience.
The problem
If you've recently built a custom dashboard page using Wix tools, you may already have identified the problem. For those who haven't, here's what I faced.
How do you allow site contributors to select a colour?
There are a few potential solutions:
-
Use a text input and expect contributors to input a HEX code.
-
Create a complex system to scan the publication, understand the theme, and select the correct colour.
-
Or – you guessed it – build my own colour picker.
Demo
Selected colour:
#504DEC
Yes, the colour picker is fully operational and interactive.
(Please note: For demo purposes, the popup remains open.)
This component offers three key properties for interaction: setting, getting, and receiving notifications about HEX code changes.
Page code
The code below demonstrates the different ways to interact with the component.
Colour Picker code
The below code works when used with a custom element within the Wix ecosystem.
To learn more about custom elements and how to use them, follow this article.
About
Demo
Code
How to build a Wix Design System Colour Picker using a Wix Custom Element
.jpg)