How to Create a Slide-in Top Bar Ad with the Divi Code Module

Last Updated on September 23, 2022 by 43 Comments

How to Create a Slide-in Top Bar Ad with the Divi Code Module
Blog / Divi Resources / How to Create a Slide-in Top Bar Ad with the Divi Code Module
Play Button

As I mentioned a few days ago with my post on how to add a floating action button to your site using the Divi Code Module, I’ve been creating more pens on Codepen.io for use with Divi–both with Code Module for single posts or pages as well as Divi’s theme options for site-wide implementation. Today I am happy to share another one, based on a design element of Elegant Themes’ own website: the slide-in top bar ad.

Now of course there are lots of plugins out there that can do this same thing but I like to avoid plugin bloat if possible if something can be done with a simple snippet instead. So with that said, let’s get into it!

Concept & Inspiration

The concept and inspiration for this came from the slide-in top bar we used right here on Elegant Themes following the launch of Divi 3.0 to draw more attention to our new Divi Theme page. It worked wonderfully for us and so I thought I’d share a version with the entire community that doesn’t require a plugin–just a simple code snippet!

Refresher: How the Code Generator Works

As in my previous most recent post, today we will be using a codepen generator I created for the Divi Community. What this code generator does is compile the code from a given codepen and export a single block of code that will run properly inside the Divi Code Module.

CodePen Code Generator

The mechanics of using it couldn’t be easier. All you have to do it copy the codepen url you’ve created (or that someone else has created for use within Divi) and paste it into the space at the field at the top of the generator. Then click the blue β€œGenerate” button.

CodePen Code Generator 2

This will populate the text box below with a block of code for use inside the Divi Code Module. You will also notice that the blue button now says β€œCopy Code”. Click it again to copy the compiled code into your clipboard for easy pasting into your desired Divi Code Module.

How to Create a Slide-in Top Bar Ad with the Divi Code Module

Subscribe To Our Youtube Channel

codepen

To add the codepen above to your Divi website on a single post or page, do the following:

First, navigate to the pen on codepen.io. Make sure you are logged in there. If you do not have an account, go ahead and create a free account (it only takes a few seconds).

When you are logged in and on the page for the above pen press β€œcommand + s” to save it. This will automatically create a duplicate of the pen under your account. This is the pen you will edit and then compile.

Now, locate the following line of html and replace the text with your message.

<div class="at-banner__text">Hey friend, check out my <b>new and improved</b> blog!</div>

Next, locate this line of html and change the link and text with your own.

<a class="at-banner__button" href="https://andytran.me">VIEW BLOG</a>
  </div>

When your changes are finished, save the pen again. Then, copy the pen’s url and paste it into the code generator as shown above. Finally, copy that code to you clipboard so you can paste it into your Divi website.

Now navigate to the post or page you’d like this banner to be on. Add a code module into the first standard section of your page.

code-module-section

Paste the code block into the content section of that code module and save and exit it.

code-pasted-into-code-module

Then, update your page and take a look at the frontend of your website. It should now hove a banner ad at the top that slides-in when the page loads.

Final-Slide-In-Top-Bar-Ad-Divi-Code-Module

By using the code module in this way you will be able to add a banner to a single page or post at a time. This is useful if you want to only have the banner appear on certain pages or with different messages on different pages.

If you want to have the same banner appear on all pages of your website, follow the instructions in the section below.

How to Add the Slide-in Top Bar Ad Site-wide

divi-theme-options-integrations

If you’d like your banner to appear on all of your pages at the same time, navigate in your WordPress admin to Divi > Theme Options > Integration. Scroll down to the text box labeled β€œAdd code to the < head > of your blog”. Paste your compiled code there and save changes. Your banner will now appear on all of your Divi website’s pages when they load.

Make Sure You Come Back For More!

Well that’s all for this particular tutorial. I hope you’re enjoying these tips on how to get more out of the Divi Code Module. My hope is that these posts and my code generator will begin to foster sharing of code snippets and scripts among the Divi Community similar to what we’ve seen with layouts and child themes.

I’d also like to repeat something I said in my previous post about using other pens with the codepen code generator I created:

β€œIf you’re interested in creating a pen that works with Divi and can be easily added into the code module using the generator, simple create your pens keeping in mind potential CSS conflicts that could be caused with Divi’s styles. For example, in the pen above I used the `at-` prefix to prevent any conflicts that might arise.”

So just keep that in mind as you use the generator for yourself or create pens on codepen to share with other Divi users.

Until next time, feel free to leave me some requests in the comments below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time πŸ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 4

Divi 5 Update: Public Alpha Version 4

Posted on November 25, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 4 today. We release new Divi 5 versions every two weeks, and it gets better each time! If you haven’t tested Divi 5 yet, try it and let us know what you...

View Full Post
New Starter Site for Freelancers (Quick Install)

New Starter Site for Freelancers (Quick Install)

Posted on November 24, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

