Displaying time conditional content material when a countdown timer expires is usually a highly effective advertising software. We all know these countdown timers are among the finest methods to incentivize customers to take motion on a web site. They’re excellent for that includes limited-time offers for memberships, merchandise, Black Friday promos, and so forth. However when the timer comes to finish, you’ve got an awesome alternative to retarget guests with time conditional content material. Time conditional content material is content material that’s displayed (or hidden) on an internet web page earlier than or after a set date and time. So it is sensible to have new content material prepared to indicate guests who missed out on a deal or ran out of time.
On this tutorial, we’re going to present you how one can show time conditional content material when a countdown timer expires in Divi. To do that, we’re going to use Divi’s new situation choices to show sure content material earlier than and after a set date and time that coincides with a countdown timer. Earlier than the timer runs out, guests will have the ability to benefit from a limited-time deal. After the timer runs out, guests shall 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 tutorial.
Right here is the part earlier than the countdown timer expires.
And right here is the part after the countdown timer expires.
Obtain the Structure for FREE
To put your palms on the designs from this tutorial, you’ll first must obtain it utilizing the button under. To realize entry to the obtain you’ll need to subscribe to our Divi Every day electronic mail checklist through the use of the shape under. As a brand new subscriber, you’ll obtain much more Divi goodness and a free Divi Structure pack each Monday! If you happen to’re already on the checklist, merely enter your electronic mail deal with under and click on obtain. You’ll not be “resubscribed” or obtain further emails.
@media solely display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than { border-top-color: #ffffff !necessary; border-left-color: clear !necessary; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !necessary; border-left-color: clear !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .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 type enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container type button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !necessary;}
Obtain For Free
Be part of the Divi E-newsletter and we’ll electronic mail you a duplicate of the last word Divi Touchdown Web page Structure Pack, plus tons of different superb and free Divi assets, ideas and methods. Observe alongside and you may be a Divi grasp very quickly. If you’re already subscribed merely kind in your electronic mail deal with under and click on obtain to entry the structure pack.
You’ve got efficiently subscribed. Please test your electronic mail deal with to verify your subscription and get entry to free weekly Divi structure packs!
To import the part structure to your Divi Library, navigate to the Divi Library.
Click on the Import button.
Within the portability popup, choose the import tab and select the obtain file out of your laptop.
Then click on the import button.
As soon as executed, the part structure shall be accessible within the Divi Builder.
Let’s get to the tutorial, we could?
What You Have to Get Began
To get began, you’ll need to do the next:
- If you happen to haven’t but, set up and activate the Divi Theme.
- Create a brand new web page in WordPress and use the Divi Builder to edit the web page on the entrance finish (visible builder).
- Select the choice “Build From Scratch”.
After that, you’ll have a clean canvas to start out designing in Divi.
Tips on how to Show Time Conditional Content material when a Countdown Timer Expires in Divi
Step 1: Importing the Pre-made Divi Structure
Open the web page settings menu after which click on the plus icon to carry up the Load From Library popup. Discover the Craft Faculty Structure Pack after which click on to make use of the Craft Faculty House Web page Structure.
As soon as the structure has been added, delete the primary 3 sections of the structure in order that solely the countdown part and footer part stay. We’re going to use these sections to construct our time conditional content material and countdown timers.
Step 2: Setting the Date & Time on the Countdown Timer
Subsequent, discover the countdown timer module and open the settings. Underneath the content material tab, add the date and time you need the deal to run out. On this instance, we’re setting the date to October 15 and the time to 12:00.
NOTE: We’ll use this identical date and time once we add the time conditional content material later.
Half 3: Add Time Situation to Show Part Earlier than the Set Date and Time
With a view to change the content material each time the countdown timer expires, we have to add a time situation to show the complete part earlier than the set date and time beforehand added to the countdown timer.
To do that, open the settings for the part containing the countdown timer.
Underneath the superior tab, click on so as to add a brand new show situation. From the dropdown, choose the Date & Time situation.
In the identical field, replace the settings of the Date and Time situations as follows:
- Make certain the choice Show Solely If Present Date is about to Is Earlier than.
- Select the Date and Time that matches the date and time beforehand added to the countdown timer.
Step 5: Creating the Time Conditional Content material for After Timer Expires
We have already got a piece of content material that can present earlier than the timer expires. Now we have to create a brand new part of content material that shall be displayed after the timer expires. To do that, duplicate the part with the time situation. On the brand new part, you’ll be able to alter the admin label to learn “Countdown After” so that you gained’t confuse the 2.
Open the settings for the duplicate part and replace the Date & Time show situation possibility Show Solely If Present Date to Is After. Make certain to maintain the date and time precisely the identical because the countdown timer. We wish this part to be displayed after the countdown timer expires.
Step 6: Add/Replace Time Conditional Content material
As soon as the deal has ended, we wish to replicate that by including a strike via the heading in addition to give it a lightweight grey colour.
To do this, open the settings of the textual content module containing the primary heading and replace the next:
- Heading 2 Font Model: Strikethrough
- Heading 2 Textual content Coloration: #ddd
Subsequent, open the settings for the second textual content module and alter the content material as follows:
html
Underneath 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 Peak: 1.8emHeading 3 Textual content Coloration: #000
- Heading 3 Textual content Dimension: 44px (desktop), 38px (pill and telephone)
Subsequent, transfer the countdown timer up one place, proper under the highest textual content module with the primary heading. Then delete the button module on the backside. We’ll exchange this with an electronic mail possibility module.
To create the e-mail optin, transfer (or copy and paste) the prevailing electronic mail optin module within the backside footer part of the pre-made structure and place it within the part containing the after content material below the underside textual content module
Open the e-mail opt-in settings and replace the button textual content and electronic mail account info as wanted.
Underneath the design tab, replace the sector and button colours as follows:
- Fields Background Coloration: #f8f8f8
- Button Background Coloration: #de6561
Ultimate Outcome
That’s it! Let’s overview what we have now executed.
- We set the countdown timer to finish on Oct. 15 at 12:00.
- We added a Date & Time show situation to the primary part in order that it could be displayed BEFORE Oct. 15 at 12:00.
- We created a brand new part of content material with a Date & Time show situation that shows the part AFTER Oct. 15 at 12:00.
Right here is the part earlier than the countdown timer expires.
And right here is the part after the countdown timer expires.
Ultimate Ideas
Time conditional content material and countdown timers make a helpful combo when selling limited-time offers. And with Divi, you’ll be able to simply take management of each. As soon as the countdown timer’s date and. time is about, all it’s essential do is select what content material you wish to present earlier than and/or after that very same date and time. Hopefully, this may assist give your guests a greater expertise when seeing these expired offers.
I look ahead to listening to from you within the feedback.
Cheers!
.inline-code{padding: 0px 4px; colour: crimson; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!necessary} 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 publish Tips on how to Show Time Conditional Content material when a Countdown Timer Expires in Divi appeared first on Elegant Themes Weblog.