Are you looking to provide predefined styling options to users in your custom Elementor widget? The Choose control is a versatile option that enables you to offer a group of predefined styles or options for your users to choose from, such as text alignment options. With the Choose control, you can simplify the customisation process and allow users to easily apply different styles.
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.
For example, we want to add a text alignment option to a Text control.
To do this, in the Widget Builder, add a Text control and a Choose control in the Layout. Then add the Text control inside a div class named title.
In the CSS tab, we’ll add a simple CSS code to make the div 100% width.
.title{
width:100%;
}Now, select the Choose 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 alignment, so we’ll add text-align.
Note: Make sure not to include any :(colon) after the CSS property.
Now, for the alignment options, go to the options section here, you’ll find three fields –
Label – From here, you can add a label for the ,option which will be visible in tooltip in the Elementor widget panel. In the first option, we’ll give left alignment option, so we’ll add Left in the field.
Value – Here, you have to add the value of your CSS property. So for left alignment, we’ll add left as the value.
Icon – From here, you can set an icon for the option, you can select from the existing icons or can select the Custom Icon option from the dropdown and add icon code from the E-icons library.
Click on +Add button to add multiple options.
Following this process, we’ll add options for center and right alignment.
Once done, click on the Save button to save the widget.
Now, if we check the widget in the Elementor editor, the Text field will have a working alignment option.
Following this process, you can easily add different predefined styling options for different controls.
Also, check How to Make the Widget CSS Unique to the Widget.