1
00:00:00,790 --> 00:00:06,350
In this video we'll explore a set of styles built into Genesis themes for creating different column

2
00:00:06,380 --> 00:00:09,050
layouts in any content area.

3
00:00:09,050 --> 00:00:15,170
These column classes defined in the CSL style sheet allow us to arrange content in a number of ways

4
00:00:15,500 --> 00:00:21,440
we use them to style the content in the call to action section of the executive pro home page.

5
00:00:21,620 --> 00:00:26,630
By the end of this lesson you'll understand how to use the predefined column classes to make it easy

6
00:00:26,630 --> 00:00:29,570
to arrange blocks of content anywhere in the web site.

7
00:00:30,850 --> 00:00:33,910
Let's start by opening up the site we've been working on.

8
00:00:33,910 --> 00:00:43,210
Executive pro in your students sandbox if you log in with a fresh loggin you might have to navigate

9
00:00:43,540 --> 00:00:49,640
to the correct site because by now you should have two sites within your students sandbox.

10
00:00:49,690 --> 00:00:52,400
So if your original one is the one that opens first.

11
00:00:52,530 --> 00:00:57,610
Make sure you navigate to executive pro or the second one that we've been working on in this chapter

12
00:00:57,880 --> 00:01:01,250
and click dashboard.

13
00:01:01,660 --> 00:01:08,890
Now that that's open let's take a look at a certain page that we used the importer to import into our

14
00:01:08,890 --> 00:01:09,520
site.

15
00:01:09,520 --> 00:01:12,510
It's called Kollam classes in my installation.

16
00:01:12,520 --> 00:01:17,190
It's the first one because it starts with the letter C.

17
00:01:17,420 --> 00:01:24,480
Now if we open that page and edit it you can see that there's not really any columns visible inside

18
00:01:24,480 --> 00:01:26,130
the editing area.

19
00:01:26,130 --> 00:01:32,630
In fact there's just you know four sections of text and six sections of text.

20
00:01:32,790 --> 00:01:39,690
But if you right click on the permalink and open in a new tab and take a look at the column class's

21
00:01:39,690 --> 00:01:47,450
page you'll see that two columns makes obviously two columns arranged in the content area three columns

22
00:01:47,450 --> 00:01:55,870
is three and there's four and then there's six columns so the column classes are defined in a CSSA style

23
00:01:55,870 --> 00:01:58,110
sheet of the Genesis themes.

24
00:01:58,110 --> 00:02:05,400
And once you know how to use them you can arrange your content in a widget area or in the content area

25
00:02:05,400 --> 00:02:08,730
of a page or a post in any of these ways.

26
00:02:10,210 --> 00:02:17,380
Back inside of the Wordpress dashboard on the editing page for the column classes page if we go to the

27
00:02:17,380 --> 00:02:25,450
right there's two tabs one is the visual tab and one is the text editing tab inside the editor in wordpress

28
00:02:25,990 --> 00:02:30,720
and you can see that this is the way that the column classes are defined.

29
00:02:30,910 --> 00:02:38,320
They're defined with what's called a div and then you define a class with an equal sign a quotation

30
00:02:38,320 --> 00:02:41,300
mark and then the name of the class.

31
00:02:41,500 --> 00:02:47,860
And if it's the first one a space and then the word first with a closing quote and a closing carrot

32
00:02:47,860 --> 00:02:56,710
surrounding the whole div when you use a div like this which is part of the language of HTL you need

33
00:02:56,710 --> 00:03:04,800
to then close the div when you're done by using a slash inside of the carrot's before the word div.

34
00:03:05,080 --> 00:03:08,980
And so the whole piece of code looks like this.

35
00:03:08,980 --> 00:03:16,000
It starts with div you define a class and you have your content inside of the div and then you close

36
00:03:16,000 --> 00:03:23,620
the door of using a slash div inside of greater than and less than characters in on your keyboard.

37
00:03:24,740 --> 00:03:30,340
Now you don't always have to type all of your code when you're defining some different classes within

38
00:03:30,350 --> 00:03:38,330
Genesis or any WordPress theme or framework but this page has been imported in here to make it convenient

39
00:03:38,330 --> 00:03:43,450
for us to copy and paste these code snippets into our content areas.

40
00:03:44,670 --> 00:03:51,290
Now studio press provides some code snippets when you're a member of studio press.

