WEBVTT

00:00:07.260 --> 00:00:13.380
In this video you're going to learn how to create pages dialogues and transitions in indecorum immobile

00:00:13.380 --> 00:00:14.270
.

00:00:14.280 --> 00:00:19.920
So first of all we're going to create our first page page one and replace a couple of links inside this

00:00:19.920 --> 00:00:23.100
page and we'll learn how to solve them as basons.

00:00:23.280 --> 00:00:30.390
Also we learn how to add some theming to our elements using the decoding immobile themes.

00:00:30.390 --> 00:00:35.150
So the first link is going to take us to another page that will create which is Page 2.

00:00:35.900 --> 00:00:36.770
OK.

00:00:37.020 --> 00:00:41.750
Inside Baichu you can have another link taking us to page 1.

00:00:42.240 --> 00:00:47.110
So the other link in page 1 will open a dialogue like this.

00:00:47.760 --> 00:00:51.240
So we learn also how to create these transitions.

00:00:51.240 --> 00:00:58.890
So for example when we go to page two from page one we have a flip transition from page 1 2 page to

00:00:59.400 --> 00:01:00.950
have a proper transition.

00:01:01.160 --> 00:01:04.240
And when we open the dialogue we have a slight transition.

00:01:04.590 --> 00:01:08.020
OK so we're going to cover all this in this video.

00:01:08.400 --> 00:01:24.770
So first of all let's change the name of our file introduction to one pages dialog's transitions.

00:01:25.680 --> 00:01:32.970
And also to the title two pages dialog's transitions.

00:01:34.420 --> 00:01:35.480
OK.

00:01:35.940 --> 00:01:47.120
So first of all to create a page we need to create a div which has goals a data role page.

00:01:47.400 --> 00:01:49.310
OK so let's go ahead and do this.

00:01:49.860 --> 00:01:59.760
So when you create a div and give it a data as abuse which is data roll and said that to page OK we're

00:01:59.760 --> 00:02:09.740
going to give us an idea that we can link this page to link elements.

00:02:10.950 --> 00:02:15.290
And inside this page we are going to have three elements.

00:02:15.570 --> 00:02:28.530
So you can have a header a content element and a footer so the header is a div with a date are all set

00:02:28.530 --> 00:02:31.910
to head.

00:02:35.100 --> 00:02:38.520
The content of the page is a div

00:02:42.120 --> 00:02:51.600
which has got a data roll or roll set to main.

00:02:52.630 --> 00:03:05.450
OK and a class you I concert's the footer is an element of these are all footer.

00:03:06.360 --> 00:03:10.180
OK so now let's add some text inside each of these elements.

00:03:10.470 --> 00:03:12.310
So in the header That's right.

00:03:12.330 --> 00:03:12.870
Page 1

00:03:15.900 --> 00:03:17.880
in the content.

00:03:18.740 --> 00:03:20.800
This creates a paragraph window

00:03:24.260 --> 00:03:38.070
and in the footer let's just write a heading for the save and go to the live preview.

00:03:41.110 --> 00:03:46.890
OK so now we can see our header content and footer

00:03:50.510 --> 00:03:52.260
to censor X in the header.

00:03:52.350 --> 00:03:57.490
We can displace is inside a heading like this.

00:03:57.820 --> 00:04:01.270
Now if we save and refresh that censored.

00:04:01.380 --> 00:04:02.480
OK.

00:04:03.390 --> 00:04:08.610
All right so let's have a look at our final page and see what we need to do.

00:04:08.610 --> 00:04:14.490
So we want the photos to be fixed at the bottom of the page so to do that we're going to add another

00:04:14.760 --> 00:04:18.880
these attributes of the user which is data position.

00:04:18.920 --> 00:04:22.350
We're going to say that to fixed.

00:04:22.780 --> 00:04:27.780
So if we save a refresh of water now is fixed on the bottom.

00:04:28.150 --> 00:04:29.310
OK.

