- #Movie studio platinum 12 how to make a countdown clock full
- #Movie studio platinum 12 how to make a countdown clock plus
- #Movie studio platinum 12 how to make a countdown clock series
- #Movie studio platinum 12 how to make a countdown clock download
- #Movie studio platinum 12 how to make a countdown clock free
#Movie studio platinum 12 how to make a countdown clock full
This makes the section full screen by making the section 100% of the viewport height. Scroll down to the “Main Element” custom CSS box, and add height: 100vh to the box. We now need to make just one small adjustment in the Custom CSS tab of the Section Module Settings. You should now see the background video playing behind our countdown timer!
#Movie studio platinum 12 how to make a countdown clock download
Clicl the upload button and add the video we download earlier from Videezy. Once you have the section settings up, navigate to the “Background Video MP4” settings. Hover over the section and open up the Section Settings (click on the gear icon in the blue set of controls that appears when you hover over the section). We now need to make a few minor adjustments to the section. NOTE: it will look like there’s no countdown timer there at all, because we left the countdown module text color as “Light.” Once we add our background video in the instructions below, we’ll be able to see the countdown. Otherwise, you can click the save button to close the countdown timer module settings. However, if you’re using something other than the default Divi font (Open Sans) then you’ll need to change all the fonts in the “Design” tab of the module settings to “Open Sans” in order to achieve the same look as my example. That’s all we need to change in the module settings. Now, click on the “Design” tab and change the “Numbers Font Size” to 85px, and the “Label Font Size” to 15px. Adjusting the Module Settingsįirst, choose a date to count down to, and then change the “Use Background Color” to No. Click on it, and the countdown timer will be added to your layout, and the countdown timer module settings will be opened in front of you. You can start typing “countdown” and the countdown timer will be filtered for you.
#Movie studio platinum 12 how to make a countdown clock plus
Go ahead and click the green plus icon, then click the icon to add a one column row, as shown in the red outline in the screenshot below.ĭivi will automatically prompt you to choose a module to insert. So create a new page, give a title, enable Divi, then click the big blue “Use Visual Builder” button to open up Divi’s visual builder.ĭivi automatically creates a new section for us, but now we need to create a new row. You can use today’s tutorial in an existing page, but for the sake of simplicity, we’re going to work in a new page. So it’s time to head to Divi! Implementing the Design with Divi
The rest of our design today is down with the built in Divi controls, plus some custom CSS, so there’s no more design elements to prepare.
#Movie studio platinum 12 how to make a countdown clock free
Go ahead and click the big purple “Download” button to download the free stock video to your computer. Here’s the direct link to the video we’ll be using: There’s lots of places to find free or premium stock footage, but for this tutorial we’ll be taking advantage of some free video clips from Videezy. Today’s countdown timer utilizes a full screen background video. Subscribe To Our Youtube Channel Preparing the Design Elements Today’s countdown timer fills that role perfectly! How to Create a Countdown Timer With a Full Screen Background Video
As I mentioned at the beginning of this miniseries, a countdown timer is perfect for building suspense for a website or product launch, or even an event. The full screen section keeps you focused on the countdown, and the beautiful background video of the floating particles gives it a modern and sophisticated look. This countdown timer is unique for obvious reasons. Here’s the default Divi countdown timer module, which is what we’ll be starting with.Īnd below you’ll see an animated GIF of what we’ll be creating today. Let’s get started! The Divi Countdown Module: Before & After In other words, I’ve saved the best for last! In today’s tutorial, I’m going to show you how to use a full screen background video in your countdown timer, to “build suspense” in a fun and remarkable way. So to finish off our countdown timer module miniseries, I have something that I think you’re really going to love. The great thing about these tutorial miniseries is you can use them exactly as they are in the tutorial, or as a jumping off point to create beautiful websites that are completely unique to you. Today is the final tutorial in our miniseries on the countdown timer! I hope these tutorials have been educational, as well as inspirational. Stay tuned this week for all five unique examples of Divi’s countdown module, with a tutorial on how to achieve each one!
#Movie studio platinum 12 how to make a countdown clock series
This post is part 5 of 5 in our mini series titled 5 Impressive Ways to Style Divi’s Countdown Timer Module.