WEBVTT

00:00:07.140 --> 00:00:10.780
In this video you're going to learn more about list views.

00:00:11.190 --> 00:00:18.940
So a list view is simply an email list that comes with some further styling NJ immobile.

00:00:19.080 --> 00:00:24.750
So we're going to create an example inside our About page where we're going to cover different types

00:00:24.750 --> 00:00:26.170
of views.

00:00:26.430 --> 00:00:30.780
So it creates a new file Colette's list views

00:00:33.630 --> 00:00:36.330
and copy the content from the previous file

00:00:39.690 --> 00:00:41.760
and change the title to DESPUES

00:00:43.520 --> 00:00:45.460
.

00:00:45.780 --> 00:00:52.020
OK now let's go to page to empty the contents

00:00:56.280 --> 00:01:00.650
and create our list view.

00:01:00.720 --> 00:01:07.790
So to start we need to create an ordered list.

00:01:08.400 --> 00:01:11.460
We can go for an ordered list if you want to go.

00:01:11.520 --> 00:01:16.240
We'll just show ordering for the elements.

00:01:16.740 --> 00:01:21.480
So we need to give out an order at least a data or roll

00:01:24.450 --> 00:01:26.610
list view.

00:01:28.220 --> 00:01:29.290
OK.

00:01:29.760 --> 00:01:34.530
So we're going to start with the simple type we just showed some techs.

00:01:34.650 --> 00:01:46.350
So the list items are going to be simple list items with a link inside and we can place some checks

00:01:46.350 --> 00:01:46.650
there

00:01:46.670 --> 00:01:53.260
.

00:01:59.340 --> 00:02:06.010
So it is the case this and save.

00:02:06.640 --> 00:02:13.700
Now let's have a look at a second page and you can see our list for you there.

00:02:14.060 --> 00:02:16.500
OK.

00:02:16.560 --> 00:02:20.220
Now to add a filter to our list view.

00:02:20.550 --> 00:02:26.430
All we need to do is add a data field to us Viets

00:02:29.630 --> 00:02:32.400
and is it too true.

00:02:33.830 --> 00:02:35.410
OK.

00:02:36.720 --> 00:02:50.340
Also if you want dividers inside our list view we can just list items inside the list view and give

00:02:50.340 --> 00:02:52.120
them a data roll

00:02:54.970 --> 00:02:57.520
list divider.

00:02:59.370 --> 00:03:00.800
OK.

00:03:01.050 --> 00:03:03.210
And let's play some text there.

00:03:03.240 --> 00:03:08.790
The first one is place main information.

00:03:08.820 --> 00:03:09.960
This creates another one

00:03:12.960 --> 00:03:13.440
right there

00:03:19.530 --> 00:03:20.610
and another one

00:03:23.410 --> 00:03:27.700
right.

00:03:31.680 --> 00:03:37.030
OK let's keep it fresh and then we can see our is there.

00:03:37.930 --> 00:03:38.820
OK.

00:03:39.990 --> 00:03:43.860
We can take pictures inside our elements.

00:03:43.860 --> 00:03:49.790
So it goes the first two elements and add a picture in each.

00:03:49.890 --> 00:03:50.340
So

00:03:53.760 --> 00:03:59.160
inside the link just before the text you're going to create an image.

00:04:00.960 --> 00:04:01.610
OK.

00:04:01.620 --> 00:04:07.930
And this is a source also.

00:04:08.240 --> 00:04:14.930
We need to give it a class which is you are my ally icon.

00:04:15.820 --> 00:04:16.410
OK.

00:04:16.710 --> 00:04:22.310
So let's get a picture so you can use any picture you want.

00:04:22.310 --> 00:04:27.660
So I'm going to open my folder on this page and

00:04:33.380 --> 00:04:35.970
I'm going to use it there.

00:04:36.210 --> 00:04:37.290
OK.

00:04:37.650 --> 00:04:42.600
I'm going to do the same thing for the other and heavens.

00:04:43.370 --> 00:04:49.420
OK so let's save the fresh.

00:04:49.440 --> 00:04:52.240
Now I can see my icons in there.

00:04:53.170 --> 00:04:55.960
All right.

00:04:57.210 --> 00:05:04.710
Now let's move to the other type of views which has got an image a heading and a paragraph in there

00:05:04.720 --> 00:05:04.980
.

00:05:05.220 --> 00:05:05.850
OK so

00:05:20.870 --> 00:05:24.830
OK.

00:05:24.960 --> 00:05:30.060
So to create something like this we are going to place inside the link

00:05:39.960 --> 00:05:40.560
an image

00:05:44.310 --> 00:05:51.330
a heading and then a paragraph.

00:05:52.790 --> 00:05:55.220
OK.

00:05:55.260 --> 00:05:58.170
So let's keep our image a source

00:06:01.460 --> 00:06:04.200
and let's play some text in the heading

00:06:07.890 --> 00:06:12.720
London and some text in the paragraph.

00:06:12.720 --> 00:06:15.980
Sales and Marketing Team.

00:06:17.610 --> 00:06:18.940
OK.

00:06:20.040 --> 00:06:23.490
And let's do the same thing for the next element's

00:06:53.240 --> 00:06:58.890
OK it's save and refresh.

00:07:00.390 --> 00:07:00.850
OK.

00:07:01.020 --> 00:07:04.940
Now it looks perfect right.

00:07:05.070 --> 00:07:10.330
All right so in the next video we're going to get used to Jaycar immobile form inputs