WEBVTT 00:01.890 --> 00:06.810 In this lesson we're going to transform this home page Tillich's something like this. 00:06.820 --> 00:11.310 Yes it's simple and we're going to build on from here to make it even better later on. 00:11.320 --> 00:17.830 But what we need to do is learn how to change the title of the Web site up here from what it was at 00:17.890 --> 00:19.970 when we actually created our Web site. 00:19.990 --> 00:24.770 And you might have already created it with the right title but we're going to learn how to change that. 00:24.790 --> 00:30.160 And then we're going to learn how to customize our home page to look something like this with some titles 00:30.250 --> 00:35.860 and image and things like removing the page header which is right here or the page title. 00:35.860 --> 00:42.550 Then also removing this page sidebar right here which we probably don't want in our home page unless 00:42.610 --> 00:48.940 we're creating a Web site where the home page is a blog theme or a blog designed home page with a list 00:48.940 --> 00:51.080 of articles and the sidebar. 00:51.100 --> 00:55.930 But for most web sites you want a clean with no sidebar home page. 00:55.930 --> 00:59.950 The first thing we'll do is change the site title right here. 00:59.950 --> 01:06.760 So there's a couple of different ways to do that within this theme in general what you'll do is actually 01:06.760 --> 01:10.720 go under settings to general settings. 01:10.720 --> 01:14.140 Here you see the site title and the tagline. 01:14.140 --> 01:18.750 Let me also show you where you can edit it under appearance if we go to customize. 01:18.790 --> 01:22.450 This brings up a lot of different theme options. 01:22.450 --> 01:27.990 So under this customized men you can see that there's this site identity option. 01:27.990 --> 01:32.260 And here we have the same things the site title and the tagline. 01:32.260 --> 01:38.800 So here I can change to eggbeater designs and then we also want to change the tag line because this 01:38.800 --> 01:45.370 is something that the search engine such as Google will look at and display when your site appears in 01:45.370 --> 01:46.090 the search. 01:46.090 --> 01:51.300 So we don't want it to just say just another WordPress site will want to use our tagline. 01:51.310 --> 01:53.410 Now this is something that you want to think of. 01:53.410 --> 01:55.370 You want to make it keyword friendly. 01:55.390 --> 02:01.660 You want to make sure that it's catchy and it shows some sort of benefit so that when someone is actually 02:01.660 --> 02:06.640 searching for your web site they see your title and they perhaps see your tagline and it really makes 02:06.640 --> 02:08.170 them want to click on your Web site. 02:08.170 --> 02:12.640 So let me just say something really quick something like clean simple 02:15.060 --> 02:20.090 and DIY woodworking projects for beginners. 02:20.670 --> 02:22.960 So that's what my website is going to be about. 02:23.190 --> 02:32.060 So now if I save and publish and then refresh what happens is the site title changes. 02:32.060 --> 02:39.470 And so now if I go to this home page which is our home page and refresh we now have the Ebner designs 02:39.470 --> 02:40.460 title at the top. 02:40.460 --> 02:43.470 Now one thing I didn't mention is that this is our home page. 02:43.490 --> 02:48.260 This home page that I created right now is just a demo page that I created. 02:48.260 --> 02:49.820 It's an extra page. 02:49.820 --> 02:53.390 So now let's go ahead and see where that page is. 02:53.420 --> 02:59.280 So to edit the home page what you'll have to do is go to pages and all pages. 02:59.780 --> 03:05.270 And here you can see that we have the home page the front page which we had created and set as the front 03:05.270 --> 03:05.700 page. 03:05.750 --> 03:09.490 And then this is just a separate page that I added that you don't have to do. 03:09.500 --> 03:11.920 I would just add it the home page if you want. 03:11.930 --> 03:14.220 So go ahead and click at home page. 03:14.330 --> 03:21.770 So now we have our home page editor and like you mentioned earlier we have this text editor box and 03:21.770 --> 03:25.850 this is where we add text we add content to our page. 03:25.850 --> 03:30.680 So for example we can type in some words so maybe simple 03:33.210 --> 03:37.900 clean DIY I believe that's what I had said before. 03:37.900 --> 03:44.330 Simple modern DIY So that could be our top text. 03:44.350 --> 03:50.920 Now if I want to see what this looks like on the actual page I can click this preview changes button. 03:50.980 --> 03:51.490 This is. 03:51.490 --> 03:55.660 This opens up a preview window of our changes right here. 03:55.660 --> 03:58.020 So now you can see this text simple. 03:58.030 --> 04:00.010 Modern DIY. 04:00.280 --> 04:03.540 I'm going to go out and close down this preview window. 04:03.550 --> 04:06.490 So now we can just kind of compare these two pages. 04:06.520 --> 04:10.410 The demo that I created and the one we're working on right now. 04:10.540 --> 04:14.350 So the first thing I want to do is actually get rid of this sidebar. 04:14.350 --> 04:15.770 That's what this is called. 04:15.790 --> 04:17.500 It has different things like. 04:17.490 --> 04:21.460 Here we have recent posts recent comments archive's categories. 04:21.520 --> 04:27.400 These are called widgets and we're going to learn how to edit the widgets later on this sidebar is something 04:27.400 --> 04:33.190 that you can add to many different pages and it stays the same for all of the pages and you can edit 04:33.280 --> 04:38.500 this sidebar in the content of the sidebar and what's in it and it will change for all the pages making 04:38.500 --> 04:43.010 it really easy to change what your sidebar looks like across your entire site. 04:43.060 --> 04:48.870 So to get rid of that sidebar there is typically on most themes an option for layout. 04:48.910 --> 04:55.600 Now this might appear down here below the text editor or the content editor and that's what it appears 04:55.600 --> 04:56.410 for this theme. 04:56.410 --> 04:58.040 You have a default template. 04:58.080 --> 05:02.490 A right sidebar left sidebar a no sidebar and a full width template. 05:02.500 --> 05:08.820 So if I change to the left sidebar let me just do that and then say preview changes a little sidebar 05:08.820 --> 05:11.750 goes to the left if I choose. 05:11.790 --> 05:21.000 No sidebar what happens is there's no side bar but the width of this content box is kind of skinny compared 05:21.000 --> 05:25.540 to this one where the width of this content boxes the entire width of the site. 05:25.590 --> 05:27.930 Well at least the menus of the site. 05:28.020 --> 05:31.950 So we want to change this to actually full with care. 05:32.070 --> 05:35.390 So that makes this the full width of the site. 05:35.450 --> 05:42.360 OK so now let's go ahead and add our next text and I can just type it out or since I already have it 05:42.360 --> 05:44.100 I can copy and paste it. 05:44.130 --> 05:48.370 So let me put this text underneath this top text. 05:48.390 --> 05:54.930 Now if I hit preview changes and look at this the text at the top simple modern D.I.Y. is the same size 05:55.020 --> 05:56.420 as the bottom text. 05:56.430 --> 06:02.280 So to make this top text larger in wordpress when you first install WordPress you have a few different 06:02.280 --> 06:03.660 options for sizes. 06:03.660 --> 06:07.790 And this is under this paragraph heading option dropdown menu. 06:08.190 --> 06:14.370 So if I choose one of these different heading options it becomes a different size and with or bulled 06:14.370 --> 06:15.060 this. 06:15.060 --> 06:19.220 So if I preview the changes now we have simple modern D.I.Y.. 06:19.410 --> 06:22.970 And then in the bold text but it's a different color. 06:23.010 --> 06:28.470 So we're going to learn how to change that color in just a minute but let's center this text so let's 06:28.680 --> 06:32.950 select all of this text and use this align center option. 06:33.000 --> 06:36.840 So on this top menu we have Boulding R-TX italic sizing. 06:36.930 --> 06:39.510 We can create bulleted lists numbered lists. 06:39.540 --> 06:44.280 We can do a block quote which basically indents whatever we select and highlight and choose. 06:44.290 --> 06:50.880 BLOCK quote We can left center or right justifier align rather and then we can edit and remove links 06:50.880 --> 06:55.380 or hyperlinks if we want to link out to a separate page or a separate web site. 06:55.400 --> 06:58.540 There's a read more tag which we'll get into. 06:58.740 --> 07:05.920 And then there's a more options with this toggle toolbar option which allows more things like strikethrough 07:06.060 --> 07:12.090 horizontal lines changing the text color clearing any formatting increasing the indentation. 07:12.090 --> 07:15.930 Undoing all of those kinds of things that you want in your typical text editor. 07:15.930 --> 07:19.920 One other thing you'll notice is that we have two tabs visual and text. 07:19.920 --> 07:24.860 If you do no aged female you can actually edit your website using HVM. 07:24.900 --> 07:30.240 And we might have to do this for a few things in the future and you can see that there's these aged 07:30.240 --> 07:37.270 female tags basically saying that the text within here is simple modern D.I.Y. is a heading 1 style. 07:37.350 --> 07:39.710 That's what that H-1 represent right there. 07:39.720 --> 07:42.550 But for those of us who are beginners we don't need to do that. 07:42.570 --> 07:44.880 We can just use the visual editor. 07:44.880 --> 07:48.090 OK so now we have our text if we preview the changes. 07:48.090 --> 07:50.260 Now it's centered lets out a photo. 07:50.280 --> 07:55.740 So to add a photo I'm just going to return can you space and then click this add media button. 07:55.800 --> 08:01.310 You can see that I already added this photo right here if I want to add a new photo. 08:01.310 --> 08:09.990 I can click this upload files select files and then go to my folder where I have my images and you could 08:10.050 --> 08:11.570 upload images from wherever. 08:11.610 --> 08:14.730 But I have an images folder that I put together for this Web site. 08:14.850 --> 08:20.550 So this is the photo that I uploaded before I already uploaded it but I just want to show you that I 08:20.550 --> 08:27.480 can upload another image say this one this is a bath ladder and now it's uploaded to the Web site over 08:27.480 --> 08:28.700 here on the right hand side. 08:28.740 --> 08:35.310 We have the Ural of this photo so if you want to go directly to this photo file on the Internet you 08:35.310 --> 08:36.270 can go to this link. 08:36.270 --> 08:39.030 We have a title for this actual photo. 08:39.030 --> 08:43.650 You can add captions and alternative text and a description if you want as well. 08:43.650 --> 08:50.190 The alternative text is what appears to the viewer if they for some reason there's an issue with loading 08:50.190 --> 08:50.970 your image. 08:50.970 --> 08:57.950 So if you want you can take this bathroom title and it's a good idea for Search Engine Optimization. 08:58.040 --> 09:03.300 And just for usability to have alternative text for your images and then you have your alignment. 09:03.300 --> 09:09.640 So if you want to center right justify left justify or if you want to link it to a custom your rules 09:09.690 --> 09:14.840 say you have a picture and you want to link it to a blog or article or another page you can do that. 09:14.890 --> 09:22.610 Then you have size and we can choose for specific options thumbnail medium large or full size. 09:22.650 --> 09:25.840 I'm just going to like large and we can edit this later on too. 09:26.100 --> 09:29.220 So let me just say insert into page to see what this looks like. 09:29.220 --> 09:37.510 So now we have this image in our page and if we preview changes we'll see that this image is on our 09:37.510 --> 09:38.130 page. 09:38.140 --> 09:42.650 It's a little too big though so let me go ahead and decrease the size. 09:42.730 --> 09:44.510 There's different ways to decrease the size. 09:44.530 --> 09:51.130 If I click on this image you see that we get these little tools on the corners of this image where I 09:51.130 --> 09:54.280 can grab and literally just shrink the size. 09:54.670 --> 09:59.890 If we have a specific size that we don't want you can see the numbers appear. 09:59.920 --> 10:03.260 So we want this to be 350 pixels wide. 10:03.280 --> 10:07.690 We can just see that and at it that way or we can go into the edit menu. 10:07.900 --> 10:15.780 So click photo then click add it and now you see the display settings where there's a custom size option. 10:15.790 --> 10:21.640 So if I change the with say I want it to be 300 it's automatically going to change the height so that 10:21.670 --> 10:25.120 it has the same aspect ratio and it doesn't get squished. 10:25.270 --> 10:32.470 Here you can also link it to a custom your L if you want say I wanted just to point back to our home 10:32.530 --> 10:33.300 page. 10:33.340 --> 10:34.650 We can do that. 10:34.740 --> 10:36.100 That doesn't really make much sense. 10:36.100 --> 10:41.740 It might not be good to link this to anything unless you do want it to link out to any other page so 10:41.820 --> 10:45.700 a click Update now it's decreased in size. 10:45.700 --> 10:49.960 Now if I click preview changes we have this small image right here. 10:50.200 --> 10:54.990 Say I want to actually edit it and add a caption. 10:55.030 --> 10:57.960 So if I add a caption let's just say bathroom ladder. 10:58.060 --> 10:59.970 I want to show you what this looks like. 11:00.010 --> 11:06.130 So if I add a caption say update for some reason it went to the no alignment so let's just select the 11:06.130 --> 11:08.080 photo and center it. 11:08.080 --> 11:10.040 Now has this caption bathroom ladder. 11:10.060 --> 11:13.900 And if I preview the changes let's see what it looks like on this page. 11:13.900 --> 11:21.010 So now on this page it creates this sort of outline box around the photo with the caption I don't really 11:21.010 --> 11:26.920 like that and I don't really use captions on my photos much but you might like that option. 11:27.120 --> 11:34.150 So I'm just going to go back at it delete the caption click Update So now we have our Web site. 11:34.180 --> 11:37.300 It's getting closer to what we want it to look like. 11:37.330 --> 11:39.470 Here we have this image here. 11:39.610 --> 11:40.630 We have the text. 11:40.630 --> 11:42.160 It's a little bit more spaced out. 11:42.180 --> 11:47.370 It's a different color and the other difference is we don't have this home title page text right here. 11:47.380 --> 11:49.950 So first let's just space out this text here. 11:50.170 --> 11:56.130 Basically what I did was a simple space between these simple modern DIY. 11:56.290 --> 12:01.850 So I put nine spaces in between each one. 12:01.910 --> 12:04.040 One two three four five six seven eight nine. 12:04.040 --> 12:05.220 And then there was one extra. 12:05.230 --> 12:09.020 So now if we preview this it will look better up. 12:09.050 --> 12:12.130 We've got to add one more. 12:12.470 --> 12:18.800 Now let's change this photo so I'm just going to click this photo remove it go back add media and now 12:18.800 --> 12:24.510 we already have our two files uploaded so I can select files that I've previously uploaded. 12:24.520 --> 12:25.410 Select it. 12:25.470 --> 12:28.610 Just going to use the large and insert into page. 12:28.610 --> 12:30.660 Now we're getting closer. 12:30.920 --> 12:33.660 OK so we see our two pages. 12:33.890 --> 12:36.560 So how do we get from here to here. 12:36.820 --> 12:39.730 First let's change the color of this text. 12:40.100 --> 12:44.950 Now the color of your heading tags might change how you edit depending on your theme. 12:44.990 --> 12:48.680 But in this theme we're going to go to our customized theme options. 12:48.680 --> 12:52.370 I'm going to open this up in a new tab by control or command. 12:52.370 --> 13:01.360 Clicking it on a Mac under the sparkling options under type biography have the heading color option. 13:01.370 --> 13:04.960 These are the color headings for all headings h one h six. 13:04.970 --> 13:06.760 Those are the levels. 13:06.770 --> 13:09.960 Remember we saw H 1 heading 1 heading 6. 13:09.980 --> 13:13.840 This is just the default color it's that red that we saw here. 13:14.000 --> 13:15.540 That's as the default for this thing. 13:15.560 --> 13:21.890 But say we want to change it to blue we can just click this blue or we can just pick a custom color 13:22.010 --> 13:28.220 by moving it around maybe we want it to be sort of a brown because this is woodworking and we want it 13:28.220 --> 13:32.220 to look kind of like wood something like that might be kind of cool. 13:32.270 --> 13:33.820 So if we save and publish. 13:34.070 --> 13:40.790 And then we refreshed this page both our page title heading and are heading right here that we change 13:40.790 --> 13:42.450 this text to changes to Brown. 13:42.500 --> 13:45.820 So now let's remove this home page title. 13:45.890 --> 13:49.150 This gets a little bit advanced but I know you can follow along. 13:49.280 --> 13:51.770 Removing this depends on the theme as well. 13:51.800 --> 13:57.530 And whenever you download a theme or install a new theme you might have to search a little google search 13:57.530 --> 14:00.800 yourself to see how you remove the page title. 14:00.790 --> 14:08.440 Sometimes on the edit page page there is an option for removing the page title. 14:08.480 --> 14:14.150 And if you don't see all of the page options or the options on this page where you can do is click the 14:14.160 --> 14:20.290 screen options button right here and there are different options that aren't appearing on this editor. 14:20.510 --> 14:26.500 So say we want to be able to edit the author and the comments and maybe some custom fields. 14:26.810 --> 14:27.650 Let's turn those on. 14:27.650 --> 14:34.550 And then we can see down below that we have discussions authors if we have multiple authors we can change 14:34.550 --> 14:35.950 the author of this page. 14:35.990 --> 14:37.450 All kinds of other stuff. 14:37.490 --> 14:40.550 So these are more editing options for this page. 14:40.550 --> 14:47.540 This isn't going to help us out with the page title but in some themes that page title option will appear 14:47.570 --> 14:49.720 under your screen options. 14:49.730 --> 14:50.880 Hope that makes sense. 14:50.900 --> 14:55.880 So I'm just going to turn off those options right now because I like having a clean editor. 14:55.880 --> 14:58.140 So how do we get rid of this page title. 14:58.220 --> 15:05.230 So what I did was I search for Remove page title in sparkling Wordpress and that's all I typed in this. 15:05.280 --> 15:08.740 First option comes from color lib. 15:08.750 --> 15:10.410 I might be short for color library. 15:10.430 --> 15:17.360 This is the creator of this WordPress theme and they give custom C-s apps that you want to add that 15:17.360 --> 15:20.410 will actually change the display off. 15:20.420 --> 15:27.350 So I took this code and what I also do and this is a little tip for you is I actually add this to a 15:27.350 --> 15:33.680 notebook or to a word document or something so that if I ever need to change this later are at it again 15:33.680 --> 15:35.060 later I have it. 15:35.060 --> 15:40.110 So this is just a tip for you as might happen with other SS things as well. 15:40.340 --> 15:47.870 So let's go back to our Web site and where we add this is under this customized page where we were before 15:48.200 --> 15:49.970 and then under other. 15:49.970 --> 15:55.640 And this is where we can add additional C-s us CSA us is basically code that affects the appearance 15:55.730 --> 15:56.780 of our website. 15:56.840 --> 16:04.580 So I copied that code from that web site and if I paste it here it gets rid of that page header so you 16:04.580 --> 16:10.820 can see basically what this is saying is that the page header We want the display to turn off. 16:10.880 --> 16:13.180 Now I'm a beginner at c SS. 16:13.190 --> 16:19.550 I'm a beginner at age 2 male code but I was able to figure this out just by a simple Google search and 16:19.550 --> 16:20.240 searching around. 16:20.240 --> 16:25.190 So if you're using a different theme you might have to do a little bit of research yourself. 16:25.220 --> 16:26.930 So I'm going to save and publish this. 16:26.930 --> 16:31.460 Now if I go back to my home page that I've been editing and refresh. 16:31.460 --> 16:35.030 Now we have our home page with our title. 16:35.030 --> 16:37.760 Not really the title of our website but these keywords. 16:37.850 --> 16:43.370 A little blurb about the Web site and our image and the only difference from before is the color of 16:43.370 --> 16:43.940 the text. 16:43.970 --> 16:47.250 But now we know how to go back and color that tax. 16:47.270 --> 16:48.030 Awesome. 16:48.260 --> 16:49.510 Thank you so much for watching. 16:49.510 --> 16:52.680 I hope this makes sense if you have any questions please let me know. 16:52.790 --> 16:57.860 Otherwise in the next lesson we're going to be adding to this Web site and what we're going to be doing 16:57.860 --> 16:59.050 is adding a menu. 16:59.060 --> 17:01.020 So this shows our home page. 17:01.040 --> 17:05.470 Our blog page and perhaps even creating some more pages that will be editing later on.