[Official Training] How to Add ClickFunnels Progress Bar Element

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:00

[Music]

00:04

hey there it’s Irina Z and in this video

00:07

I’m going to show you how to add a

00:09

progress bar element to your page so

00:11

first what you’re gonna want to do is go

00:13

into your funnel and then you’re gonna

00:14

want to add an element so an element is

00:17

in these orange boxes you’ll go ahead

00:19

and add an element by hitting the plus

00:22

sign and search for progress bar and

00:25

this would be the element four and now

00:26

we have added the progress bar element

00:28

to your page now you can customize the

00:31

progress bar element in various ways and

00:34

I’m going to show you how to do this so

00:35

if you go over to this little toggle and

00:37

you’ll open up the settings you’ll see

00:39

different settings that you’ll be able

00:42

to play around with settings themes and

00:44

advanced settings first you can see that

00:46

there’s the top margin sizing so you

00:48

could go ahead and pull the progress bar

00:50

all the way up or push it down depending

00:53

on the preference of how you want to

00:54

place it you’ll be able to do that by

00:56

using the top margin you also be able to

00:58

go ahead and edit the text inside the

01:01

percent field so we’ll go ahead and edit

01:03

the text and you’ll be able to select a

01:06

font that you want to use you can also

01:07

change the background color so right

01:10

over here just to match the funnel we’re

01:12

working in we’ll go ahead and select

01:13

orange and that is how you would edit

01:17

the progress bar now right over here if

01:20

you go over to themes you could see

01:21

different themes you could select for

01:22

your progress bar some of them have a

01:24

shadow and some of them have a little

01:26

bit of animation so for this example

01:27

we’ll go ahead and select the animated

01:29

stripes as you can see it is now

01:31

animated with the stripes under the

01:33

Advanced Settings you could see that you

01:36

could change the percent width so that

01:39

is the width of how much of the area is

01:42

colored it so right over here it’s set

01:44

on 75 you could drop it down to 33%

01:47

anywhere from 0 to 100% okay the next

01:51

thing you could do is change the size of

01:52

the progress bar you could have it small

01:54

medium or large you can also edit the

01:57

text shadow you could have a dark shadow

02:00

or you could have a light shadow or you

02:02

could have no shadow under the text

02:05

style you’ll be able to select bold

02:07

italicized or bold and italicized

02:11

the alignment of the text could be

02:13

centered it could be left aligned or

02:16

right aligned you can also select the

02:20

offset color and that is the color right

02:22

over here at the end - white transparent

02:25

white black or transparent black for

02:30

this example we’ll just stick with white

02:31

you could also select a shadow now we’re

02:34

working with a darker background so you

02:36

might not be able to see the shadow on

02:38

the video however if you select the

02:40

shadow you could have a soft shadow a

02:42

mid shadow or a hard shadow for the

02:44

progress bar you can also round the

02:47

corners different selections

02:49

however rounded you would like them and

02:52

you can also add a border right over

02:56

here by selecting border under the

02:58

animations tab you’ll be able to select

03:00

the time delay if you want your progress

03:03

bar to fade into your funnel you could

03:05

set that out by clicking fade in and

03:07

then choosing the minutes and seconds

03:09

that you wanted to fade in that you

03:11

could also select fade in with scale and

03:14

select the minutes and seconds that you

03:15

want it to fade in with scale now under

03:18

the animations tab right over here

03:20

you’ll be able to select whether you

03:22

want the progress bar on page load so

03:27

when the page loads the progress bar

03:28

will appear or if you want the progress

03:31

bar to appear on page scroll and become

03:34

visible so these are some of the

03:35

settings that are part of the progress

03:38

bar element if you run into any trouble

03:40

with this or you have any further

03:42

questions please reach out to our

03:43

support team and they’d be more than

03:45

happy to help thanks so much

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.