{"id":825923,"date":"2017-12-10T16:00:05","date_gmt":"2017-12-10T16:00:05","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/divi-plugin-highlight-divi-bars\/"},"modified":"2022-12-10T13:49:33","modified_gmt":"2022-12-10T13:49:33","slug":"divi-plugin-highlight-divi-bars-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/divi-plugin-highlight-divi-bars\/","title":{"rendered":"Divi Plugin Highlight: Divi Bars"},"content":{"rendered":"\n
\n

We\u2019ve all seen those message bars at the top or bottom of a website. They usually inform us of the use of cookies, alert us to a sale, or ask us to sign up for the newsletter. There are lots of plugins available to add these bars to your website. What if you could create them with the Divi Builder? You can with a third-party plugin called Divi Bars.<\/p>\n

Divi Bars creates those message bars by allowing you to use Divi layouts. You can include any type of content you want, make them large or small, place them at the top or bottom, have them to scroll or stay in place, and even have them to appear based on a trigger.<\/p>\n

Divi Bars works with Divi and Extra and is available from the publisher\u2019s website<\/a>. I\u2019m using version 1.0.<\/p>\n

Installing and Activating Divi Bars<\/h2>\n

\"\"<\/p>\n

Upload and activate the plugin as normal.<\/p>\n

\"\"<\/p>\n

After activating the plugin you\u2019ll see a message that you need to enter the API Key. Click the link or in the dashboard menu go to Settings<\/em>, Divi Bars Activation<\/em>.<\/p>\n

Enter your API key and email, and save changes. You\u2019ll see a message at the top that shows how many activations you have left (this will vary depending on the license you purchase).<\/p>\n

Divi Bars Settings<\/h2>\n

\"\"<\/p>\n

In the dashboard menu, go to Divi Bars<\/em>, Settings<\/em>. Here you can input a custom CSS selector and choose the default time zone.<\/p>\n

Enable Output Styles Inline<\/h3>\n

\"\"<\/p>\n

You\u2019ll need to enable the inline output styles. In the dashboard menu go to Divi<\/em>, Theme Options<\/em>, and select the Builder<\/em> tab. Enable the middle option (Output Styles Inline). Be sure to click Save Changes<\/em>.<\/p>\n

Creating a Divi Bar<\/h2>\n

\"\"<\/p>\n

In the dashboard menu, go to Divi Bars<\/em>, Add New<\/em>. You\u2019ll see a screen like the one above where you can create a Divi Bar. Select the Divi Builder just like creating a page or post. It also has fields where you can select background colors, add triggers, set pages and positions, customize the close button, and set automatic triggers.<\/p>\n

Note \u2013 In order to get the bar to display it has to have a trigger. If you leave it set to None<\/em> it will not display. More on this later.<\/p>\n

Divi Bars Uses the Divi Builder<\/h3>\n

\"\"<\/p>\n

Create layouts as normal. This means you can add any module from the Divi Builder including contact forms, video, shop, images, email optin, map, portfolio, etc. Padding and margins are already removed from the sections and rows so the bar doesn\u2019t take up a lot of space. All of the Divi animation features work as well.<\/p>\n

It doesn\u2019t use layouts from the standard Divi Library but you can save your layouts to the Library and reuse them. Only those made for Divi Bars will be available in the Load From Library<\/em> tab.<\/p>\n

Divi Bars Background<\/h3>\n

\"\"<\/p>\n

The Divi Bars Background area lets you choose the color of the background and the font. This only does solid colors with an opacity setting. I recommend using the Divi Builder Sections\u2019 background features, but this is here if you want it.<\/p>\n

Additional Settings<\/h3>\n

\"\"<\/p>\n

In Additional Settings you can create your own CSS selector trigger. Dropdown boxes allow you to show the Divi Bars on one page or specific pages, and to choose the position. You can also choose to push the page up or down, and choose if the Divi Bars is fixed.<\/p>\n

Close Button Customizations<\/h3>\n

\"\"<\/p>\n

In Close Button Customizations you can set the number of days the cookie will last, show or hide the close button, and customize the button. Customizations include the text color, background color, font size, border radius, and padding. It provides a preview as you make changes so you can see it in real time.<\/p>\n

Automatic Triggers<\/h3>\n

\"\"<\/p>\n

Automatic Triggers lets you choose how it will display. Each trigger has its own settings. If you leave it set to None<\/em> it will never display.<\/p>\n