Using CodePen to Create Awesome Code Module Snippets

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!

In this post, I will be going over how you can create a Divi Code Module using CodePen and easily export it over to your Divi powered website using the CodePen Code Generator.

What is CodePen?

CodePen is a playground for front-end side of web development. It's all about inspiration, education, and sharing. In this case, we'll be using CodePen as your text editor due to the live reloading feature in which you'll see your changes instantly.

Another awesome thing about CodePen is that it supports most of the popular preprocessors so you're never limited to just using HTML, CSS or JavaScript!

CodePen is a playground for front-end side of web development.

What is the CodePen Code Generator?

The CodePen Code Generator is a React powered application that compiles all the HTML, CSS and JS from a CodePen URL into 1 single line that you can easily paste into your code module.

How to use the CodePen Code Generator?

1. Open the CodePen Code Generator on CodePen.
2. Get the URL of the Pen that you want to compile and concatenate.
3. Click the GENERATE button and wait for the textarea to fill in.
4. Once the textarea is filled, you'll notice that the compile button changes to COPY CODE.
5. Click the COPY CODE button and head over to your Divi Code Module.
6. Paste the generated code into the module and hit save.
7. Ta-da, it should appear on your website now.

Creating a Code Module Snippet

Now that we've gone over what CodePen and the CodePen Generator is, let's go over how to get started in creating your very own Code Module snippet!

In this article, we'll be learning to create a pop-up modal that contains a message with action buttons.

First things first, you'll need to import all the CSS that is associated with Divi so that you can catch potential conflicts with your snippet's css ahead of time. Below I have listed out the CSS files that should be added into the Add External CSS located in the CSS Settings tab on CodePen.

• https://www.elegantthemes.com/preview/Divi/wp-content/themes/Divi/style.css?ver=3.0.27
• https://cdn.elegantthemes.com/preview/Divi/wp-content/themes/Divi/epanel/shortcodes/css/shortcodes_responsive.css?ver=3.0.27
• https://cdn.elegantthemes.com/preview/Divi/wp-content/themes/Divi/includes/builder/styles/magnific_popup.css?ver=3.0.27

Getting Started with HTML

With all the Divi CSS files added, we can now get started with creating our snippet! Let's first start off by creating the HTML portion of our modal.

Click on the HTML panel on your pen and insert the following code into it.

<button class="at-modal__button at-modal__button--primary" data-modal-action="open" data-modal-target="modal-1" type="button">Open Modal</button>

<div class="at-modal" data-modal="modal-1">  
  <header class="at-modal__header">Are you sure you want to leave?</header>
  <section class="at-modal__section">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cave putes quicquam esse verius. Nos commodius agimus. Hic ambiguo ludimur. Cur post Tarentum ad Archytam?
  </section>
  <footer class="at-modal__footer">
    <a class="at-modal__button" data-modal-action="close" href="#close">Close</a>
    <a class="at-modal__button at-modal__button--primary" href="https://andytran.me">Leave</a>
  </footer>
</div>  

You'll see that your pen refreshes instantly with the newly added code. Now that we have our HTML taken care of we need to tackle the rest!

Before we move on to the CSS, let's go over some key points in the HTML.

• We are using BEMCSS methodology to prevent conflicts with existing CSS styles by isolating everything we do inside a parent block.
• All our classes are prefixed (i.e. at-) to insure that our classes won't inherit existing styles.
• We have several data-modal attributes that we'll be using as a reference in our JavaScript.
• We have a button outside the modal that will open the modal when clicked.
• The button data-modal-target attribute should be the same as the modal data-modal attribute.

Moving onto the CSS

Now that we have the HTML complete, let's add some style to our modal.

Head over to the CSS panel and insert the code below.

.at-modal {
  z-index: 999999;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 600px;
  background: #FFFFFF;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.2);
}

.at-modal__header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  color: #404040;
  font-size: 16px;
  font-weight: 600;
  line-height: 60px;
}

.at-modal__section {
  padding: 20px;
  line-height: 26px;
  font-size: 14px;
}

.at-modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 10px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.at-modal__footer .at-modal__button {
  margin: 0 5px;
}

.at-modal__footer .at-modal__button:last-child {
  margin-right: 0;
}

.at-modal__button {
  display: inline-block;
  background: #FFFFFF;
  height: 36px;
  border: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  color: #404040;
  line-height: 36px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.at-modal__button--primary {
  background: #0080FF;
  color: #FFFFFF;
}

You'll see that your pen refreshes with some elements missing and new a new stylish look for the button and modal! With both the HTML and CSS complete, we can now move over to JavaScript.

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.

Adding the Magic with JavaScript

Awesome thing about Divi is it already comes preinstalled with jQuery so we'll be utilizing it.

Head over to the JavaScript panel and insert the code below.

jQuery('.at-modal__button[data-modal-action="open"]').on('click', function(e) {  
  e.preventDefault();

  jQuery('.at-modal[data-modal="' + jQuery(this).attr('data-modal-target') + '"]').show();
});

jQuery('.at-modal__button[data-modal-action="close"]').on('click', function(e) {  
  e.preventDefault();

  jQuery(this).closest('.at-modal').hide();
});

You'll notice that again your Pen will refresh but still look the same. However, this time around all the button events will be working. Go ahead and try clicking the Open Modal button.

Early in the HTML section, we went over how the data- attributes will be used as references. These attributes allow us to have multiple on one page with different ids assigned to it.

Let's go over the JavaScript portion.

• We use jQuery() instead of $() since jQuery is loaded after the Code Module.
• We have 2 event handlers, one to handle the modal open and the other for to handle the modal close.
  • The modal open event handler will take the data provided in the data-target-modal attribute and look for the modal with the matching data-modal attribute and open it.
  • The modal close event handler will close the current modal that the close modal button is in.
• We use e.PreventDefault(); to disable the default actions of the button.

Adding the Modal Pop-Up to Divi

Now that you're done, hit save on the top right hand corner or press CMD + S.

Once you do that, you'll be provided with a new URL for your pen. Go ahead and copy that URL and paste it into the CodePen Code Generator. Just paste the compiled code that was provided into a Divi Code Module on your page and ta-da, now your Divi page is awesome-er!