Help Center
  1. Help Center
  2. Creating your site
  3. Advanced features
  4. CMS
  5. Managing CMS collections
  6. CMS: Adding and Connecting Color Fields

CMS: Adding and Connecting Color Fields

13 min read
In this article
  • Adding the 'Color' field type in your collection
  • Connecting text elements to the 'Color' field type
  • Connecting button elements to the 'Color' field type
  • Connecting section backgrounds to the 'Color' field type
  • FAQs
Enhance your site's design by adding and connecting 'Color' fields in your CMS (Content Management System) collections. 'Color' fields make it possible to dynamically manage the colors of each item across your site. You can set specific colors per collection item, then use the colors in connected text elements, buttons, and section backgrounds. As a result, you can update the colors of these elements from within your collections, without manually editing each element. 

Imagine you're running an online store. By using the 'Color' field, you can automatically match the background color of product sections or the text color of product names to each item's designated color. 

This capability is especially useful for partners who want to allow site collaborators to manage element colors without needing access to your editor.
Important:
We're working on releasing the 'Color' field type, which is not yet available in all Wix accounts. 
Screenshot example of binding a button to multiple 'Color' fields.

Adding the 'Color' field type in your collection

Go to your CMS collection to add a 'Color' field then define the colors for each item. You may want to create a few of these fields if you want to use multiple colors for each item. For example, you could create one 'Color' field to use as a background color of a section, and create another 'Color' field to use as your text color. 

To add the 'color' field type to your collection:

  1. Go to CMS in your site's dashboard. Alternatively, you can click CMS in your editor, then click Your Collections.
  2. Click the relevant collection.
  3. Click Manage Fields. 
  4. Click + Add Field. 
  5. Select Color and click Choose Field Type. 
  6. Enter a name in the Field name field.
  7. (Coding only) Update the Field ID used in the site's code. You cannot update this ID later. 
  8. (Optional) Enter Help text if you want a tooltip to appear in your collection next to the field title.
  9. Click Save.
Screenshot of adding a color field type in a collection.
  1. Hover over the 'Color' field for the relevant item and click the Choose color icon .
    Tip: If you want to paste a HEX number instead of selecting a color, click the field next to the relevant item and paste the HEX number instead of clicking the Choose color icon . 
Screenshot of selecting a color field in a collection to choose a color for an item.
  1. Choose a color from your site's theme colors or from your saved colors.
    Tip: Click + Add next to My Colors to add a new custom color. 
  2. Repeat steps 10-11 for each item in your collection.
Tip:
Learn how to set default colors for each collection item's 'Color' field. 

Connecting text elements to the 'Color' field type

Once you have added the 'Color' field to your collection, you can connect text elements to it. This allows the text color to change based on the item displayed and its 'Color' field. 
Note:
It is not yet possible to connect the following text elements to the 'Color' field type: Collapsible text, text marquee, or text mask
Wix Editor
Studio Editor
  1. Go to the relevant page in your editor.
  2. Add a text element to your page:
    1. Click Add Elements  on the left side of the editor.
    2. Click Text. 
    3. Click the type of text you want to add: Themed Text, Titles, or Paragraphs 
    4. Click and drag your chosen text to add it to your page. 
Screenshot of adding a text element in the Wix Editor.
  1. Click the  Connect to CMS icon on the text element. 
  2. Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Add a New Dataset, then choose the collection you want to connect.
  3. Click the Text connects to drop-down and select the field you want to connect. 
Tips:
  1. Click the Text color connects to drop-down and select the 'color' field you want to connect to the text.
Screenshot of connecting the text color to a color field.
  1. Click Preview to test your connections.
  2. Click Publish if you are ready to make the changes go live. 

Connecting button elements to the 'Color' field type

Connect buttons to 'Color' fields to manage the button colors directly from your CMS collections. You can connect specific button states (regular, hover, and disabled) to different 'Color' fields. In each button state, you can choose which 'Color' fields to use for the button text, icon, border, and background. 
Wix Editor
Studio Editor
  1. Go to the relevant page in your editor.
  2. Click the button you want to connect to the CMS. Learn how to add a button. 
  3. Click the Connect to CMS icon  .  
  4. Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Add a Dataset, then choose the collection you want to connect, give the dataset a name and click Create.
  5. Click the Click action connects to drop-down and select the relevant option. Learn more about connecting button click actions. 
  6. Scroll down to Colors in the Connect Button panel on the right.
  7. Click relevant tab to choose which button state you want to connect: Regular, Hover, or Disabled
  8. Click the relevant drop-down menus to select the 'Color' field(s) you want to connect:
    • Text color connects to: Bind a 'Color' field to the color of the text characters. 
    • Icon color connects to: Bind a 'Color' field to the button icon (if your button has an icon).  
    • Border color connects to: Bind a 'Color' field to the border color. 
    • Background color connects to: Bind a 'Color' field to the background color of the button. 
Screenshot of the various color connecting options for a button in the Wix Editor.
  1. Repeat steps 7-8 for each button state that you want to connect to a 'Color' collection field. 
  2. Click Preview to test your connections.
  3. Click Publish if you are ready to make the changes go live. 

Connecting section backgrounds to the 'Color' field type

Connect the background color of a section to a 'Color' field in your CMS collection. This allows dynamic changes to the section's background color, based on the item displayed and its connected 'Color' field.
Wix Editor
Studio Editor
  1. Go to the relevant page in your editor.
  2. Select the section that you want to connect to a 'Color' collection field. 
  3. Click the Connect to CMS icon  .  
  4. Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Add a Dataset, then choose the collection you want to connect, give the dataset a name and click Create.
  5. Under Connections, leave the Section background connects to drop-down set to Not connected. 
  6. Under Colors, click the Section background color connects to drop-down and select the 'Color' field you want to connect. 
Screenshot of connecting a section background to a 'Color' collection field.
  1. Click Preview to test your connections.
  2. Click Publish if you are ready to make the changes go live. 

FAQs

Click below for answers to common questions about using the 'Color' field type. 

Did this help?

|
Hire a ProfessionalGet matched with a Wix Partner who can help you reach your site goals.
Start Now
In this article
  • Adding the 'Color' field type in your collection
  • Connecting text elements to the 'Color' field type
  • Connecting button elements to the 'Color' field type
  • Connecting section backgrounds to the 'Color' field type
  • FAQs

Did this help?

|