WEBVTT 00:00:07.140 --> 00:00:10.460 In this video we are going to add more content to our page. 00:00:10.470 --> 00:00:17.220 Basically we are going to add a new row consisting of three columns inside each column. 00:00:17.220 --> 00:00:22.400 We are going to have a nice logo followed by some centered text. 00:00:22.780 --> 00:00:23.290 OK. 00:00:23.610 --> 00:00:27.130 So let's go ahead and create this new era. 00:00:27.420 --> 00:00:34.720 So we're going to go to our Abaris page from dashboard pages and then click on odd Parow. 00:00:35.520 --> 00:00:40.290 So we want a row consisting of new columns we're going to see the number of columns to three. 00:00:40.470 --> 00:00:40.770 OK. 00:00:40.780 --> 00:00:43.780 And then we're going to click on insets. 00:00:43.910 --> 00:00:52.420 So now of course our role there let's click on the first column and add a visual at it. 00:00:53.220 --> 00:00:54.170 OK. 00:00:54.330 --> 00:00:58.450 So inside the visual editor is click on edits. 00:01:00.320 --> 00:01:00.740 OK. 00:01:00.780 --> 00:01:05.020 And now we are ready to add any components inside our visual editor. 00:01:05.520 --> 00:01:10.430 So first we're going to add a logo which which corresponds to a picture. 00:01:10.890 --> 00:01:13.380 So this creates our logo for us. 00:01:13.440 --> 00:01:18.230 So we're going to use a website called Logo maker dot com. 00:01:18.540 --> 00:01:20.370 Just my misspelling there is no e. 00:01:20.600 --> 00:01:21.250 OK. 00:01:21.470 --> 00:01:22.740 OK. 00:01:22.770 --> 00:01:31.210 So our first logo is going to correspond to a portfolio logo. 00:01:31.540 --> 00:01:32.770 OK. 00:01:33.210 --> 00:01:38.020 So let's pick up a nice logo from here. 00:01:38.400 --> 00:01:39.950 We're going to choose this one. 00:01:40.590 --> 00:01:41.090 OK. 00:01:41.340 --> 00:01:48.010 And you can change the color of our logo using our nice blue color. 00:01:48.030 --> 00:01:52.600 So let's use our colleagues here to add on this. 00:01:53.100 --> 00:01:54.450 Click on this color. 00:01:54.450 --> 00:02:03.480 Another color code has been paste copied to our clipboard and now it is spacey but without them asking 00:02:03.530 --> 00:02:04.390 . 00:02:04.990 --> 00:02:09.830 And if we click on the letter can see our nice blue color there. 00:02:10.130 --> 00:02:10.660 OK. 00:02:10.920 --> 00:02:15.550 So let's save our logo by clicking on save logo. 00:02:16.550 --> 00:02:18.000 OK. 00:02:18.430 --> 00:02:20.500 Now our logo has been saved. 00:02:20.820 --> 00:02:28.260 And we will need to copy the credits corresponding to this logo on them. 00:02:28.300 --> 00:02:30.030 It's our Web page. 00:02:30.030 --> 00:02:32.800 So by clicking on this button. 00:02:33.630 --> 00:02:37.510 Ok the credits you can see that they are being copied. 00:02:37.560 --> 00:02:38.720 OK. 00:02:38.730 --> 00:02:40.500 Are we're going to do. 00:02:41.830 --> 00:02:43.020 We are going to 00:02:46.740 --> 00:02:53.730 update our eyeballs page and then go to our credits page. 00:02:55.440 --> 00:03:00.680 OK. 00:03:00.690 --> 00:03:12.060 First of all we are going to disable comments from this page Kate and then 00:03:15.060 --> 00:03:17.280 we are going to paste the credits there. 00:03:17.880 --> 00:03:18.200 OK. 00:03:18.240 --> 00:03:20.810 And then click on updates. 00:03:21.970 --> 00:03:23.020 OK. 00:03:23.740 --> 00:03:26.790 Now we go to our greatest page 00:03:27.420 --> 00:03:32.560 . 00:03:32.560 --> 00:03:35.380 We can see the critics there. 00:03:35.400 --> 00:03:37.400 OK great. 00:03:37.410 --> 00:03:42.000 So let's get another logo. 00:03:42.060 --> 00:03:45.690 First time we're going to look for a dollar sign logo. 00:03:45.780 --> 00:03:46.980 So we're going to look for money 00:03:53.250 --> 00:03:53.720 for you. 00:03:53.720 --> 00:03:54.690 Let's just go back 00:03:58.500 --> 00:04:00.920 click on to kind of us earnestly this month. 00:04:00.950 --> 00:04:07.880 Now let's look for money. 00:04:12.120 --> 00:04:13.600 Let's pick up this one. 00:04:14.100 --> 00:04:15.290 OK. 00:04:15.990 --> 00:04:18.150 Let's change the color again 00:04:25.050 --> 00:04:31.660 using the color Zilah. 00:04:33.890 --> 00:04:35.830 You don't need the number sign. 00:04:35.850 --> 00:04:36.150 OK. 00:04:36.160 --> 00:04:39.710 And that's actually quite under the weather right now. 00:04:39.720 --> 00:04:41.470 And let's save it. 00:04:41.590 --> 00:04:43.580 OK. 00:04:44.370 --> 00:04:53.250 Let's click on copy credits and let's go back to our Cray's page and creates a great 00:04:55.910 --> 00:04:57.290 . 00:04:58.360 --> 00:05:04.610 Now let's look for a third logo. 00:05:04.610 --> 00:05:06.350 This time we're going to look for contacts 00:05:09.060 --> 00:05:11.870 and I'm going to I'm going to pick this one. 00:05:12.450 --> 00:05:15.320 OK. 00:05:17.830 --> 00:05:19.310 When did the previous one 00:05:22.840 --> 00:05:27.320 save our logo before the Radley's just change the color. 00:05:28.670 --> 00:05:30.640 Again I'm going to use the colors. 00:05:31.220 --> 00:05:36.160 The color now is change the color. 00:05:37.790 --> 00:05:45.200 Click on an answer and then save our label on it. 00:05:45.290 --> 00:05:51.680 Let's copy the credits again and go to our graves page and paste the greatest that. 00:05:52.280 --> 00:05:52.760 OK. 00:05:53.110 --> 00:05:58.910 Let's click on our dates and our credits page should have 00:06:02.240 --> 00:06:03.860 all the credits. 00:06:04.820 --> 00:06:05.980 OK. 00:06:06.950 --> 00:06:07.450 All right. 00:06:07.580 --> 00:06:13.990 Now let's go back to our avows page from pages there abouts. 00:06:14.420 --> 00:06:16.680 OK. 00:06:16.730 --> 00:06:18.790 Let's go to our first caller. 00:06:19.100 --> 00:06:23.730 An inside the visual area so we click on edits. 00:06:23.870 --> 00:06:27.620 Now let's add our logo our first logo. 00:06:27.770 --> 00:06:29.680 OK so we're going to click on our media 00:06:32.780 --> 00:06:35.660 and we're going to need to upload files. 00:06:36.080 --> 00:06:43.170 So let's drop all our logo is there from our stop. 00:06:46.430 --> 00:06:47.710 OK. 00:06:49.750 --> 00:07:00.630 So we're going to select the first one when I click on insert into page. 00:07:01.070 --> 00:07:05.930 Ok then I'm going to censor our logo. 00:07:05.930 --> 00:07:07.460 All right. 00:07:09.020 --> 00:07:12.560 OK now let's reset the line and just add some text. 00:07:12.560 --> 00:07:18.660 Gay rights our portfolio. 00:07:20.220 --> 00:07:20.740 OK. 00:07:20.910 --> 00:07:26.840 And I'm going to make this a head scarf. 00:07:27.170 --> 00:07:28.890 Three for example. 00:07:28.960 --> 00:07:30.410 OK. 00:07:30.750 --> 00:07:34.440 And let's add some more sex there for example. 00:07:34.730 --> 00:07:35.600 We are proud 00:07:38.180 --> 00:07:46.220 of designed and developed web sites for companies 00:07:49.010 --> 00:07:51.570 around the world. 00:07:51.620 --> 00:07:59.150 We do our best to satisfy our customers 00:08:02.150 --> 00:08:08.190 with outstanding quality of work. 00:08:09.310 --> 00:08:09.820 OK. 00:08:10.010 --> 00:08:14.210 And let's answer this as well. 00:08:14.300 --> 00:08:18.820 Now let's click on Dan of dates. 00:08:19.940 --> 00:08:23.640 OK let's have a look at our page. 00:08:23.700 --> 00:08:24.230 Great. 00:08:24.470 --> 00:08:30.740 And you can see our first column there with the logo header and some standard text. 00:08:31.060 --> 00:08:33.420 All right. 00:08:33.800 --> 00:08:34.240 OK. 00:08:34.340 --> 00:08:43.220 So let's make sure that our ROE is fairly stressed stretched so let's go back to our page just selects 00:08:44.060 --> 00:08:44.790 the row 00:08:47.720 --> 00:08:50.020 OK. 00:08:51.380 --> 00:08:52.610 Click on edits row 00:08:55.610 --> 00:09:01.570 layouts and change the out to for with stretched. 00:09:02.090 --> 00:09:07.920 OK let's click on updates. 00:09:08.010 --> 00:09:19.980 So now if we duplicate this visual editor and replace the same contents inside the other columns that 00:09:20.000 --> 00:09:20.780 are updates 00:09:24.320 --> 00:09:28.970 they can see how our page is going to look like or the end. 00:09:29.180 --> 00:09:30.200 We have all the 00:09:33.980 --> 00:09:36.930 other logos and content. 00:09:37.480 --> 00:09:38.260 OK. 00:09:38.630 --> 00:09:44.590 So let's go ahead and change these logos and these text. 00:09:44.930 --> 00:09:48.500 So let's go to the second column. 00:09:49.970 --> 00:09:51.470 So here is the list this logo 00:09:54.500 --> 00:09:54.710 and 00:09:57.740 --> 00:09:59.450 this one. 00:10:00.700 --> 00:10:02.830 OK. 00:10:04.580 --> 00:10:08.540 I'm just going to change this header 00:10:11.610 --> 00:10:15.500 to three quotes OK. 00:10:16.040 --> 00:10:19.020 And also I'm going to change this text. 00:10:20.080 --> 00:10:20.920 OK. 00:10:20.960 --> 00:10:25.970 And I just click on done this goes the last column and click on edits. 00:10:26.180 --> 00:10:30.730 OK let's change the logo. 00:10:30.730 --> 00:10:36.790 Right click on media and select this one. 00:10:36.950 --> 00:10:42.310 And also change the header to contact us. 00:10:43.010 --> 00:10:47.230 And also let's change this text. 00:10:47.930 --> 00:10:53.700 Click on that and then updates. 00:10:55.270 --> 00:11:03.050 And now if we look at our page very refreshes then we can see our new content there so we can see our 00:11:03.050 --> 00:11:08.670 three columns with logos headers and text. 00:11:09.380 --> 00:11:14.230 But we can notice very clearly that our pictures are not aligned. 00:11:14.460 --> 00:11:17.520 And the reason why is because they don't have the same heights. 00:11:18.110 --> 00:11:27.170 So what we need to do we need to go to these pictures and rescale them okay so that we have all the 00:11:27.170 --> 00:11:29.080 same heights. 00:11:29.180 --> 00:11:30.910 So it goes to our page. 00:11:31.430 --> 00:11:34.940 It's how we look at the first picture. 00:11:35.180 --> 00:11:36.020 OK. 00:11:36.020 --> 00:11:46.130 So if you click on the picture and then go to edits OK then we can see that's the scale of this picture 00:11:46.130 --> 00:11:48.680 is 200 by Henry 61. 00:11:48.710 --> 00:11:49.000 OK. 00:11:49.010 --> 00:11:51.930 So that's the height of 61. 00:11:53.140 --> 00:11:55.460 And if you go to the second picture 00:11:59.450 --> 00:12:04.080 click on edits you'll see that this one height is 56. 00:12:04.460 --> 00:12:06.410 OK the last one 00:12:10.310 --> 00:12:11.480 the height is 00:12:14.050 --> 00:12:15.130 191. 00:12:15.390 --> 00:12:16.460 OK. 00:12:17.090 --> 00:12:19.790 So we're going to rescaled these pictures. 00:12:19.940 --> 00:12:21.080 OK. 00:12:21.700 --> 00:12:26.530 We're going to edit the original to the same height. 00:12:28.760 --> 00:12:36.440 So if we click on edits or you know to destroy first to go for a height that is higher than the original 00:12:36.440 --> 00:12:41.870 height then it's not going to work OK. 00:12:42.130 --> 00:12:46.360 So if we scale it's it's going to go back to the original height. 00:12:46.630 --> 00:12:53.310 OK so we're going to need to go to the smallest height between these three pictures. 00:12:53.360 --> 00:12:53.840 OK. 00:12:53.840 --> 00:12:58.850 So you got to go two hundred fifty. 00:13:01.020 --> 00:13:07.220 It's updates and. 00:13:07.430 --> 00:13:11.230 Let's go to the other one. 00:13:11.300 --> 00:13:12.740 Do the same thing. 00:13:12.830 --> 00:13:15.590 So it is or you know 250 00:13:18.230 --> 00:13:18.940 scale 00:13:21.580 --> 00:13:24.700 of day it's done. 00:13:25.090 --> 00:13:41.400 And the same thing here is what areas or you know 2030 and scale back updates and then Okay. 00:13:41.450 --> 00:13:49.910 So if we update our page refresh and then we can see that our page looks really nice and everything 00:13:49.940 --> 00:13:51.150 is aligned this time. 00:13:51.290 --> 00:13:51.840 Okay. 00:13:52.070 --> 00:13:55.930 In the next video we are going to add a button at the end of each column. 00:13:56.660 --> 00:14:03.820 With some text and icons.