[ClickFunnels Page Editor] How to use the Image Feature Element inside 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:08
a human cliff I’ll support here so in
00:11
this video I’m just going to go over how
00:13
we can configure the image feature
00:14
element oftentimes people want to use
00:17
both images and text in conjunction with
00:19
each other there’s two ways to approach
00:21
it
00:21
you can always build it out yourself by
00:23
for example creating a two column row
00:26
adding a image element to one row and
00:29
then adding text elements to the second
00:31
row however because this is often used
00:34
we have created an element that will
00:36
help sort of save time by placing all of
00:39
this into a single element so we now
00:42
currently have a simple page setup with
00:44
no content so we’ll start by adding in
00:45
an element we can click on content to
00:48
get a sub selection with just the
00:49
content related elements we’ll add in
00:51
the image feature now because this
00:54
element incorporates text it does work a
00:56
little bit differently than some of our
00:57
other elements if you just click on it
00:59
it will jump you into the text editor to
01:02
get into the settings for the element
01:04
you can hover over it and click on the
01:06
gears icon or we can go into the
01:08
elements menu click on manage select the
01:11
element in question to alter the text
01:16
itself again we can just click on the
01:18
element and it will jump us into the
01:19
text editor from here we can bold
01:21
italicize underline strikethrough text
01:26
we can also adjust the justification
01:29
from left lines right-aligned and center
01:33
and this can be done for the text as
01:37
well as the headline independently
01:39
finally we can hyperlink some or all of
01:44
the text from this editor we can also
01:51
jump into the settings by clicking the
01:53
gears icon on the right hand side here
01:55
now we can commit configure a number of
01:58
additional options starting with the top
02:00
margin we can choose the image that we
02:04
want to use we can set a alt text
02:10
there’s too many places this comes into
02:12
play the first is for SEO or search
02:17
engine optimization search engines
02:19
crawlers will be able to tell what an
02:20
image actually represents or what its up
02:23
however they will be able to look at the
02:24
alt text to get an idea of it the second
02:28
place that typically comes into play is
02:29
going to be with a screen reader again
02:32
the screen reader won’t be able to tell
02:33
the user or won’t be able to interpret
02:36
the image for the user however it will
02:38
be able to look at the alt text and let
02:39
them know that in this example that this
02:42
is a image of faunal hacking live going
02:46
down from there we can manually adjust
02:47
the height or the width of an image I
02:52
will note that you can set the height
02:56
and width independently however
02:58
generally you will only want to set one
02:59
or the other because if you set both of
03:01
them it can mess with the aspect ratio
03:05
which would be the ratio of the height
03:06
of the image versus the width of the
03:08
image which going to make the image
03:12
appear scrunched up or distorted
03:17
I should also note that there is a
03:20
maximum size here so well you can set
03:26
this as high as you want the largest it
03:28
can actually take up would be the amount
03:30
of space that you’ve allocated to that
03:32
image going down from there we can
03:38
adjust the font family we can configure
03:43
the size of the headline texts and the
03:46
regular text independently we can change
03:52
the color of the headline and the color
03:55
of the text as well if we want we can
04:02
click on the themes tab to use a number
04:06
of pre-built themes we can also manually
04:09
configure things by going into the
04:10
Advanced tab by default the style tab
04:13
will be pre selected here we can adjust
04:16
the layout choosing if we want the image
04:18
to appear first and then the text second
04:20
or the text first and then the in a
04:22
second we can adjust the relative
04:27
percentage that we want to use for the
04:29
text and the image 50/50 for example
04:35
will allocate 50 percent of that row to
04:40
the image and 50 percent to the text
04:45
we can change the image radius choosing
04:47
from nuttin which will just give us a
04:49
square rounded corners which will give
04:53
us slightly rounded corners or circle we
05:00
can add an image border choosing from
05:02
whites or black and we can add an image
05:06
shatter finally we can click on the
05:10
animation tap and set up a time delay
05:12
choosing from fade in or fade in with
05:14
scale if I set this to 1 minute and 30
05:17
seconds for example the element in
05:20
question will not appear on the street
05:21
until 1 minute and 30 seconds after the
05:23
pages have been loaded finally we can
05:27
set up an animation choosing from on
05:28
page load or on page scroll on page load
05:31
will take effect as soon as the yellow
05:33
as soon as the page is loaded on page
05:35
scroll will only take effect on the
05:37
element in question actually comes into
05:38
view for the user then we can adjust or
05:43
choose a style and we can set a delay in
05:45
milliseconds so hopefully this helps
05:47
clear things up a little bit in terms of
05:49
how you can configure the image feature
05:50
element inside of the clickfunnels
05:52
editor you can do small questions though
05:54
or anything like that definitely go
05:55
ahead and let us know in support 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.