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.
Assign the template to the page (s) on which the promotion bar should be displayed.
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.
Then select the “Build From Scratch” option.
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.
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
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;
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.
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)
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
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.
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
- 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
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
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.
Add a content module in Fullwidth format
Then select the Fullwidth Post Content module.
It is more or less that. Now make sure and save the layout before exiting the editor.
Then save the changes for the theme builder.
Final result
Avant
Now here is the page before assigning the model with the promotion bar.
After
And here is the same page with the new template with the promo bar.
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:
Then add the following CSS code to the main tablet element:
position: relative;
Now check the 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.
Hi,
Superb article and tutorial, really TOP !!!
I would like to do the same thing but as I use the secondary menu in which is account, telephone and basket above the main menu (my product categories), the promo bar is not displayed suddenly, unless I missed a step of the tutorial? !!.
What I want to be able to do is display this promo bar above the secondary bar, in short, above everything else to put a promo, a flash sale, change the information according to the events that I want to include
Any idea on this route please?
Youssef