41
00:03:51,450 --> 00:03:59,130
You can log in and get all the theme instructions and a whole bunch of code snippets and different instructions

42
00:03:59,130 --> 00:04:01,590
for how to use Genesys specifically.

43
00:04:01,680 --> 00:04:10,530
But even without being a member studio press does post inside of get hub as a just which is basically

44
00:04:10,740 --> 00:04:17,220
just a section of code that they can make available at the get have Web site Web site for people to

45
00:04:17,220 --> 00:04:18,570
copy and paste.

46
00:04:18,810 --> 00:04:26,240
But inside of the studio press account get Herb their just's are listed here and there's 82 of them

47
00:04:27,240 --> 00:04:34,950
and there's just an assortment of ones some of her specific themes like atmosphere author pro alt. pro

48
00:04:35,790 --> 00:04:42,150
and on the third or fourth page I think as you scroll down that you can go to older gests and look at

49
00:04:42,150 --> 00:04:48,150
the entire collection of 82 just's which are just like I said sections of code.

50
00:04:48,360 --> 00:04:53,910
Sometimes there's actually more than one file within a just if I click these three files or click the

51
00:04:53,910 --> 00:05:02,780
name of that it will show me these three pieces of code that I can copy and paste but I've gone gone

52
00:05:02,780 --> 00:05:09,860
down through to the third or fourth page and I found this a set of just two of them for the executive

53
00:05:09,860 --> 00:05:11,300
pro theme.

54
00:05:11,300 --> 00:05:15,820
The call to action banner has this piece of content inside it.

55
00:05:16,070 --> 00:05:23,020
I'm going to go ahead and copy it by highlighting the whole thing and having control-C.

56
00:05:23,140 --> 00:05:31,810
Now this is located at just dot get hub dot com slash studio press and you can browse through and find

57
00:05:32,080 --> 00:05:38,740
the executive projects on the third or fourth page or you can have this inside the address bar the number

58
00:05:38,800 --> 00:05:43,580
6 6 0 2 8 1 1 to find this piece of code.

59
00:05:43,600 --> 00:05:49,030
I'll also make these pieces of codes and every piece of code that we use within the course available

60
00:05:49,270 --> 00:05:56,940
in the course material and on the resources pages so I've copied this piece of code and I'm going to

61
00:05:56,940 --> 00:06:03,750
go back into editing the page and I'm actually in the Wordpress dash for them and I go back to where

62
00:06:03,750 --> 00:06:06,630
we were working before in the customized.

63
00:06:07,080 --> 00:06:14,520
So I've hit appearance customize and as that opens I'll go to the widgets areas if you remember we were

64
00:06:14,520 --> 00:06:19,940
working on the different home widgets on the home page of our sample site here.

65
00:06:20,100 --> 00:06:22,590
And here's the call to action section.

66
00:06:22,590 --> 00:06:24,540
So home call to action widget.

67
00:06:24,630 --> 00:06:31,440
I just have a text widget here with a contact us for a title and then the content here I'm just going

68
00:06:31,440 --> 00:06:37,950
to highlight then hit backspace and I can hit Control V or of course you can always right click and

69
00:06:37,950 --> 00:06:39,630
click paste.

70
00:06:39,640 --> 00:06:47,340
And here's the divs with the class three fourths first and then the second one the second div is one

71
00:06:47,340 --> 00:06:48,310
fourth.

72
00:06:48,360 --> 00:06:56,310
So not only can you do a set of two columns or a set of three columns or a set of four but you could

73
00:06:56,310 --> 00:07:04,470
actually do a three quarters three fourths and then a one fourth section of any section you could even

74
00:07:04,470 --> 00:07:13,050
do a four six and then a one sixth and another a one sixth and will experiment with that just a little

75
00:07:13,050 --> 00:07:21,090
bit here by customizing the code that we're using inside of the contact us call to action section.

76
00:07:21,340 --> 00:07:26,550
So I hope you're following along and you found this piece of code in one of the two places I outlined

77
00:07:27,360 --> 00:07:33,600
and pasted it into the call to action widget in a text widget and call that what you want let's just

78
00:07:33,600 --> 00:07:35,860
inspect the code pretty carefully here.

79
00:07:35,940 --> 00:07:44,220
We've got a carrot and a div and then a space and we've defined a class by stating the word class equals

80
00:07:44,250 --> 00:07:52,740
quotation and then we're working with three fourths and then a space is that space and then the word

81
00:07:52,740 --> 00:07:53,790
first.

82
00:07:53,820 --> 00:08:01,620
And so we're telling Genesys that we want this piece of content that is inside the div to take up three

83
00:08:01,620 --> 00:08:09,330
fourths of the space inside this widget area and it's going to be the first piece of content.

84
00:08:09,330 --> 00:08:15,350
So three fourths is first and then the next div will define the next piece of content.

85
00:08:15,510 --> 00:08:23,220
So then there's just plain text inside the div characters with these little greater than and less than

86
00:08:23,280 --> 00:08:24,220
symbols.

87
00:08:24,450 --> 00:08:31,960
And then we've closed the div with a slash before the word div inside of the carrots.

88
00:08:32,490 --> 00:08:37,590
So by doing that we're saying OK that's all for the content in the three fourths area.

89
00:08:37,590 --> 00:08:44,560
Now let's define the one fourth area over here on the right and we do that by doing the exact same thing.

90
00:08:44,710 --> 00:08:51,340
You know we use the lessons symbol and div with a space and class equals quotation.

91
00:08:51,350 --> 00:08:59,130
One fourth and these are defined with a either plural or not and with a dash as is appropriate for the

92
00:08:59,130 --> 00:09:00,360
context.

93
00:09:00,360 --> 00:09:05,150
So it's three fourths first and then one fourth is the next.

94
00:09:05,550 --> 00:09:10,050
And then there's an ending quotation and an ending greater than symbol.

95
00:09:10,230 --> 00:09:16,800
And then inside of here is another class that has been defined for us inside of Genesis.

96
00:09:16,800 --> 00:09:23,340
Another set of special classes that Genesis themes always define and match up to the colors and the

97
00:09:23,340 --> 00:09:27,800
different styles of the theme are button classes.

98
00:09:27,870 --> 00:09:32,840
So we've defined a link by putting a as for anchor.

99
00:09:32,880 --> 00:09:38,880
An anchor is a link that is clickable and it's anchored to something it's anchored to an HIV M-L page

100
00:09:39,120 --> 00:09:44,950
or some kind of a web you r l so that when you click it the site will do something.

101
00:09:45,180 --> 00:09:47,460
We're learning a little bit of HVM L here.

102
00:09:47,460 --> 00:09:54,930
So to define an anchor you say with it you open it with a for anchor space and then you can define a

103
00:09:54,930 --> 00:09:55,430
class.

104
00:09:55,440 --> 00:09:58,380
The class here is button.

105
00:09:58,650 --> 00:10:00,650
And then we want it to be aligned right.

106
00:10:00,650 --> 00:10:02,490
Now let's just experiment a little bit.

107
00:10:02,490 --> 00:10:05,840
What if I arrange that to align left.

108
00:10:05,910 --> 00:10:09,930
Is it going to come all the way over here on the Contact Us section.

109
00:10:09,930 --> 00:10:14,520
No it actually stays within it's one fourth area over here on the right.

110
00:10:14,520 --> 00:10:17,230
But you can see that it's shifted to the left there.

111
00:10:18,710 --> 00:10:26,240
There's another class for buttons and I can do all one word line center and you can see that it places

112
00:10:26,240 --> 00:10:32,690
it in the center of the contact area and it also places a little bit of a margin around the top and

113
00:10:32,690 --> 00:10:33,820
the bottom.

114
00:10:33,860 --> 00:10:39,710
So when we align a button to the center not only does it a line in the content area left and right but

115
00:10:39,710 --> 00:10:42,970
it aligns it top and bottom as well.

116
00:10:43,050 --> 00:10:49,190
So I'm going to just go ahead and change that back to align right and you'll see that this whole block

117
00:10:49,220 --> 00:10:53,360
becomes a little bit shorter because it's just placed right there.

118
00:10:53,390 --> 00:11:02,240
If I extend C I'm just going to copy that piece of text and repeat it a couple times.

119
00:11:02,700 --> 00:11:09,600
If I put more text there it will just extend the content area down lower and you can see with this button

120
00:11:09,600 --> 00:11:11,920
defined as an align right button.

