The Code Module
Walkthrough
“The Code Module is a blank canvas that allows you to add code to your page, such as plugin shortcodes or static HTML. If you would like to use a third party plugin, for example a third party slider plugin, you can simply place the plugin’s shortcode into a standard or fullwidth code module to display the item unimpeded.”
Task #1
Our first experiment will be to add a banner to the top of a page. See an example on the following page on my site:
https://voices.uchicago.edu/digs30005/code/
You should see a maroon banner drop down from the top of the screen. You could use this to announce important information to your visitors.
CodePen
This task will require you to use CodePen to create/customize some HTML and CSS. If you don’t have a CodePen account, it’s free and the site is quite useful.
Here’s the link to the Pen that we’ll be using. Visit this Pen then click Command + S to save a copy to your account.
https://codepen.io/millerpr/pen/wROeON
You should be able to preview the banner right there in CodePen. Try tweaking the CSS if you want the color to match your site look-and-feel.
Code Generator
An enterprising developer named Andy Tran has created a great tool that takes a CodePen URL and converts the code there to code that can be dropped into the Divi Code Module. Go to the Pen and save it to your account for use later.
https://codepen.io/millerpr/details/ebXEyR
When you are ready to convert the banner code, copy the URL of your Pen and drop it into the code generator.
Copy the output code and past it into a Code Module on a new page.
Task #2
Our second experiment will be to add a pop-up business card to the screen. You can see the sample on the About page on my site.
This is another great trick created by Andy Tran. You can find my CodePen fork here:
https://codepen.io/millerpr/pen/WLmMbR
Tweak the settings to create your own business card.
Once you’re satisfied, use the Code Generator to create the code to use in the Divi Code Module. Apparently, the location of the Code Module for this trick does not matter.
NOTE
Once you run the Code Generator Pen, it can be difficult to get the tool to re-generate a new version of the code. It seems like the first version gets stuck in the browser memory.