How to Display Time Conditional Content when a Countdown Timer Expires in Divi

by | Oct 19, 2021 | Etcetera | 0 comments

Exhibiting time conditional content material when a countdown timer expires could be a tough advertising and marketing software. We all know the ones countdown timers are probably the most highest tactics to incentivize customers to do so on a web site. They’re very best for that includes limited-time offers for memberships, merchandise, Black Friday promos, and so forth. But if the timer comes to finish, you’ve got a superb opportunity to retarget guests with time conditional content material. Time conditional content material is content material this is displayed (or hidden) on a internet web page ahead of or after a suite date and time. So it is sensible to have new content material in a position to turn guests who ignored out on a deal or ran out of time.

On this instructional, we’re going to display you how you can show time conditional content material when a countdown timer expires in Divi. To try this, we’re going to use Divi’s new situation choices to show sure content material ahead of and after a suite date and time that coincides with a countdown timer. Prior to the timer runs out, guests will be capable of profit from a limited-time deal. After the timer runs out, guests will likely be invited to subscribe to a publication to get deal notifications.

Let’s get began!

Sneak Peek

Here’s a fast have a look at the time situation content material and countdown timer we’ll construct on this instructional.

Here’s the segment ahead of the countdown timer expires.

time conditional content when countdown timer expires

And here’s the segment after the countdown timer expires.

time conditional content when countdown timer expires

Obtain the Format for FREE

