1
00:00:00,810 --> 00:00:06,510
In this video you'll open the cafe pro theme home page layout document and use it to arrange the home

2
00:00:06,510 --> 00:00:07,390
page of the site.

3
00:00:07,440 --> 00:00:13,230
Inside the student's sandbox by customizing the home page and matching its content with appropriate

4
00:00:13,230 --> 00:00:18,270
navigation you'll see how the theme can work for any kind of business or web site.

5
00:00:18,270 --> 00:00:23,450
You'll learn how to use themes by Studio press that use layout configurations for awesome looking home

6
00:00:23,450 --> 00:00:25,400
page content.

7
00:00:25,440 --> 00:00:32,790
Let's start by taking a look at our Cafe site and comparing it to the studio press demo site which I

8
00:00:32,790 --> 00:00:34,530
have open in another tab.

9
00:00:34,950 --> 00:00:41,550
If we look at one that I called my cafe it's got the title here and that scrolling background image

10
00:00:41,550 --> 00:00:44,900
that's fixed and the menu comes up as we saw.

11
00:00:45,180 --> 00:00:50,270
And then we've got some home page areas here front page widget areas.

12
00:00:50,520 --> 00:00:58,080
There's one widget here in this zone there's one widget in the zone with the next background image one

13
00:00:58,080 --> 00:01:02,750
widget in this green background image zone one widget.

14
00:01:02,970 --> 00:01:10,070
In this third photo zone and then this is a 3D widget area footer.

15
00:01:10,080 --> 00:01:16,560
We go back to the Wordpress dashboard and open up under a perience customize the cursor Mizer will show

16
00:01:16,560 --> 00:01:18,790
us what's what.

17
00:01:18,910 --> 00:01:28,000
It opens a live preview of our site and let's open up the widgets panel and look at front page one.

18
00:01:28,280 --> 00:01:31,850
Is this one right here one text widget et cetera.

19
00:01:31,880 --> 00:01:34,190
This from page 1 2 3 and 4.

20
00:01:34,430 --> 00:01:38,350
And then there's footer one to three across the bottom in the black.

21
00:01:38,840 --> 00:01:44,630
If I go back one and look at background images you can see that these are the three default background

22
00:01:44,630 --> 00:01:46,100
images.

23
00:01:46,490 --> 00:01:54,800
Basically the one at the top header and then one more and then third right before the bottom area.

24
00:01:54,800 --> 00:02:01,330
Now on the word press dashboard you may have already downloaded and unzipped the theme.

25
00:02:01,360 --> 00:02:02,320
Demo files.

26
00:02:02,320 --> 00:02:03,430
Zip file.

27
00:02:03,940 --> 00:02:09,910
But if I open it up in Windows Explorer can see that inside there there's a folder called Genesys layout

28
00:02:09,910 --> 00:02:16,450
configurations and there's 5 different PTF documents that show those layouts.

29
00:02:16,510 --> 00:02:23,410
You can see that there's a few different studio press themes on the Genesis framework that have these

30
00:02:23,500 --> 00:02:35,200
specific front page layouts alt. pro atmosphere pro author pro interior pro cafe pro digital pro and

31
00:02:35,260 --> 00:02:37,010
workstation Pro.

32
00:02:37,330 --> 00:02:42,880
You can experiment with any or all of those inside the student's sandbox and you can look at the home

33
00:02:42,880 --> 00:02:47,480
page layout documents by opening these Adobe PTF.

34
00:02:47,980 --> 00:02:49,530
Here's the cafe pro one.

35
00:02:49,780 --> 00:02:55,060
And the way it's laid out is you can see depending on how many widgets you have inside of any widget

36
00:02:55,060 --> 00:03:02,790
area in these front page or home page layout areas it will display them in these certain ways.

37
00:03:02,950 --> 00:03:09,490
One widget two widgets three widgets for splits it up into a four grid five has three across the top

38
00:03:09,580 --> 00:03:11,380
and two across the bottom.

39
00:03:11,380 --> 00:03:18,190
And then there's six in a grid seven shows three across the top under it a full width widget area and

40
00:03:18,190 --> 00:03:20,140
then three more widgets below.

41
00:03:20,200 --> 00:03:25,990
If you have eight widgets in the widget area shows them into stacks of four and then nine is obviously

42
00:03:26,230 --> 00:03:27,850
a nine item grid.

43
00:03:29,240 --> 00:03:35,570
Depending on which of these documents you have open you can see that they are actually slightly different

44
00:03:35,570 --> 00:03:42,680
depending on how many widgets you have in each widget area you open up one of the next ones say the

