Search Knowledge Base Articles

How to manage CSS with NOBakery Page Builder?

NOBakery Page Builder offers several ways for users to interact with CSS:

First: You can access Dashboard -> NOBakery Page Builder -> Design Options tab where you change default color and margin/padding settings for content elements.



Second: Under Dashboard -> NOBakery Page Builder -> Custom CSS tab you can add your own custom CSS style rules.




Third: You can add custom CSS rules for exact Page or Post. In the Page or Post edit window you will see CSS button on the right top side above NOBakery Page Builder window, click it to open form where you can place custom CSS rules for this particular page or post.





Fourth: If you wish to style particular content element differently, then you can add class name for the exact element on your Page or Post by entering it in the “Extra CSS Class name” in the edit window of your element. Important: you can not add CSS code within “Extra CSS class name” field directly – this field is for class name only. CSS code should be stored in the proper place (your theme css files, custom css field in VC settings page, etc.)





Fifth: To override class names that are applied to NOBakery Page Builder content elements you should use WordPress add_filter(“vc_shortcodes_css_class”).

Did you find this article useful?

Related Articles