The Best Hidden Feature of Divi

Divi is the Ultimate Multi-Purpose WordPress Theme by Elegant Themes.


Divi allows you to create any website you can imagine with ease, but what if I told you that you aren’t using Divi to the fullest possible extent?

Alongside the 40+ content elements exists a module that will bring your Divi powered website to a whole new level of awesomeness and that module is the one and only Code Module!


Alright, let's get started with a brief explanation on what the module can do.

The code module allows you to add in HTML to your page with little to no restrictions. That means you're able to include tags such as <link />, <style />, <scripts /> and much more.

If you're not a developer then you probably haven't realized how important those tags are and how much possibility it unlocks. So let's go over the importance of each tag.

  • <link /> allows you to link external resources (CSS files) such as popular libraries like Animate.css or Font Awesome without the need of a plugin.
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/daneden/animate.css/master/animate.min.css" />  
  • <style /> allows you to add in custom blocks of CSS.
<style>  
  .custom-module-class {
    background: #000;
    border-radius: 3px;
    font-size: 0.875rem;
  }
</style>  
  • <script /> allows you to add in custom JavaScript to your page, whether it’s a code block or importing a popular library such as React, WOW.js, Three.js, TweenMax.
<script type="text/javascript">  
  console.log('Hello World!');
</script>  
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>  

Usually, this is done by creating a Child Theme or a Plugin; something which many users have trouble doing themselves so they go and take a chance on a plugin they find.

Oh right, want to know the best part? It’s all isolated in the page so it won’t affect other pages!

Divi by Elegant Themes - Recommendation
Divi - The Ultimate WordPress Theme and Visual Page Builder

Divi is powered by the Divi Builder, an insanely fast and incredibly intuitive front end editor like nothing you have seen before. It will change the way you build websites forever.

Now that we've gone over what the module can do, lets start using it.

Just a warning, it’s easier if you have or know someone with basic HTML knowledge. If you don’t, it shouldn’t be a problem, however, it never hurts to learn

For those who don't have experience working with HTML, CSS and Javascript, I have created a repository called Divi Resources which provides useful resources such as snippets that you can paste into the module textarea with minimal modifications.

If you're interested in learning about HTML, CSS, and JavaScript, I recommend checking out CodeSchool, MDN or w3schools to get started.

For those who have experience with HTML, CSS and JavaScript, you can jump straight into modifying your page with the module.

The possibilities are limitless with this module.

If you haven't noticed already, then prepared to be amazed! Recall when I mentioned the use of JavaScript in the Code Module. Well with JavaScript, you can edit the DOM. Meaning that you don’t need to access the source code to make a minor changes.

Here's an example highly requested feature that was recently implemented into Divi core:

var footerInfo = document.getElementById('footer-info');  
footerInfo.innerHTML = 'Powered by <a href="#">SwagPress</a>';  

With 2 lines of code and 1 module you can edit something that many users have requested. Now imagine the possibilities if you were to put more effort into it…

Andy Tran
Andy Tran

I am a passionate Front-End Web Developer that loves to experiment with awesome technology such as React, Redux, Angular, Meteor, TweenMax, and many more!

San Francisco