Home App Docs Blog Github

Applying Styles to All Builder Pages

Often, many users ask the easiest way to add styling to all pages, sections or components using Builder. While there are many ways this can be accomplished, one of the easiest and most straight forward is to create a Global Styling symbol that can be dropped onto any and all pages, and applying your global styles to this component.

Simply create a new section model, and call it whatever you like (for example Global Style). Now create a new instance of this model, and leave it empty. (NB: You can add a box or empty element and set height/width to 0 with an absolute position if you want to hide the +Add Block display while in the editor. The +Add Block display wont appear on the live page either way)

Within the Data tab, open the Edit Content JS + CSS window, and add your custom CSS in the CSS section and when you are done hit the Publish button in the upper right corner.
Screen Shot 2022-01-05 at 4.47.08 PM

Now, anytime you create a new page, or within any of your existing pages, simply drop this empty Symbol onto the page, and your styles will be applied to that page or section!

Furthermore, any time you make updates within the Global Style symbol, it will be reflected anywhere this symbol lives within your site, so you can update styles in one location across your entire Builder site!

Try it out and let us know if you have any questions!