How to Create a Slide-In Promo Bar in Divi

by | Oct 11, 2016 | Divi Tutorials | 124 comments

Elegant Themes recently launched the groundbreaking Divi 3.0.Β To promote the launch, they created a gorgeous slide in promo bar that tastefully announces the arrival of Divi 3.0 to website visitors.

 

After seeing quite a few people ask how to recreate the promo slide in bar in Divi, I decided to create a tutorial. And to make things even easier, I built a little generator to help you customize the promo bar! πŸ™‚

 

If you haven’t seen the promo bar over at ElegantThemes.com, here’s a screenshot below, or you can of course go take a look for yourself.

Also, you can see a demo of the what we’ll be creating by clicking the button below. πŸ™‚

Okay so let’s get started creating the promo bar. The hard work has already been done for you, so it’ll be a snap. The code below is pretty messy, but stay tuned and I’ll show you how to use the generator to make customizing the promo bar a snap.

The Divi Slide In Promo Bar Code

Okay so you can customize the code above, and move on to the lastΒ step, however I’d recommend utilizing the generator I created below for an extremely easy way to customize the promo bar for your own use. πŸ™‚

The Promo Bar Code Generator

To use the generator, simply fill in the form fields below and hit the submit button. The generator will then email you the code to copy and paste into your website. I’ll show you where to put the code in the next step. Β  Disclaimer: By using the generator, you will be subscribed to the Divi Life email list, however you can unsubscribe at anytime. And, don’t you want to be the first to know when new freebies like this are added anyways?? πŸ™‚

 

