Code Block Element

28/08/2020

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. Read on to see how to use this Element, and watch the video for a visual overview.

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>

View Element Demo Page!

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 Options > Advanced > Theme Features tab, must be enabled.

Step 1. Ensure Avada Builder, or Avada Live is active.

Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

Step 3. Choose Alert from the Elements List.

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.