Code Block Element

13/02/2019

The Code Block element lets you add HTML or CSS code to the page without WordPress changing the format. This comes in handy when you need to add custom code to your page.

Code Block Content

<a class="embedly-card" href="https://themeforest.net/item/avada-responsive-multipurpose-theme/2833226">Avada | Responsive Multi-Purpose Theme by ThemeFusion | ThemeForest</a>

<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>

How To Use The Code Block Element

The Code Block Element allows you to add code (HTML, CSS, Javascript etc) to the page without WordPress changing the format.  For the element to work, Code Block Encoding, found in Theme Options > Advanced > Theme Features tab, must be enabled.

Step 1 - Create a new page or edit an existing one.

Step 2 - Add a container then select your desired column layout.

Step 3 - Click the '+ Element' button to bring up the Elements window. Locate the 'Code Block' element and click it to bring up its options window.

Step 4 - If you don't know what content to use the Code Block Element for, your probably don't need it. But essentially, any content within a Code Block element is encoded, and this stops WordPress from getting it's hands on the code and inserting tags, line breaks and any other formatting changes, that it likes to make to content inside the editor. By default, Avada takes the content and converts it into a base64 string so that it can be decoded when the page is rendered. This way it will come out on the page exactly the same as it was inserted into the Code Block.

Step 5 - Once you have entered your code, click Save. You will be returned to the edit page. You can preview the page to view the rendered code, and you can always edit the element again to make changes.

Read below for a detailed description of all element options.

Code Block Element Options

There are no options for the Code Block Element. Simply add your code in the Element, and it will be displayed on the front end.

IMPORTANT NOTE: It is important to ensure that the "Code Block Encoding" setting in Theme Options is enabled in order for the code to appear correctly on the frontend.
Code Block Element Options

Global Options

There are no Global Options for the Code Block Element.

Code Block Element Parameters

Copy to Clipboard