Code Block Element
The Code Block Element places your own HTML, CSS or JavaScript directly into the page. Whatever you enter is output exactly as written, without any wrapper, so the browser renders it like the rest of the page. It is meant for people who are comfortable writing or pasting code.
Use it for small pieces the other elements do not cover: an embed code from an external service, a custom HTML snippet, a few lines of CSS in a style tag that apply to one page only, or a tracking snippet that belongs on a single page.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Code Block Element
Add the Code Block Element to any column and paste or type your code into the Code field. The field is a code editor, so formatting and special characters are kept as you enter them.
The element has no design options of its own. Because the code is output without a wrapping container, you style it with your own markup: add classes or inline styles to the HTML you write, and use a Column or Container around the element for spacing and backgrounds.
Tirenoa elements written inside the code are rendered as well. Conditional Rendering on the Extras tab lets you output the code only when certain conditions are met, for example only for logged-in visitors.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Code | Enter some content for this codeblock. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- The Code Block runs the code; it does not display it. To show code to your visitors as text with colors, use the Syntax Highlighter Element instead.
- Check your HTML for unclosed tags before saving. A missing closing tag can break the layout of everything that follows on the page.
- Only paste code from sources you trust. Scripts in a Code Block run for every visitor of the page.
- Code that should appear on every page, such as site-wide styles or analytics, belongs in the Custom CSS and Tracking Code fields of Global Options, not in a Code Block on one page.
- Server caching can deliver the same result to everyone, which can interfere with Conditional Rendering.