How to Add Style Controls Using Selectors and Selector Values?

Table of Contents

Are you looking to add styling options to your custom Elementor widget? With the help of Selectors and Selector Values, you can unlock a whole new level of styling possibilities. These powerful options allow you to target specific elements within your widget and apply unique styles to them.

To check the complete feature overview documentation of The WDesignKit Widget Builder, click here.

Requirement  – This feature is a part of The WDesignKit, make sure it’s installed & activated to enjoy all its powers.

To add styling options to any control or element you have to use different style related controls such as Color, Choose, Dimension etc.

Note: For better organisation of options you should add all the style controls in the Style tab of the Layout panel.

For example, we have a Text control and we want to add a Color control to allow users an option to change the text colour.

To do this in the Widget Builder, wrap your control or element inside a custom HTML tag with a custom class.

To do this let’s add a Text control and wrap it inside a div class named title

Now, in the Style tab, add the Color control.

Then in the Color control, go to the Selectors field and add your custom class name.

Note: If you are adding a class make sure to add the class name with .(dot) in front like ‘.title’ or in case of an id add the id name with a # in front like ‘#title’.

In the Selectors value field, you have to add the CSS property that you want to target. Here we want to change the text color so we’ll add color.

Note: Make sure not to include any :(colon) after the CSS property.

Now, you can change the text colour of the text field. Following this process, you can link any style controls with other controls.

Note: While using any Group Contols for styling you have to just add the class or id name in the Selectors field. Because it contains all the relevant properties.

Also, check How to Make the Widget CSS Unique to the Widget.