Add custom HTML/PHP (or CSS, JS, iframes,etc.)

There are times when you want full customisation control to add any content you want. Luckily we provide the necessary tools for this.

Add custom HTML#

To add custom HTML to a page, simply edit a page with the page builder and use the Custom HTML element eg: . Drag it into the canvas and if you open its options, you’ll find a simple editor with code highlighting eg: .

Please know that HTML includes any types of HTML code, including <script></script> tags (for JS), <style></style> (CSS) or Iframes (<iframe />).

If you want to load the custom HTML globally, you should think about using the Smart Areas for Page builder. Here’s more on this topic . Sure another way is adding through the Child theme, a method that is also recommended. More on how to install the Child theme or how to add custom code .

Add Custom CSS or JavaScript#

Sure there are other ways to do this, but if you want to add per page through the page builder, add your custom CSS or JS into the Custom HTML element, each wrapped into it’s HTML tag. For example here’s a screenshot with both HTML, CSS and JS .

Be carefully when using Javascript though as it may completely break the page builder too and unless you know what you’re doing, it’s not really recommended for beginners.

Add Custom PHP Code#

Again, you can always use the Child theme’s function.php to add your own custom PHP code and sometimes is much more recommended. However if you want a simple way to add your own custom PHP code, simply search for the element PHP Code , and add it into the cavans, and in the editor, add your code eg: .

You need to be very careful to write this code properly because it will be executed as it is and it can potentially break your website.