121
00:11:12,060 --> 00:11:14,880
It places it at the top of the content area.

122
00:11:15,000 --> 00:11:20,490
But if I had a lot of copy here and I thought boy I want that button to be centered up and down I could

123
00:11:20,490 --> 00:11:27,440
just define it as an align center and then it was centered in the content area there.

124
00:11:30,100 --> 00:11:30,770
Great.

125
00:11:30,820 --> 00:11:38,140
So the way that you finish a an anchor tag which is a link is that after you define the class you close

126
00:11:38,140 --> 00:11:43,690
the quotation and then you'd find something else between the anchor tag.

127
00:11:43,690 --> 00:11:49,900
The first one because you close and open an anchor tag a little bit differently but HGF is for the hyperlink

128
00:11:49,900 --> 00:11:50,590
reference.

129
00:11:50,590 --> 00:11:52,330
This is where you put the link.

130
00:11:52,330 --> 00:11:59,800
Now if you put just a number symbol or a hash tag here it'll just make it clickable but it's not clickable

131
00:11:59,800 --> 00:12:01,620
to anything.

132
00:12:01,800 --> 00:12:03,790
And so that's just kind of a placeholder there.

133
00:12:03,930 --> 00:12:10,980
I would actually place my contact page if I knew my contact page if it was up here and I could right

134
00:12:10,980 --> 00:12:19,450
click and save the link then I could just paste the hyperlink down there where the tag is.

135
00:12:19,560 --> 00:12:27,360
So then you close the initial carrot or the initial less than symbol with a greater than symbol to define.

136
00:12:27,370 --> 00:12:34,230
OK here's the anchor and then right after the greater than symbol you place whatever text you want to

137
00:12:34,230 --> 00:12:35,650
be clickable.

138
00:12:35,910 --> 00:12:41,790
And by defining it like this that whole button is clickable wherever you roll your mouse over even just

139
00:12:41,790 --> 00:12:47,220
the edge of the button and you can see in the stylesheet it's also defined a hover action so that when

140
00:12:47,220 --> 00:12:52,700
you hover the cursor or your mouse over it you can see that it changes color just a little bit.

141
00:12:54,350 --> 00:13:01,010
And then after you have the text that you want inside the button you close the anchor tag again with

142
00:13:01,100 --> 00:13:07,840
a slash before the inside of the open and close or the greater then the lesson symbols.

143
00:13:08,150 --> 00:13:14,780
And then of course we've got to close the div as well so that we were finishing out with the last one

144
00:13:14,780 --> 00:13:21,980
fourth of this content area and we're going to close the div that was opened up here.

145
00:13:22,170 --> 00:13:26,820
So I hope you followed along a little bit takes some time and pause the video if you need to and arrange

146
00:13:27,030 --> 00:13:30,000
your contact us call to action area.

147
00:13:30,090 --> 00:13:37,620
Experimenting with that button code and with the columns code just a little bit I'm going to go in and

148
00:13:37,620 --> 00:13:45,030
just to take out that extra text I had in there and we're going to arrange this to have some words that

149
00:13:45,030 --> 00:13:50,260
makes sense and connect this to our contact page in a later video.

150
00:13:50,340 --> 00:13:52,190
But I'm going to leave it at a line right.

151
00:13:52,380 --> 00:13:59,470
And just a small amount of text up there and I've got a nice pretty call to action right here and I'll

152
00:13:59,490 --> 00:14:04,490
hit save and publish inside the Customize her and then I can just close that customized.

153
00:14:04,680 --> 00:14:10,830
And let's go back to the column class's page and create a new page of our own.

154
00:14:10,830 --> 00:14:15,720
Suppose you had the column class's page here as a reference because you've imported the demo content

155
00:14:16,230 --> 00:14:24,120
and you're like well I want I want to divide it up into thirds so I'm going to go ahead and take everything

156
00:14:24,120 --> 00:14:31,870
from the div class ONE-THIRD first down to the closing div and hit a Control-C and copy.

157
00:14:32,460 --> 00:14:36,280
And now go ahead and follow along and let's add a new page to the Web site.

158
00:14:38,360 --> 00:14:42,300
I'm just going to name it something obvious like three columns.

159
00:14:44,280 --> 00:14:50,010
And when I paste some code into here I've got to make sure that I'm on the text editing.

