10 Form design

00:00:04.000 –> 00:00:05.720
Hi there, welcome back. In this video,

00:00:05.720 –> 00:00:07.920
we’re going to look at design. You’ve got

00:00:07.920 –> 00:00:09.680
the content, but now let’s look at what

00:00:09.680 –> 00:00:12.000
your Riddle looks like for your audience.

00:00:12.640 –> 00:00:15.200
To make design changes, click on palette

00:00:15.880 –> 00:00:18.800
on the left, and now by default, the

00:00:19.120 –> 00:00:21.120
palette that is selected is called

00:00:21.120 –> 00:00:22.880
Timeless, it’s one of the Riddle default

00:00:22.880 –> 00:00:25.720
palettes that you can choose from all of

00:00:25.720 –> 00:00:28.360
these here. And we’re going to

00:00:28.360 –> 00:00:30.960
choose a different one. Let’s take

00:00:31.280 –> 00:00:34.240
cool. Okay,

00:00:34.280 –> 00:00:36.080
and now we’ll make, so I could just use

00:00:36.080 –> 00:00:38.200
that as it is, but now I can also make

00:00:38.200 –> 00:00:41.080
changes to that palette as you might

00:00:41.080 –> 00:00:43.040
need for your brand or for this use case.

00:00:43.120 –> 00:00:45.880
Click on the three dots and click on copy

00:00:45.880 –> 00:00:46.720
and edit palette.

00:00:49.200 –> 00:00:52.080
Name it. And now I

00:00:52.080 –> 00:00:54.400
can make several different changes.

00:00:54.640 –> 00:00:56.240
Number one is the colors, so you can see

00:00:56.280 –> 00:00:58.560
all these different colors down here that

00:00:58.720 –> 00:01:01.040
apply to different elements in the Riddle

00:01:01.080 –> 00:01:04.040
from buttons to the background color

00:01:04.040 –> 00:01:06.880
to text color in the answer options

00:01:07.080 –> 00:01:09.880
as well as in general and so you can play

00:01:09.880 –> 00:01:11.920
around with all of that and apply your

00:01:11.920 –> 00:01:14.040
brand colors as well. Apart from changing

00:01:14.040 –> 00:01:15.120
all the different colors what you can

00:01:15.120 –> 00:01:17.680
also do is change fonts so you can use

00:01:18.160 –> 00:01:20.800
one of the font providers or use your own

00:01:20.800 –> 00:01:23.320
font there. Okay, using this block here

00:01:23.320 –> 00:01:26.000
we’re going to look at these three

00:01:26.000 –> 00:01:27.440
buttons here. One is for block

00:01:27.440 –> 00:01:29.520
instructions, and that’s this

00:01:30.480 –> 00:01:32.880
pill here with the instructions for what

00:01:32.880 –> 00:01:35.600
your audience has to do. Because of the

00:01:35.600 –> 00:01:38.480
nature of this form, um for me

00:01:38.480 –> 00:01:40.280
it’s quite clear that they have to enter

00:01:40.280 –> 00:01:43.120
their phone number, so I can

00:01:43.120 –> 00:01:44.680
disable that block instruction and it

00:01:44.680 –> 00:01:47.120
won’t be there any longer. So depending

00:01:47.120 –> 00:01:48.560
on your use case, you can leave them in

00:01:48.640 –> 00:01:51.520
or disable them. Then

00:01:51.520 –> 00:01:54.320
here, this refers to the block

00:01:54.320 –> 00:01:57.120
image that we inserted up here, and by

00:01:57.120 –> 00:01:58.800
default this is enabled so that it

00:01:58.800 –> 00:02:01.640
extracts the colors and reflects

00:02:01.640 –> 00:02:03.680
it in a blurred version of that

00:02:04.240 –> 00:02:06.720
underneath. So if I disabled that, then

00:02:06.720 –> 00:02:08.920
you would now see this is a color, the

00:02:08.920 –> 00:02:11.680
block color that has been either chosen

00:02:11.680 –> 00:02:13.920
by you or is the default in this palette.