43 Comments

  1. Where’s the LIKE button?

    πŸ™‚

  2. “All you have to do it copy the codepen url you’ve created (or that someone else has created for use within Divi)…”

    And how DOES one create this codepen url? I don’t get it. You’re making an assumption that we already know how to do that. What am I missing here?

    • Copy the url of the codepen you created when you pressed “command + s” on Andy’s original pen. It should have automatically created the exact same pen under your account. That’s the url you’ll want to use.

  3. Great, but covers my top menΓΌ bar. Any suggestions. Thanks Kevin

    • I would be *very* interested in the answer to this question also.

  4. Yes, it’s working fine, but how to make the same text effect like in the page https://www.elegantthemes.com/ with “Divi 3.0 & The All New Visual Builder Has Arrived!” ?
    Thanks

  5. It’s not working properly with a fixed menubar, I have a boxed layout and the slidein bar is under the container…

  6. The bar currently displays on top of the header covering the logo. Any way to make the bar appear above the header and the logo?

    • anyone?

      • Me too… anyone have any idea?

      • Me tooo… I think it’s a z-index parameter in the menubar…

  7. Every time that I try one of these code snippets, It fails. Is this supposed to work only for Divi THEME, or also Divi Builder (which I’m using – along with a custom theme)? Please advise and thanks

  8. Hi Andy, I understand google now lowers the ranking of websites with pop ups. Would this be considered a pop up? Thank you!

  9. Love it! Was just what I was looking for and was so easy to accomplish! Thanks soooo much for this golden nugget!!

  10. I love this work Divi. I have already used it and the code generator was helpful. Thanks

  11. Nice Andy! The CodePen generator is a great tool.

  12. Divi is rocking the web development. I am glad that this code generator can help the users to create a slide in top-bar.

    It can be helpful for all the Divi builder user.
    Thanks for the info.
    ~Ravi

  13. Hi Andy, I just want to say hi and thank you for the resources you are sharing! I’m loving the Slide-In Top Bar and I’m implementing into our website. I was wondering if you could help me add a code to make the bar automatically disappear after scrolling a certain amount of px or after a certain n of secs?

    • If it helps (sorry it’s not exactly what you asked) but you could change line 3 of the CSS to be position:absolute; instead of position:fixed. That will make the bar move off the top of the page as soon as the user starts to scroll down.

    • Same here Marco i also love slide in top bar and going to add in my website Thanks for sharing a helpful information..

  14. Thanks aan lot. This was I was looking for

  15. good job!!!!!!!

  16. WOW! these daily Divi tutorials are so useful. It would be great if you guys can put up a Divi tutorial request form or something like that in the site. That way people can ask and vote for tutorials they think are the most useful for their projects. This will definitely add value to your growing community. More informed community means less support requests for you guys πŸ˜‰

    As a DIYer myself these tutorials are so helpful. Keep up the good work πŸ™‚

  17. Thanks, once again it’s excessively useful !

    But, is it possible to display this bar above the header menu and not on it ?

    • Yes, was excited, but it really doesn’t look good overlapping the menu.

    • Love this, but it covers up my page menu as well. I noticed the sample ET one goes above the header menu. How can we achieve this?

    • Agree – this is great but I would love to know how this can be additional to the page content (not overlaid) as the usability isn’t great when it overlaps the site header.
      If I can achieve that – I use this technique instead of HelloBar plugin and save resources. Thanks.

  18. Sorry you are not giving complete information. It not mentioned after you created the Code pen account then changed the wording and now you need to generate the code. You never said when the Core Module Generator is located to generate the code.

  19. Is the Responsive to work with mobile devices also?

  20. Whilst I love the use of Codepen it would be brilliant to wrap these up in the same way the Divi 100 plugins / imports were!

    Love your work though and sure all of us would love to be able to add content above headers for promos or alerts without having to buy a 3rd party plugin πŸ™‚

  21. Thank you for fast solution!

  22. Loving these code snippets! Thanks! πŸ™‚

  23. Thanks about this very useful sharing.
    What do you recommend if I need to add a timer ? For example, if I want to show my bar after 10 sec ?

  24. Thanks Andy, this will prove to be very useful.

  25. Hi guys, anyone got problem with code module displaying as plain text?

  26. Thanks for sharing about Codepen, hadn’t heard of it before.

    What is the benefit of using codepen? Is it that it keeps the html/css/JS separate until you compile it?

    As an FYI, it took me a long time to figure out how to use your code generator because the height of my laptop screen is such that you can’t see the field or blue button without moving the separator margin up. But it isn’t obvious that you can move it. Without changing the view or moving that bar, you can’t enter the URL or generate the code because scrolling doesn’t go all the way up.

    Thanks again.

  27. Lovely one Andy! While this is cool, is there a way to integrate a TIME/DATE the slide in top bar comes out?

  28. Will this float temporarily as the page loads and then go away? I want a way to add an alert banner to top of home page in header area in case there’s a sudden cancellation, urgent Action Alert etc. but I don’t want it to obscure header menus whole time.

    • Hi Warbler,

      the slide-in top bar will be there until you click the close button.
      if you want the top bar closing automatically you can add this code to the js section

      setTimeout(function(){ jQuery(‘.at-banner__close’).parent().remove(); }, 5000);

      the code above will close the top banner after 5 seconds.
      5000 = 5 seconds

      hope this helps you.

      • Every time I tried adding this code in the js section of the code pen I got an error message. I tried placing it in many different places but still no luck. I would really like for it to close automatically after a few seconds so would really like to get this to work.

        Any HELP would be appreciated. Thanks so much!

        • there are some curly single quotes in the code on the comment, retype the code with a single quote and it might fix it( probably something in the comment system formatting here that is messing the code up)

          trying to paste a fix that worked for me to see if the formatting will change

          jQuery(‘.at-banner__close’).on(‘click’, function() {
          jQuery(this).parent().remove();
          });

          setTimeout(function(){ jQuery(‘.at-banner__close’).parent().remove(); }, 6000);

          make sure the .at-banner__close is in green. if it is not the quotes have gone funny!

          • just confirming, that my own quotes just went funny as soon as I submitted my comment!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

πŸ‘‹ It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today