Section Design Settings: Custom Code
Designing your webpages begins with designing each individual section that creates the page. You can choose to make all sections on a page look and feel cohesive, or you can shake things up to bring attention to any particular section.
There are several design elements to consider. This guide will cover how to add CSS code to customize your entire section.
Note: Adding custom code of any sort is an advanced option. While adding custom code can certainly enhance your website in ways that the default tools Nucleus provides cannot do, it can also cause your page, sections or entire site to behave improperly or fail to load.
Don't want to read through the entire guide? Skip ahead to any one of these topics:
What Is CSS Code?
CSS is short for Cascading Style Sheets. At the risk of being reductionist, CSS code is a way to introduce custom design that is outside the realm of whatever design options that the platform you're using has to offer.
If you are asking what CSS code is, then you likely do not need to be messing around with this design option, as adding custom CSS code can potentially cause your section, page, or entire site from loading correctly (or at all). But if you do want to add custom design to your entire section, adding CSS code is the way to do it 😎
Add Custom CSS Code
Because adding custom CSS code to your section is not something the average admin will need to do, we did not include this as a quick option near the top of the section editor.
Instead, click on any of the available section editor options near the top (e.g. Style Media), and you will be able to click Custom Code on the far right of the settings menu.
Here, you can name the snippet of CSS code you wish to add.
Then click Save & Start Editing.
Paste (or if you're brave, start typing!) your CSS code in the text box provided, and then click Save Changes.
Your code will now be saved, but will not yet be enabled. To enable your code, click Enable in the top right of the code editor.
Alternatively, click Back to all in the top left of the code editor, and you will be able to turn the code on/off using the toggle switch.
Clicking the dropdown arrow, you can duplicate, rename, edit, or delete a snippet of code.
You can add as many snippets of code as you want. To reorder your code, click the two lines on the right, drag the code up/down, and release it in your desired order.
To see how your custom CSS code affects your section, once you've enabled your code(s), click the Close button at the bottom, or click the X button in the top right corner. Then click Preview in the top right corner.
This will open a new tab in your browser to preview the entire page you're working on. Because Nucleus autosaves your work, now any time that you make changes in the editor, the preview page that's open in the new tab will continually refresh automatically as well.
Note: If your page does not load properly, don't worry! You can always go back and disable your code by clicking the toggle switch to the "off' position.
Further Reading
Custom CSS settings are an advanced facet of customizing your section. Check out the following guides to learn about all the other tools and settings Nucleus offers for designing your sections: