1
00:00:01,040 --> 00:00:06,890
In this video you'll configure the executive pro home page widget areas each Genesys theme from Studio

2
00:00:06,890 --> 00:00:08,840
press treats the home page differently.

3
00:00:08,840 --> 00:00:15,500
But many use Widget areas to make the home page modular and editable by the end of this video you'll

4
00:00:15,500 --> 00:00:21,440
have a working home page inside the executive pro theme in the sandbox and you'll understand how a specialized

5
00:00:21,440 --> 00:00:24,170
home page template inside a theme can work.

6
00:00:25,650 --> 00:00:27,830
Let's start by opening the customize or.

7
00:00:28,020 --> 00:00:35,490
And look at what we're working with inside the customize or we can look under widgets and we can see

8
00:00:35,700 --> 00:00:39,730
that this theme has a number of widgets for the home page.

9
00:00:39,810 --> 00:00:44,320
The header right is where the menus are located just like in the parallax theme.

10
00:00:44,460 --> 00:00:50,870
But then we have the home slider home top home call to action and home middle sections.

11
00:00:50,970 --> 00:00:55,920
In addition to 3 footer widgets available to us within the theme.

12
00:00:56,080 --> 00:01:02,170
Now let's just start by opening up the existing content that we have a custom menu is fine to leave

13
00:01:02,170 --> 00:01:03,730
in the header right.

14
00:01:03,850 --> 00:01:14,160
And let's take what we have out of the actual widget areas we don't need to save any of these widgets

15
00:01:15,060 --> 00:01:22,950
that have a certain content in them so let's just click Remove on each one and then I'll save and publish

16
00:01:22,950 --> 00:01:25,840
the site with nothing on the home page.

17
00:01:25,980 --> 00:01:33,730
One more inside the footer the Connect with me and the simple social icons.

18
00:01:33,880 --> 00:01:36,640
I think I'll just get rid of these as well.

19
00:01:36,640 --> 00:01:37,290
There we go.

20
00:01:37,330 --> 00:01:44,440
Now that there's nothing inside of the home page area what we have is a site that displays the latest

21
00:01:44,440 --> 00:01:53,200
blog posts in reverse order just like a standard WordPress theme might go into your own executive pro

22
00:01:53,200 --> 00:01:55,490
dashboard and do the same.

23
00:01:55,510 --> 00:01:59,180
Let's empty all the widget areas out and start from scratch.

24
00:01:59,240 --> 00:02:05,940
Then you can follow along with how I configure the homepage using the simple content that we've imported.

25
00:02:07,050 --> 00:02:14,280
Before we get to customizing the home page widget areas let's look at some widgets inside.

26
00:02:14,290 --> 00:02:19,980
Say we wanted to use the home type widget area and click Add a widget.

27
00:02:20,010 --> 00:02:28,110
Genesis allows us to use featured pages or posts within widget areas and these widgets have certain

28
00:02:28,200 --> 00:02:29,660
image sizes.

29
00:02:29,730 --> 00:02:38,420
They use a 300 by 100 300 by 200 and a slider image size 11 40 by 445.

30
00:02:38,520 --> 00:02:43,890
And if we already have images inside the media library which we know we do we imported them as a part

31
00:02:43,890 --> 00:02:46,380
of that XML import file.

32
00:02:46,500 --> 00:02:49,810
They're just grey images inside of the media library.

33
00:02:49,890 --> 00:02:56,670
But we need WordPress to generate these sizes that are defined within the Genesis executive pro theme

34
00:02:56,970 --> 00:03:04,230
before we can get them to be resized and displayed correctly without distortion or pixellation the way

35
00:03:04,230 --> 00:03:13,800
we do that is go back into the Wordpress dashboard and run a plug in called regenerate thumbnails.

36
00:03:13,800 --> 00:03:19,770
This is a great plug in to have and to know how to use if we go into plug ins we need to activate the

37
00:03:19,980 --> 00:03:22,440
regenerate thumbnails plug in.

38
00:03:22,440 --> 00:03:29,310
I have it already installed into the multi-site set up in the student's sandbox but regenerate thumbnails

39
00:03:29,310 --> 00:03:36,510
is a very popular plug in to be able to resize and regenerate the thumbnails off of a larger image so

40
00:03:36,510 --> 00:03:41,610
that they work correctly for your media library and your theme settings.

41
00:03:41,610 --> 00:03:49,800
Now that I have regenerate thumbnails activated I can go to tools and region thumbnails and I could

