How to use the progress bar element inside the ClickFunnels page editor

ClickFunnels™ Helpdesk Support Video

ClickFunnels™ Gives You EVERYTHING You Need To Market, Sell and Deliver Your Product Online!

:arrow_right: Start Your Free 14 Day Trial

Sign-Up Takes Less Than 60 Seconds.

YouTube Transcript: English (auto-generated)

00:02
you
00:09
hey-ya human click files support here so
00:11
in this video I’m just going to go over
00:12
how we can configure the programs bar
00:14
element so we currently have a simple
00:16
page setup with no content so we’ll
00:18
start by adding in an element we can
00:20
click on content to get a sub selection
00:23
just the content related elements we’ll
00:25
add in the progress bar you can get into
00:28
the settings by clicking on the element
00:29
itself or by hovering over it and
00:31
clicking on the gears icon here there’s
00:34
a number of things we can adjust
00:35
starting with the top margin then we can
00:44
adjust the font or the text that
00:47
actually appears inside of the progress
00:49
bar
00:55
we can choose a font family
01:03
we can set a background color
01:13
if we want we can click on the themes
01:15
tab to choose from a number of pre-built
01:17
themes including an animated one we can
01:22
get some additional configuration
01:23
options by clicking on the Advanced tab
01:25
by default the Styles tab will be
01:27
pre-selected here we can choose a
01:29
percent width which is what percent we
01:32
want the progress bar to show from 0 all
01:34
the way up to 100 we can adjust the
01:42
overall size of the element choosing
01:44
from small medium or large we can add
01:49
some text shadow
01:56
we can adjust the textile choosing from
01:59
bold italic or bold and italic we can
02:06
adjust the justification of the text
02:08
which is a criminal left right or center
02:14
we can adjust the opposite color which
02:17
is the portion of the progress bar that
02:21
is not currently failed to make this a
02:24
little bit more obvious I’m going to
02:26
adjust the color on the section that
02:28
contains it
02:37
so here we can choose from white or
02:40
black as well as a transparent white
02:43
which will partially show the color
02:46
behind it and transparent block which
02:49
again will partially show the color
02:50
behind it we can add a shadow choosing
02:54
from soft mild or hard which will go
02:56
around the entire element we can adjust
02:59
the corners from 0 to 20 pixels zero
03:02
being square corners and 20 being more
03:07
rounded
03:15
and finally we’re gonna choose whether
03:18
or not we want to have a border which
03:22
will appear around the portion of the e
03:25
% bar that is filled in for us finally
03:32
we can set up an animation by clicking
03:34
on the animation tab we can set up a
03:37
time delay choosing from fade in or fade
03:39
in width scale if I set this to 1 minute
03:42
and 30 seconds for example the progress
03:44
bar will not actually appear on the
03:46
screen until 1 minute and 30 seconds
03:47
after the pages initially been loaded
03:49
finally we can set up an animation
03:51
choosing form on page load or on page
03:53
scroll on page load will take effect as
03:56
soon as the page is loaded on page
03:58
scroll will only take effect when the
03:59
element in question comes into view for
04:01
the user finally we can choose a style
04:04
and we can set it delay in milliseconds
04:06
so hopefully this helps clear things up
04:08
a little bit in terms of how you can use
04:10
the progress bar element inside of the
04:12
click finals editor if you do some more
04:14
questions though or anything like that
04:15
definitely go ahead and let us know into
04:17
porchat

ClickFunnels™ Gives You EVERYTHING You Need To Market, Sell and Deliver Your Product Online!

:arrow_right: Start Your Free 14 Day Trial

Sign-Up Takes Less Than 60 Seconds.