WEBVTT 00:00:07.650 --> 00:00:12.960 In this video we are going to add a button at the end of each column and then we're going to play some 00:00:12.960 --> 00:00:16.830 text and a nice icon inside each button. 00:00:16.860 --> 00:00:19.820 So let's go ahead and start with the first column. 00:00:20.070 --> 00:00:25.560 So we're going to select the column first and then we're going to click on Add widgets and we're going 00:00:25.560 --> 00:00:28.590 to choose the site's origin button. 00:00:29.480 --> 00:00:29.820 OK. 00:00:29.830 --> 00:00:40.020 And of course our button that lists duplicated the button twice and a button to the second column and 00:00:40.020 --> 00:00:42.360 another button to the third column. 00:00:42.370 --> 00:00:46.710 And let's make sure that our buttons are at the end of each column. 00:00:47.670 --> 00:00:48.250 OK. 00:00:48.810 --> 00:00:56.670 So let's add it's the first button by clicking on edits and now we can add some text to our button. 00:00:56.820 --> 00:01:01.810 We can add a designation you RL If you want the button to take us to a different page. 00:01:01.980 --> 00:01:04.620 And also we can like on if you want. 00:01:05.190 --> 00:01:05.690 OK. 00:01:05.790 --> 00:01:07.390 So let's start with Tex. 00:01:07.410 --> 00:01:10.370 So I'm going to write some text there. 00:01:10.680 --> 00:01:17.770 View our portfolio. 00:01:19.560 --> 00:01:20.370 OK. 00:01:20.910 --> 00:01:24.080 And for now I'm going to leave the designation you r l MC. 00:01:24.180 --> 00:01:30.600 But later on in the project section of the scores we are going to add more pages to these Web sites 00:01:30.610 --> 00:01:30.760 . 00:01:30.890 --> 00:01:31.660 OK. 00:01:32.130 --> 00:01:38.430 And one of those pages is going to be a portfolio page where we're going to present all the Web sites 00:01:38.490 --> 00:01:42.490 that we'd have built in the projects section of the scores. 00:01:43.050 --> 00:01:44.760 So for now we'll leave this empty. 00:01:44.780 --> 00:01:49.280 And then for the icon let's go for this icon for example. 00:01:49.290 --> 00:01:51.490 Now let's click on done. 00:01:52.110 --> 00:01:54.200 OK. 00:01:54.940 --> 00:01:58.590 And if we updates and refresh the page 00:02:05.910 --> 00:02:09.130 we can see as he recalls our first Busson there. 00:02:09.180 --> 00:02:09.680 OK. 00:02:09.810 --> 00:02:13.610 So let's go ahead and it is the other two buttons. 00:02:14.030 --> 00:02:16.680 Let's go to the second button and click on edits 00:02:16.680 --> 00:02:23.310 . 00:02:25.350 --> 00:02:33.000 OK so that's some text there requests a free quote. 00:02:33.380 --> 00:02:34.250 No. 00:02:34.740 --> 00:02:36.250 OK. 00:02:37.490 --> 00:02:39.150 Again leave this nation you are. 00:02:39.190 --> 00:02:39.640 MC 00:02:42.350 --> 00:02:43.560 And the icon 00:02:48.060 --> 00:02:52.260 is Pick-Up nice icon for this. 00:02:52.260 --> 00:02:53.720 Let's use this one. 00:02:54.160 --> 00:02:55.730 And click on done. 00:02:55.770 --> 00:03:00.970 And finally let's go to the third button. 00:03:01.230 --> 00:03:08.650 Similarly on some text there gets in touch today. 00:03:09.510 --> 00:03:11.600 OK. 00:03:11.610 --> 00:03:16.390 And this MUSSEN is going to take us to the contacts page. 00:03:16.580 --> 00:03:19.180 OK. 00:03:19.410 --> 00:03:26.200 Which is located in the root directory of our web sites for Slash and then contact. 00:03:26.820 --> 00:03:27.640 OK. 00:03:28.210 --> 00:03:37.340 And for the icon they choose this one an envelope and it's click on done and updates. 00:03:37.350 --> 00:03:43.680 Now let's refresh our page and you can see our three buttons there. 00:03:43.740 --> 00:03:46.950 OK. 00:03:46.950 --> 00:03:47.610 All right. 00:03:47.610 --> 00:03:58.280 Now let's reduce the width of our page and see what happens. 00:03:58.320 --> 00:04:04.620 You can already see that the buttons are not fully aligned. 00:04:05.010 --> 00:04:08.810 OK. 00:04:10.870 --> 00:04:16.170 OK for a full width we can see that they are aligned but once we're to do is we reduce the with a little 00:04:16.170 --> 00:04:20.990 bit then we are not aligned as we'd expect. 00:04:21.240 --> 00:04:29.000 OK so we need to do something to make sure that our buttons are aligned. 00:04:29.130 --> 00:04:32.630 OK. 00:04:32.920 --> 00:04:38.520 And obviously when the with these two small the elements they are stacked and we have no issues with 00:04:38.520 --> 00:04:39.860 the design. 00:04:40.030 --> 00:04:42.000 OK. 00:04:42.600 --> 00:04:51.540 All right so the reason why the buttons are not aligned all the time is because the heights of the elements 00:04:51.540 --> 00:05:00.300 preceding the button inside each column has got a Height's which will change depending depending on 00:05:00.300 --> 00:05:02.010 the width of the page. 00:05:02.010 --> 00:05:09.240 OK so what we're going to do to make sure that's the height of the elements preceding the buttons inside 00:05:09.240 --> 00:05:10.320 the columns. 00:05:10.320 --> 00:05:11.300 Are all the same. 00:05:11.490 --> 00:05:18.000 OK so we're talking about the Eichorn with this header and paragraph. 00:05:19.200 --> 00:05:23.370 So we are going to do this using some CSSA. 00:05:23.610 --> 00:05:25.580 OK. 00:05:26.790 --> 00:05:28.020 So it starts with the first one 00:05:28.020 --> 00:05:34.500 . 00:05:34.500 --> 00:05:45.760 So we are going to OD a selector to these elements by going to attributes and let's name our class. 00:05:45.810 --> 00:05:47.850 I can't contain. 00:05:48.910 --> 00:05:57.780 OK let's copy this control C so that we use it with the other elements and then let's go to the second 00:05:57.780 --> 00:06:02.810 one and use the same class. 00:06:03.180 --> 00:06:05.020 OK. 00:06:05.070 --> 00:06:09.400 And the third one I need to be using the same class as well. 00:06:09.740 --> 00:06:14.320 And then they notice frequent updates. 00:06:14.350 --> 00:06:22.980 Now are you going to go to appearance theme options and then custom siestas. 00:06:23.430 --> 00:06:26.170 And now we are going to tile our class. 00:06:26.280 --> 00:06:29.980 So to select the class are going to use dots followed by the name of the class. 00:06:30.240 --> 00:06:30.970 OK. 00:06:31.350 --> 00:06:36.500 And then we are going to place our styling inside curly brackets. 00:06:36.540 --> 00:06:42.920 So we want the heights to be for example 350 pixels. 00:06:42.940 --> 00:06:47.600 OK let's save this for now if we refresh our page 00:06:50.170 --> 00:06:51.260 . 00:06:52.470 --> 00:06:59.740 So you can see those the heights of each of these elements now is 350 pixels. 00:06:59.970 --> 00:07:02.160 And if we reduce the width of our page 00:07:06.330 --> 00:07:13.750 we can see that our buttons are aligned all the time. 00:07:14.810 --> 00:07:15.030 OK 00:07:15.040 --> 00:07:26.420 .