Creating a Page-Specific Alert Banner using the Divi Code Module

In this post, I will be going over how you create a Page-Specific Alert Banner to notify your users using CodePen and the Divi Code Module. I will also guide you on how to export your Divi powered website using the CodePen Code Generator.

If you're unfamiliar with how CodePen and the CodePen Code Generator work, check out this post for detailed instructions on getting started.


Getting Started

First off, we will need to get our development environment setup. We will be using CodePen as our go-to editor since we can easily export it to Divi with ease, thanks to the CodePen Code Generator. Head over to CodePen and create a pen to get started.

CodePen will help users create and easily export our code.

Creating the HTML

Now that we have our CodePen pen created, we will need to create the HTML for our alert banner. In this example, we will be creating a simple alert with some text and a Call-to-Action button to convert users.

<!-- Alert Banner -->  
<div class="at-alert-banner" data-alert-id="1">

  <!-- Content -->
  <div class="at-alert-banner__content">

    <!-- Banner Text -->
    <div class="at-alert-banner__text">Custom Text Here</div>

    <!-- Banner Button -->
    <a class="at-alert-banner__button" href="https://custom-url-goes-here.com">Custom Text Here</a>
  </div>

  <!-- Close Button -->
  <div class="at-alert-banner__close">X</div>
</div>  

Now that we have our HTML code, let's go over some key points:

  • 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 ensure that our classes do not inherit existing styles from Divi's code base.
  • We use HTML comments so that we can easily reference our code and make changes with ease.
    • This is a good practice for development, but we want to remember to remove it in production.
  • We have the attribute data-alert-id which will be a unique id that should be different for each alert.
    • This unique attribute will be targeted by the JavaScript and stored in the browser local storage so that the alert banner doesn't show up again after it is closed.
  • Customizing the alert banner content.
    • To customize the text, look for <div class="at-alert-banner__text">Custom Text Here</div> and replace the Custom Text Here.
    • To customize the button, look for <a class="at-alert-banner__button" href="https://custom-url-goes-here.com">Custom Text Here</a>.
      • To customize the link, look for the href attribute and replace the contents within the quotation. i.ehttps://custom-url-goes-here.com
      • To customize the text, replace Custom Text Here.

Adding the CSS

Now that we have created the HTML portion of our code, lets add some style to our alert banner.

For more advanced users who are familiar with Sass, check out this CodePen demo. At the very top, there are variables that will allow you to easily modify the main banner styles.

/* Alert Banner */
.at-alert-banner {
  z-index: 999999;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #0080FF; /* Editable, Banner Background Color */
  width: 100%;
  height: 100px; /* Editable, Banner Height */
  box-sizing: border-box;
  -webkit-transform: translateY(-150%);
          transform: translateY(-150%);
  color: #FFFFFF; /* Editable, Banner Text Color */
  font-family: "Open Sans", sans-serif; /* Editable, Banner Font Family */
  -webkit-animation: at-banner-slide-in 0.8s ease forwards;
          animation: at-banner-slide-in 0.8s ease forwards;
}

/* Note, changes color of all links except button */
/* Alert Banner - Link */
.at-alert-banner a:not(.at-alert-banner__button) {
  color: #FFFFFF; /* Editable, Banner Link Color */
}

/* Alert Banner - Content */
.at-alert-banner__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 1100px; /* Editable, Banner Content Max Width */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Alert Banner - Text */
.at-alert-banner__text {
  margin: 0 20px 0 0;
}

/* Alert Banner - Button */
.at-alert-banner__button {
  display: inline-block;
  background: #FFFFFF; /* Editable, Banner Button Background Color */
  height: 40px;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  color: #0080FF; /* Editable, Banner Button Text Color */
  font-size: 12px;
  font-weight: 700;
  line-height: 40px;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease;
}

.at-alert-banner__button:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Alert Banner - Close */
.at-alert-banner__close {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
}

.at-alert-banner__close:before, .at-alert-banner__close:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background: #FFFFFF; /* Editable, Banner Close Color */
  width: 100%;
  height: 3px;
  border-radius: 2px;
  -webkit-transform-origin: center;
          transform-origin: center;
}

.at-alert-banner__close:before {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

.at-alert-banner__close:after {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}

/* Alert Banner Animations */
@-webkit-keyframes at-banner-slide-in {
  0% {
    -webkit-transform: translateY(-150%);
            transform: translateY(-150%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes at-banner-slide-in {
  0% {
    -webkit-transform: translateY(-150%);
            transform: translateY(-150%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

Now that we have our CSS code, let's go over some key points and how to make modifications to it:

  • We are using BEMCSS methodology to prevent conflicts with existing CSS styles by isolating everything we do inside a parent block.
  • Throughout the code, there are comments after specific properties starting with Editable, in which you can make changes too.
  • All the code have been prefixed (i.e -webkit-, -moz-, -ms-) to support most major browsers.
  • Comments have been made to separate element styles from each other to easily navigate through the code.

Adding the Magic with JavaScript

Now that we have both the HTML and CSS taken care of, we need to add some close functionality to it. The awesome thing about Divi is that it already comes preinstalled with jQuery, so DOM manipulation will be easier.

jQuery(document).ready(function() {  
  var alertBanner = jQuery('.at-alert-banner');
  var alertBannerId = alertBanner.attr('data-alert-id');

  /* If localStorage key exist, hide banner */
  if (localStorage["at-alert-" + alertBannerId]) {
    alertBanner.hide();
  }

  /* Click event handler */
  alertBanner.find('.at-alert-banner__close').on('click', function() {
    /* Hide alert banner when clicked on close button */
    jQuery(this).closest('.at-alert-banner').hide();

    /* Set item in local storage based on id provided */
    localStorage.setItem("at-alert-" + alertBannerId, true);
  });
});

Now that we have our JavaScript code, let's go over some key points:

  • We use jQuery instead of $ since jQuery WordPress has its very own version of jQuery loaded to prevent theme and plugin conflicts.
  • We have a conditional to check whether the banner has been closed before or not.
  • We have one event handler that will target .at-alert-banner__close.
    • The event handler will hide the existing alert banner and set an item in the localStorage to make sure that the alert doesn't show up again.

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.

Adding to Divi Code Module

Now that you have all the code finished, you will need to add it to Divi. To do so you will need to:

  1. Head over to the CodePen Code Generator, paste the pen URL into the input and hit generate.
  2. Hit the copy button that appears after hitting generate.
  3. Copy the concatenated code and head over to your Divi powered website.
  4. Tada, now the alert banner should be live.

If you have any questions or suggestions, feel free to comment below!

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