42
00:03:49,800 --> 00:03:57,510
click regenerate all thumbnails it will take just a few minutes with all these images that we have.

43
00:03:57,510 --> 00:04:05,600
Theres not that many in the media library and its resizing and regenerating the thumbnails off the larger

44
00:04:05,600 --> 00:04:15,410
images and saving them within the media library uploads folder those settings are defined within settings

45
00:04:15,830 --> 00:04:22,640
media where it will generate images that we define here the medium size the large size and the thumbnail

46
00:04:22,640 --> 00:04:30,920
size images and then that the theme itself defines some specific image sizes that we could see inside

47
00:04:30,920 --> 00:04:33,910
of the Genesis widget settings there.

48
00:04:34,010 --> 00:04:39,820
So now that weve regenerated all the thumbnail sizes from the existing images inside the media library

49
00:04:40,160 --> 00:04:47,960
according to the theme we can go and customize the theme home page widgets so from anywhere inside the

50
00:04:47,960 --> 00:04:54,110
dashboard just click the Customize button or might be under appearance customize or you saw me hit the

51
00:04:54,110 --> 00:04:56,770
Customize button under the active theme there.

52
00:04:57,260 --> 00:05:04,800
I'll go under widgets and let's start with the home slider widget.

53
00:05:05,230 --> 00:05:13,580
If I add a widget I can see that oops I don't have the Genesis responsive slider plug in activated.

54
00:05:13,720 --> 00:05:19,010
So let's go back into the Wordpress dashboard and under plug ins.

55
00:05:19,060 --> 00:05:25,360
I'm going to activate the Genesis slider.

56
00:05:25,640 --> 00:05:34,870
Great now that I have that activated I can go under appearance customize and I'll go into the widgets

57
00:05:34,870 --> 00:05:44,190
area now when I go under Slider I can add a widget and add a Genesys responsive slider widget to that

58
00:05:44,190 --> 00:05:45,970
area.

59
00:05:46,020 --> 00:05:53,100
Now that I've added any widget to the home page widgets areas that that reverse order blog home page

60
00:05:53,130 --> 00:05:59,250
is now deactivated and I have a slider active inside of the widget area.

61
00:05:59,250 --> 00:06:05,550
Now I have three pages that are inside the widget here but you can tell that they're not configured

62
00:06:05,580 --> 00:06:06,660
exactly right.

63
00:06:07,930 --> 00:06:13,480
We can go to the slider settings page to configure the Genesis responsive slider.

64
00:06:13,480 --> 00:06:14,950
I could click this link here.

65
00:06:16,230 --> 00:06:22,950
But I can also show you after I published that inside the dashboard there are some settings under Genesis

66
00:06:23,250 --> 00:06:25,500
when you activate that slider plug in.

67
00:06:25,500 --> 00:06:31,560
You can click slider settings under the Genesis menu.

68
00:06:31,730 --> 00:06:38,500
Let's go through the slider settings and set it up like the demo in the executive Parow demo.

69
00:06:38,510 --> 00:06:45,500
They've got posts set up to be displayed inside the slider and each of them has a featured image with

70
00:06:45,500 --> 00:06:47,050
a little bit of content.

71
00:06:47,240 --> 00:06:54,570
And then the slider itself will supply a continue reading link and the image will also link to the post.

72
00:06:54,800 --> 00:06:57,960
Let's look at those settings inside the slider settings.

73
00:06:58,460 --> 00:07:06,080
You can choose a post type from whatever post types are displayed and being used inside the theme in

74
00:07:06,080 --> 00:07:12,270
here you can see that there's posts pages and also that additional post-white that the executive pro-team

75
00:07:12,410 --> 00:07:14,330
uses portfolio.

76
00:07:14,630 --> 00:07:22,970
For now let's leave it at the Post's settings and we can choose a term we could use categories or tags

77
00:07:23,270 --> 00:07:32,000
for the slider to select certain categories or tags with which to display the posts.

78
00:07:32,000 --> 00:07:40,890
If we just have all categories there we can then include or exclude categories or posts themselves by

79
00:07:41,220 --> 00:07:42,220
IDs.

80
00:07:43,770 --> 00:07:54,030
The post ID down here or the taxonomy ID for a category or tag or a portfolio ID could be included or

81
00:07:54,360 --> 00:07:57,250
excluded in these areas here.

82
00:07:57,360 --> 00:08:06,650
You can choose to include or exclude any of these post ID's the easy way to find the ID number of a