00:02:15.720 –> 00:02:17.760
And switching that back on again, you can

00:02:17.760 –> 00:02:19.360
see this blurred version again

00:02:19.360 –> 00:02:21.840
underneath. So it’s a really subtle

00:02:22.160 –> 00:02:25.000
way to give your

00:02:25.760 –> 00:02:27.800
blocks some unity between the picture

00:02:27.800 –> 00:02:30.320
above and the colors underneath.

00:02:31.240 –> 00:02:34.000
What you could also do is disable that

00:02:34.000 –> 00:02:36.920
again and enable this button here, and

00:02:36.920 –> 00:02:39.360
that takes the image, again that

00:02:39.360 –> 00:02:41.440
same image that you’ve uploaded, and

00:02:41.840 –> 00:02:44.680
makes a background picture out of it. So

00:02:44.680 –> 00:02:46.520
this is great if a) the picture is not

00:02:46.520 –> 00:02:48.760
necessary for that question, it’s just to

00:02:50.160 –> 00:02:52.880
make it look nicer, and also

00:02:53.360 –> 00:02:55.280
b) if it works,

00:02:56.480 –> 00:02:58.640
from the styling. So here it looks good,

00:02:58.880 –> 00:03:01.360
I can just see that subtle picture in the

00:03:01.360 –> 00:03:03.840
background, but the form is

00:03:04.560 –> 00:03:07.520
usable and looks really good. So that’s

00:03:07.880 –> 00:03:10.160
up to you. Whatever you choose

00:03:10.400 –> 00:03:13.280
here will then be the same for all

00:03:13.280 –> 00:03:15.640
the other blocks. So if I go on, for

00:03:15.640 –> 00:03:18.240
example, here I didn’t have a picture,

00:03:18.400 –> 00:03:19.920
but you can see the block instructions

00:03:20.120 –> 00:03:22.080
are on and so they’ll be on there too.

00:03:22.880 –> 00:03:25.520
It’s applied to the whole Riddle.

00:03:26.200 –> 00:03:28.120
So play around with that as you as you

00:03:28.120 –> 00:03:29.920
would like to. Don’t want to forget the

00:03:29.920 –> 00:03:32.120
border radius. That refers to the

00:03:33.920 –> 00:03:36.040
curve that you can see with this default

00:03:36.040 –> 00:03:38.960
of 24 pixels. You could

00:03:39.280 –> 00:03:42.240
take it all the way down to zero

00:03:42.640 –> 00:03:45.240
to give you that right angle, or go up to

00:03:45.280 –> 00:03:47.600
50, which is the

00:03:47.600 –> 00:03:50.480
maximum number of pixels

00:03:50.480 –> 00:03:52.960
for that radius. I’m going to put it back

00:03:52.960 –> 00:03:55.120
to 24.

00:03:56.000 –> 00:03:58.760
Okay, if you want to go into

00:03:59.200 –> 00:04:01.040
even more specific

00:04:01.200 –> 00:04:03.600
customization for colors, for text, for

00:04:03.600 –> 00:04:06.320
spacing, for targeting any

00:04:06.320 –> 00:04:09.040
specific elements, you can use custom CSS

00:04:09.360 –> 00:04:11.600
where you would click on edit and put in

00:04:11.600 –> 00:04:14.480
your custom CSS there that you either get

00:04:14.480 –> 00:04:17.000
from our snippets on our

00:04:17.040 –> 00:04:19.800
website here

00:04:20.040 –> 00:04:22.640
in the help guide for

00:04:22.720 –> 00:04:25.200
CSS code or your own

00:04:25.760 –> 00:04:28.080
your own snippets based on the classes

00:04:28.080 –> 00:04:30.520
that we use which are here in the

00:04:30.960 –> 00:04:33.520
CSS editor help guide here. You can see

00:04:33.640 –> 00:04:36.320
all the selectors that we use

00:04:36.320 –> 00:04:39.160
in Riddle. Okay, play around with

00:04:39.160 –> 00:04:41.760
that and I’ll see you in the next video

00:04:41.920 –> 00:04:43.440
for some settings.