1 00:00:00,440 --> 00:00:06,350 In this lesson you'll customize the Wordpress page used as the front page of the brochure site. 2 00:00:06,510 --> 00:00:13,620 You'll also explore the differences between posts and pages in wordpress and add a site logo and icon 3 00:00:13,740 --> 00:00:16,760 using the customize or by the end of this video. 4 00:00:16,860 --> 00:00:21,660 You will have already set the brochure site apart and branded it for your client and you'll have an 5 00:00:21,660 --> 00:00:25,430 understanding of how the customize or works within the Wordpress dashboard. 6 00:00:25,560 --> 00:00:30,220 Plus you'll understand when to use posts and when pages are more appropriate. 7 00:00:30,570 --> 00:00:32,440 Let's get started. 8 00:00:32,800 --> 00:00:40,480 Let's start with editing this front page that we have inside of Word Press called sample page. 9 00:00:40,750 --> 00:00:44,600 For now I think I'd just like to get rid of this title. 10 00:00:44,800 --> 00:00:53,370 Add a nice big image and maybe keep some of this descriptive text in here so I'll go back to that page. 11 00:00:53,380 --> 00:00:59,170 Inside the Wordpress dashboard which I have opened here and the first thing I'll do is if you look at 12 00:00:59,170 --> 00:01:05,470 the permalink you can see that since I have it set as the front page of the site it's really the sites 13 00:01:05,470 --> 00:01:06,390 you are l. 14 00:01:06,430 --> 00:01:14,280 That's the permalink here but I'm going to go ahead and just get rid of that page title and click update. 15 00:01:15,880 --> 00:01:24,590 And that once that saves I can go back to my other tab and hit refresh and you'll see that that title 16 00:01:24,590 --> 00:01:26,500 of the page itself is gone. 17 00:01:26,510 --> 00:01:30,550 Now I can trim this text a little bit down to what I want. 18 00:01:30,610 --> 00:01:36,310 Let's see I'm just going to select a bunch of this text and hit backspace delete. 19 00:01:36,560 --> 00:01:40,370 Get rid of that and get rid of this text as well. 20 00:01:40,370 --> 00:01:43,220 Now as you can see this text is styled in a certain way. 21 00:01:43,220 --> 00:01:48,890 If I select it you can see that this quotation called blockquote is selected. 22 00:01:49,160 --> 00:01:54,350 If I get rid of it it's just the regular text but I kind of like that the way that styled as what's 23 00:01:54,350 --> 00:01:56,990 called a block quote and above. 24 00:01:56,990 --> 00:01:59,210 Here is where I'm going to put an image. 25 00:01:59,390 --> 00:02:03,370 Let's just hit update and we'll take a look at that. 26 00:02:03,490 --> 00:02:07,170 Once the page refreshes up here we go. 27 00:02:07,210 --> 00:02:15,230 I'll hit refresh great Now if this is a descriptive piece of text about my Web site now I can put a 28 00:02:15,230 --> 00:02:17,140 large image here. 29 00:02:17,240 --> 00:02:22,670 Now I've prepared a huge image for you to use if you like or you can use your own. 30 00:02:22,670 --> 00:02:28,160 This is at W.P. of course dot com slash huge image dot j peg. 31 00:02:28,460 --> 00:02:30,800 It's a seven megabyte image. 32 00:02:30,800 --> 00:02:35,320 Here it is in full size and so you could see it's a very large image. 33 00:02:35,480 --> 00:02:41,990 And as I introduce to you in chapter one I'd like you to go ahead and open an image editing piece of 34 00:02:41,990 --> 00:02:48,120 software that you should have for the course and trim this image down to a reasonable size. 35 00:02:48,120 --> 00:02:55,570 Let's say 6500 pixels wide and preferably under 200 kilobytes in size. 36 00:02:56,950 --> 00:03:04,200 So pause the video right now and see how you get the so if you click the image you can click save image 37 00:03:04,230 --> 00:03:07,050 as and then go ahead and save that image. 38 00:03:07,050 --> 00:03:14,400 I've already got a copy of it so what I'll do is open up Photoshop and click File Open and here's where 39 00:03:14,400 --> 00:03:25,170 I've got the image and now I'll open that image in Photoshop and first thing I want to do is click image 40 00:03:25,230 --> 00:03:29,400 image size and size that to 6800 pixels wide. 41 00:03:31,670 --> 00:03:35,850 There it is at 100 percent so that we can see how large it really is. 42 00:03:35,850 --> 00:03:39,450 It could be a full screen image if we want plenty big now. 43 00:03:39,450 --> 00:03:45,900 Click file save for web and devices and that set on jpeg. 44 00:03:45,970 --> 00:03:49,880 Hi I drag around I can see what it looks like. 45 00:03:52,910 --> 00:03:56,130 Let's see what it looks like with the mediums setting. 46 00:04:00,210 --> 00:04:10,410 It does look just as good on medium and it's only 119 K so I'll hit save and I've got a folder on my 47 00:04:10,410 --> 00:04:15,260 desktop called brochure site and that's where I've been saving some of the images here. 48 00:04:18,640 --> 00:04:22,410 Call it large image and save 49 00:04:25,230 --> 00:04:25,650 now. 50 00:04:25,670 --> 00:04:34,370 If I go back into WordPress one thing I'll do is just put my cursor there inside of the page where I 51 00:04:34,370 --> 00:04:44,410 want that image click Add media upload files and then I'll select it on my desktop large image. 52 00:04:44,410 --> 00:04:44,760 Open 53 00:04:48,110 --> 00:04:49,590 you can see that's opening. 54 00:04:49,590 --> 00:04:53,530 It'll give me some details over here how big it is. 55 00:04:53,870 --> 00:05:00,440 The full size image is 6300 pixels wide and 123 kilobytes. 56 00:05:00,470 --> 00:05:04,090 I might leave this as a left aligned image. 57 00:05:04,130 --> 00:05:10,310 I don't need to link it to anything and if I look at the sizes these are the sizes I have set in the 58 00:05:10,310 --> 00:05:17,440 media settings and I think I'll leave it at a large setting and then insert it into the page 59 00:05:20,390 --> 00:05:27,500 I can see that since it's left aligned it's placed it inside of the block what line that's right here 60 00:05:27,530 --> 00:05:34,100 if I want to sit that image above that block quote I might change it to no alignment. 61 00:05:34,100 --> 00:05:34,680 There we go. 62 00:05:34,680 --> 00:05:37,350 Now it sits above there nicely. 63 00:05:37,490 --> 00:05:41,360 Update the page and let's take a look at it on the site. 64 00:05:45,790 --> 00:05:46,210 Nice. 65 00:05:46,210 --> 00:05:48,130 That's a nice big image. 66 00:05:49,700 --> 00:05:50,740 Looks great. 67 00:05:52,550 --> 00:05:59,450 Next let's make some edits to the site title and the tag line and add a small logo up here on the left 68 00:05:59,450 --> 00:06:00,760 side. 69 00:06:00,800 --> 00:06:10,440 I go back to my dashboard go ahead and under appearance click customize. 70 00:06:10,500 --> 00:06:18,930 This will open up a live editor will where we'll be able to see the live site here on the right and 71 00:06:18,990 --> 00:06:24,620 a customizing window over here on the left hand side under say identity. 72 00:06:24,810 --> 00:06:26,970 You can see that there's a few options here. 73 00:06:27,030 --> 00:06:31,660 The site title which of course is also available under settings general. 74 00:06:31,950 --> 00:06:37,540 But what if I called this fire weed photography. 75 00:06:38,210 --> 00:06:40,110 That's a fire weed plant there. 76 00:06:43,530 --> 00:06:46,050 Potentially this could be a photographer's site 77 00:06:58,300 --> 00:06:58,920 great. 78 00:06:58,960 --> 00:07:03,780 You could see it updating in real time as we update the site title and the tagline here. 79 00:07:05,340 --> 00:07:12,030 Of course we could uncheck the site title and tag line and have that not visible in the case that we 80 00:07:12,030 --> 00:07:18,140 wanted to put a logo that had some copy or the name of the site inside of the logo. 81 00:07:18,170 --> 00:07:24,750 For now let's leave that visible there and we can click save and publish 82 00:07:27,710 --> 00:07:28,470 and there it goes. 83 00:07:28,470 --> 00:07:29,380 It says saved. 84 00:07:29,400 --> 00:07:36,600 So if we look over here at the site on a different tab for fresh air it is fire weed photography up 85 00:07:36,600 --> 00:07:38,900 here in the tab as well as right here. 86 00:07:38,970 --> 00:07:45,540 And then the home link is clickable to that to the home page site title 87 00:07:48,300 --> 00:07:51,030 lets out a logo. 88 00:07:51,090 --> 00:07:59,830 Now it says a suggested image dimensions of 240 by 240 and you might think of going into Photoshop and 89 00:08:00,430 --> 00:08:03,950 or your image editor and preparing an image of that size. 90 00:08:04,030 --> 00:08:08,210 I've already prepared an image that's 240 by 240. 91 00:08:08,320 --> 00:08:13,650 I call it logo image so I'll go ahead and upload that. 92 00:08:13,650 --> 00:08:19,140 Now since it's sized perfectly when it hit select it will give me an opportunity to crop it if I want 93 00:08:19,140 --> 00:08:19,650 to. 94 00:08:19,950 --> 00:08:26,740 To any size I like but I can skip cropping and we'll see what 240 by 240 looks like. 95 00:08:27,050 --> 00:08:28,450 It's nice and square. 96 00:08:28,640 --> 00:08:29,270 Great. 97 00:08:29,300 --> 00:08:35,240 However you know what I might prefer if it's maybe I don't know about half that size so it doesn't push 98 00:08:35,240 --> 00:08:36,810 the site down so far. 99 00:08:38,960 --> 00:08:41,410 Well I suppose I wanted to change the logo. 100 00:08:41,510 --> 00:08:46,460 I could actually select that same image and crop it differently. 101 00:08:47,490 --> 00:08:54,200 So I wanted to bring it up like this and then hit Krop image. 102 00:08:54,440 --> 00:08:56,150 I could size it appropriately. 103 00:08:56,150 --> 00:08:56,670 Nice. 104 00:08:56,680 --> 00:09:06,090 Now I would save and publish and I've got a nice logo that's also clickable to the home page. 105 00:09:06,320 --> 00:09:07,760 Let's add an icon. 106 00:09:07,820 --> 00:09:13,910 Or what we might call a favor on like this w from the wordpress site over here that appears in the browser 107 00:09:14,330 --> 00:09:23,660 using the customize or if you look down here the site icon wants it to be 512 pixels wide and tall a 108 00:09:23,660 --> 00:09:26,000 square icon. 109 00:09:26,540 --> 00:09:35,360 Well I'll just open up Photoshop maybe do file new years where I am getting into a little bit of graphic 110 00:09:35,360 --> 00:09:41,660 design 5:12 by 5:12. 111 00:09:41,800 --> 00:09:46,810 Let's see maybe I'll just choose a background color of a nice dark green 112 00:09:49,720 --> 00:09:57,670 and let's see let's do have a big F for fire weed. 113 00:09:59,000 --> 00:10:04,640 See if I make that let's just make the color of the font nice black 114 00:10:09,030 --> 00:10:15,740 try to find maybe a sort of an elegant capital F 115 00:10:18,710 --> 00:10:20,430 You know it's going to show up better. 116 00:10:20,550 --> 00:10:26,180 I think if I make it white instead of black 117 00:10:30,380 --> 00:10:31,490 and here we go 118 00:10:34,820 --> 00:10:35,370 sure 119 00:10:38,150 --> 00:10:44,870 it's going to have to be pretty large to fill it up area. 120 00:10:48,220 --> 00:10:50,470 How about even larger than that. 121 00:10:53,240 --> 00:11:01,630 Six hundred point at a little too arch you know that fits nicely for a site icon you've got to keep 122 00:11:01,630 --> 00:11:07,300 it pretty simple looking because it's going to be so small in certain browsers and it will use an icon 123 00:11:07,300 --> 00:11:09,510 on mobile and things like that. 124 00:11:10,490 --> 00:11:10,760 Great. 125 00:11:10,760 --> 00:11:19,810 So now just save for web and devices this time since it's so graphic I'll just use a PMG only for k 126 00:11:21,630 --> 00:11:25,360 I'm just going to call this one icon. 127 00:11:25,380 --> 00:11:32,000 Now let's go back to WordPress and I can select the image I'll have to upload it. 128 00:11:45,470 --> 00:11:51,290 Great care it shows with rounded corners and I can save and publish and you can see what it looks like 129 00:11:51,680 --> 00:11:58,540 up inside of the site title inside of my tab. 130 00:11:58,550 --> 00:12:02,870 Great nice for fire weed photography. 131 00:12:03,110 --> 00:12:09,200 For the last part of this video let's take a look at the difference between pages and posts in wordpress. 132 00:12:09,650 --> 00:12:15,950 Here in the sidebar by default you'll see that we've got a couple of widgets here on the sidebar one 133 00:12:15,950 --> 00:12:17,970 of them is called recent posts. 134 00:12:18,170 --> 00:12:21,360 Let's go ahead and click that hello world. 135 00:12:22,690 --> 00:12:24,800 Let's take a look at this post now. 136 00:12:24,880 --> 00:12:30,570 The header which contains the logo and the site title and the tag line is the same. 137 00:12:30,850 --> 00:12:37,900 But what we have here is a post that contains a few extra things more than what that page contained 138 00:12:38,200 --> 00:12:43,340 that we made as the front page of the Web site it looked virtually the same. 139 00:12:43,410 --> 00:12:49,920 But what we've got is a site title and some content but then to the left side of this theme is an author 140 00:12:50,040 --> 00:12:57,290 name and a Gravatar or an image avatar for the author a date. 141 00:12:57,300 --> 00:13:01,800 And then there's an edit button if you're logged in many pages on your site will give you that edit 142 00:13:01,800 --> 00:13:07,210 button so that you can come back to the dashboard very quickly. 143 00:13:07,210 --> 00:13:12,520 But then as you scroll down you can also see that it says one thought on hello world this is a comment. 144 00:13:12,520 --> 00:13:19,210 There was a default comment that also has a date and an author Avatar has the comment there and even 145 00:13:19,210 --> 00:13:27,120 a reply button and a reply comment field down here in the bottom and the ability to post comments. 146 00:13:27,730 --> 00:13:31,900 These are a few of the differences between pages and posts. 147 00:13:31,900 --> 00:13:39,430 Now WordPress originally being a blogging software and now that it's developed into a CIMS we don't 148 00:13:40,150 --> 00:13:47,990 always use the blogging functionality but when you look at posts inside of Wordpress you'll see it we 149 00:13:47,990 --> 00:13:48,980 have if we look at that. 150 00:13:48,990 --> 00:13:55,600 Hello world post some of the differences we have are the ability to have that day. 151 00:13:55,950 --> 00:13:57,490 And that's called meta data. 152 00:13:57,600 --> 00:14:08,340 Over here on the side or under the header of the post title and then there are post formats that a site's 153 00:14:08,580 --> 00:14:15,110 theme are able to use and define posts in certain different ways. 154 00:14:15,150 --> 00:14:16,350 Also a big difference. 155 00:14:16,380 --> 00:14:20,240 Posts can be categorized and posts can be tagged. 156 00:14:20,610 --> 00:14:28,140 And these are all navigation and find ability conventions so that users can browse different posts and 157 00:14:28,140 --> 00:14:30,510 find what they're looking for. 158 00:14:30,510 --> 00:14:35,990 Otherwise the editing area is virtually the same in a general sense. 159 00:14:36,000 --> 00:14:44,410 Posts are designed to be news or blog areas on a web site somewhere that you post where people can comment 160 00:14:44,750 --> 00:14:50,350 and that you put newer content and ever changing or periodical content on a Web site. 161 00:14:51,540 --> 00:14:57,540 Pages on the other hand are designed to be static and maybe containing some information that doesn't 162 00:14:57,540 --> 00:15:04,770 change often times we'll have a series of navigation buttons across the top that can point to different 163 00:15:05,070 --> 00:15:12,000 pages on a Web site like an about page a contact us page and other pages like that and then we might 164 00:15:12,000 --> 00:15:19,110 have a link to some post categories or on the sidebar we might offer some archive's to different posts 165 00:15:19,650 --> 00:15:28,270 so that in May 2016 you can see that there was one post the default post posted on this day. 166 00:15:28,440 --> 00:15:32,910 That way users can go through the website and find content they're looking for. 167 00:15:33,000 --> 00:15:39,800 Or look at the blog section of the Web site and see the latest content in this video. 168 00:15:39,800 --> 00:15:47,660 You've optimized an image and revised the home page of the website you've uploaded it to the media library 169 00:15:47,900 --> 00:15:57,380 as well as uploaded and configured a logo image edited the site title in the tag line all using the 170 00:15:57,410 --> 00:16:01,920 custom Mizer and the site identity section. 171 00:16:04,550 --> 00:16:13,140 And you learned a little bit about the differences between pages and posts in wordpress in the next 172 00:16:13,140 --> 00:16:19,320 video we're going to configure the navigation menu across the top and we're going to set up some interior 173 00:16:19,320 --> 00:16:26,640 pages that users might like to navigate to like and about page and a contact us page and we'll also 174 00:16:26,640 --> 00:16:31,370 configure the sidebar to be a little bit more appropriate for this brochure site.