83
00:08:06,650 --> 00:08:12,980
post page or other post type is to go that posts page.

84
00:08:12,980 --> 00:08:20,060
And if you look at each of the posts here when you roll over the post it's you Arel inside the Wordpress

85
00:08:20,060 --> 00:08:25,280
dashboard that you can see at the bottom left hand side as I hold the mouse over this one.

86
00:08:25,280 --> 00:08:32,530
You can see that the the number as post equals 4:59 and the return the next one as post equals 4:58.

87
00:08:32,600 --> 00:08:38,720
If you do click any of the posts you can look at the address bar up here where it says.

88
00:08:38,900 --> 00:08:40,660
After the question mark.

89
00:08:40,660 --> 00:08:42,670
Post equals and then a number.

90
00:08:42,770 --> 00:08:50,360
That's the post ID if you want to use that number to either include or exclude any post page or even

91
00:08:50,360 --> 00:08:55,260
a portfolio item category or tag ID's are found in a similar way.

92
00:08:55,400 --> 00:09:02,750
If you go to the categories or the tags page and roll over the category link or click on that category

93
00:09:02,750 --> 00:09:14,100
in order to edit the category information up in the URL is a an ID ID equals three on this one in the

94
00:09:14,100 --> 00:09:16,620
case of the executive pro-team demo.

95
00:09:16,800 --> 00:09:26,460
They're using just the most recent three posts in any taxonomy and term and they're going to be displayed

96
00:09:26,700 --> 00:09:35,880
by date and they're showing three slides and the offset means that if you want to go down into the list

97
00:09:35,970 --> 00:09:41,320
of posts that are defined by these categories are these characteristics.

98
00:09:41,460 --> 00:09:46,310
You could skip one or two or three posts and then start below.

99
00:09:46,320 --> 00:09:48,900
For now let's just leave it at 3.

100
00:09:48,960 --> 00:09:55,600
The default is for the effect to slide from right to left or left to right instead of fade.

101
00:09:55,710 --> 00:10:00,780
In terms of the default settings we can leave the settings here as they are.

102
00:10:00,780 --> 00:10:07,380
The display settings have the right size for the way the theme is set up and you can choose to display

103
00:10:07,380 --> 00:10:14,190
the previous and the next arrows and the pagination is the dots here.

104
00:10:14,220 --> 00:10:16,080
One two three.

105
00:10:16,280 --> 00:10:23,210
Now if we compare that to what our site looks like at the moment let's refresh the page on our site.

106
00:10:23,210 --> 00:10:27,270
It looks like I have that one is fine.

107
00:10:27,300 --> 00:10:30,560
The second post is showing doesn't have much.

108
00:10:30,720 --> 00:10:33,330
And the third post looks fine.

109
00:10:33,510 --> 00:10:36,030
So let's figure out what's wrong there.

110
00:10:36,030 --> 00:10:42,650
If we look at our posts list it's first to show the last three posts.

111
00:10:42,950 --> 00:10:48,530
I see I think it's holding showing the hello world post which obviously was more recent than any of

112
00:10:48,530 --> 00:10:49,280
these posts.

113
00:10:49,280 --> 00:10:52,500
When the document was created that we imported.

114
00:10:52,790 --> 00:10:54,530
So I'm just going to throw that.

115
00:10:54,590 --> 00:10:55,270
Hello.

116
00:10:55,370 --> 00:10:57,100
Hello world post away.

117
00:10:58,530 --> 00:11:05,280
And the threaded comments post whether it's sticky or not only applies to the blog page or when you

118
00:11:05,280 --> 00:11:11,610
have a post listing page like an archive page and so I can leave that how it is and I think by doing

119
00:11:11,610 --> 00:11:17,700
that I've probably fixed my slider to show the last three posts in that list.

120
00:11:19,980 --> 00:11:23,380
There we go and there's the third grade.

121
00:11:23,450 --> 00:11:28,650
Shows me that I'm using the featured images that are in each one of those posts and if I click through

122
00:11:28,650 --> 00:11:37,060
to one it's going to show that post itself without showing the featured image.

123
00:11:37,080 --> 00:11:44,670
Now back inside the Wordpress dashboard under Gen. slider settings you can see that there are many options

124
00:11:44,730 --> 00:11:50,820
and different configurations that you could have for the executive pro slider.

125
00:11:50,820 --> 00:11:55,260
In this case they've shown the last three posts with no offset.

126
00:11:55,260 --> 00:12:01,830
And so when the user creates any new posts will be front and center on the home page and clickable right

