Custom Classes are a good way to customize shortcodes beyond the conventional options available in Visual Composer. However, you will need to have CSS knowledge.


How to Add a Custom Class to a Shortcode

 

To give you an example, we’ll use the Text Block shortcode in Superhero Custom Class functionality in order to change the text’s font type.

 

1.Add a Unique Class to the Shortcode

 

Find the Custom Class option of the Text Block shortcode by clicking the pencil icon of the element to show the options. Usually, the class option is at the end of the screen. In this example we add the unique name text-font in the option.



2.Check the Front End

Check the live code in the front end of the website after saving the page and you will see the class added to the container tag of the text block. You will be able to use this unique class name on your CSS code for further customization.



2.Add Proper CSS Code


Add the customization you like in CSS by going to Theme Options > General Settings > Custom CSS / JS in Superhero, or you can use Child Theme. In our case, we add a CSS code to change the font type of the text.

.text-font p { font-color:pink; }


4.Check the Result


Check the result in the front end of the website.