Create a bar promotion animation for your page template in Divi can be a great way to advertise sleek products and offers without having to rely on a plugin. Using Divi's powerful design features, you can visually create the promotion when you edit a template in Divi Theme Builder. Then, once the model is ready, the bar of promotion will appear on any page assigned to this template. 

We will also show you how to make the promotion bar fixed (or sticky).

What you need to get started

To begin, you must to install and activate the Divi theme . Make sure you have the latest version of Divi.

You will also need at least one page created with Divi Builder for testing purposes, which will be affected by the promotion bar template.

Create an animated promotion bar at the top of a page template

Create a new template

From the WordPress dashboard, go to Divi> Theme generator. Then click on the "Add a new template" box to create a new template.

Add a new divi model

Assign the template to the page (s) on which the promotion bar should be displayed.

Divi home page

On the new template, click on the "Add Custom Body" box and select "Build Custom Body".

NOTE: we are adding the promotion bar to the model body area (not the header) so that it can work with the Divi default header as well as all headers custom that you can add later.

Add a body model

Then select the “Build From Scratch” option.

Choose a divi scaled layout

Adding the promotion bar to the model

In the template layout editor, we can start creating the promotion bar using Divi Builder.

Start by adding a one-column row to the regular section.

Add row to a column on divi

Line settings

Before adding a module, update the Row parameters as follows:

  • Left background gradient: # 4a42ec
  • Right background gradient: # 521d91
  • Gradient Direction: 90deg
  • Use a custom gutter width: YES
  • Gutter width: 1
  • Width: 100%
  • Maximum width: 100%
  • Upholstery: 0px at the top, 0px at the bottom
Choose a divi 1 scaled layout

This supports the background color and width of the promotion bar we create.

Column parameters

Before exiting the row settings, click to open the column settings. Then add the following custom CSS to the main column element:

display: flex;align-items: center;justify-content: center;

Customization of css code

This CSS uses the flex property to align the contents (or modules) in the column to stack horizontally (side by side). It also centers the modules in the column vertically and horizontally. The reason we do it this way is to avoid having to use multiple column row structures that will stack on top of each other on mobile. With this configuration, the contents will remain horizontally aligned across all browser widths.

We are now ready to add contents to the promotion bar.

Add Blurb module

For the content of this promotion example, we will include a presentation module with a small icon and a text blog with a button on the right (much like the promotion bar on Elegantthemes.com).

Click on the gray circle plus the icon inside the row and add a presentation module.

Add a summary module second section

For the content of the presentation text, enter the following information:

  • Title: [enter the text of the promotion]
  • Use the icon: YES
  • Icon: gift icon (see screenshot)
Configuration of the divi summary module

Update the presentation design settings as follows:

  • Icon Color: # ff4a9e
  • Image / location of icons: left
  • Use icon font size: YES
  • Icon Font Size: 16px
  • Text Title Size: 16px (desktop), 14px (phone)
  • Hewight title line: 1.3em
  • Max width: 230px (phone only)
  • Padding: Top 10px
  • Animation Style: Slide
  • Animation direction: right
  • Animation delay: 250ms
Customization divi summary module

Adding the button module

Then add a button module under the Blurb module. Due to the flex property, the module will appear to the right of the blurb rather than below.

Divi button module

Update the button design parameters as follows:

  • Use custom styles for Button: YES
  • Button text size: 15px (desktop), 13px (phone)
  • Button text color: #ffffff
  • Width of the button border: 0px
  • Radius of the border of the button: 20px
  • Font weight: semi-bold
Customize the divi button module
  • Margin (desktop): 20px on the left
  • Margin (phone): 10px on the left
  • Upholstery (office): 0px at the top, 0px at the bottom
  • Padding (phone): 2px at the top, 2px at the bottom, 8px at the left, 8px at the right
  • Animation Style: Bounce
  • Animation delay: 1000ms
Customize divi button module spacing

Section settings

To complete the design of the promotion bar, update the section containing the promotion bar as follows:

  • Upholstery: 0px at the top, 0px at the bottom
  • Animation Style: Bounce
  • Animation direction: Down
  • Animation duration: 500ms
  • Animation delay: 250ms
  • Animation Starting opacity: 100%
  • Z-Index: 999
Customize animation divi module

Adding the full-width content publishing module

At this point, the promotions bar is ready. But since this is a template, we need to make sure that we add the content posting module to display the content of the page (s) using this template.

For pages built (or that will be built) using Divi Builder, you'll want to use a full-width post content module to maximize the content area.

(NOTE: For pages that use the default editor, you'll want to use a standard post content mod in a regular section in order to achieve a similar maximum width of 1080px by default.)

Add a full width section

Under the section containing your promotion bar, add a full width section.

Create a full width divi builder section

Add a content module in Fullwidth format

Then select the Fullwidth Post Content module.

Full width article content divi

It is more or less that. Now make sure and save the layout before exiting the editor.

Save divi layout

Then save the changes for the theme builder.

Theme builder divi

Final result

Avant

Now here is the page before assigning the model with the promotion bar.

Example result before

After

And here is the same page with the new template with the promo bar.

Example result after

Make the promotional bar sticky

In order for the promotion bar to fit under Divi's default header, we can add a simple CSS snippet to the section containing the promo bar.

position: fixed;width: 100%;

Open the section settings and add the following CSS code to the main desktop element:

Enter the fixed section

Then add the following CSS code to the main tablet element:

position: relative;

Add a css code to the divi section

Now check the result.

Divi animated result

For previous conversions, you can also add the link URL to the entire row, under the Row settings link option.

Latest Thoughts

In this tutorial, we showed you how to design a promo bar (from scratch) using Divi Theme Builder. The promotional bar is complete with multiple animations and designs to make it truly visible to visiteurs. You can even fix the promo bar as you scroll down the page for even more visibility. And with the ability to control where the promotion bar is placed on your site, the app is extremely convenient.