45
00:03:42,680 --> 00:03:46,240
altitude and the atmosphere pro layouts.

46
00:03:46,250 --> 00:03:54,200
It will open up that PTF and you can compare the two for instance the pro and atmosphere pro show 2

47
00:03:54,260 --> 00:04:04,250
widgets top and bottom whereas cafe shows two widgets side by side three widgets side by side for the

48
00:04:04,250 --> 00:04:12,200
cafe pro widget areas but in altitude and atmosphere Pro 3 is shown with one full width and then two

49
00:04:12,200 --> 00:04:20,870
side by side below so depending on which theme you're using these lay out areas work the widgets and

50
00:04:20,870 --> 00:04:23,650
their display slightly differently.

51
00:04:23,700 --> 00:04:30,790
We're working working with the cafe pro layouts PTF so I'll leave that open as I go into my website

52
00:04:30,850 --> 00:04:34,610
to try and arrange the front page in different ways.

53
00:04:35,800 --> 00:04:43,510
Let's look at the cafe pro demo site at demo that studio press com slash cafe and try and look at what

54
00:04:43,510 --> 00:04:44,920
they're doing here.

55
00:04:44,940 --> 00:04:52,750
There's one widget in the front page area one there's three text widgets in front page area too and

56
00:04:52,750 --> 00:04:56,070
you can see if you have a text widget here.

57
00:04:56,350 --> 00:05:04,590
If I look under front page two widget area in the theme settings you can see that these three menu items

58
00:05:04,590 --> 00:05:14,190
here are three text widgets and if you just put the text in here it centers the content so that it looks

59
00:05:14,190 --> 00:05:17,610
nice and centered within each of the widget areas.

60
00:05:17,640 --> 00:05:24,570
Also depending on how long the content is within each widget area it's a fixed width as a percentage

61
00:05:24,600 --> 00:05:26,830
of how wide this is.

62
00:05:26,910 --> 00:05:32,370
But it's also lengthens each widget depending on how much content there is.

63
00:05:32,400 --> 00:05:37,240
If I look at the Mobile responsiveness here if I pull the width of the site down.

64
00:05:37,440 --> 00:05:43,290
These widgets will fit three across and then they'll rearrange the a different screen size say for a

65
00:05:43,290 --> 00:05:47,190
tablet and then they'll rearrange themselves for a narrower screen.

66
00:05:47,550 --> 00:05:56,970
Finally they'll make themselves readable top to bottom if the screen is narrow enough say on a smartphone.

67
00:05:58,990 --> 00:06:01,840
Bring that back out to forward on my desktop here.

68
00:06:02,140 --> 00:06:07,180
Below we have one more widget here and there's a little icon.

69
00:06:07,180 --> 00:06:09,470
This is a dash icon.

70
00:06:09,490 --> 00:06:17,800
If you look inside of the studio press instructions area under front page 3 widget area you can see

71
00:06:17,800 --> 00:06:25,090
that they've got just a text widget with some text and then a code showing these dash icons dash icons

72
00:06:25,140 --> 00:06:30,470
carot we open dash icons page inside of Wordpress dot org.

73
00:06:30,610 --> 00:06:37,240
You can see that there's a whole bunch of icons that are part of a fun brought into WordPress automatically

74
00:06:37,600 --> 00:06:42,110
they're using this one which is Dasch icons Dasch carrot.

75
00:06:42,430 --> 00:06:48,460
And if you just copy the HTL Mal Control-C to copy and hit OK.

76
00:06:48,670 --> 00:06:55,780
What I've done back inside of my cafe site that are making inside the student's sandbox

77
00:06:58,420 --> 00:06:59,640
I refresh the page.

78
00:06:59,740 --> 00:07:06,310
I added that little carrot icon just below the text like they recommended in the studio press instructions

79
00:07:06,880 --> 00:07:15,300
and you can see if I open the customize or and I open widgets and I go down to front page 3 which is

80
00:07:15,300 --> 00:07:26,840
that area in the green here placed that pasted that little piece of code and then saved it.

81
00:07:26,930 --> 00:07:32,900
Let's take a look at two sites that I've made for clients using the cafe pro theme.

82
00:07:32,900 --> 00:07:35,910
This is a site for my local recreation center.

83
00:07:35,970 --> 00:07:38,260
You can see it's got a nice fall with image.

84
00:07:38,450 --> 00:07:42,440
No call out at the top in the big forehead or widget area.

85
00:07:42,710 --> 00:07:46,970
But then I've got a single widget in the front page one area.

86
00:07:47,330 --> 00:07:55,190
And then what we've set up are a series of six of the latest blog posts in the next front page section.

