Creating an animated promotion bar for your page template in Divi can be a great way to advertise stylish products and offers without having to rely on a plugin. Using Divi’s powerful design features, you can visually create the animated promotion bar when you edit a template in Divi’s Theme Creator. Then, when the template is ready, the animated promotion bar will appear on any page assigned to that 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 is to be displayed.
On the new model, click on the “Add a custom body” area and then select “Build a custom body”.
NOTE: we are adding the promotion bar to the model body area (not the header) so that it can work with Divi’s 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 template
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 parameters
Before adding a module, update the Row parameters as follows:
- Background gradient left: # 4a42ec
- Background gradient right: # 521d91
- Gradient direction: 90deg
- Use a custom gutter width: YES
- Gutter width: 1
- Width: 100%
- Maximum width: 100%
- Padding: 0px top, 0px bottom
This takes care of the background color and the width of the promotion bar we are creating.
Column settings
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 content (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 content will remain horizontally aligned at all browser widths.
We are now ready to add content to the promotion bar.
Adding the Blurb module
For the content of this example promotion, we’ll include a presentation module with a small icon and a text blog with a button to the right.
Click on the gray circle plus the icon inside the row and add a presentation module.
For blurb content, enter the following information:
- Title: [enter promotion text]
- Use the icon: YES
- Icon: gift icon (see screenshot)
Update the presentation design settings as follows:
- Icon Color: # ff4a9e
- Image / icon location: 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 settings as follows:
- Use custom styles for Button: YES
- Button text size: 15px (desktop), 13px (phone)
- Button Text Color: #ffffff
- Button border width: 0px
- Button border radius: 20px
- Font weight: semi-bold
- Margin (desktop): 20px left
- Margin (phone): 10px left
- Padding (desktop): 0px top, 0px bottom
- Padding (phone): 2px top, 2px bottom, 8px left, 8px right
- Animation Style: Bounce
- Animation delay: 1000ms
Section Parameters
To complete the promotion bar design, update the section containing the promotion bar as follows:
- Padding: 0px top, 0px bottom
- Animation Style: Bounce
- Animation direction: Down
- Animation duration: 500ms
- Animation delay: 250ms
- Animation Starting Opacity: 100%
- Z-Index: 999
Added 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 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.
Read more: How to add sticky CTAs to an article template with Divi builder
Make the promotional bar sticky
For the promotion bar to stick under the default Divi header, we can add a simple CSS code 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;
For previous conversions, you can also add the link URL to the entire row, under the Row settings link option.
Final thoughts
In this tutorial, we have shown you how to design a promotion bar (from scratch) using Divi Theme Builder. The promotional bar is complete with multiple animations and designs to make it truly visible to visitors. You can even fix the promotion bar as you scroll down the page for even more visibility. And with the ability to control the placement of the promotion bar on your site, the app is extremely convenient.
For website maintenance service contact us.