[Nimble Builder Pro] Adding custom CSS to a section, column or module

Nimble Builder Pro includes custom CSS on a per level basis. Custom CSS rules will only apply to the currently modified level element (section, column or module) and its descendants.

The option is accessible in the settings of each level. Click on the the level settings and open the custom CSS control.

Then add your CSS rules in the code editor.

For example, you can display a gradient background on a particular section by adding the following rule :

.nimble-level{background-image: linear-gradient(0deg, #4c2ee1 0%, #9427c6 100%);}

Note that when you want to target the wrapper element, in the above example a section, you need to add .nimble-level before your CSS rule, this placeholder class will be replaced by Nimble Builder by the specific selector of the section as follow :

body .sektion-wrapper [data-sek-id="__nimble__b0bfdadbd8cc"] { background-image: linear-gradient( 0deg , #4c2ee1 0%, #9427c6 100%); }

 You can also add rules to descendants element of the edited level element, for example, if you need to target an h2 title inside the section (or the module or column ), you can write a rule like : h2 {text-decoration:underline;}. In this case, no need to add the .nimble-builder placeholder class.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.