Tip: For findingΒ the correct hexadecimal colors (ie. #ffffff) to use in the generator below, you can use a website like this:Β http://html-color-codes.info/

The Generator:

  • This is where we'll send you the code to use on your own site!

Placing the Promo Bar Code on Your Divi Website

Okay, so this next step will show you how to actually add the slide-in promo bar code to your Divi website. The step is the same whether you’re using the code from the code box above and customizing it manually, or using the handy generator I created.

 

We actually have two options for adding the code to your website. They’re both extremely simple. Before you choose which method though, you’ll need to decide whether you want the code displayed on just one page, or all the pages on your site. Once you’ve decided, follow the relevant method below. You don’t need to do both methods.

 

Adding the Promo Bar Code to Just One Page

If you’d like to add the promo bar to all the pages on your site then skip this step, and move onto the next step. Okay the first thing we need to do isΒ make sure you have the code copied to your clipboard. Be sure that you have the code in it’s entirety copied, nothing is there by mistake πŸ˜‰

 

Next, go to the page you’d like to add the promo bar to, and create a new code module. It doesn’t matter where on the page you add the module, because the CSS code will automatically position it into place.

 

Now, paste the code into the code module and save it. Be sure to save the module itself, as well as saving the page. Now you’re done. Go and take a look and admire what you just created πŸ™‚

 

Adding the Promo Bar to All Pages of Your Website

Adding the Promo Bar to every page of your Divi website is very easy, and can be done with one step. Firstly, copy the promo bar code to your clipboard. Make sure you copy it in it’s entirety, because nothing is there by mistake πŸ˜‰

 

Now, from the WP Admin section of your website, go to Divi > Divi Theme Options > Integration tab, and locate the box for:Β Add code to the < body > (good for tracking codes such as google analytics)

body-section-integration-tab-divi

 

Paste the code into the box and hit save. Make sure the switch for “Enable Body Code” is on (lit up with blue). It’s on by default, but if you find it off, hit the switch and make sure you hit save again.

 

And we’re done! Now admire your creation πŸ™‚ If you have any questions, please feel free to comment below.

 

124 Comments

  1. Mark

    Hi Tim,

    I’m really impressed with not only the pop up bar, but the whole sign up form you put together that allows the color choosing, text changing, and then put in my name and email to have it sent to me… really nice , and extrememly user-friendly!
    Cheers! #divination #dividojo

    Reply
    • Tim Strifler

      Thanks Mark! I appreciate the compliments! πŸ™‚

      Reply
    • Buddy Bell

      I use WooCommerce and there is a bar for secondary Menu in the way of the Promo Bar. It shows up behind it.

      Reply
      • Tim Strifler

        Hi Buddy,

        The generator has an option for using the secondary menu. It will fix that issue for you. When you use the generator, just make sure to select the option for “Yes, I’m using the main nav and the secondary menu too.” πŸ™‚

        Reply
  2. Bernd Steinig

    The Promo Bar, is one of the things I’ve missed. You really have a big surprise.
    Only 1 x copy & past and already a small miracle is accomplished. I say a very, very thank you very much, which you have created for the community, so also for me.
    BerndfromBerlin

    Reply
    • Tim Strifler

      You’re very welcome, Bernd! πŸ™‚

      Reply
  3. Martin Rice

    Hi, Tim:

    Thanks for this tutorial. I think it’s great for promotions and am anxious to use it. I’ve run into a problem, however. Whether I try it on just one page or every page, all I see is a white strip where the slide in should be. No text and no button.

    Any idea of what I might be doing wrong. Oh, and I left all the values in the generator form the same other than the promo text and the URL for the button.

    Thanks for your help,
    Martin

    Reply
    • Tim Strifler

      Hey Martin, sorry to hear it’s not working like it’s supposed to. Just to confirm that you copied the code completely right? Including the

      at the beginning? If you did, and it’s still not working, do you mind sending me a link to take a look?

      Reply
      • Martin Rice

        Hi, Tim,
        As far as I can tell I copied everything and pasted it correctly. It’s there for appearing on every page. You can see it — that is, the white band rather than the slide in, right under the mail menu, at https://tennesseegrassfed.com and all the other pages.

        Thanks for the help,
        Martin

        Reply
        • Martin Rice

          Sorry, that’s a typo not “mail menu” but main menu.

          Reply
        • Tim Strifler

          Okay yeah I see the issue now. When building this, I didn’t take into account the upper secondary menu. I don’t use it too often so I totally spaced on testing with it. Sorry about that! I’m working on a fix now, but may take a bit to be completed. It will likely be a separate generator for using with the upper secondary menu. I’ll let you know when a fix is done though. In the meantime, if you add the below CSS, it will make the promo slide in appear on top of the upper secondary menu, as in it will completely cover up the secondary menu. It shows again when the promo is closed though. This may not be a suitable temporary solution, but I thought I’d throw it out there anyways.

          .promo-slide-in {
          z-index: 999999;
          }

          Reply
          • Martin Rice

            Great, Tim. Thanks so much. I’ll give the CSS a try and look forward to the eventual fix. I really think this is a great gift to the Divi community.

          • Tim Strifler

            You’re welcome, Martin! And that was my goal. πŸ™‚

          • Tim Strifler

            Hey Martin! The generator has now been updated to work with the upper secondary menu! Just make sure you choose the correct option in the generator because the code output is a little bit different for the secondary menu. πŸ™‚

  4. leisa

    This is so great Tim, thanks for your great tutorials. Just wondering – you mentioned that the cookies make it disappear after its been spotted, what if you want the promo bar to be there all the time and not to disappear, because you’re using if for something other than a promo?

    Reply
    • Tim Strifler

      You’re welcome, Leisa. I’m glad you’re enjoying the tutorials! πŸ™‚ That’s a great question. The best way to do that is to not have the close button at all. And the easiest way to achieve that is with just a small bit of custom CSS. You can copy and paste the below CSS into your custom CSS box in Divi Theme Options. Or, if you only want to remove the close button for one promo (so you can have other “closable” promos for other pages) then put the CSS in the custom CSS box under the Divi page settings.

      .promo-slide-in-close-promo {
      display: none;
      }

      Let me know if you have any questions!

      Reply
      • Leisa

        You’re a champion. ..works perfectly

        Reply
        • Tim Strifler

          Thanks Leisa! I’m glad it’s working for you! πŸ™‚

          Reply
  5. Terri

    I’m having trouble getting this working on my site. If I copy and paste your code directly from above it all works without a problem. But as soon as I copy and paste the code yours site emails to me, the bar doesn’t show up.

    I’ve spent a couple of hours on this now…for such a simple thing to do it’s sending me a bit batty LOL.

    Any ideas?

    Reply
    • Teresa Schulze

      I think I’ve found the problem. I went through the same process on another website and it all worked fine. The difference between the 2 seems to be that I have an older version of Divi running on the site with the issue.

      Reply
      • Tim Strifler

        Okay great! I’m glad you were able to get it figured out. I’m sorry you spent so much time on it though! I should have mentioned that this was created using the latest version of Divi. Let me know if you need anything else though πŸ™‚

        Reply
  6. Francesco

    Hi great tutorial.
    I don’t know if is only my problem, but after I put the code above into a code module of single page and save it, I automatically redirect in the fronted and I can’t see anything.

    If I come back to the backend I can’t see my code module. It seems that the divi editor force the removal.

    Do you have any solution? Or I wrong something?

    Reply
    • Tim Strifler

      Hmm that’s very odd. I’m not sure why that would be happening. Are you running the latest version of Divi? (3.0.14)

      Reply
      • Francesco

        Yes it’s the latest!
        Don’t you have the same problem?

        Reply
        • Tim Strifler

          No I haven’t seen that problem. It could be some sort of plugin conflict. I’d recommend trying the code on a fresh install of WordPress & Divi to see if the problem exists. If so, then you know it’s a conflict with a plugin. At that point, you’d have to stable plugins one by one to figure out what’s causing the issue.

          Reply
          • Tony Barnett

            I tried yesterday and got the same thing. Tried to preview but got a 404 error and code was gone from code module!

  7. Peter

    This is fantastic – thank you! I only have a small issue, on mobile if your text is too long the button will hide some or most of the text on a mobile phone. Any fix? Would rather not shorten the text…. Gracias!

    Reply
    • Tim Strifler

      Hey Peter, you’re welcome! I’m glad you like it. Try putting this custom CSS in your Divi Theme Options custom CSS box:

      @media (max-width: 380px)
      .promo-slide-in-content p {
      font-size: 13px;
      width: 50%;
      }
      }

      Without seeing it, I can’t say for sure if that will fix it, however you can play around with the width and the font size to fine tune it πŸ™‚

      Let me know if you need anything else!

      Reply
  8. Michael

    Dude, today is my birthday, and I stumbled across your blog post from a FB group. This is about the best part of my birthday so far to find this little header/slide in promo bar. Will definitely be back to use the generator. Thanks man.

    Reply
    • Tim Strifler

      That’s awesome! And Happy Birthday! Let me know if you have any questions πŸ™‚

      Reply
  9. leisa

    Tim, the “hide navigation until scroll” no longer works under the Customise options. It seems to see the promo as the navigation unless I’m doing something wrong. Any workarounds?

    Reply
    • Tim Strifler

      Hi Leisa,

      Hmm that’s very odd. Do you mind pasting a link, so I can take a look?

      Reply
      • leisa

        Thanks for replying Tim, I’ve made some changes to get it working, but now I’ve got a gap between the promo and the nav menu. I replied further down as I didn’t see this response earlier … apologies

        Reply
        • Tim Strifler

          I see from your other comment further down that you got it working. That’s great! πŸ™‚

          Reply
  10. Paul

    Tim this looks fantastic. I used to have a global section (sitewide) at the top of every page that I could enable and disable as needed. But this looks so much better.
    Thanks can’t wait to try it.

    Reply
    • Tim Strifler

      I’m glad you like it, Paul! Thanks for sharing. Let me know how it works out when you have time to try it πŸ™‚

      Reply
  11. Euan

    Hi Tim,

    Great tutorial but doesn’t seem to be working on my site?

    The layout is kind of hidden by the menus – can you see?

    http://www.gibsonglobalsearch.com/

    Any ideas how to fix?

    Thanks again for this great work!

    Euan

    Reply
    • Tim Strifler

      Hi Euan,

      I just took a look, and it looks great to me! Were you able to figure out a fix? Or it could possibly be caching that resolved itself. Either way, from what I can tell, it looks like it should now πŸ™‚

      Reply
  12. Franco

    Hi, simple and interesting “lesson”, but it’s not working on my site! This is true with Firefox, and Chrome. It’s partally working with Microsoft Edge, but the blue line on top partially cover the promo bar.
    I used the option “on every page”, copied all the code I received in the box, the “Enable body code” is active (Blue), but nothig shows on any page. My site uses an Italian translation, but I don’t think this would be a problem. The Divi version I’m using is 3.0.15 http://www.nuove-vie.it/
    Any idea?
    Thanks

    Reply
    • Tim Strifler

      Hi Franco,

      I’m sorry to hear about the trouble. Did you use the generator and select the option “Yes, I’m using the main nav and the secondary menu too.”? Because the generator will output the code slightly different based on whether or not you’re using the top secondary menu bar on your site. Which I can see from your site that you are. Let me know!

      Reply
      • Franco

        Ok, I didn’t understand that part (the option β€œYes). Now I’ve requested again the script, and the result is that it’s working perfectly using Microsoft Edge, the bar appears only at half height in the top of page using Chrome, and it doesn’t appear at all with Firefox.

        Reply
        • Tim Strifler

          Hi Franco,

          I took a look at your site, and it looks perfect for me in Chrome, Firefox, and Safari. Try opening up an “Incognito Window” in chrome, and a “Private Window” in Firefox and see if it shows up. The way the promo bar works is it will not show for 7 days after it’s been closed or the button clicked on.

          Reply
  13. Federico

    Hi Tim,
    thanks for great resource. I have only one question.
    If I would set cookie expiration date for session instead the actual time, how can I get this?

    Thanks

    Reply
    • Tim Strifler

      Hi Federico,

      The cookie is set to expire 7 days after the promo is either clicked on or closed (cookieExpire:7). Does that help?

      Reply
  14. Keith Davis

    Hi Tim
    Fabulous resource and I’ve added it to my homepage.
    I only have a main menu but it is set to appear on scroll, which seems to mess up the “Learn More” link.

    The “learn More” link only becomes active once you scroll and my main menu appears.

    If you click it before the main menu appears, it takes you to one of my other pages, not the Elegant Themes page, which it is set to.

    My homepage is:
    http://divitheme.co.uk/

    Any thoughts?

    Reply
    • Tim Strifler

      Hey Keith! Thanks for the kind words. And thank you for sharing the link so I could take a look. That is very odd! It’s like it is displaying your menu “invisible” on top of the promo bar, because I’m able to click on other menu links in other parts of the promo bar. Very strange. I was able to find a fix though. If you change the z-index, it will make the promo bar the very very top layer and it won’t have that problem. So if you add the following CSS to your Divi theme options, it will solve that problem:

      .promo-slide-in {
      z-index: 999999 !important;
      }

      Let me know if that indeed fixes it for you! πŸ™‚

      Reply
      • Keith Davis

        That did it Tim
        Just added it to my local install and it now works a treat. πŸ™‚

        Many thanks for the solution and many thanks for the quick reply.

        Reply
        • Tim Strifler

          Awesome! You’re very welcome πŸ™‚ I’m glad to hear that solved it!

          Reply
  15. Leisa

    Hi Tim, I have navigation enabled on scroll and I’m getting a gap between the promo bar and the primary nav menu almost like there is a hidden secondary menu in the space. Here’s the link if you can see what I’m missing. It’s a test site currently http://rainbowgetaway.com.au/newsite2016/

    Reply
    • leisa

      It’s okay Tim, clearly the stupid award goes to me today! I was using the wrong code.

      Reply
      • Tim Strifler

        No worries! I’m glad you got it working well! I took a peek at the link you posted above, and it’s looking great!! πŸ™‚

        Reply
  16. Tim

    Hi Tim,

    I love the look, I am not able to get it to work. I chose the Using Secondary Upper Menu Bar. The promo slider is covering up the secondary menu bar. I have used custom css to change the secondary menu bar so I am not sure if that is where the problem is.
    This is a sandbox url, still working on development.
    lucasgraphicdesigns.com

    Reply
  17. Tim

    As soon as you have a moment I would really appreciate your help.
    I have updated to the latest Divi, I have removed the custom CSS for the secondary menu bar. I have used the Using main and upper secondary option for the code. I have also used the below per reading the thread of comments.
    The height seems to be off, the close option is still present and the promo slider is covering the secondary menu bar. alvarezfamilyweb.com (testing url)
    – Thank you for the work that you have put in, I really want this to work.

    @media (max-width: 380px)
    .promo-slide-in-content p {
    font-size: 13px;
    width: 50%;
    }
    }

    .promo-slide-in-close-promo {
    display: none;
    }

    .promo-slide-in {
    z-index: 999999 !important;
    }

    Reply
    • Tim Strifler

      Hi Tim,

      I’m sorry you’ve had some issues with it. I took a look at the link you posted in your first comment, but it looks like you deactivated the promo bar. I’d be more than happy to take a look if you reactivate it. Since it’s a live site, do you have a sandbox version of the same site? Let me know! πŸ™‚

      Reply
  18. Amanda

    Hi Tim,
    Thanks for this tutorial!
    Is there a way to turn the “learn more” button into a click-to-call button?
    I tried entering the telephone link but it tries to direct to an unknown page on my website.

    Thanks!

    Reply
    • Tim Strifler

      Hi Amanda,

      You can use a telephone link by inserting something like this into the button link form field in the generator: tel:+1800229933 – Let me know if it works!

      Reply
  19. Gilbert

    Hi Tim, Thanks for making this available to the community.

    I have a problem, the bar works, but the button doesn’t show up.
    See: http://meteorlife.com/

    Thanks.

    Reply
    • Tim Strifler

      Hi Gilbert,

      That’s very odd. I haven’t seen that happen yet. Silly question, but by any chance did you make the button background the same color as the promo bar background? I’d be happy to take a look, but it looks like you removed it from the site you linked to.

      Reply
  20. Michael Breslow

    You rock sox πŸ™‚

    Reply
  21. Matt

    Great work! Thank you for sharing!

    Reply
  22. Emily

    Hi Tim. Thanks so much for this- I’m using the vertical nav primary menu bar on the site I am working on- any different code for this as the code doesn’t seem to be working so I’m assuming it is because of the vertical nav?

    Reply
    • Tim Strifler

      Hi Emily,

      Yes unfortunately it doesn’t currently support the vertical nav, although that is something I plan on adding in the future. Sorry about that! πŸ™

      Reply
  23. Abhishek Kumar

    Thanks for Very Much Sir, Can You please give me css how to less height of promo bar

    Reply
    • Tim Strifler

      Hi Abhishek, you’re very welcome. You can add this CSS to your custom CSS box in either Divi Theme Options, or in the individual page settings customs CSS box:

      .promo-slide-in {
      height: 60px;
      }

      The height is 60 by default, so change to a lower number to decrease the height. You will also need to change the height and the margin-top though:

      .promo-slide-in-content p {
      font-size: 24px;
      margin-top: 17px;
      }

      Hope this helps!

      Reply
      • Antal

        Hi Tim, thanks for the great post! I have tried to make it smaller with CSS. But it does not work? https://wilkazelders.com What am I doing wrong?

        .promo-slide-in {
        height: 40px;
        }
        .promo-slide-in-content p {
        font-size: 18px;
        margin-top: 11px;
        }

        Reply
        • Tim Strifler

          You’re very welcome! The CSS you posted should work, but you will likely need to add !important to each rule to make it stick. Give that a try, and let me know πŸ™‚

          Reply
  24. Jen

    Thanks so much for this! I found it after trying several “Announcement Bar” plugins, none of which played nicely with Divi’s secondary menu enabled. This was exactly what I was looking for and worked perfectly.

    Reply
    • Tim Strifler

      You’re very welcome! I’m glad it worked out for you!! πŸ™‚

      Reply
  25. Cam

    Hey, great tutorial and love that you even made a generator to keep it super easy!

    I am having the same issue as Francesco “after I put the code above into a code module of single page and save it, I automatically redirect in the fronted and I can’t see anything.”

    I have deactivated all my plugins and still cant get it to work. Any ideas?

    Reply
    • Tim Strifler

      Hmmmm that’s odd. Do you have the same issue if you put the code in the integration tab in Divi Theme Options instead?

      Reply
      • Cameron John Sandwell

        Yes, either way I cant seem to get it to work.

        Reply
        • Tim Strifler

          Okay, is that from using the generator or the code in the code box within the post? If it doesn’t make any difference, then it could be a plugin conflict or a conflict with child theme code if you’re using a highly customized child theme. Those are the only things I can think of that could possibly be causing the issue.

          Reply
  26. Florian

    Hi Tim, thanks for the code. It kind of works but it is just popping in without any animation on my page. I don’t use the secondary menu.

    Reply
    • Tim Strifler

      Does the animation in the demo I link to in the post working okay for you? I’m not sure why the animation wouldn’t work, unless there’s some sort of plugin conflict…

      Reply
      • Florian

        Yes, it works great on your page. I will try to deactivate my plugins and test it again. I am also using a child theme.

        Reply
  27. Ian

    Thanks Tim, great stuff!

    Is there a way to stick the menu to the bottom of the page before the footer – like a call to action on every page (instead of up the top)

    Reply
    • Tim Strifler

      Hey Ian, great question! Yes, with a little bit of tweaking you can make it fixed to the bottom instead. It’s actually a cool effect when it animates in. This will be sticky, and not on top of the footer though like you mentioned. If you want it to be just a static call to action above the footer, then I’d recommend just creating a global section and adding it to every page above the footer. If you want fixed to the top though, follow these steps:

      You’ll need to make changes to the block of code. So whether you copied the code from the post, or used the generator, it will work the same. I recommend pasting the code into a text editor and doing a search instead of trying to find the classes below manually.

      1. Change top:0 to bottom:0 in the CSS for .promo-slide-in
      2. Remove this completely: .fixed-nav-main-header{top:60px !important;}.nonfixed-nav-main-header{padding-top:60px;}
      3. And remove this completely too: .fixed-nav-page-container{padding-top:130px !important;}

      Let me know if you have any questions πŸ™‚

      Reply
  28. Arany

    Hi Tim,

    Thank you for this promo bar generator!

    Would you consider creating a plugin for this generator?

    Cheers,
    Arany

    Reply
    • Tim Strifler

      Hi Arany! You’re welcome! I’m glad you like it πŸ™‚ And yes, I do have plans to convert it into a plugin. It will make it much more flexible and easy to set up and change. Make sure you’re subscribed to be notified when it’s released πŸ™‚

      Reply
  29. Brian

    Hi Tim, great work here! I use Divi on most of my sites but I also have one that uses the Extra theme. Is there a way to make this work with Extra also?

    Reply
    • Tim Strifler

      Hi Brian,

      Currently it’s only set up to work with Divi. It would take a decent amount of tweaking to get working with Extra because all the CSS ID and Classes are different with the Extra theme. However, I’m going to be turning this into a plugin that will work with both Divi and Extra, and be a lot more user friendly too! πŸ™‚

      Reply
  30. Jason

    I’ve tried this on 2 separate websites. It works great on one, but the other site isn’t taking it. I duplicated the same steps for both. Any suggestions?

    Reply
    • Tim Strifler

      Hi Jason,

      I’m not sure what it could be. If the second site has quite a bit of custom CSS or a customized header.php file, then that could be the problem. Also, check the plugins, because there could be a conflict there as well.

      Reply
  31. D

    Thank you Tim for sharing this. I love you tutorials. Just want to let you know that it is appreciated. Hope you have a wonderful day and looking forward to more tutorials.

    Reply
    • Tim Strifler

      Thank you so much for the very kind works! I great appreciate the compliments, and I’m glad you love the tutorials! I’ll definitely be making more soon πŸ™‚

      Reply
  32. Viorel

    Hi Tim, is this supposed to get disabled (to not display it) once you click on the button? This is what happen on my site. Once i click on the promo bar it won’t be displayed again.

    Thanks
    Viorel

    Reply
    • Tim Strifler

      Hi Viorel,

      Yes, it’s designed to stop showing it, once it’s been clicked on. However, you can turn this off by simply removing .promo-slide-in-button from this: jQuery(“.promo-slide-in-button”) so that it looks like this jQuery(“”)

      That’s the simplest way of keeping it from turning off after the button is clicked πŸ™‚

      Reply
  33. D

    Hi Tim,

    Thanks again for this tutorial. I wanted to know if it would be possible to have the bar reset at every page refresh instead of the 7 day re-appearance? Thanks in advance

    Reply
    • Tim Strifler

      Hi there,

      You can have it reset after every page refresh by removing this: .promo-slide-in-button from this: jQuery(β€œ.promo-slide-in-button”) and by removing this: .promo-slide-in-close-promo from this: jQuery(β€œ.promo-slide-in-close-promo”)

      Hope that helps!

      Reply
  34. Glen

    Tim, you’re a winner…

    This tip also works on ET’s old Boutique Theme. Only needed one little bit of CSS to behave correctly.

    /* Slide-In Promo Bar */
    .promo-slide-in { position: inherit !important;
    }

    the result:
    http://quiltingfabrications.com/

    Great tip, thanks for sharing!

    Glen.

    Reply
    • Tim Strifler

      Hi Glen,

      That’s great to hear! I’m glad it works πŸ™‚

      Reply
  35. Buddy Bell

    Ok having problem with button falling to second line on banner. I love this if I can get it to fit.
    Thanks

    Reply
    • Tim Strifler

      Hi Buddy,

      Try adding this CSS to your Divi Theme Options custom CSS box:

      .promo-slide-in-content {
      width: 1010px !important;
      }

      Try increasing/decreasing as needed until you get the desired result.

      Reply
      • Charles Grimes

        That was my question — looking forward to a plugin version.

        Reply
        • Tim Strifler

          Yes a plugin version is in the works! πŸ™‚

          Reply
  36. frank

    Hi
    Very nice, this need to be so easy that client can do it, like adding text in to site. Plugin…

    Long code… I’d like to see version with minimal code, no animation or anything extra?

    Reply
    • Tim Strifler

      Hi Frank,

      This tutorial is definitely not meant for clients. I agree that it’s too complicated for clients. I also agree with you that the code snippet is quite long, which is why I created the generator πŸ™‚

      I am creating a plugin version of this though that will be much more user friendly and “client-friendly.” Make sure you’re subscribed to be notified when it’s released πŸ™‚

      Reply
  37. Michael Bond

    Hi Tim
    Thanks for the Tutorial it works great
    I have one question about the cookie …

    Is it possible to disable the cookie completely on one page
    I saw what you told Leisa to do earlier in the comments and yes that does remove the close button, but I want the slide in to “remain or reappear” when my visitor returns to the page in question even if they have used the link button in the slide in
    The main reason for this is that I have actually got 2 link buttons on the slide in and I want my visitors to see the slide in all the time
    this link will show you what I mean
    http://bondystrainz.bondysworld.com/

    Reply
    • Tim Strifler

      Hi Michael,

      You can have it reset after every page refresh by removing this: .promo-slide-in-button from this: jQuery(β€œ.promo-slide-in-button”) and by removing this: .promo-slide-in-close-promo from this: jQuery(β€œ.promo-slide-in-close-promo”)

      Let me know if that does it for you πŸ™‚

      Reply
  38. Kathy

    Hi Tim,
    thanks for this awesome tutorial and generator…just what I was looking for and works perfectly! One question – we run Divi on a multisite and would like the slide in promo bar to work on all of those sites as well, but don’t want to have to go into each site’s Divi Theme Options > Integration tab to enter the code. Can the code be put into the functions page?

    Reply
    • Tim Strifler

      Hi Kathy,

      That’s an excellent question! While I haven’t tested it on multisite, you can place the code at the bottom of your header.php file (of your child theme). The integration tab essentially does the same thing, but does it programmatically on a site by site basis (in terms of multisite). I tested this on a single site, so it should work the same on multisite too. Let me know how it works out though! πŸ™‚

      Reply
  39. Michael Mac Donald

    Hi Tim

    Thanks for this awesome generator! Just a heads up- this breaks with the use of apostrophe’s. I haven’t tried to escape the characters or anything yet, but it would be cool if your code factored that in!

    Reply
    • Tim Strifler

      Good to know! Thanks for the heads up!

      Reply
  40. Miguel Mendes

    Hi Tim,

    Awsome promo bar!!! πŸ™‚ I want to use in all pages but i have 2 languages (with polylang plugin).
    I how do I do to show the bar with the proper language.
    http://www.anasequeira.com/

    Thank you!

    Miguel

    Reply
    • Tim Strifler

      Hi there Miguel,

      If you use the generator that is on the tutorial, you can place any text you want (in any language) and it will generate the promo bar for you.

      Reply
  41. Leisa

    Hey Tim, I love this promo slide in as you know, but I need the link to open in a new tab so its not taking the customer away from the site? Any thoughts

    Reply
  42. Hubert

    Hello TIM

    A big thank you for sharing, and also all my best wishes for the new year.

    At pleasure πŸ˜‰

    Reply
    • Tim Strifler

      You’re welcome, Hubert! Happy New Year to you as well πŸ™‚

      Reply
  43. Aftab

    Is there someway we could have 2 lines on the promo bar like a Headline and a sub headline?

    Thank you.

    Reply
    • Tim Strifler

      Yes, but it would take some tweaking of the HTML and CSS. Unfortunately I won’t be able to provide that at this time. However, there will be a plugin form of this tutorial soon with lots more customization ability πŸ™‚

      Reply
    • Tim Strifler

      You can adjust the position of the button by pasting this CSS into your Divi Theme Options custom CSS box, and tweaking the margin:

      .promo-slide-in-button {
      margin-top: 0px;
      }

      Play around with that number until you get it just right πŸ™‚

      Reply
  44. Guillem

    Thank you very much, Tim!

    Reply
    • Tim Strifler

      You’re very welcome, Guillem πŸ™‚

      Reply
  45. Massimo

    Hello
    Thanks for this super code but… it doesn’t work on my website!
    I tried both the settings with 2nd menu and without… I tried also single page and all pages.
    The site is http://www.narcolessia.org

    Reply
    • Tim Strifler

      I’m sorry to hear that it’s not working for you. Are you running the latest version of Divi? Also, if you have a child theme that is adding lots of customizations to the header area, it could potentially make it incompatible. Lastly, there could potentially be a conflict with a plugin you’re running.

      Reply
  46. Josh

    Will this work with the Extra Theme created with the Divi builder?

    Reply
    • Tim Strifler

      No because the header classes are different with Extra. Sorry! We’ll be releasing a plugin version of this that will work with Extra as well πŸ™‚

      Reply
      • Josh

        Great!! Anything you create can you specify if it works with the Extra theme? That would be very helpful because I LOVE the stuff you put together and wish I could use more. Thanks!

        Reply
  47. Chrissy

    Just found your website via FB ad and I’m already impressed at the value you’re bringing to the Divi community. I’m falling more in love with Divi and this is the icing on the cake! Thank you

    Reply
    • Tim Strifler

      That’s awesome! Thanks for the encouraging words πŸ™‚ We have some exciting things planned, so stay tuned πŸ™‚

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

We're creating more tutorials!

Subscribe and we'll notify you when we publish more tutorials and blog posts similar to this. :)

Β 

We protect your email &Β never spam.

You have Successfully Subscribed!