00:04:29.910 --> 00:04:38.430
Now let's go ahead and create the first link to the second page.

00:04:39.840 --> 00:04:43.020
So we're going to create a link

00:04:46.420 --> 00:04:51.820
pay and let's pay some sex in the go to page two.

00:04:53.790 --> 00:05:01.030
OK so to say the link is a button we're going to give is a data attributes.

00:05:01.100 --> 00:05:04.820
These are all laws we said to button.

00:05:05.170 --> 00:05:06.820
OK.

00:05:06.860 --> 00:05:10.170
So let's save unrefreshed.

00:05:11.750 --> 00:05:19.930
OK now we can see a button now to link these elements to our second page.

00:05:19.940 --> 00:05:26.360
We're going to use a ref and it's going to go to our elements page too.

00:05:26.450 --> 00:05:28.790
So we're going to create space to give you an idea.

00:05:28.850 --> 00:05:33.360
Baichu OK so the ATF is going to be page two.

00:05:33.610 --> 00:05:34.550
OK.

00:05:34.580 --> 00:05:36.410
So let's copy this

00:05:39.730 --> 00:05:41.720
and create our second page

00:05:49.940 --> 00:06:00.440
as Page 2 the first one is page 1.

00:06:06.050 --> 00:06:12.440
That's the end of page 1 and that's the end of page 2.

00:06:14.650 --> 00:06:15.190
OK.

00:06:15.620 --> 00:06:18.330
So let's change the content inside.

00:06:18.380 --> 00:06:29.780
So the heading a space to K and we're going to have a link inside page 2 saying Go to page 1

00:06:32.680 --> 00:06:36.770
and it's going to link to page 1.

00:06:37.340 --> 00:06:41.220
The idea of page 2 is going to be page 2.

00:06:41.450 --> 00:06:44.400
Now let's save and refresh.

00:06:45.740 --> 00:06:49.720
So if we click on the link on page 1 we go to page 2.

00:06:49.940 --> 00:06:53.620
And if we click on the linking page do we go back to page 1.

00:06:53.980 --> 00:06:55.480
All right.

00:06:55.880 --> 00:06:59.570
Now let's add some styling to page two.

00:06:59.720 --> 00:07:02.740
OK so you get to use AJ equerry mobile theme.

00:07:03.110 --> 00:07:12.340
So to do that we're going to go to the page elements and odd and not abuse data or theme.

00:07:12.920 --> 00:07:19.940
So we cause a couple of choices here so we can sell this to a or b.

00:07:20.170 --> 00:07:26.100
So he's going to be a light theme and B he's going to be a dark theme.

00:07:26.300 --> 00:07:35.770
So let's go for B save go to page 2 and then we can see the dark theme.

00:07:36.140 --> 00:07:37.490
If you go to page 1

00:07:40.880 --> 00:07:49.290
we can set the theme to a which is the default theme.

00:07:50.270 --> 00:07:55.460
OK now let's add transitions.

00:07:56.000 --> 00:08:00.720
So when we go from page to page 1 we can see a flip transition.

00:08:00.720 --> 00:08:03.940
And if we go back we see a pop transition.

00:08:03.950 --> 00:08:08.610
So to add a transition we're going to go to the link.

00:08:09.050 --> 00:08:10.540
OK.

00:08:10.760 --> 00:08:11.710
And odd.

00:08:11.840 --> 00:08:14.960
A data transition attributes.

00:08:16.770 --> 00:08:30.440
So from page 1 to page we want a flip transition and from page to page 1 we want a pop transition.

00:08:30.790 --> 00:08:35.510
We save and refresh OK.

00:08:35.840 --> 00:08:39.910
They go bleep tradition and a pop tradition.

00:08:39.960 --> 00:08:41.740
All right.

00:08:43.610 --> 00:08:48.900
Now in page one we're going to create another link to open a dialogue.

00:08:49.490 --> 00:08:51.140
So this copy the first link

00:08:54.600 --> 00:08:57.930
we're looking at was Page 1.

