How to Create a Recurring Promotional Banner with Divi

Last Updated on September 17, 2022 by 1 Comment

How to Create a Recurring Promotional Banner with Divi
Blog / Divi Resources / How to Create a Recurring Promotional Banner with Divi

With Divi’s condition options update, you have more control over how your content displays than ever. You can add conditions to sections, rows, and modules to show your content only when your set criteria are met. Today, we’re going to show you how to add a recurring promotional banner to your website using Divi and its date-and-time condition. That way  you can set it and forget it, but your customers and clients are consistently reminded of it. Let’s get started!

How to Create a Recurring Promotional Banner

Your first step will need to be be deciding what page(s) you want the recurring banner on. For this example, we are going to be using a page loaded with the artisan pizzeria layout pack that you can find within the Divi builder. To use one of our premade layouts, select the purple + icon in the Divi Builder and find the layout you want.

premade layout

You can follow these steps regardless of what layout you use.

Add a New Section

Because this banner will only show sometimes, you don’t want to add it to an existing element on the page. You will want an all-new section for it. Click the blue + icon to add a new section to the page. Select the Regular section type in the window that pops up.

add a regular section

This section is going to be your recurring banner.

Choose Your Column Layout

Again, whatever layout you want your banner to have is fine, but we are going with a 3-column layout with the center column being the largest for this example.

recurring banner column structure

Design Your Banner

This is a promotional banner, so you will want to take the time to make it eye-catching. We are going to set the background to a stand-out color, use some noticeable fonts, and highlight how the customer can take advantage of the offer.

Choose a Background Color

First, go into the Section settings and navigate to Background under the Content tab. We are using the color #B23F19 as a background.

background color

Adjust Row Spacing

When you save that, go into the Row settings. From there, click into the Design tab and the Sizing options. Set the Width and Max Width to 100%. Doing so will stretch the row’s green border to the edge of the viewport.

recurring banner width

Add and Style a Button Module

Next, click into third column and add a Button module using the black + icon.

add button

Then click into the Button settings and adjust the Button Link URL under the Content Tab. This should be where the customer will be able to redeem whatever promotion you will have on a recurring basis.

button link

After that, go into the Design tab and choose to Use Custom Styles for Button. Your specifics may differ, but for this article we want to make the text use the same #B23F19 as the background above, and then we will set the background color to white.

custom button styles

Add Text to Other Columns

The other two columns in the design will be the promotional text for the recurring banner, and you will simply be using a standard text module to accomplish this.

text module

In the first column, you will add Header Text that indicates the name of the promotion. In this example case, Pizza Friday.

pizza friday

Then go into the Design tab. For this particular design, we chose Eudora Script as the heading fontBold font weight3rem as the text size, and white text color with center alignment.

pizza friday

In the center column, repeat the same steps, only use normal body text for the content.

body text

Then, adjust the settings for it, just like you did above. In this example, we chose Poppins as the body text font in 1.5rem font size, but set the others as the same as the promotional text.

promo banner

Now that we have the promotional banner itself, let’s get to setting it to recur!

Add Fixed Position to Banner Section

Because you want it to be noticed, you will want to fix the section to the top of the page. You can do so by going into the Advanced tab of the Section settings. Under Position, select Fixed, and then click the top-center square to indicate where Divi should affix the section. We also include a Z-index of 99 to help ensure the banner floats above other content on the page.

recurring banner

Note that the section will remain in place in the Divi Builder, rather than show on top. So when you edit the page, you can place the section wherever you want. However, the position options will always show it fixed on the live site.

Animate the Recurring Banner

You can also gain the customer’s attention by using Divi’s built-in animation feature. Go to the Design tab and find the Animation options. For a recurring banner, you can do a lot with a simple slide-in effect. So select Slide under Animation Style, set the Animation Direction to Down, and then set the Animation Delay to 500ms (half a second) to keep it from appearing immediately like it was any other content. A delay shows the customer that it is special and to pay attention.

animation

Set Conditional Logic

One you have the positioning and animation set, it’s time to use the Conditional Logic so the recurring promotional banner actually recurs. These options are found in the Section settings,  under the Advanced tab, in the Conditions area. Click Add Condition to get started.

recurring conditional display

Scroll until you find Date and Time under the Interaction subheading. Then, choose to display On Specific Day(s) of the Week in the next dropdown. After just choose the day of the week the promotional banner will recur.

conditional logic date and time for recurring banner

Save your changes, and your recurring promotional is done. You have now set it, so you can forget it. Easy as (pizza) pie!

Wrapping Up

Using Divi’s condition options, you can create recurring promotional banners that your site will only display under a set of circumstances you choose. It doesn’t have to be just date and time, like this example. It can be as robust as you can think of because the condition options allow for nested logic. But for a recurring promotional banner, you see how simple it can be to fix a section to the top of your site and then use Divi’s condition options to have it only display on one day a week. Once it’s set up, you don’t have to touch it again if you don’t want to.

What kind of promotions are you going to run using Divi’s condition options and a recurring banner?

Article featured image by Killroy79 / shutterstock.com

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 4

Divi 5 Update: Public Alpha Version 4

Posted on November 25, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 4 today. We release new Divi 5 versions every two weeks, and it gets better each time! If you haven’t tested Divi 5 yet, try it and let us know what you...

View Full Post
New Starter Site for Freelancers (Quick Install)

New Starter Site for Freelancers (Quick Install)

Posted on November 24, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

1 Comment

  1. Great function but i’ts sad there is no option to show/hide content every two/three weeks repeatedly.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today