I’m sure you’ve seen those message bars at the top, or sometimes the bottom, of a website. They’re commonly used for cookies notifications, to alert users of promotional offers or to sign up for a newsletter.

shipping bar

If you have searched for hours to learn how to create an easy notification bar then this could be the best solution for it. Moreover the plugin can be used for a wide array of designs like newsletter boxes, logins, countdown timers and much more.

So if you continue reading this article, I’m going to show you how to create awesome bars for your Divi website by using the simple yet powerful plugin, Divi Bars.

You can follow the content below to learn everything from what it is, how to how to use it effectively and how to use pre-made layouts:

  • What are DIVI Bars and How much does it cost?
  • Divi Bars Walkthrough guide
  • How to create a DIVI Bar
  • How Do I customize the DIVI Bar?
  • Can I customize the Divi Bar Background
  • Additional Settings
  • Divi Bar Premade Templates Library
  • How does the Divi Bar Look?
  • Quick round-up of Divi Bar

What is Divi Bars and How much does it cost?

Divi Bars is a simple plugin that adds an extra bar to your website by simply using a Divi layout.

It gives you the ability to use any type of content you want and offers a high degree of customization allowing you to make it small, large or changing the position to the top or bottom of your website and you even have the option to appear based on a trigger.

It also allows you to integrate with third-party email marketing platforms like MailChimp, Mailerlite and many many more.

if you’re looking to add a message bar to your website without breaking it then Divi bars is a great option to do that.

You can buy Divi bars with flexible pricing options which are as follows:

  • Unlimited Sites – $59.00
  • 3 Sites – $29.00
  • Single Site – $15.00
  • Lifetime – $129.00

Get it over at Divi Life *Affiliate link

How do I install and activate Divi Bars

Divi-Bar-Activation

You install Divi bars like any regular plugin and then use the API key in your Difi Life “Account Area” to activate and use it.

Divi Bars guide

In this section, I’ll go over the basics of using Divi Bars, so be sure you are comfortable using Divi before you get this plugin as it requires some knowledge of the theme. A good place to start is the Divi documentation.

How to create a Divi Bar

creating-divi-bar

Go to Divi Bars > Add New and you’ll see the options below where you can create a Divi Bar which is very similar to creating a page or post.

automatic-trogger-settings

You have to set an Automatic trigger to “none” it will not display the bar you’ve created to change this to your preference for instance “timed Delay” with a specific time delay of 0 seconds.

How Do I customize the DIVI Bar?

divi-bar-1

If you’ve been using Divi and are well aware of how to design using its modules then using Divi Bars is a breeze, as it uses the very same Divi builder to customize and style the bars.

In fact, it’s the same as creating a normal layout and you can pretty much use any module from the Divi Builder!

Can I customize the Divi Bar Background

Divi-Bar--2

The Divi Bars background allows you to choose the color of the background and the font as well as further customizations like opacity etc.

Additional Settings

additional-Settings

In additional settings you can make further customizations to the bar like:

  • CSS Selector Trigger:

Whether you want to position it to the top or bottom and customize how it is triggered.

  • Close Button Customizations:

This sets the number of days the cookie will last and also allows you to customize the close button in the cookies bar with a real-time preview option.

  • Automatic Triggers:

This lets you customize how the divi bar will display. Each trigger has its own setting also if you leave it to “none” it will not display the Divi Bar.

  • Timed Delay:

Specifies the time delay before the Divi bar is triggered. Setting it to 0 will display it instantly.

  • Scroll Percentage:

Specify the number of pixels or the percentage scroll before the divi bar is triggered basically after a certain point

  • Exit intent:

This will display the bar when the user’s mouse moves to the address bar.

You also have the option to disable on mobile and customize how many times to display per page load.

Divi Bars Pre-made templates library:

If you aren’t really into creating Divi Bars from scratch and want something pre-made like the pre-made Divi Layouts you’re in luck because Divi Life has a whole multitude of pre-made Divi Bar templates to choose from.

import templates

You simply go to your Divi Life accounts section to download the desired layout and import it into the Divi Bars Layouts Page builder using the Divi Portability tool.

Can I use CSS to customize it further?

CSS for bars

If you have issues with the padding or something else simply add your own CSS via the theme settings or within the section itself like how you would whilst designing a specific layout.

How does the Divi Bar Look?

Ok, that’s enough talk about how to use Divi Bars, let’s take a look at it in action.

bar templates

As you can see the possibilities are endless and you can create a bar for almost anything. If you don’t want to create one from scratch then you can simply pick one from the wide selection in the Divi Bars library.

Divi Bars plugin round-up

After giving Divi Bars a try I think it’s an absolute no-brainer if you want to create bars for your Divi website.

Moreover, Divi bar is not just for good looks but for conversion rate optimization (CRO) as the triggers if customized well can really work towards increasing engagements and ultimately increase sales!

Divi Bars is also an excellent tool for adding message bars like cookie disclaimers, shipping rates and other call-to-actions.

So are you going to get Divi Bars and increase your sales? Let us know in the comments below.

If you are a Divi plugin developer and you would like to have your plugin featured on Divi Theme Examples, drop me a line via the contact page.

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close