Custom Code and CSS
Add your own scripts, styles, classes, and IDs for tracking tools and fine design control.
By the end of this page, you will know where to add your own code and what each place is for.
Most sites never need this. Everything here is optional, and it's meant for people who know a little HTML, CSS, or JavaScript.
Be careful. Code you add is not checked or cleaned up. A script you add runs on your visitors' browsers. Only paste code from sources you trust.
Where code can go
| Where | Use it for |
|---|---|
| Site Settings, Code Injection | Something every page needs, like an analytics or chat widget |
| A section's or block's Custom Code | A script or snippet that belongs to one section or block |
| A block's Custom CSS | Styling that only affects that block |
| Custom Class and Custom ID | Giving a block or section a name you can target with CSS |
Add code to every page
- Open Site Settings.
- Find the Code Injection card.
- Paste code into Header code to place it in the head of every page. Most tracking tools ask for this.
- Paste code into Footer code to place it at the very end of every page.
- Click Save.
The code runs on your live site. It does not run inside the editor.
Add code to one section or block
- Click the section or block.
- Open the Advanced group in the Properties tab.
- Open Custom Code and paste your snippet.
This code is part of your page content. It goes live when you Publish, like any other change. Because it can run scripts, it's worth a second look before you publish.
Style one block with CSS
In a block's Advanced group, use Custom CSS. Your rules only apply to that block.
- Start a rule with
&to style the block itself:& { font-size: 12px; } - Anything else styles the elements inside it:
p { color: red; }
Changes are applied after you stop typing for a moment. The CSS is kept exactly as you typed it, so you can reopen it and edit later. Sections have their own Custom CSS in the same place.
Custom Class and Custom ID
- Custom Class adds your own class name to the block or section, so you can style many of them together from one rule.
- Custom ID gives one block or section a unique name. IDs must be unique across the whole page, including the footer, because the footer appears on every page. If the ID is already taken, you will see a message.
Built-in class names
Every block and section already has a permanent class that names its kind, such as devi-section for a section and devi-block- followed by the type for a block (for example devi-block-text). These stay the same no matter how you style things, so they're safe to use in your own CSS.
The Custom Class field suggests the built-in names as you type.
Good to know
- Code added in Site Settings applies to every page at once. Remove it there to stop it.
- Code, CSS, class, and ID changes are not visible to visitors until you Publish (except the site-wide Code Injection, which goes live when you save it).
- If something looks wrong after adding code, remove the last thing you added and check again.
- We can't help debug your own scripts. Test on your published site after any change.