Divi WordPress

A peek inside the Atlantic Wave workshop

It’s not every day that I get really excited about a plugin I am working on. Don’t get me wrong, every plugin I develop is exciting, but more so from a ‘solving a puzzle’ or ‘fulfilling someone else’s requirement’ point of view. Granted, this is the reason I got into plugin development and it is a great feeling to know that people out there are using my plugins to make their lives easier.

What I’m talking about is the excitement I get about the fact that I am busy developing a plugin that not only will make others lives easier but also the fact that I it has scope to become so much more than the current sum of its parts. It’s one of the first plugins I’ve written that has the potential for so much more than what I am aware of and I am more excited about the future feature requests I’m going to get from the Divi community than anything else.

Allow me to introduce you then, to Atlantic Wave’s Elegant Forms plugin.

Building on the base of the Divi theme Contact Form module, with Elegant Forms I hope to fill a gap that, up to now, has required to the installation of other third party plugins like Gravity Forms or Contact Form 7. By baking Elegant Forms right into the Divi Page Builder I hope to bring the same extended functionality to your Divi site builder experience.

I’m about halfway through development of version 1 and I’m already planning the features to be added to future versions. I’ve included some ‘sneak peek’ screenshots of some of the functionality below. If this excites you as much as it does me, comment below and let me know what you think. I’d also love to hear your requests for features to be added to this plugin.

As an added bonus, if you comment with your thoughts or a feature request below, when the plugin releases I’ll randomly select a winner from the comments to receive a 100% discount coupon on Elegant Marketplace, effectively giving you a free copy of the plugin at launch.

Development Divi WordPress

Make your Divi Page Builder go large.

I tend to prefer to use the full extent of whatever screen I am on to it’s fullest effect. Typically I have two screens, my 23inch widescreen monitor and my 17inch laptop screen. The monitor is for coding and all coding related things and the laptop screen is for testing in browsers as well as the odd VLC or YouTube window.

One thing I hate is when I am working inside a modal view that doesn’t take full advantage of whatever screen I am on. This is a special pain point whenever I am using the Divi Builder, which makes extensive use of modals.

So I took a quick look under the hood and it turns out setting the modal to fill the screen isn’t that hard to do. A few lines of CSS code later and viola, Divi Full Width Page Builder plugin.

I haven’t tested this with every instance of every modal, but I’m looking forward to trying it out.

If you want to install it as a plugin, you can do so from the Git Hub repo. Alternatively copy and past the PHP code from the full_screen_page_builder.php file into your functions.php.

Happy Diviing.

Development Divi WordPress

Adding CSS to your Custom Divi Modules

Recently I posted on the topic of Building your own Divi Builder Modules. As a PHP developer first, in that article I focused lightly on the PHP side of things, how to setup the module code etc.

Michelle Nunan from DiviSoup pointed out that it might be handy to know how to add custom CSS to your new custom module. So here we go.

I am going to use the Image Overlay Module that I sell on Elegant Market Place as an example.

1) Know the code

So whatever your custom module is, when it renders on the front end it’s going to display a bunch of HTML. You could go into the module code to determine what html is being created (or perhaps you coded the HTML yourself and you already know), but the simplest way to check is to add the module to a page, preview it and inspect the HTML.

My Image Overlay module creates the following html:

<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_off et_pb_image_overlay_0 et_always_center_on_mobile et_pb_image_overlay et-animated"><img class="main" src="" alt="" /> <img class="overlay" src="" alt="" /></div>

As you can see the main container has quite a few classes attached to it, but the important one is the et_pb_image_overlay class. You will notice that this is the same as the slug created in the previous article. So this means we can apply css to any instances of the et_pb_image_overlay class, or any elements inside that class (in this case the images).

For this example I’m just going to use the following CSS snippet. (it’s nonsense really, just used for an example).

.et_pb_image_overlay {
    position: relative;
.et_pb_image_overlay img.overlay {
    display: block;

I’m going to place this code inside a .css file inside my child theme under a directory called css.


The names and directory locations are just my choosing, you could use anything you like really.

1) Load the code

Now I need to tell WordPress to load my CSS. In my child theme I will probably already have something like this (if you don’t have a child theme, time to read up on how to create one)

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

So all I need to do is add a line to enqueue my new custom css

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'custom-image-overlay-style', get_stylesheet_directory_uri() . '/css/image_overlay_css.css' );
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

The second line added to the theme_equeue_styles function tells WordPress to load a file located in the current theme (my child themes) css directory called image_overlay_css.css, the file we created earlier.

And that’s it, style created and loaded.