127
00:12:01,830 --> 00:12:04,430
through to the new posts.

128
00:12:04,440 --> 00:12:10,800
However you could choose to show pages here or even portfolio items here and have them click through

129
00:12:10,800 --> 00:12:14,190
to those fixed pages like we have down here.

130
00:12:14,550 --> 00:12:17,280
Let's go to the next section in the next section.

131
00:12:17,280 --> 00:12:25,920
This one is called Home Page 1 and I'm just going to go to a Pierrots customize that way I can see what

132
00:12:25,920 --> 00:12:30,580
my results are on the right hand side while I make edits on the left.

133
00:12:30,780 --> 00:12:38,700
So if I open widgets I can go to Home top and I'm going to add a certain kind of widget here that again

134
00:12:38,880 --> 00:12:45,720
is part of the premium Genesis framework featured pages.

135
00:12:45,720 --> 00:12:53,790
Now if I had that featured page widget it's going to show a single page for every featured page widget

136
00:12:53,820 --> 00:12:54,940
that I bring in here.

137
00:12:54,990 --> 00:12:56,570
So which page.

138
00:12:56,710 --> 00:13:02,140
Let's see let's look at the executive pro demo development design and consulting.

139
00:13:02,220 --> 00:13:05,570
For now we'll go with the same ones that they are using.

140
00:13:05,580 --> 00:13:15,570
So if I use development page I want to show the featured image I want to use the featured image size.

141
00:13:16,050 --> 00:13:22,710
I can leave alignment none and I want to show I believe they're showing me the page title and some of

142
00:13:22,710 --> 00:13:23,960
the content.

143
00:13:24,080 --> 00:13:29,730
That's right if we show the page title and the page content.

144
00:13:29,960 --> 00:13:32,360
I'm starting to see what this might look like.

145
00:13:32,540 --> 00:13:38,070
Now for the content limit I don't want to show all the content in that little block.

146
00:13:39,560 --> 00:13:45,470
And so if I want about this much content and I want that image to be shaped like that

147
00:13:48,260 --> 00:13:49,820
let's say I'm going to use about

148
00:13:53,480 --> 00:13:54,860
200 characters.

149
00:13:54,860 --> 00:13:55,710
Sure.

150
00:13:56,600 --> 00:13:58,530
Maybe I'll go 150

151
00:14:05,600 --> 00:14:08,740
I'll put Read more.

152
00:14:08,790 --> 00:14:09,900
Now we're getting somewhere.

153
00:14:09,900 --> 00:14:12,020
I've got a nicely sized image here.

154
00:14:12,210 --> 00:14:18,320
I've got an excerpt with only 150 characters and then I've got a read more link.

155
00:14:18,330 --> 00:14:21,640
Maybe I want to put a couple of little carrots after that.

156
00:14:23,660 --> 00:14:25,100
That looks great.

157
00:14:25,100 --> 00:14:28,070
All right I'll save and publish.

158
00:14:28,400 --> 00:14:34,550
And then what you can do is follow along with what I've just done and add two more of the featured pages

159
00:14:34,550 --> 00:14:40,640
that are appropriate from this theme demo the design page and the consulting page and configure them

160
00:14:40,910 --> 00:14:46,920
just like this just like we've done in this first section great how they go for you.

161
00:14:46,920 --> 00:14:53,500
It looks pretty good for me if I look over at the demo site I can see there is a slight difference.

162
00:14:53,520 --> 00:15:00,520
The title is above the image and it's also a little bit smaller and in all caps in the demo design.

163
00:15:00,750 --> 00:15:02,160
What's the difference here.

164
00:15:02,400 --> 00:15:07,130
Ah the title is below potentially because we've left the title out.

165
00:15:07,260 --> 00:15:09,550
So under consulting.

166
00:15:09,910 --> 00:15:17,610
I'll just put consulting as the title in that title area and you can see it displays it up here.

167
00:15:18,890 --> 00:15:22,520
So I'll do that for all three.

168
00:15:22,520 --> 00:15:24,950
Let's save and publish and see how that looks.

169
00:15:25,780 --> 00:15:34,480
And of course since I'm showing the title as a custom title here I need to uncheck show page title in

170
00:15:34,480 --> 00:15:36,100
each of the widgets as well.

171
00:15:39,260 --> 00:15:41,210
Now we're looking good.

172
00:15:41,210 --> 00:15:48,260
You should be getting the idea now that you don't have to put featured page widgets inside of this home

