ClickFunnels - How to Create a Custom Quote Box or Testimonial Box

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)

hi there this is mark with clickfunnels
00:08
support and today you’re going to learn
00:10
how to create this nifty quote box just
00:13
using a couple lines of custom CSS so
00:16
this is the preview of the actual page
00:18
here and I’m going to go over to the
00:21
editor so I can show you how this was
00:25
done so this is actually just an image
00:27
feature element and I’ll show you
00:29
exactly which one that is here in the
00:31
menu just image feature right here and
00:33
what I did is I found an image online of
00:38
some quotation marks I made sure that I
00:40
had a transparent background I added
00:42
that as the image in the settings here
00:46
and then I can actually adjust the size
00:51
of the image if i wanted to but I I set
00:54
this at text seventy percent and image
00:56
thirty percent and I put the image on
00:58
the left so you can actually switch it
01:01
so the image is on the right but that
01:03
looks kind of funny so I have it that
01:05
way and then you know you just put in
01:08
your text that you want and change the
01:10
size adjust all that and then you’re
01:13
going to need to get I was just in the
01:16
settings area you’re going to need to
01:17
grab this and copy that and you’re going
01:21
to go into your custom CSS settings now
01:24
there’s already some custom CSS on this
01:26
page so I’m just going to scroll all the
01:27
way down to the bottom here and here’s
01:31
how this works so this is the name of
01:34
the image that I just copped or I’m
01:37
sorry the element that I just copied so
01:39
you’re gonna paste that there and I’ll
01:42
provide the code below this video where
01:44
you can actually just copy the entire
01:46
code and then you just replace the image
01:50
I or the element ID with your element ID
01:53
so you set the background color here you
01:55
can set that to whatever you want you
01:57
can actually just go like this white or
02:01
just type in the color name and that
02:03
might make it even easier you don’t even
02:05
have to worry about hex codes but so you
02:09
just do that and then you can set the
02:11
padding and that’s what’s going to be
02:12
this extra space or
02:14
around the edge i’ll show you what that
02:15
looks like without the padding see it
02:17
doesn’t look that great the words kind
02:19
of cut off on the corners there so I
02:22
added 20 pixels of padding you could do
02:24
30 to give it a little bit more but I
02:26
like just 20 right there and then you
02:28
can add your border radius and this can
02:30
be this is what’s going to make those
02:32
rounded corners so as you can see that
02:34
square right there so if you don’t want
02:35
that border radius you just want to
02:36
square you can do it like that or you
02:38
can add 5 pixels of border radius or 50
02:42
pixels of border radius whatever you
02:44
want so I’m going to go ahead and leave
02:46
that let’s go ahead do 20 there and then
02:49
the cool part is this shadow and you
02:51
just use this box shadow right here the
02:54
first pixels here this is going to be
02:56
the bottom and this one is the right
02:59
side and then this year is actually the
03:01
blur so that’s what’s going to cause the
03:04
shadow to have a little bit of a plural
03:06
see you can see there that is just a
03:09
solid black color but once I add in that
03:12
5px it blurs it a little bit so I can
03:14
actually change that make it a little
03:17
bit more blurry I mean you can you can
03:19
really adjust this however you like so
03:22
there’s a lot of lerner there but so I’m
03:27
going to actually do 20 pixels make it
03:29
pretty blurry little shadow there and
03:32
that’s it so all you need to do is copy
03:34
this CSS below the video here and you
03:39
can paste that into your custom CSS
03:40
settings replace the element ID and use
03:44
the image of the quotation marks make
03:46
sure the background is transparent
03:48
that’s a PNG image and you’re putting
03:51
your text for your quote and the quote
03:54
name or you can use this for a
03:56
testimonial box put them face of the
03:58
person giving the testimonial whatever
04:00
you like just kind of adds in as a
04:01
little touch there makes this this
04:04
element pop let us know if you have any
04:06
questions
04:11
you

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.