Wix Blocks: Connecting Your Widget Colors to Site Themes
3 min read
Wix Blocks is open to all Wix Studio users. To get access to Blocks, join Wix Studio.
When you create a widget with Blocks, it can be installed on many different Wix sites. To ensure that your widget's colors look great on all of these sites, make sure to connect it to a theme.
Learn more about widgets and themes and connecting your widget's texts to site themes.
To connect your widget colors to a site color themes:
- Open your widget in the the Wix Blocks Editor to edit it. Make sure you are in Design mode.
- Select a widget component (such as a container or a text input).
- Click the Design icon
in the Inspector menu 
on the right. - Click the color options related to your component to connect their colors to a theme. If it's a box, for example, click the Fill Color & Opacity, Border, Corners or Text icons and connect them to site's color themes.
Buttons and breadcrumb menus:
Note that for buttons and breadcrumb menus, the color input element looks slightly different, and you will not see the link indication (but it still works fine).
- Blocks uses a default palette that cannot be changed - this represents the Wix site colors. We recommend that for each element (such as fill or border) you select the appropriate color from the five default colors presented. If you want more shades, click Open Theme Palette and select a different shade.
- Test yourself: Select the component again, go through its parts (fill, border, etc.) and look for the link
icon that appears on to the selected color, indicating that it's connected to a theme.
When your colors aren't connected
- If you choose a color from the Add a Custom Color section of the color input element and not from the Theme Palette, the color remains fixed and is not connected to site themes. It will stay the same on any site. You might choose to use this option in special cases, such as success and error buttons that you want to keep green and red.
- If you are using a color input element in a custom panel and select a default color, the color won't connect to a site theme, even if you select one of the 5 recommended colors.
- Click Test Theme in Preview mode to see how your widget looks across various sites with different themes. This helps you check that all your components are connected correctly and your widget looks great with different themes.
Did this help?
|