87
00:07:55,640 --> 00:08:03,110
And like we learned in a previous video I've got these so that there's a featured post widget for each

88
00:08:03,110 --> 00:08:09,580
one of these areas and I've got a zero offset and then a one offset to offset and so on.

89
00:08:09,620 --> 00:08:11,090
Three four and five.

90
00:08:11,090 --> 00:08:14,290
So we've got the latest six posts in this area.

91
00:08:14,660 --> 00:08:22,490
And then in the greenery here I've got a single widget with a soliloquy slider shows a slide show that

92
00:08:22,500 --> 00:08:26,980
they can go in and create and put new photos up whenever they want to.

93
00:08:27,210 --> 00:08:33,480
Down here there's two more blog posts in that same list of reverse order blog posts.

94
00:08:33,480 --> 00:08:42,300
So these are single featured posts with an offset of six and an offset of seven making for eight total

95
00:08:42,300 --> 00:08:50,800
blog posts on the entire site that repopulate themselves whenever the site owners make a new blog post.

96
00:08:50,870 --> 00:08:56,980
None of the bottom we've just got the three different properties of the rec center in the town of Breckenridge

97
00:08:57,250 --> 00:09:01,630
and then a convenient menu at the bottom.

98
00:09:01,630 --> 00:09:08,640
If we look at a single blog post in the interior of the page we go to the header.

99
00:09:08,640 --> 00:09:14,950
Image is a little bit smaller and across the top behind the logo here and as you scroll down I've got

100
00:09:14,980 --> 00:09:22,300
a two column layout and I've got an interactive map in the sidebar and then their Facebook page indicated

101
00:09:22,300 --> 00:09:31,060
there and they've got all of their categories and a tag cloud here on the right side as well as an after

102
00:09:31,060 --> 00:09:36,940
entry widget that shows just an about page after each of the single pages and posts that they have on

103
00:09:36,940 --> 00:09:38,070
the Web site.

104
00:09:38,350 --> 00:09:43,510
Our navigation doesn't actually use the scrolling home page navigation but they wanted to call out all

105
00:09:43,510 --> 00:09:47,670
their different categories of posts inside of their blog.

106
00:09:49,380 --> 00:09:55,150
If we move over to the next one method snowboard academy you could see that I've got it a little bit

107
00:09:55,150 --> 00:10:01,900
different instead of the square text based logo and header image that's created just from the words

108
00:10:01,930 --> 00:10:04,260
and the title of our site and the tagline.

109
00:10:04,270 --> 00:10:10,060
I've got a custom image that's got some transparency and shows through the background just a little

110
00:10:10,060 --> 00:10:10,650
bit.

111
00:10:10,660 --> 00:10:16,150
It's also a little bit larger than the one that you can see over here.

112
00:10:16,150 --> 00:10:21,870
This one goes as wide as the actual words go over here with method.

113
00:10:21,880 --> 00:10:25,090
I've had to make a little bit of customisation that I'll show you.

114
00:10:25,090 --> 00:10:32,180
And I made this an custom header image a little bit wider than the recommended 350 pixels wide.

115
00:10:32,190 --> 00:10:38,860
In fact this one is 750 pixels wide to fit that nice big logo we are using.

116
00:10:38,860 --> 00:10:46,210
One of the scrolling buttons to the next section of the Web site and then Methot Academy has six different

117
00:10:46,210 --> 00:10:47,100
programs.

118
00:10:47,110 --> 00:10:50,800
These are featured pages within the Genesys system.

119
00:10:51,630 --> 00:10:53,730
And they stay static and go over the second.

120
00:10:53,730 --> 00:11:01,650
So it's a group of six here's a group of three widgets three widgets in that area and I've had that

121
00:11:01,650 --> 00:11:06,620
change of green over to a bright red that matches the logo.

122
00:11:06,930 --> 00:11:12,480
And finally I've got just a single widget in the last part of the Web site and then in the three footer

123
00:11:12,520 --> 00:11:22,890
areas a Facebook follow us button and display as well as a fancy little social icons that I customized

124
00:11:23,190 --> 00:11:29,040
using some of the code from a different genesis theme and pulled in this neat rotating effect in the

125
00:11:29,040 --> 00:11:31,220
social sharing icons.

126
00:11:31,740 --> 00:11:38,130
I've got a form so that athletes and parents can sign up for an email list which goes to a MailChimp

127
00:11:38,220 --> 00:11:41,760
list that we can manage and send out bulk e-mails.

128
00:11:42,120 --> 00:11:47,850
And then I've got a premium Instagram feed where you can click on any of the images and it opens it

