[ClickFunnels Page Editor] How to use the ClickFunnels image popup 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
hey human click follow sport here so in
00:02
this video I’m just going to go over how
00:04
we can use and configure the image
00:05
pop-up element so I have a simple page
00:07
setup right now we currently don’t have
00:08
any content so we’ll add a new element
00:11
we can click on media to get the sub
00:13
section of just the media related
00:14
elements we’ll add an image to pop up
00:16
element we can get into the settings by
00:19
clicking on the elements itself or by
00:22
hovering over it and then clicking on
00:23
the gears icon inside of the right-hand
00:27
menu here there’s a number of options
00:28
that we can configure we’ll start here
00:30
by setting the thumbnail image this is
00:33
the image that you’re going to want to
00:34
initially display on the page in this
00:40
example I am going to use the same image
00:41
for both the thumbnail and the full size
00:43
image however you can set them as
00:46
separate images as well after that the
00:48
next thing we’re probably going to want
00:49
to configure if required would be the
00:51
width and the height of the image so we
00:57
can manually set a width and we can also
01:00
mainly set a height as well if we want
01:01
however in general you will only want to
01:03
set one of the two and then the other
01:06
will auto adjust to it we’ll maintaining
01:10
the same aspect ratio so the aspect
01:13
ratio is the ratio of the height of the
01:17
image versus the width of the image and
01:19
if you set both the width and the height
01:21
it can distort the image a little bit
01:24
because it will change that that aspect
01:26
ratio so in general it will be a best
01:28
practice to to only set one of the two
01:33
going up from there we can set a
01:35
alternate text there’s two main places
01:37
this is going to come into play one is
01:39
for SEO or search engine optimization
01:43
when a search engines crawlers go
01:45
through your page it will be able to
01:47
tell what this image actually is of but
01:50
it will be able to look at the alt text
01:52
to get an idea of that the second place
01:54
this typically comes into play is going
01:56
to be with people who are accessing your
01:58
page with the assistance of a screen
02:00
reader again the screen reader isn’t
02:02
going to be able to interpret what that
02:03
image actually is or represents however
02:06
it will be able to let them know that
02:08
there is an image of in this example
02:10
funnel hacking live
02:13
finally here we can configure the full
02:15
image again in this example I am just
02:18
going to use the same image for it for
02:21
both the sub male and then the larger
02:22
image that will show up after but these
02:24
can be two completely separate images if
02:26
you prefer and we can also adjust the
02:29
top margin here if you want you can
02:33
check out themes and get some pre-built
02:36
option to you we can click on the
02:40
Advanced tab to manually configure some
02:42
things by default the Styles tab is
02:45
going to be pre selected we can choose
02:48
an alignment from left right or center
02:53
we can use radius to configure the edges
02:56
making it a circle or just having
03:00
slightly rounded corners we can add a
03:04
shadow if we want all the way from none
03:06
up to dark shadow we can change the
03:09
opacity going from fully visible all the
03:11
way up to strong faith and finally we
03:16
can use this grayscale options to choose
03:17
if we want the image to display in full
03:19
color or just black and white
03:23
finally we can click on the animation
03:26
tab here and set up a time delay
03:27
choosing fade in or fade in with scale
03:30
if I set this to one minute 30 seconds
03:33
for example the image will not appear on
03:35
the screen until 1 minute and 30 seconds
03:37
after the page has been loaded we can
03:41
also set up an animation choosing on
03:43
page load or on page scroll on page load
03:46
will take effect when the page initially
03:48
loads on page scroll will only take
03:50
effect when the element in question
03:52
actually comes into view on the user
03:54
screen we can choose a style and we can
03:59
set a delay in milliseconds
04:04
so I will save my page and preview just
04:07
to give you an idea of how this works so
04:09
this is the the sub nail image that
04:11
initially shows up on the page and then
04:13
we can click on that and the full-size
04:15
image will show up here again sub nail
04:22
image versus versus full size image so
04:25
hopefully the sub square things up a
04:26
little bit in terms of how you can add
04:28
views and configure the image pop-up
04:30
element inside of the clickfunnels
04:31
editor if you do some more questions
04:33
though or anything like that definitely
04:34
go ahead and let us know in sport chat

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.