00:09:00.320 --> 00:09:07.220
So this is going to be the dialogue link.

00:09:08.840 --> 00:09:09.980
OK.

00:09:10.610 --> 00:09:15.620
So let's change the text inside to open dialogue.

00:09:17.970 --> 00:09:18.600
OK.

00:09:19.190 --> 00:09:25.310
And let's just the transition to a slight transition

00:09:28.060 --> 00:09:30.140
now creates a dialogue link.

00:09:30.140 --> 00:09:38.300
We are going to need another this attribute which is data relationship which we will set to dialogue

00:09:38.330 --> 00:09:38.960
.

00:09:40.090 --> 00:09:41.000
OK.

00:09:41.790 --> 00:09:44.320
The ATF attributes.

00:09:44.870 --> 00:09:52.450
We are going to set it to the page of file corresponding to the dialogue.

00:09:52.490 --> 00:09:56.570
So you can to create a file and call it dialogue.

00:09:56.950 --> 00:09:59.990
Those HBL.

00:10:00.590 --> 00:10:06.690
And when we click on the link we are going to open that file inside the dialog.

00:10:06.740 --> 00:10:12.560
So this creates this file dialog those ational.

00:10:13.520 --> 00:10:18.840
So it's going to be the same structure as first voile.

00:10:19.000 --> 00:10:22.920
Change the title to dialog.

00:10:24.860 --> 00:10:26.930
And let's empty the body

00:10:29.620 --> 00:10:31.590
.

00:10:32.180 --> 00:10:44.810
So rather than creating a normal page we are going to create a div of data or all dialogue.

00:10:49.310 --> 00:10:54.290
So inside the dialog we're going to have a couple of elements so you're going to have the header and

00:10:54.290 --> 00:10:55.360
the content.

00:10:55.670 --> 00:11:03.200
So the other is going to be a div of data or role header.

00:11:04.790 --> 00:11:05.440
OK.

00:11:05.510 --> 00:11:07.730
Let's place a heading inside

00:11:10.870 --> 00:11:12.780
saying dialogue.

00:11:14.350 --> 00:11:19.780
OK.

00:11:20.360 --> 00:11:29.630
The content is going to be an element of data or all content.

00:11:35.180 --> 00:11:35.480
OK.

00:11:35.480 --> 00:11:39.940
And let's place a heading and a paragraph inside and a link.

00:11:39.980 --> 00:11:40.340
So

00:11:44.510 --> 00:11:45.350
inside the heading

00:11:49.370 --> 00:11:53.540
is corpulence and then a paragraph

00:11:57.740 --> 00:11:59.930
then a link

00:12:02.830 --> 00:12:06.020
.

00:12:06.390 --> 00:12:07.280
OK.

00:12:07.760 --> 00:12:11.750
So the link is going to take a few attributes here.

00:12:11.930 --> 00:12:17.330
So we're going to give it a data all button to sign it as a button.

00:12:18.860 --> 00:12:19.140
OK.

00:12:19.160 --> 00:12:25.160
Also we're going to give it's a data relationship saying back.

00:12:25.260 --> 00:12:26.240
OK.

00:12:26.480 --> 00:12:33.040
Which means that it will it will take us back to the page like that's OK.

00:12:34.280 --> 00:12:35.840
And two stylus.

00:12:35.960 --> 00:12:39.100
We're going to use the theme be.

00:12:39.250 --> 00:12:39.550
OK.

00:12:39.560 --> 00:12:51.560
So that's a theme the no list save and refresh.

00:12:51.680 --> 00:12:59.600
So now if we go to if you open our dialogue and see dialogue there we can see the slide transition no

00:12:59.620 --> 00:13:04.190
religious style the open dialog button using the theme be

00:13:14.150 --> 00:13:20.040
like that's if we save and refresh we can see our signing.

00:13:21.130 --> 00:13:21.810
All right.

00:13:22.250 --> 00:13:27.230
So in the next video we are going to learn how to create enough bars in Jaycar immobile