When the countdown timer expires, displaying content with time conditions can be a powerful marketing tool. We know that this countdown timer is one of the best ways to encourage users to take measures on the website. It is suitable for deadline transactions providing membership, products, Black Friday promotion, etc. However, when the timer is off, there is a good opportunity to relocate visitors with time limited content. Time condition content is the content displayed (or hidden) on the web page before or after the set date and time. Therefore, it is recommended that you prepare new content for visitors who miss transactions or lack time.
This tutorial will show you how to display time limited content when the timer expires in divi. To do this, the new condition option in divi will be used to display specific content before and after the set date and time matching the countdown timer. Visitors can use time limited transactions before the timer ends. At the end of the timer, visitors will be invited to subscribe to the press release and receive transaction notifications. Let’s go! The following is a brief description of the time condition content and countdown timer to be built in this tutorial. The following is the part before the countdown timer expires.
The following is the part after the countdown timer expires. To the design of this tutorial for free, you must first use the following buttons to . To access the , you must subscribe to the divi day email list using the form below. New subscribers will receive more divi offers and free divi layout packs every Monday! If you are already in the list, just enter your email address below and click . You will not \
Successfully subscribed. Check your email address to confirm your subscription and access the free weekly divi layout package! To import a layout into the divi library, go to the divi library. Click the import button. Select the import tab from the portability pop-up menu, and then select file from your computer. Then click the import button. When finished, you can use the layout in divi builder. Enter the tutorial? To start the required you must do the following: If not already installed, install and activate the divi theme. Create a new page in WordPress and then edit the page at the front end (visual builder) using divi builder. Select the build from scratch option. Then you can start designing in divi.
In divi, the first step is to display the content with time conditions when the countdown timer expires: open the pre created divi layout upload page setup menu, and then click the plus icon to load the pop-up menu from the library. Locate the craft school layout package and click Use Craft School home page layout. After adding the layout, delete the first three parts of the layout, leaving only the countdown part and footnote part. Use this section to build time conditional content and countdown timers. The second stage: set the date and time of the countdown timer, then find the countdown timer module and open the setting. On the content tab, add the date and time when the transaction expires. This example
Set the date to October 15 and the time to 12:00.
Note: when adding content with time conditions in the future, please use the same date and time. Male part 3: if you want to display the time condition of the section before the set date and time, add the change content when the countdown timer expires, you must add the pre added set date and time to the countdown timer to display the time condition of the whole section before the set date and time. To do this, turn on the settings for the section that contains the countdown timer. On the Advanced tab, click add new display condition. Select a date and time condition from the drop-down menu. Update the date and time condition settings in the same box:
Ensure that the show current date only option is set to the previous date. Select a date and time that matches the date and time previously added to the countdown timer. Stage 5: after the timer expires, there is a content part to be displayed before the time condition content creation timer expires. Now you need to create a new section of what will be displayed after the timer expires. To do this, copy the part with time conditions. You can adjust the \
Stage 6: Add \/ update the content of time conditions. After the transaction, add strike in the title and give it a bright gray color to reflect this. To do this, open the settings for the text module that contains the default title and update the following: Title 2 font style: delete the line Title 2 text color: #ddd #, and then open the setting of the second text module. The changes are as follows: On the HTML design tab, update the text style: Text font thickness: semi bold text size: 18px text line height: 1.8em title 3 text color: #000 title 3 text size: 44px (desktop), 38px (tablet and mobile phone) male
Next, move the countdown timer from directly below the top text module to a position with the main title. Then delete the button module at the bottom. We will replace it with the email options module. To generate an e-mail drive, move (or copy and paste) the existing e-mail drive module in the bottom footer section of the pre created layout and place it in the section containing content below the bottom text module. Open the setting of e-mail receiving consent, and update the button text and e-mail account information as needed. On the design tab, update the field and button colors:
Scene background color: #f8f8f8 button background color: #de 6561 androg the final result is nothing more! Let’s review what we have done. The countdown has been set to end at 12:00 on October 15. We added date and time stamp conditions in the first part to make it displayed before 12:00 on October 15. A new part of the content is created, provided that the part is displayed at 12:00 after October 15. The following is the part before the countdown timer expires. The following is the part after the countdown timer expires. The last idea is that time conditional content and countdown timer become a useful combination when limiting transactions during publicity. Divi makes it easy for you to control both situations. The first is the date and of the countdown timer. After setting the time, you only need to select what is displayed before and \/ or after the same date and time. Hopefully this will help provide a better experience for visitors when viewing expired transactions.
Leaving a message.
