Create your own fixed promobar

In this short tutorial, i’ll show you a really simple approach to create a fixed promobar in Divi. The promo will contain one line of text, a button to link to any page. Also a dismiss / close button so the user has the ability to close the promo bar. Let’s begin !

First things first: Create the Layout

You won’t need a page at first to create your layout. Let’s use the Divi Library. Go to your WordPress Dashboard > Divi > Divi Library and click on “Add new”. Create a new normal sectiion with one 1/2 column and two 1/4 columns. In the first column add a text module, in the remaing two columns add a single button.

Settings for:

Section: For the Section (the most outter part of the layout)  we have 3 settings. Choose a background color ( like #ea2071 ), set custom padding for right, left, top and bottom, each with 0 px. In the Custom CSS tab for this section, choose a custom css ID (like action_bar) and put the following CSS snippet under Main Element.

position:fixed;
bottom:0px;
width:100%
z-index:500;

 

Row: Make the row full-width

Settings for:

Text-Module: For the text-module in the first 1/2 column, see the images below for recommended settings. If you want, you can download the complete layout ready to use, there is a download link at the end of this post.

 

Promo Button: For the first single button in the first 1/4 column. The button will link to any page you want to promote. See the images below for recommended settings.

 

Settings for:

Close-Button: For the second button in the second 1/4 column. You can simply use the same settings as for the promo button. Just see those following two images. Don’t forget to add a custom css class to the close button (like dismiss_action_bar)

 

Add closing functionality with jQuery:

To give the user the ability to dimiss the promotion, we need to add a little bit of javascript / jQuery. Copy the following code snippet and add it under WordPress Dashboard > Divi > Theme Options > Integrations > <head> code :

jQuery

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#action_bar .dismiss_action_bar").click(function() {
jQuery("#action_bar").slideToggle();
 });
});
</script>

Finish

Now you can go ahead and add the promo bar to any page of your website you want. If you make a global element out of it, it’s easier to handle if you add it to lots of pages, but I wouldn’t recommend it. In most cases it’s more effective to add the promo bar just to specific pages or the home page.

You can download the project files here:

Promo Bar Package