WEBVTT 00:00:08.550 --> 00:00:15.090 In this video we are going to start adding content to our page using the plugins we have installed so 00:00:15.090 --> 00:00:16.460 far. 00:00:16.650 --> 00:00:21.690 So before adding any content let's make a few changes to our page. 00:00:21.690 --> 00:00:25.680 So first let's get rid of the header image. 00:00:25.680 --> 00:00:31.130 So let's go back to our dashboard and go to appearance customize. 00:00:31.200 --> 00:00:36.700 So if you remember there is a section inside the Customize menu had an image. 00:00:36.810 --> 00:00:43.850 So if you click on it and then click on the hide image button then the image is going to disappear. 00:00:44.150 --> 00:00:44.570 OK. 00:00:44.820 --> 00:00:51.960 So if you save and publish and refresh the page you can see that's our header image has now disappeared 00:00:51.960 --> 00:00:52.970 . 00:00:53.010 --> 00:00:53.800 All right. 00:00:54.060 --> 00:00:57.740 Next this disable comments from our page. 00:00:58.050 --> 00:01:07.710 So to do this let's go back to our dashboard and then go to pages and then access our eyeballs page 00:01:09.360 --> 00:01:10.240 . 00:01:10.410 --> 00:01:14.400 The top of the page you will see a type screen options. 00:01:14.400 --> 00:01:19.380 OK you just click on that and then you will see a few checkboxes there. 00:01:19.380 --> 00:01:26.750 So if you check discussion and then you scroll down then you'll see a new box that discussion. 00:01:26.960 --> 00:01:27.560 OK. 00:01:27.630 --> 00:01:33.290 And if you want to disable comments you just need to click on or uncheck allow comments. 00:01:33.750 --> 00:01:46.050 And now if we update and then refresh the page we'll see those comments now are disabled in our page 00:01:46.080 --> 00:01:46.500 . 00:01:46.870 --> 00:01:51.980 OK so now we are ready to start adding some content. 00:01:52.020 --> 00:01:52.560 OK. 00:01:52.770 --> 00:01:55.790 So let's go back to our page. 00:01:55.830 --> 00:01:58.920 You will notice that now we've got a new tab there. 00:01:58.980 --> 00:02:00.000 Page Builder. 00:02:00.110 --> 00:02:00.530 OK. 00:02:00.690 --> 00:02:04.290 Which came with the plugins we have installed earlier. 00:02:04.290 --> 00:02:13.100 So before we click on the tab let's just delete all the contents inside our page for now. 00:02:13.320 --> 00:02:21.330 And now if we click on the page builder you will see that we've got a panel there with a few buttons 00:02:21.360 --> 00:02:21.530 . 00:02:21.650 --> 00:02:22.130 OK. 00:02:22.250 --> 00:02:26.670 Are you going to be using some of these buttons to add content to our page. 00:02:26.760 --> 00:02:35.520 So if you click on our widgets you'll see a few widgets there including the ones which are already embedded 00:02:35.820 --> 00:02:42.710 in our theme and also some other widgets that were installed with some plugins like the site's origin 00:02:42.750 --> 00:02:43.790 plugin. 00:02:43.800 --> 00:02:44.670 OK. 00:02:44.790 --> 00:02:45.310 All right. 00:02:45.420 --> 00:02:46.960 Let's close this. 00:02:47.350 --> 00:02:50.170 And now let's move to the next button. 00:02:50.520 --> 00:02:58.170 So if you click on it we will see that this button will allow us to odd rows to our page just like we 00:02:58.170 --> 00:02:59.530 did with Bush. 00:03:00.420 --> 00:03:06.420 So we can either go and we can choose the number of columns inside our show. 00:03:06.510 --> 00:03:13.020 So by default all the columns we have the same with but we can change the width of our columns by clicking 00:03:13.020 --> 00:03:17.940 on the with value and change that to any value you want. 00:03:18.090 --> 00:03:23.880 And once we change the value of the width of one column then all the other columns are going to share 00:03:24.090 --> 00:03:25.510 the remaining with. 00:03:26.130 --> 00:03:27.910 OK. 00:03:27.930 --> 00:03:29.270 So it is close that. 00:03:29.640 --> 00:03:34.470 So now we are going to add a new road to our page. 00:03:34.560 --> 00:03:36.090 OK. 00:03:36.090 --> 00:03:38.820 So we're going to add row and 00:03:42.750 --> 00:03:45.170 we're going to go for one column only. 00:03:46.080 --> 00:03:46.920 OK. 00:03:46.920 --> 00:03:51.770 So inside this or are we going to have a header for our page. 00:03:52.140 --> 00:03:54.030 So let's insert. 00:03:55.020 --> 00:03:55.290 OK. 00:03:55.290 --> 00:04:05.520 So now we cause our row there and if we click on it we can add a widget to our row and this time I'm 00:04:05.520 --> 00:04:13.650 going to choose the visual edits widgets OK so that we can add some text to our own and other and other 00:04:13.650 --> 00:04:14.670 components. 00:04:16.320 --> 00:04:23.940 So inside our row now of course the visual edits are widgets and if you want to add content to the widgets 00:04:24.120 --> 00:04:28.500 let's just click on edits always. 00:04:28.650 --> 00:04:34.640 So now we can see a visual editor here. 00:04:34.800 --> 00:04:36.590 It's like a word processor. 00:04:36.690 --> 00:04:45.870 Or we can text we can add links OK and we can add other things like Contax forms the Google map and 00:04:45.870 --> 00:04:46.630 so on. 00:04:47.580 --> 00:04:50.590 And you can always switch the text version. 00:04:50.760 --> 00:04:51.730 OK. 00:04:52.320 --> 00:04:55.530 Which is going to show some a sample code. 00:04:55.620 --> 00:04:57.380 So let's go back to the visual version. 00:04:57.600 --> 00:05:09.120 So if we write some text there for example this is some text then we can style our text so we can make 00:05:09.120 --> 00:05:10.670 it bold. 00:05:10.690 --> 00:05:13.390 We can also align it's if you want to. 00:05:13.680 --> 00:05:14.750 OK. 00:05:14.760 --> 00:05:21.990 And if you click on the text you will see the corresponding ASML code of power text. 00:05:22.340 --> 00:05:23.630 OK. 00:05:26.710 --> 00:05:37.870 That also if we save an updates we can see the results on our page. 00:05:39.920 --> 00:05:43.880 All right so let's go back to the editor. 00:05:45.500 --> 00:05:52.060 So let's create a title or a header for our page. 00:05:52.310 --> 00:05:58.300 We make great Web sites. 00:06:00.500 --> 00:06:07.760 Ok this is going to be headline and let's add a subhead line saying that 00:06:10.640 --> 00:06:17.830 we'll take your business to the next level. 00:06:19.100 --> 00:06:19.810 OK. 00:06:20.330 --> 00:06:29.310 We can style our widgets using the widgets tiles on the right hand side so we can use attributes so 00:06:29.440 --> 00:06:31.640 we can give our Which is a cause. 00:06:31.640 --> 00:06:41.330 So for example we can give it a class blue OK and we can then sets some CACs styling for this class 00:06:41.390 --> 00:06:41.920 blue. 00:06:41.930 --> 00:06:44.420 So for example we can set the background color 00:06:47.360 --> 00:06:48.980 to blue. 00:06:49.680 --> 00:06:51.140 OK. 00:06:52.280 --> 00:06:58.890 So we can also change the layouts and add some padding. 00:06:59.430 --> 00:07:02.170 OK let's have big cells budding. 00:07:02.390 --> 00:07:09.060 And also we can change the design by changing the background color which we've already done in his Yesus 00:07:09.160 --> 00:07:10.520 OK. 00:07:10.840 --> 00:07:14.330 All the tools in the background image. 00:07:14.330 --> 00:07:18.930 And also he can choose how our we want to display our image. 00:07:19.060 --> 00:07:19.700 OK. 00:07:19.880 --> 00:07:31.770 So for now let's just try the styling that we have so far and refresh our page ones. 00:07:31.820 --> 00:07:34.680 This has to be processed. 00:07:36.560 --> 00:07:42.920 OK so now we can see our headline the headline and subhead line and we can see the styling that we have 00:07:42.940 --> 00:07:44.500 chosen other moments. 00:07:45.140 --> 00:07:48.170 OK so let's go back and change the styling. 00:07:48.200 --> 00:07:53.830 So where is click on edits and it goes to the attributes. 00:07:53.990 --> 00:07:59.630 Just delete this CSSA signing for no pay. 00:07:59.730 --> 00:08:06.440 I ask you to lay out items and let's change the design unless I choose a background image. 00:08:06.530 --> 00:08:13.000 OK so let's choose an image. 00:08:13.190 --> 00:08:15.160 Let's pick up any image just for tests. 00:08:15.230 --> 00:08:16.960 So I'm going to pick up this one. 00:08:17.940 --> 00:08:18.610 OK. 00:08:18.650 --> 00:08:22.730 And then we can choose the way we want to display our image. 00:08:22.730 --> 00:08:24.910 Let's go for cover for example. 00:08:25.040 --> 00:08:25.920 OK. 00:08:26.430 --> 00:08:31.500 And you can choose a border color if you want to add a font color as well. 00:08:31.640 --> 00:08:32.210 OK. 00:08:32.210 --> 00:08:38.540 So if you click on done and then update the page 00:08:42.590 --> 00:08:45.840 and then refresh. 00:08:46.700 --> 00:08:53.330 So we can see our text and background image at the moment we only see parts of our background image 00:08:53.420 --> 00:08:55.680 as we using the image as a color. 00:08:56.450 --> 00:09:00.840 If we add more content they will see a bigger part of our image. 00:09:00.860 --> 00:09:08.690 So for example if we add some line breaks after the subhead line and we save 00:09:14.810 --> 00:09:17.620 then we'll see a bigger part of the image. 00:09:17.690 --> 00:09:18.490 OK. 00:09:19.070 --> 00:09:27.750 All right so now let's remove our image by going back to design and clicking on remove. 00:09:27.940 --> 00:09:28.220 OK. 00:09:28.220 --> 00:09:29.190 Background image. 00:09:29.420 --> 00:09:37.550 So if we click on OK or before we save lives it's odd some space before the headline does have a break 00:09:38.410 --> 00:09:42.970 and let's release all the line breaks that we are at after the subhead. 00:09:43.490 --> 00:09:45.410 So let's save an update 00:09:48.200 --> 00:09:50.180 and refresh the page. 00:09:50.210 --> 00:09:54.290 OK so now we can see our headline and subhead line and we have some space. 00:09:54.320 --> 00:10:00.500 Just before the headline there is another way of adding space before our headline. 00:10:00.500 --> 00:10:04.710 We're going to use a plugin called spacer. 00:10:05.180 --> 00:10:09.570 So let's go to plugins and install these plug in. 00:10:10.350 --> 00:10:11.390 So just click on new 00:10:14.730 --> 00:10:20.070 and let's look for space. 00:10:24.170 --> 00:10:24.500 OK. 00:10:24.500 --> 00:10:26.010 So it's the first one here. 00:10:26.150 --> 00:10:27.620 If we don't know 00:10:32.150 --> 00:10:35.030 then let's rates are blocking. 00:10:36.350 --> 00:10:38.660 OK so now let's go back to our page 00:10:42.470 --> 00:10:43.310 then go inside. 00:10:43.310 --> 00:10:46.040 Our visual editor. 00:10:46.250 --> 00:10:51.470 So now we can see a new icon there for this spacer. 00:10:51.630 --> 00:10:56.790 OK so let's delete our first line break. 00:10:56.810 --> 00:10:59.140 Just click on the spacer. 00:10:59.180 --> 00:11:00.760 OK. 00:11:00.770 --> 00:11:02.740 So go hours based on the added. 00:11:02.930 --> 00:11:06.990 So you can just have a break right after the spacer. 00:11:07.130 --> 00:11:07.550 OK. 00:11:07.760 --> 00:11:13.130 So if we look at our code now will see that we caught a paragraph at the beginning. 00:11:13.400 --> 00:11:14.630 OK. 00:11:14.720 --> 00:11:19.280 And you got a spacer inside of height 20 pixels. 00:11:19.850 --> 00:11:29.360 And then of course our two hour headline and subhead like OK we can change the height of our space. 00:11:29.660 --> 00:11:37.540 If you want to go for those big sales and let's save and update our page. 00:11:39.000 --> 00:11:43.640 And now if we refresh we can see that we've got some space there. 00:11:43.670 --> 00:11:46.400 Those the big cells just before the headline. 00:11:46.550 --> 00:11:51.460 Now we are going to style our headline and subhead line so to do that. 00:11:51.460 --> 00:11:54.370 Are we going to add a glass to each of them. 00:11:54.890 --> 00:11:58.410 So we're going to go back to our visual editor. 00:11:59.590 --> 00:12:00.190 OK. 00:12:00.230 --> 00:12:05.360 Now at this time we are going to go to the text up so that we can see the same code. 00:12:05.360 --> 00:12:16.410 So we're going to add a class to the headline paragraph and let's call its headline. 00:12:17.450 --> 00:12:25.620 And also going to add a class to the subhead line and let's call it Salaheddine. 00:12:28.250 --> 00:12:32.120 OK. 00:12:32.120 --> 00:12:37.680 So there is one way of adding styling to these elements because we have covered earlier. 00:12:37.930 --> 00:12:52.880 It's by using the custom CSSA so they save these updates so the custom CSSA we can find it's in appearance 00:12:53.240 --> 00:12:59.330 theme options and then custom siestas. 00:12:59.330 --> 00:13:08.540 So we've seen earlier how we can see styling here by adding a an ID or class and then our styling those 00:13:08.540 --> 00:13:13.280 we want but this time we are going to follow another route. 00:13:13.460 --> 00:13:20.050 We are going to style our elements using Google funds which is a plugin that we need to install and 00:13:20.060 --> 00:13:21.440 we can do that in the next video 00:13:21.450 --> 00:13:30.200 .