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.
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
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.
Add closing functionality with jQuery:
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: