1 00:00:00,680 --> 00:00:06,080 In this video I'll show you how I went about following the affinity themes instructions at Wordpress 2 00:00:06,080 --> 00:00:09,620 dot com to set up the home page panels and navigation. 3 00:00:09,980 --> 00:00:15,270 Hopefully you were successful at setting it all up at your own local development environment website. 4 00:00:15,530 --> 00:00:22,100 Regardless here's the steps I took this lesson reveals how I changed the home page of our affinity themed 5 00:00:22,100 --> 00:00:29,440 site from a blog style list of posts to a scrolling home page with fixed background images. 6 00:00:29,520 --> 00:00:35,790 Remember before you can navigate to your local host your URL you have to activate map and make sure 7 00:00:35,790 --> 00:00:40,090 that the Apache server and the my SQL server is running. 8 00:00:40,260 --> 00:00:47,570 When I navigate to the Wordpress dashboard I can see that I've got a few updates ready for me. 9 00:00:47,600 --> 00:00:52,610 Let's look at the updates page under dashboard and I'll see what I have going on. 10 00:00:52,610 --> 00:00:56,150 The child theme configurator that WP tiles plug in. 11 00:00:56,150 --> 00:01:02,650 That's one update that I can do great and I know that there's one more so if I return to the Wordpress 12 00:01:02,710 --> 00:01:07,730 updates page I can see that it's actually the affinity theme. 13 00:01:07,750 --> 00:01:10,970 Now if you remember and you still have the same setup. 14 00:01:11,110 --> 00:01:17,870 We probably have one of the two child themes that we set up in previous lessons activated. 15 00:01:18,040 --> 00:01:26,530 So I still have the affinity child too which was the one formed by that plug in called Child configurator 16 00:01:26,980 --> 00:01:34,770 and affinity child one is still here but it's the affinity theme it has an update available. 17 00:01:34,890 --> 00:01:41,250 That's fine because any of the changes that we made to the functions that ph profile were done inside 18 00:01:41,250 --> 00:01:45,850 of the child theme not inside of the parent theme affinity. 19 00:01:45,960 --> 00:01:47,580 It looks like a small update. 20 00:01:47,580 --> 00:01:57,790 One point 0.2 but I'll go ahead and select that and update themes great affinity updated successfully. 21 00:01:58,120 --> 00:02:03,580 Let's go back to our site that I have open in another tab and refresh. 22 00:02:03,680 --> 00:02:06,810 I just make sure that everything is working well. 23 00:02:06,850 --> 00:02:09,690 Nice looks good. 24 00:02:09,960 --> 00:02:15,690 Now this has the recent blog posts as the home page which were going to be changing and if we scroll 25 00:02:15,690 --> 00:02:21,480 to the bottom we can see that our change inside of the child theme which was to make this dividing line 26 00:02:21,480 --> 00:02:24,840 white instead of gray is still there. 27 00:02:24,840 --> 00:02:33,210 If we go back into appearance and look at the Editor we can see that our child theme which was not updated 28 00:02:33,570 --> 00:02:40,590 has a style sheet and just a theme functions functions that BHP file and in the style sheet is where 29 00:02:40,590 --> 00:02:48,300 we had the change widget title bottom border color when we changed that title to the color white instead 30 00:02:48,300 --> 00:02:50,010 of gray. 31 00:02:50,050 --> 00:02:55,370 One last change that I made before we get to editing our home page panels is. 32 00:02:55,510 --> 00:03:02,020 I went in under appearance header and you can change this in the customize or which is going to open 33 00:03:02,020 --> 00:03:10,330 now and I changed the header image to instead of having it use these randomized images that are inside 34 00:03:10,330 --> 00:03:14,930 the theme I just chose one of the images inside the theme. 35 00:03:14,930 --> 00:03:21,370 My favorite one so it always showed that at the top of all the header image pages. 36 00:03:21,510 --> 00:03:23,780 I'm not really changing it so I can close out that. 37 00:03:23,780 --> 00:03:25,420 And yes I can leave the page. 38 00:03:25,460 --> 00:03:30,570 I'm actually making a change here and let's get to changing our home page. 39 00:03:30,740 --> 00:03:36,490 From reading the instructions I know that it has to do with pages that we use for those front panels. 40 00:03:36,860 --> 00:03:42,770 If I open the affinity theme page instead of Wordpress dot com you can see that the key information 41 00:03:42,770 --> 00:03:43,390 is here. 42 00:03:43,400 --> 00:03:48,940 Setting up your front page and it talks about creating a page and then choosing it in the customize 43 00:03:48,940 --> 00:03:51,190 or to a static page. 44 00:03:51,230 --> 00:03:57,560 Then you can also have a blog page that can display a list of the latest posts as you scroll down. 45 00:03:57,560 --> 00:04:03,200 You probably saw it gave you some specific instructions about adding panels by creating or editing a 46 00:04:03,200 --> 00:04:10,190 page and then identifying that page inside of the customize or under theme options. 47 00:04:10,190 --> 00:04:12,060 So that's what I'm going to do right now. 48 00:04:12,080 --> 00:04:14,200 I'll go back here in looking at my pages. 49 00:04:14,360 --> 00:04:20,840 I know that I have one called front page that was brought in as a part of that import that we made for 50 00:04:20,840 --> 00:04:24,020 testing themes from WordPress dot org. 51 00:04:24,020 --> 00:04:31,280 It's got just a little bit of content and a page title and so I'll go into the appearance customize 52 00:04:31,330 --> 00:04:37,490 or right at the bottom of the customize or is a panel called theme options and you can see I have a 53 00:04:37,490 --> 00:04:42,970 general tab and then 5 different panels used for the special home page. 54 00:04:43,050 --> 00:04:50,640 If I open general my only selection is the image opacity so that if I use different images say I wanted 55 00:04:50,640 --> 00:04:53,380 it to be more like 30 percent. 56 00:04:53,450 --> 00:04:59,900 I could darken it and have that white copy should show up really well if I have a lot of light images. 57 00:04:59,990 --> 00:05:03,470 For now I'll leave it at 70 percent and see how that looks. 58 00:05:03,470 --> 00:05:07,800 The second one is do I want the scrolling feature. 59 00:05:07,910 --> 00:05:14,620 I want the home page to scroll behind or do I want it not to. 60 00:05:14,690 --> 00:05:18,380 It doesn't show it in the customize or it said in the instructions here. 61 00:05:18,380 --> 00:05:24,200 Due to performance but I'm going to allow those images to be scrolled in front of in the background 62 00:05:24,710 --> 00:05:26,720 so I'm leaving that checked. 63 00:05:26,750 --> 00:05:35,640 Now if I choose Panel 1 and Open panel content I can see that I can find my front page now looking at 64 00:05:35,640 --> 00:05:42,390 my results you can see that nothing has happened and Oops I should have followed the instructions and 65 00:05:42,390 --> 00:05:44,900 set up my front page first. 66 00:05:44,910 --> 00:05:52,620 So inside the customize or I can go back into it's the static front page then instead of latest posts 67 00:05:52,620 --> 00:06:01,480 I need to define a static page for front page as well as for a Post's page called blague. 68 00:06:01,500 --> 00:06:07,530 Now if I save and publish that I can look at it inside the custom Mizer I can really see what it looks 69 00:06:07,530 --> 00:06:10,620 like when I refresh the page inside of my second tab 70 00:06:13,430 --> 00:06:21,980 when that refreshes you can see that I have the front page content inside of the white panel down below. 71 00:06:22,430 --> 00:06:26,230 Now why do I have two versions of the front page content here. 72 00:06:26,360 --> 00:06:34,220 I didn't need to activate that front page inside of the customize or as one of the panels because it's 73 00:06:34,220 --> 00:06:38,640 already used as the first part of the front page. 74 00:06:38,780 --> 00:06:45,110 I want to use a second page and let's just use the About page that we have inside of the system for 75 00:06:45,110 --> 00:06:49,640 that panel 1. 76 00:06:49,670 --> 00:06:55,340 So if you look at the demo site as you scroll down you can see they have their front page content and 77 00:06:55,340 --> 00:07:01,250 then the next one has a background image which is the featured image and the content inside of the page 78 00:07:01,310 --> 00:07:02,660 is in the white area. 79 00:07:04,220 --> 00:07:09,830 So if you follow instructions here you know that it says in order to have a background image you need 80 00:07:09,830 --> 00:07:13,010 to assign a featured image to the page. 81 00:07:13,010 --> 00:07:18,080 Obviously I don't have a featured image in the About page so if I just save and publish this inside 82 00:07:18,080 --> 00:07:22,250 the customize or I'll go back and open my pages. 83 00:07:22,310 --> 00:07:27,930 Open this about page and assign a nice big background image as the featured image. 84 00:07:27,990 --> 00:07:30,750 So let's go back to all pages. 85 00:07:30,920 --> 00:07:38,450 If I open about I'll just go down to the featured image area on the right hand side and click Set featured 86 00:07:38,450 --> 00:07:43,830 image and grab something from the media library. 87 00:07:43,900 --> 00:07:46,100 What's that big image that I like. 88 00:07:46,150 --> 00:07:49,420 How big is this on a 6500 pixel image. 89 00:07:49,420 --> 00:07:57,370 Now I can set the featured image and it'll appear as the background image on my panel one which is using 90 00:07:57,370 --> 00:07:59,540 the About page. 91 00:07:59,640 --> 00:08:06,680 Let's go back to the site and refresh the home page and we'll see if that about page has loaded its 92 00:08:06,720 --> 00:08:09,260 background image. 93 00:08:09,270 --> 00:08:12,720 All right I'm scrolling down front page. 94 00:08:12,710 --> 00:08:19,520 There's a beautiful background image and then the content of that about page is down below grade. 95 00:08:19,530 --> 00:08:25,060 I'll go through and activate some more pages as a part of the panel structure here. 96 00:08:25,200 --> 00:08:30,870 And you can also see that our diamonds are starting to appear as automatic navigation inside of this 97 00:08:30,870 --> 00:08:34,440 theme. 98 00:08:34,440 --> 00:08:36,430 OK so how did you get on with that. 99 00:08:36,600 --> 00:08:40,690 I chose some different pages and created some different pages. 100 00:08:40,740 --> 00:08:42,810 Adding a featured image to each one. 101 00:08:42,990 --> 00:08:45,770 And now I've got a nice long page here. 102 00:08:45,930 --> 00:08:48,660 If I open up one of the panels 103 00:08:51,420 --> 00:08:53,520 it'll show me which one is which. 104 00:08:53,520 --> 00:09:01,450 Panel 1 and it shows the content with the dotted line around what the content is panel to now the page 105 00:09:01,450 --> 00:09:06,890 that I chose for panel two was a page I had in there I had to create the name sample page. 106 00:09:06,940 --> 00:09:14,080 It was already created from our previous lessons but it had an image and it had a black quote here inside 107 00:09:14,080 --> 00:09:15,010 of the content. 108 00:09:15,010 --> 00:09:19,920 We'll be able to see what that looks like in the site or the rest of em or down here. 109 00:09:19,930 --> 00:09:26,630 Let's go ahead and refresh the homepage and take a look at the site. 110 00:09:26,680 --> 00:09:30,280 Now I've got all these navigation buttons over here. 111 00:09:30,490 --> 00:09:31,740 I can use them. 112 00:09:32,600 --> 00:09:34,600 To go down to the next section. 113 00:09:35,700 --> 00:09:40,560 Nice about there was my sample page so I scroll down. 114 00:09:40,560 --> 00:09:43,060 I do have an image and it looks nice. 115 00:09:46,130 --> 00:09:46,620 Right. 116 00:09:46,630 --> 00:09:48,470 This one's on another page. 117 00:09:49,800 --> 00:09:51,670 Looks great with those large images. 118 00:09:52,020 --> 00:09:54,010 Here's yet another page. 119 00:09:54,180 --> 00:09:59,850 You can tell that with the taller images they show the whole image. 120 00:09:59,970 --> 00:10:04,530 And if you had a smaller one that was say not quite as tall as this one. 121 00:10:04,590 --> 00:10:06,760 It shows a little bit less of the image. 122 00:10:06,870 --> 00:10:13,380 You could choose in your design process to make an image that's wide like 6500 or 2000 pixels but maybe 123 00:10:13,380 --> 00:10:19,080 only 800 pixels tall and depending on what kind of look you are on the home page 124 00:10:23,490 --> 00:10:24,220 rate. 125 00:10:24,480 --> 00:10:29,840 And I was just pasting some Lorem some text inside of each page. 126 00:10:29,930 --> 00:10:36,140 I open up my wordpress dashboard and close the customize or you'll see this is the last page that I 127 00:10:36,140 --> 00:10:42,620 had created and there's my featured image and got a nice looking home page. 128 00:10:42,780 --> 00:10:48,180 Now when we go back to here you could see that the navigation has populated itself. 129 00:10:48,210 --> 00:10:53,010 I go back to the top and it goes to the very top of the page. 130 00:10:53,220 --> 00:11:01,410 And we got a really nice functional scrolling home page. 131 00:11:01,450 --> 00:11:06,430 I hope you did well with that challenge by following the theme instructions and creating your own scrolling 132 00:11:06,430 --> 00:11:09,370 home page inside your local development environment. 133 00:11:09,790 --> 00:11:15,400 In the next video we'll go back to the cafe pro theme inside your students sandbox and arrange the home 134 00:11:15,400 --> 00:11:20,470 page widgets to take advantage of the modular layout configurations that the theme gives us.