To put your palms at the designs from this instructional, you’re going to first want to obtain it the use of the button underneath. To realize get entry to to the obtain it is important to subscribe to our Divi Day-to-day e-mail record through the use of the shape underneath. As a brand new subscriber, you’re going to obtain much more Divi goodness and a unfastened Divi Format pack each Monday! In case you’re already at the record, merely input your e-mail deal with underneath and click on obtain. You are going to now not be “resubscribed” or obtain further emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:ahead of { border-top-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:ahead of { border-top-color: clear !vital; border-left-color: #ffffff !vital; }
@media simplest display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead of { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}

You’ve got effectively subscribed. Please test your e-mail deal with to verify your subscription and get get entry to to unfastened weekly Divi structure packs!

To import the segment structure on your Divi Library, navigate to the Divi Library.

Click on the Import button.

Within the portability popup, choose the import tab and make a choice the obtain document out of your pc.

Then click on the import button.

divi notification box

As soon as performed, the segment structure will likely be to be had within the Divi Builder.

Let’s get to the educational, we could?

What You Wish to Get Began

expanding corner tabs

To get began, it is important to do the next:

  1. In case you haven’t but, install and activate the Divi Theme.
  2. Create a brand new web page in WordPress and use the Divi Builder to edit the web page at the entrance finish (visible builder).
  3. Select the choice “Construct From Scratch”.

After that, you’re going to have a clean canvas to begin designing in Divi.

Show Time Conditional Content material when a Countdown Timer Expires in Divi

Step 1: Importing the Pre-made Divi Format

Open the web page settings menu after which click on the plus icon to deliver up the Load From Library popup. In finding the Craft Faculty Format Pack after which click on to make use of the Craft Faculty House Web page Format.

time conditional content when countdown timer expires

As soon as the structure has been added, delete the primary 3 sections of the structure in order that simplest the countdown segment and footer segment stay. We’re going to use those sections to construct our time conditional content material and countdown timers.

See also  An Epic Adventure About Being a WordPress Services and products Reseller The usage of WPMU DEV

time conditional content when countdown timer expires

Step 2: Atmosphere the Date & Time at the Countdown Timer

Subsequent, to find the countdown timer module and open the settings. Beneath the content material tab, upload the date and time you wish to have the deal to run out. On this instance, we’re atmosphere the date to October 15 and the time to twelve:00.

NOTE: We can use this identical date and time once we upload the time conditional content material later.

time conditional content when countdown timer expires

Phase 3: Upload Time Situation to Show Segment Prior to the Set Date and Time

As a way to alternate the content material every time the countdown timer expires, we want to upload a time situation to show all the segment ahead of the set date and time in the past added to the countdown timer.

To try this, open the settings for the segment containing the countdown timer.

Beneath the complicated tab, click on so as to add a brand new show situation. From the dropdown, choose the Date & Time situation.

time conditional content when countdown timer expires

In the similar field, replace the settings of the Date and Time stipulations as follows:

  • Ensure that the choice Show Best If Present Date is ready to Is Prior to.
  • Select the Date and Time that fits the date and time in the past added to the countdown timer.

time conditional content when countdown timer expires

Step 5: Developing the Time Conditional Content material for After Timer Expires

We have already got a bit of content material that may display ahead of the timer expires. Now we want to create a brand new segment of content material that will likely be displayed after the timer expires. To try this, replica the segment with the time situation. At the new segment, you’ll modify the admin label to learn “Countdown After” so that you received’t confuse the 2.

time conditional content when countdown timer expires

Open the settings for the replica segment and replace the Date & Time show situation choice Show Best If Present Date to Is After. Be sure to stay the date and time precisely the similar because the countdown timer. We wish this segment to be displayed after the countdown timer expires.

time conditional content when countdown timer expires

Step 6: Upload/Replace Time Conditional Content material

As soon as the deal has ended, we need to replicate that through including a strike throughout the heading in addition to give it a gentle grey coloration.

To do this, open the settings of the textual content module containing the principle heading and replace the next:

  • Heading 2 Font Taste: Strikethrough
  • Heading 2 Textual content Colour: #ddd

time conditional content when countdown timer expires

Subsequent, open the settings for the second one textual content module and alter the content material as follows:

html

time conditional content when countdown timer expires

Beneath the design tab, replace the textual content styling as follows:

  • Textual content Font Weight: Semi Daring
  • Textual content Textual content Dimension: 18px
  • Textual content Line Top: 1.8emHeading 3 Textual content Colour: #000
  • Heading 3 Textual content Dimension: 44px (desktop), 38px (pill and speak to)
See also  A Temporary Historical past of On-line Promoting

time conditional content when countdown timer expires

Subsequent, transfer the countdown timer up one place, proper underneath the highest textual content module with the principle heading. Then delete the button module on the backside. We can substitute this with an e-mail choice module.

time conditional content when countdown timer expires

To create the e-mail optin, transfer (or replica and paste) the present e-mail optin module within the backside footer segment of the pre-made structure and position it within the segment containing the after content material below the ground textual content module

time conditional content when countdown timer expires

Open the e-mail opt-in settings and replace the button textual content and e-mail account knowledge as wanted.

time conditional content when countdown timer expires

Beneath the design tab, replace the sector and button colours as follows:

  • Fields Background Colour: #f8f8f8
  • Button Background Colour: #de6561

time conditional content when countdown timer expires

Ultimate Consequence

That’s it! Let’s overview what we now have performed.

  1. We set the countdown timer to finish on Oct. 15 at 12:00.
  2. We added a Date & Time show situation to the primary segment in order that it might be displayed BEFORE Oct. 15 at 12:00.
  3. We created a brand new segment of content material with a Date & Time show situation that presentations the segment AFTER Oct. 15 at 12:00.

time conditional content when countdown timer expires

Here’s the segment ahead of the countdown timer expires.

time conditional content when countdown timer expires

And here’s the segment after the countdown timer expires.

time conditional content when countdown timer expires

Ultimate Ideas

Time conditional content material and countdown timers make an invaluable combo when selling limited-time offers. And with Divi, you’ll simply take keep watch over of each. As soon as the countdown timer’s date and. time is ready, all you want to do is make a choice what content material you wish to have to turn ahead of and/or after that very same date and time. Expectantly, this may increasingly lend a hand give your guests a greater enjoy when seeing the ones expired offers.

I look ahead to listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; coloration: red; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!vital} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);show:block;margin: 0 auto;}

The submit How to Display Time Conditional Content when a Countdown Timer Expires in Divi seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment