Supa Code Block

The SUPA Code Block element serves the same purpose as the built-in Code Block element, but offers many more options.

This element is available in the FREE plugin: Asset4Breakdance

PHP & HTML Code

In the Code Block element, we have a unique text area for typing HTML and/or PHP. It executes a server-side request each time we start typing in the box. While this is fine for typing PHP, it quickly becomes annoying when we only want to add some plain HTML.

The Supa Code Block element has two boxes: HTML, where we can type HTML code without the server request and a PHP control, which works just like the PHP/HTML one from the Code Block.

Supa Code Block

Code Block

Dependencies

You can choose which dependencies to load, without worrying about whether they're already loaded or not. And if a dependency is already being used by another element, it won't be loaded twice (that's how dependencies work).

It's very convenient when you want, for example, type some GSAP code.

Default CSS

The Supa Code Block only keeps the max-width CSS property as the default CSS. No more flex stuff that we need to overwrite.

Code Block

Supa Code Block

Expanded Design Controls

Gain instant access to Display, Position, and Overflow properties directly within the Design panel, making it easier to adjust these CSS properties in a single click.

Supa Code Block

Code Block

Choose your tag

The standard Code Block force-wrap the content in an extra <div>.
The Supa Code Block lets you pick another semantic tag—button, section, span... and don't wrap the content in an extra container!

Quick comparison markup

A simple Button snippet stays clean and direct—no extra wrapper in sight.

Supa Code Block

Code Block

By choosing Button as the tag in the Supa Code Block, we get a button without a Div:

<button class="bde-supacode-block-3875-213 bde-supacode-block">ORDER NOW</button>

By comparison, with the Code Block, you will always have a Div container:

<div class="bde-code-block-3875-216 bde-code-block">
<button>ORDER NOW</button>
</div>

A fun GSAP example

This effect is created using just a single SUPA CODE BOX element, which contains the HTML (h3 tag), custom JavaScript and CSS, along with all necessary dependencies.

supacodeblock in action !

It's also a container

Similar to the Div element, the Supa Code Block can serve as a parent container that holds nested child elements.

Instead of using a separate Div to create a container and a separate Code Block for custom code, you can simply use the Supa Code Block itself as the container and include your code directly within it.

This approach not only reduces the need for an extra Div, but also makes targeting the element easier using the %% SELECTOR %% syntax, as demonstrated in the following example.