How to Create an Animated Promo Bar to Page Templates in Divi

November 22, 2019

Creating an animated promo bar for your page template in Divi can be a great way to advertise products and deals in style without having to rely on a plugin. Using Divi’s powerful design features, you can build the promo bar visually when editing a template in Divi’s Theme Builder. Then once you the template is ready, the promo bar will popup on any page that has been assigned to that template. Easy!

Let’s jump in and get started!

Sneak Peek

Here is a quick look at the promo bar we will create in this tutorial.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi Theme Builder Layout

We’ll also show you how to make the promo bar fixed (or sticky) as well.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-1 Theme Builder Layout

Download the Promo Bar Page Template for FREE

To lay your hands on the promo bar page template from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If youíre already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the layout to your page, simply extract the zip file and add one of the json files into the Divi Theme Builder using the Theme Builder Portability option.

Let’s get to the tutorial shall we?

What You Need to Get Started

To get started, you will need 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 the Divi Builder for testing purposes in order to assign the promo bar template to that page to show the result.

After that, you are ready to go.

Creating an Animated Promo Bar at the Top of a Page Template

Creating a New Template

From the WordPress Dashboard, navigate to Divi > Theme Builder. Then click the “Add New Template” box to create a new template.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi Theme Builder Layout

Assign the template to the page(s) you want the promo bar to be displayed.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-1 Theme Builder Layout

On the new template, click the “Add Custom Body” area then select “Build Custom Body”.

NOTE: We are adding the promo bar to the body area of the template (not the header) so that it can work with Divi’s default header as well as any custom headers you may add in the future.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-2 Theme Builder Layout

Then select the option “Build From Scratch”.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-3 Theme Builder Layout

Adding the Promo Bar to the Template

Inside the Template Layout Editor, we can start building the promo bar using the Divi Builder.

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

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-4 Theme Builder Layout

Row Settings

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

  • Background Gradient Left Color: #4a42ec
  • Background Gradient Right Color: #521d91
  • Gradient Direction: 90deg
  • Use Custom Gutter Width: YES
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%
  • Padding: 0px top, 0px bottom

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-5 Theme Builder Layout

That takes care of the background color and width of the promo bar we are creating.

Column Settings

Before leaving the row settings, click to open the settings of the column. Then add the following custom CSS to Column Main Element:

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

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-6 Theme Builder Layout

This CSS uses the flex property to align the content (or modules) within the column to stack horizontally (side by side). It also centers the modules within the column both vertically and horizontally. The reason we are doing it this way is to avoid having to use multiple column rows structures that will stack on top of each other on mobile. With this setup, the content will stay in a horizontal alignment on all browser widths.

Now we are ready to add some content to the promo bar.

Adding the Blurb Module

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

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

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-7 Theme Builder Layout

For the content of the blurb, enter the following:

  • Title: [enter the promo text]
  • Use Icon: YES
  • Icon: gift icon (see screenshot)

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-8 Theme Builder Layout

Update the blurb design settings as follows:

  • Icon Color: #ff4a9e
  • Image/Icon Placement: Left
  • Use Icon Font Size: YES
  • Icon Font Size: 16px
  • Title Text Size: 16px (desktop), 14px (phone)
  • Title Line Hewight: 1.3em
  • Max Width: 230px (phone only)
  • Padding: 10px top
  • Animation Style: Slide
  • Animation Direction: Right
  • Animation Delay: 250ms

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-9 Theme Builder Layout

Adding the Button Module

Next add a button module under the blurb module. Because of the flex property, the module will appear to the right of the blurb instead of under it.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-10 Theme Builder Layout

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
  • Button Font Weight: Semi Bold

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-11 Theme Builder Layout

  • 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

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-12 Theme Builder Layout

Section Settings

To complete the promo bar design, update the section containing the promo 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

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-13 Theme Builder Layout

Adding the Fullwidth Post Content Module

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

For pages that are (or will be) built using the Divi Builder, you will want to use a fullwidth post content module in order to maximize the content area.

(NOTE: For pages that use the default editor, you will want to use a regular post content module inside a regular section so that you have a similar max width of 1080px by default.)

Add Fullwidth Section

Under the section containing your promo bar, add a fullwidth section.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-14 Theme Builder Layout

Add Fullwidth Post Content Module

Then select the Fullwidth Post Content Module.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-15 Theme Builder Layout

That about does it. Now make sure and save the layout before exiting the editor.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-16 Theme Builder Layout

Then save the changes for the theme builder too.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-17 Theme Builder Layout

Final Result

Before

Now here is the page before assigning the template with the promo bar.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-18 Theme Builder Layout

After

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

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-19 Theme Builder Layout

Here it is on mobile.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-20 Theme Builder Layout

Here is the promo bar animation on page load.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi Theme Builder Layout

Making the Promo Bar Sticky

To make the promo bar stick under the default Divi header, we can add a simple CSS snippet to the section containing the promo bar.

Open the section settings and add the following CSS to the Main Element on Desktop:

position: fixed; width: 100%; 

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-21 Theme Builder Layout

Then add the following CSS to the Main Element on Tablet:

position: relative; 

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-22 Theme Builder Layout

Now check out the result.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-1 Theme Builder Layout

Don’t Forget the Links

Once you do have the promo bar built, you will want to add the link URL to the promotional offer or page. You can add the button link URL in the button settings content tab.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi Theme Builder Layout

For even been conversions, you might as well add the link url to the entire row, under the row settings link option.

how-to-create-an-animated-promo-bar-to-page-templates-in-divi-1 Theme Builder Layout

Final Thoughts

In this tutorial, we showed you how to design a promo bar (from scratch) using the Divi Theme Builder. The promo bar is complete with multiple animations and designs to make it really stand out to visitors. You can even make the promo bar fixed when scrolling down the page for even more visibility. And with the ability to control where the promo bar appears throughout your site, the application is extremely practical.

Hopefully this will inspire you to create a few promo bars of your own.

I look forward to hearing from you in the comments.

Cheers!


Source

Share this article:
 




eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.