Next, we will talk about adding CSS styles in a page using the Visual Composer Page Settings, option available for Superhero.



Visual Composer Page Settings


The Visual Composer plugin has a functionality called Page Settings that can be activated by clicking the cog icon at the top right section of the Visual Composer GUI. Doing this gives a plain editor with code coloring to add your custom css code. The code you will add to this section will only affect the specific page that you add the code to in the Visual Composer Page Settings. The following is a step by step example of this option.



1.Add a New Page

Go to WordPress Admin Menu > Pages > Add New to add a new page.


2.Add a Text Block

Use the Visual Composer to add a Text Block shortcode and enter a sample text. As an example, add an Extra Class Name, let's say text-font to the text block.


3.Click on the Cog Icon

Click on the Cog icon at the top right section of Visual Composer GUI to activate the Page Settings section. A pop up window will appear. That window  has a CSS editor.


4.Add a Custom CSS Code

Add your custom CSS code and save the page. In our case: .text-font {color:red;}


This will change the Sample Text color to red and this CSS code will only be loaded for this particular page and not other pages or posts of the website.


Important: This option is the default functionality of Visual Composer plugin. In order to install the plugin, go to WordPress Admin Menu > Appearance > Install Plugins in Superhero.