173
00:15:48,320 --> 00:15:50,890
widget area on the homepage.

174
00:15:50,960 --> 00:15:56,810
You can actually customize that with anything you like or any type of widget that you could put inside

175
00:15:56,810 --> 00:16:04,340
that widget area you might do something with posts and now the featured post widget looks a little bit

176
00:16:04,340 --> 00:16:11,300
different and because feature pages are one off widgets they show one featured page per widget inside

177
00:16:11,300 --> 00:16:12,580
the widget areas.

178
00:16:12,600 --> 00:16:19,850
Posts can be sort of automatically can self configuring by listing posts more than one of them from

179
00:16:19,850 --> 00:16:28,490
categories specific categories that you have or some different types of posts just like we talked about

180
00:16:28,880 --> 00:16:31,650
inside of the slider area there.

181
00:16:31,730 --> 00:16:37,560
For now I'm just going to go back to the home page and go to the next section.

182
00:16:37,580 --> 00:16:40,680
The call to action.

183
00:16:40,960 --> 00:16:47,530
You may have noticed that I put an accidental WordPress post inside of that home top area because I

184
00:16:47,530 --> 00:16:50,480
don't want that featured.

185
00:16:50,550 --> 00:16:58,720
I don't want that feature posts widget to be there so I'm going to delete that and leave yes.

186
00:16:58,760 --> 00:17:05,370
Leave the home top widget area populated with just these three pages.

187
00:17:07,760 --> 00:17:14,510
The next one is called Home call to action and in the executive pro theme demo you can see that it's

188
00:17:14,510 --> 00:17:21,640
got a different background and is designed to put a button and a suggestion to do something.

189
00:17:21,710 --> 00:17:27,230
While visitors are coming down scrolling down the home page and reading the site this is a good place

190
00:17:27,470 --> 00:17:29,420
to write something like.

191
00:17:29,420 --> 00:17:32,240
Contact us through the contact page or something like that.

192
00:17:32,240 --> 00:17:37,190
And this button could be clickable to the Contact Us page where there's a nice forum where they could

193
00:17:37,190 --> 00:17:39,110
ask a question.

194
00:17:39,180 --> 00:17:43,520
So let's go ahead and set that up using a text widget.

195
00:17:43,650 --> 00:17:45,270
Scroll to the bottom of the list.

196
00:17:45,300 --> 00:17:47,180
That's where the text widgets are

197
00:17:50,130 --> 00:17:52,160
and there's a title and a content area.

198
00:17:52,160 --> 00:17:57,460
We've played with text widgets before for this area.

199
00:17:57,460 --> 00:18:01,740
Just go ahead and make a title.

200
00:18:01,780 --> 00:18:05,500
In fact I'm going to write Contact Us

201
00:18:09,870 --> 00:18:13,150
and put some content within the content area.

202
00:18:15,490 --> 00:18:19,040
I'm sure you've seen how configuring the home page can work.

203
00:18:19,150 --> 00:18:25,900
For now we're going to leave just a title and some content in text inside of the call to action section.

204
00:18:26,200 --> 00:18:34,000
And what I'd like you to do is fill out the rest of the home page configuration by following what you

205
00:18:34,000 --> 00:18:36,870
see in the executive pro demo.

206
00:18:37,100 --> 00:18:42,810
Place another three featured pages and configure them to go below the call to action banner.

207
00:18:43,180 --> 00:18:54,500
That would be inside of home middle and then configure the footer to have a set of 3 widgets of your

208
00:18:54,500 --> 00:18:56,880
choice across here.

209
00:18:56,950 --> 00:18:58,190
How do you do.

210
00:18:58,190 --> 00:19:02,590
We are able to figure out how to add the next sections to the home page.

211
00:19:02,930 --> 00:19:07,130
Here's what mine looks like now that I have refresh the page inside a new tab.

212
00:19:07,250 --> 00:19:14,360
Of course it would look better with real images but I can tell it's going to look great in this video.

213
00:19:14,400 --> 00:19:20,220
You configured the specialized home page of the executive pro theme using the provided widget areas

214
00:19:20,590 --> 00:19:27,630
you discovered how Genesis themes can use predefined image thumbnail sizes featured pages and post widgets

215
00:19:27,900 --> 00:19:31,940
and a slider built for Genesis themes in the next lesson.

216
00:19:32,010 --> 00:19:39,210
You'll finish the call to action widget by using some special CSSA classes built into Genesis and add

217
00:19:39,210 --> 00:19:41,130
a pre-designed button as well.