Overview Video
Free Stylized Demo Layouts
When you purchase this plugin you also recieve 10 free layouts included. You can view the free stylized countdown timer demos.
Existing customers can download the demos as layouts, which need to be imported into the Divi Library. From there you can add them as sections to any layout. Download The Layouts
GOOD NEWS: We are adding a ton of new styling features in the next update! See our Roadmap for more information!
How To Customize The Countdown Timers With CSS
Our focus so far for this plugin is functionality. We wanted to create a solution for the missing features found in the default Divi module. We also recognize the lack of design settings for styling the module. This applies to both the regular Countdown Timer Module, and our Divi Timer Pro. Please feel free to use and modify the CSS snippets below a way of styling your plugin beyond what the Divi Design settings offer.
/*sections - days, hours, minutes, seconds*/
.ditp_countdown_timer .section {
background-color: #fdcb2f;
}/*values - days, hours, minutes, seconds*/
.ditp_countdown_timer .section.values {
width: 120px;
height: 100px;
margin: 5px
}/*hide the first digit in the Days sectionr*/
.et_pb_countdown_timer div.days.section.values p:first-of-type:first-letter {
visibility: hidden;
}
/*adjust the position of the number to the left*/
.et_pb_countdown_timer div.days.section.values p:first-child {
position: relative;
left: -15px;
}/*hide the days section*/
.ditp_countdown_timer div.days.section.values {
display: none;
}/*hide the seconds section*/
.ditp_countdown_timer div.seconds.section.values {
display: none;
}/*hide only the first separator between days and hours*/
.ditp_countdown_timer div.sep.section.zero {
display: none;
}/*hide all separators*/
.ditp_countdown_timer .sep {
display: none;
}/*position the separators*/
.ditp_countdown_timer .sep {
top: 16px;
}/*add background around labels*/
.ditp_countdown_timer .section p.label {
background: #000000;
border-radius: 4px;
padding: 2px 4px;
margin-top: 10px;
}/*number values*/
.ditp_countdown_timer .section p.value {
margin-top: -10px;
}