Hello, my friend, I hope you are enjoying DotcomPal.
In this Training, we will understand about Icons and Timer elements.
I’m already in the editor friends.
As usual first we click on this + icon and then we drag this Icons element here on the page where we want to add it, as you can see, here we have provided so many different icons, which you can check by scrolling down the page and can use for different niches, even if you want you can directly search for an icon using this search bar provided here, you just need to type the keywords and it will show you the icons related to the search keyword.
These icons are in their default color, so if you want to change the color for icons, you can do that.
Just click on this Icon Color button and change the select the color as per your requirements, you can see, as I am changing the color for my icon here.
Once you change the color, just select the icon and it will be on your page, with the selected color.
You can place it anywhere on the page make it bigger, or smaller as per the need.
You can delete this icon using this delete button, make it duplicate, put a layer to make it appear forward or backward on any image, text, video, etc.
You use this edit button to change the color of the icon. You can rotate this icon at any angle if you want.
Once you finish the editing, click on the done button,
So, my friends, this is how you can add an icon to your page and customizes it as per your requirements.
Now, let’s move to the other part of this guide, the next element is Timer.
If you are creating a lead generation template, then this element can be very useful for you as by using this element, you can add Timer on your template and can notify your visitor about your offers and their timing.
This will help you to create scarcity about your offer.
So, let’s see how it works.
To check the functionality of Timer first you need to click on the Timer and drag it on your page.
Now, in order to customize your Timer, you need to click on the edit button provided here.
Then you will get two sections.
In the first section, you can edit the settings of the timer and the second one is Style, where you can Style your timer and put great effects on it.
First, we will understand the settings section.
You can decide the date for the timer, select Time for the timer, and select the Time Zone for the timer.
You can check this box if you want to apply the same date and time setting to all the timers on your current page.
While customizing this, on the right side, you can see the live changes for your timer.
So, whatever settings you are defining here for the timer, you can see the live output for the timer, the same will be visible when you will save it.
Now, you can see here, you turn off or turn on the Colon. While changing this setting, you can check the effects of the changes on the right side.
You can turn off or turn on the Labels.
You can also decide the Label Position, whether you can show it on the top or on the bottom. You can see the change effect on the right side.
Also, you can choose the format of the timer like how you want to play it in terms of days, hours, minutes, or seconds. You can enable them, or you can disable them as per your need by clicking on the checkbox provided in front of them.
My friends, you have a Redirect URL option here.
This Redirect URL option allows you to redirect visitors to your desired website or web page by putting the site URL here.
You can also loop the timer using this set loop option.
You can select the loop days, hour, or minutes and put a number, for example if you want to loop the timer in 1 hour, then you can put 1 here and select the hour from here, and it will loop the timer in every 1 hour.
Hey dear one, if you don’t like the current theme for the timer, you can choose a different Theme for your timer by selecting from the themes we have provided here.
After completing all these settings, you are now ready to style your timer.
My friends, the Style section allows you to customize the Number and Label of your timer.
You can choose the font style. You can also make the font bold, italic, or put an underline on the numbers.
You can choose the font color, background color, and Colon color.
You can also put a border here. You can turn off or turn it on. You can select the width for it.
You can also choose from various types of borders from this drop-down list.
You can choose the border color from this color option.
Apart from this, you can add Drop-Shadow. Use this toggle button to turn on or turn it off.
You can use this option to make it deeper or lighter. You can set the shadow angle by using this angle option to make it more attractive.
Use this color option to set the color for the Drop Shadow.
You can also set the 3D effect here for your Timer.
Friends, I want you to aware of the use of DropShadow and the 3D effect.
You can use any one of them at a time like if you will active Drop-shadow on your timer then you cannot activate the 3D effect.
So, either you can set DropShadow or you can set the 3D effect.
You can set the 3D effects the same as DropShadow, you can turn it off or turn it on by this toggle button, make it deeper or lighter, set the angle, and choose the color for it.
Now, let’s move to the Label option.
You can edit the Font of the label, Font color of the label, and Background color of the label.
You can make the label bold, italic, and put an underline on the label text.
After defining all the timer settings, you need to click on the save button like I am saving all the settings here.
Or if you want, you can cancel it by clicking on the Cancel option provided here.
So, this is how you can set the timer for your page to make it more professional.
My friends, I have explained both the elements, Icons, and Timer, in this training for you.
I believe this was helpful.
Have a good one.