160
00:14:50,040 --> 00:14:57,090
I can tell because I've just got a few little buttons here where I can use this to make bold bold h

161
00:14:57,180 --> 00:15:04,880
DML tag and then I could type something and then I can close the tag with these HVM l buttons up here.

162
00:15:05,160 --> 00:15:07,200
I'm just going to take out make sure that I'm on the text.

163
00:15:07,200 --> 00:15:14,490
Now the visual editor looks like this where you've got a more commonly familiar kind of like a word

164
00:15:14,490 --> 00:15:15,460
processor.

165
00:15:15,480 --> 00:15:21,690
This is how you open up the second line the toolbar toggle to get to your headings and things like that

166
00:15:22,260 --> 00:15:24,690
for any of your code or any of your text.

167
00:15:24,720 --> 00:15:28,400
But let's go to the text editing tab.

168
00:15:28,640 --> 00:15:35,630
And I'm going to put the cursor there and hit Control V and paste my ONE-THIRD first one third and then

169
00:15:35,630 --> 00:15:38,560
one third divs in there.

170
00:15:38,690 --> 00:15:40,620
And it's got some example text.

171
00:15:40,640 --> 00:15:48,700
So really I could just publish this and then take a look at it on the page by clicking here I'm going

172
00:15:48,700 --> 00:15:53,640
to right click and open a new tab again still on the same editing page.

173
00:15:54,740 --> 00:16:03,030
There you go so there is a page that's got three columns inside of this content area and a sidebar on

174
00:16:03,030 --> 00:16:04,290
the right hand side.

175
00:16:04,290 --> 00:16:05,800
Now what's the difference here.

176
00:16:05,920 --> 00:16:11,310
McCollam classes page here is set up a little bit differently.

177
00:16:11,310 --> 00:16:14,410
It doesn't have the sidebar right here.

178
00:16:14,730 --> 00:16:21,410
Let's just look at how that set up and we'll finish with this lesson I'm going to go ahead and get two

179
00:16:21,410 --> 00:16:28,990
paragraphs of Laura ipsum text and I'll paste it in there.

180
00:16:29,030 --> 00:16:40,300
OK copy and I'll go back to the page where I was here and now drove to paste by Laura amid some text

181
00:16:40,780 --> 00:16:43,090
and then if I hit update I can save it.

182
00:16:43,090 --> 00:16:44,620
Let's look at it first.

183
00:16:44,650 --> 00:16:47,280
See that it's within the ONE-THIRD first.

184
00:16:47,380 --> 00:16:49,160
And the closing div..

185
00:16:49,180 --> 00:16:49,990
Perfect.

186
00:16:49,990 --> 00:16:51,780
So I can click Update right there.

187
00:16:53,890 --> 00:17:03,410
And then I can see that if I go to my three columns page and refresh it I've got all my text just in

188
00:17:03,410 --> 00:17:08,120
that first column and then there's my second column and my third column.

189
00:17:08,120 --> 00:17:15,110
Now if I open up that page to edit as well I can see that as I scroll down Genesis gives me some layout

190
00:17:15,110 --> 00:17:20,690
settings down here and the default layout settings inside of the theme settings area.

191
00:17:20,690 --> 00:17:25,040
It's actually set at using the primary sidebar because I can see that it's set at the default settings

192
00:17:25,430 --> 00:17:32,720
and we're using the sidebar widget area here and we can arrange that how we want if I wanted to actually

193
00:17:33,020 --> 00:17:35,070
override the default layout.

194
00:17:35,120 --> 00:17:42,500
I could just click that one on the right which is a full width and update the page and I can just override

195
00:17:42,500 --> 00:17:50,060
the default settings for any particular page by using that layout setting inside of the page editing

196
00:17:50,060 --> 00:17:51,680
screen.

197
00:17:51,680 --> 00:17:57,410
There we go those columns are a little bit wider and I don't have the sidebar in this video.

198
00:17:57,410 --> 00:18:03,470
You experimented with the Genesis column classes that are defined by default in the Genesis framework

199
00:18:04,580 --> 00:18:11,140
and you used a version of the classes to arrange the content of the call to action section of the site.

200
00:18:11,180 --> 00:18:17,990
So it looks nice in the next lesson you'll arrange content in the header and footer areas of the site

201
00:18:18,200 --> 00:18:20,070
including creating the navigation buttons