How to use sections in ClickFunnels

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:03
this is Mark head of customer education
00:05
here at click models and in this video
00:07
I’ll be showing you how to use sections
00:08
inside the editor so you’ll notice up
00:12
here that you have a section button you
00:14
can add a section or if you click on all
00:16
sections you can view all the sections
00:17
that are on your page the sections are
00:20
going to be the green box that you see
00:23
when you hover your mouse over the
00:25
content so there’s a green box right
00:28
there and there’s one right there you’ll
00:32
notice that this one is actually smaller
00:33
than this one here so if I go into the
00:36
settings for this section I can change
00:40
the top margin which is going to be this
00:41
space on top of the section I can
00:45
actually add a background image for just
00:47
that section as shown here if I change
00:52
the image position I can set it to fill
00:56
up the entire section or I can repeat
01:00
there’s a few different options for
01:02
images there and I can also change the
01:07
section width I can do a full page Y
01:09
medium small or extra small section so
01:13
extra small is going to be this size
01:15
here full-page is going to take up the
01:19
entire width of the page stickiness is
01:24
basically going to cause the section to
01:27
stick to the top on the scroll or stick
01:30
to the bottom onload so sticking to the
01:33
top on scroll is when somebody Scrolls
01:34
down the page the section will stick to
01:37
the top stick to the bottom onload is
01:39
when the page loads the section will be
01:42
stuck at the bottom which can be useful
01:44
for calls to action or information that
01:46
you want to make sure it’s front and
01:48
center for your users now if I didn’t
01:51
want to have a background image I could
01:54
have a separate background color for
01:57
just this section I can pick the color
01:59
and then you’ll notice the transparency
02:01
sliders all the way to the left side
02:02
need to move that to the right or I can
02:05
make it transparent I like I can do any
02:08
color that I choose here
02:11
and then the padding is going to be the
02:16
space inside of the section so you’ll
02:19
notice if I increase padding on the top
02:22
and the bottom and the side when I come
02:25
up and hover over the section that’s the
02:28
space between the row the outside of the
02:30
row here which is the blue line and the
02:32
section and if I go back into the
02:35
section settings and decrease that
02:38
padding you’ll be able to see now
02:43
there’s a lot less space between the
02:45
blue and the green so keep in mind the
02:49
margin is the outside of section so
02:54
that’s going to be outside the section
02:55
on the top here
02:56
and the padding is on the inside of the
03:00
section now if I click on the Advanced
03:04
tab here I have a few different styles I
03:07
can change the corner radius which you
03:10
won’t be able to see unless you’re using
03:13
section that is in full page so I go
03:16
ahead and actually move this section
03:17
down a little bit and we can give our
03:21
section some round corners here we can
03:26
choose which edges we want to have round
03:28
corners and we can do a border so if we
03:33
did a white border it would show up a
03:36
lot easier there you can change the
03:39
thickness of that border choose whether
03:41
we want two dashed or dotted border and
03:45
we can also do a shadow so the shadow is
03:48
going to be either an inner shadow or a
03:51
drop shadow drop shadow is going to be
03:53
on the outside of the section and the
03:56
inner shadow is going to be on the
03:57
inside so I get rid of this border
04:00
hopefully you can see it lleva so you
04:02
can see the drop shadow there and the
04:05
inner shadow is on the inside
04:07
it gives it a look like it’s set into
04:10
the page a little bit there under the
04:13
animation tab you’ll see that there’s a
04:15
time delay setting I can choose to fade
04:17
in or fade in with scale theta in means
04:20
it’s going to fade in right where it’s a
04:22
fading width scale means it’s going to
04:23
start small and get bigger
04:25
if I select stayed in I’m going to set
04:27
the time that I want it to state it so I
04:31
can choose if I only want it to fade in
04:34
after five minutes that someone has been
04:35
on the page or I could do 30 seconds I
04:41
can set this to whatever I like
04:43
animation is going to be how the section
04:48
appears I can have it appear on page
04:50
load or on page scroll now this wouldn’t
04:54
work in conjunction with the fade in
04:56
right here but on page load I can have
05:00
it fade in and this is in milliseconds
05:02
here so 500 milliseconds can be half a
05:04
second I kind of fade in scaling slide
05:07
in from the left from the right from the
05:10
top or the bottom and I’ll show you what
05:12
that’s going to look like we’ll go ahead
05:14
and give this a two second delay which
05:16
would be 2000 milliseconds I’m going to
05:19
save this page and I’m going to preview
05:24
and you’ll notice it hasn’t appeared yet
05:26
it’s going to take two seconds and then
05:28
it jumps in there so that’s how you can
05:32
use those animation settings the other
05:35
settings that are available inside the
05:36
section settings you can choose whether
05:39
you want to an entire section to be
05:40
displayed on mobile and desktop mobile
05:43
only or on desktop only you can also
05:45
hide this section right here if you
05:48
click the hide button you’ll see you’ll
05:50
get a chance to undo that hide for a few
05:52
seconds now if you go back into all
05:55
sections you’ll be able to see all your
05:58
sections and you can unhide from this
06:00
menu here you can also drag to rearrange
06:04
you can duplicate or you can delete
06:11
the other thing that you can do is if
06:14
you click on get CSS info you can change
06:18
the name of your section or get the CSS
06:22
ID selector if you’re using any custom
06:24
CSS so if I wanted to change this to my
06:30
cool headline I would click the update
06:34
tab if I go back into all sections
06:36
you’ll see that the name of it has
06:38
updated here and also click right here
06:40
to open those settings now if I wanted
06:43
to delete this section I could go right
06:45
here and click this trashcan icon or I
06:48
can hover my mouse over the section and
06:50
Tripp and click the trashcan icon right
06:51
here hope that helps please let us know
06:54
if you have any question
06:56
[Music]

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.