129
00:11:47,850 --> 00:11:52,340
in a light box into a slideshow display if you like.

130
00:11:52,530 --> 00:11:58,170
And this pulls in from our Instagram account directly up onto the Web site with that display using one

131
00:11:58,170 --> 00:12:06,670
of the premium Instagram themes from smashed balloon so with that said let me just show you how I edited

132
00:12:06,670 --> 00:12:14,410
this image to be a little bit larger and changed it from what the standard was from the brokerage recreation

133
00:12:14,740 --> 00:12:22,210
and what cafe does I have both of the customizes open between each of these sites the method site and

134
00:12:22,210 --> 00:12:24,250
the Brekke Rec Center site.

135
00:12:24,250 --> 00:12:27,790
If you look under a rock there's a header image.

136
00:12:27,790 --> 00:12:33,310
Now I don't have a custom image I'm just using the standard black box with white copy but it recommends

137
00:12:33,310 --> 00:12:36,040
ahead or size of 350 by 140.

138
00:12:36,430 --> 00:12:42,330
I found over at method that that was not enough room to get our nice logo in here.

139
00:12:42,580 --> 00:12:48,580
And I changed it so that it would accept a header image of 750 by 180.

140
00:12:48,580 --> 00:12:49,650
Now how did I get that.

141
00:12:49,810 --> 00:12:58,120
I had to edit just a little piece of code inside the functions dot THP file inside of Cafe pro.

142
00:12:58,120 --> 00:13:04,180
Now you might remember that I don't really recommend changing the functions that BHP inside of a theme

143
00:13:04,180 --> 00:13:05,680
unless it's a child theme.

144
00:13:05,680 --> 00:13:09,240
Now this is a child theme of the Genesis framework.

145
00:13:09,240 --> 00:13:12,690
And so I can't really make a grandchild theme here.

146
00:13:12,850 --> 00:13:20,080
So potentially instead of editing one line inside the function's ph P file I could have used code snippets

147
00:13:20,080 --> 00:13:26,350
plug in or the WP clips plug in that we went over in a previous chapter in order to make this so that

148
00:13:26,530 --> 00:13:32,620
if studio press does update the cafe pro theme I'd be able to update it without remembering what I need

149
00:13:32,620 --> 00:13:34,010
to customize.

150
00:13:34,090 --> 00:13:37,160
In any case I just made the change inside of functions that.

151
00:13:37,270 --> 00:13:45,820
Just scroll down to where I found a add support for a custom header and it was 350 by 140 I think and

152
00:13:45,820 --> 00:13:52,990
I just changed it to 750 by 180 which caused the customized it is customized to change and it enabled

153
00:13:52,990 --> 00:13:59,770
the site to display a larger and wider image which I made inside of Photoshop used it as a transparent

154
00:14:00,010 --> 00:14:05,370
PLG file or a ping file so that it would roll over and have that neat transparent effect.

155
00:14:06,680 --> 00:14:10,060
So here's your challenge for the next section.

156
00:14:10,070 --> 00:14:20,420
Go to your cafe pro theme design and edit each of the widget areas for the front page and using the

157
00:14:20,420 --> 00:14:29,630
cafe pro layouts PTF to lay out some of the front page areas on the home page to have more than one

158
00:14:29,630 --> 00:14:35,570
widget and some different configurations here and experiment a little bit using putting pages in or

159
00:14:35,570 --> 00:14:38,680
featured posts in different configurations.

160
00:14:39,780 --> 00:14:46,890
Feel free to embed a soliloquy slider in one of the front page areas just like we created in a previous

161
00:14:46,890 --> 00:14:54,450
chapter and in the next video I'll show you how I will go through and put some different pieces together

162
00:14:54,660 --> 00:14:58,380
for this home page at the same time.

163
00:14:58,410 --> 00:15:05,540
You should also create three different widgets for the three widget areas that go across the footer.

164
00:15:05,570 --> 00:15:06,200
Good luck.

165
00:15:07,740 --> 00:15:13,050
In this video you opened one of the Genesis home page layout documents from the theme demo files that

166
00:15:13,050 --> 00:15:15,600
you downloaded from the student's sandbox.

167
00:15:15,600 --> 00:15:20,850
I showed you around two different client sites I made using the cafe pro theme and challenge you to

168
00:15:20,850 --> 00:15:26,940
customize your own cafe pro-se within the student sandbox in the next lesson I'll walk you through the

169
00:15:26,940 --> 00:15:29,790
steps I took to make the home page look great.

170
00:15:29,790 --> 00:15:30,230
See there