This Article is about Section ID and how to use the Inspect Element feature of the browser to find it and use it for customization.
Section ID
Both Jupiter and The Ken themes have Page Section shortcode which you can use to have separate sections on your page, and you can organize different elements inside the Visual Composer using Page Section.
To make sure that the CSS styling and customization will be limited to the Page Section in question, the shortcode has an option called Section ID. You can add a name in the Section ID option which should be unique for the whole page and all lowercase without any spaces, for example:
my-section-id
If you add the unique name there and save the page, by using the Inspect Element functionality of your web browser you can see that the theme adds your text as the HTML ID for the wrapper element of the Page Section. This will give you the opportunity to use CSS ID Selector to select a specific tag inside this Page Section and add your Custom CSS code restraining it to this specific section. For more information about Inspect Element functionality Click Here.
Similar functionality is available for Page Sections called Extra Class Name. The functionality is almost the same with the one difference being that you can use this option in different cases and the name of the class should not be unique. The No Space & All Lowercase rules also applies for this case. For example:
my-class-name
This feature also adds a class name in the wrapper element of the Page Section in generated HTML code and you can check that with your browser Inspect Element tool.
As an example we add a page section with Section ID of my-section-is and inside the Page Section we add a Text Block shortcode with a sample text. We can change the color of that text inside this specific Page Section using the CSS ID selector (#) and adding the code to Theme Options > Advanced > Custom CSS for Jupiter or Theme Settings > Skin > Custom CSS for The Ken.
#my-section-id p {
color : #ff0000;
}
If we have more than one Page Section in which we want to change the text color, we need to add the extra class name such as my-class-name for all Page Section cases. Then we use the CSS Class Selector code to select all cases we want and add the code in the theme as mentioned before. The code for this case will be:
.my-class-name p {
color: #ff0000;
}
The Extra Class Name option is available for literally all shortcodes coded by us in Jupiter and The Ken.
The raw code for the Page Section and a Text Block inside is provided below for your reference:
[mk_page_section section_id="my-section-id" el_class="my-class-name" sidebar="sidebar-1"][vc_column][vc_column_text]Sample Text[/vc_column_text][/vc_column][/mk_page_section]
