In this video we'll explore a set of styles built into Genesis themes for creating different column
layouts in any content area.
These column classes defined in the CSL style sheet allow us to arrange content in a number of ways
we use them to style the content in the call to action section of the executive pro home page.
By the end of this lesson you'll understand how to use the predefined column classes to make it easy
to arrange blocks of content anywhere in the web site.
Let's start by opening up the site we've been working on.
Executive pro in your students sandbox if you log in with a fresh loggin you might have to navigate
to the correct site because by now you should have two sites within your students sandbox.
So if your original one is the one that opens first.
Make sure you navigate to executive pro or the second one that we've been working on in this chapter
and click dashboard.
Now that that's open let's take a look at a certain page that we used the importer to import into our
site.
It's called Kollam classes in my installation.
It's the first one because it starts with the letter C.
Now if we open that page and edit it you can see that there's not really any columns visible inside
the editing area.
In fact there's just you know four sections of text and six sections of text.
But if you right click on the permalink and open in a new tab and take a look at the column class's
page you'll see that two columns makes obviously two columns arranged in the content area three columns
is three and there's four and then there's six columns so the column classes are defined in a CSSA style
sheet of the Genesis themes.
And once you know how to use them you can arrange your content in a widget area or in the content area
of a page or a post in any of these ways.
Back inside of the Wordpress dashboard on the editing page for the column classes page if we go to the
right there's two tabs one is the visual tab and one is the text editing tab inside the editor in wordpress
and you can see that this is the way that the column classes are defined.
They're defined with what's called a div and then you define a class with an equal sign a quotation
mark and then the name of the class.
And if it's the first one a space and then the word first with a closing quote and a closing carrot
surrounding the whole div when you use a div like this which is part of the language of HTL you need
to then close the div when you're done by using a slash inside of the carrot's before the word div.
And so the whole piece of code looks like this.
It starts with div you define a class and you have your content inside of the div and then you close
the door of using a slash div inside of greater than and less than characters in on your keyboard.
Now you don't always have to type all of your code when you're defining some different classes within
Genesis or any WordPress theme or framework but this page has been imported in here to make it convenient
for us to copy and paste these code snippets into our content areas.
Now studio press provides some code snippets when you're a member of studio press.
You can log in and get all the theme instructions and a whole bunch of code snippets and different instructions
for how to use Genesys specifically.
But even without being a member studio press does post inside of get hub as a just which is basically
just a section of code that they can make available at the get have Web site Web site for people to
copy and paste.
But inside of the studio press account get Herb their just's are listed here and there's 82 of them
and there's just an assortment of ones some of her specific themes like atmosphere author pro alt. pro
and on the third or fourth page I think as you scroll down that you can go to older gests and look at
the entire collection of 82 just's which are just like I said sections of code.
Sometimes there's actually more than one file within a just if I click these three files or click the
name of that it will show me these three pieces of code that I can copy and paste but I've gone gone
down through to the third or fourth page and I found this a set of just two of them for the executive
pro theme.
The call to action banner has this piece of content inside it.
I'm going to go ahead and copy it by highlighting the whole thing and having control-C.
Now this is located at just dot get hub dot com slash studio press and you can browse through and find
the executive projects on the third or fourth page or you can have this inside the address bar the number
6 6 0 2 8 1 1 to find this piece of code.
I'll also make these pieces of codes and every piece of code that we use within the course available
in the course material and on the resources pages so I've copied this piece of code and I'm going to
go back into editing the page and I'm actually in the Wordpress dash for them and I go back to where
we were working before in the customized.
So I've hit appearance customize and as that opens I'll go to the widgets areas if you remember we were
working on the different home widgets on the home page of our sample site here.
And here's the call to action section.
So home call to action widget.
I just have a text widget here with a contact us for a title and then the content here I'm just going
to highlight then hit backspace and I can hit Control V or of course you can always right click and
click paste.
And here's the divs with the class three fourths first and then the second one the second div is one
fourth.
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
actually do a three quarters three fourths and then a one fourth section of any section you could even
do a four six and then a one sixth and another a one sixth and will experiment with that just a little
bit here by customizing the code that we're using inside of the contact us call to action section.
So I hope you're following along and you found this piece of code in one of the two places I outlined
and pasted it into the call to action widget in a text widget and call that what you want let's just
inspect the code pretty carefully here.
We've got a carrot and a div and then a space and we've defined a class by stating the word class equals
quotation and then we're working with three fourths and then a space is that space and then the word
first.
And so we're telling Genesys that we want this piece of content that is inside the div to take up three
fourths of the space inside this widget area and it's going to be the first piece of content.
So three fourths is first and then the next div will define the next piece of content.
So then there's just plain text inside the div characters with these little greater than and less than
symbols.
And then we've closed the div with a slash before the word div inside of the carrots.
So by doing that we're saying OK that's all for the content in the three fourths area.
Now let's define the one fourth area over here on the right and we do that by doing the exact same thing.
You know we use the lessons symbol and div with a space and class equals quotation.
One fourth and these are defined with a either plural or not and with a dash as is appropriate for the
context.
So it's three fourths first and then one fourth is the next.
And then there's an ending quotation and an ending greater than symbol.
And then inside of here is another class that has been defined for us inside of Genesis.
Another set of special classes that Genesis themes always define and match up to the colors and the
different styles of the theme are button classes.
So we've defined a link by putting a as for anchor.
An anchor is a link that is clickable and it's anchored to something it's anchored to an HIV M-L page
or some kind of a web you r l so that when you click it the site will do something.
We're learning a little bit of HVM L here.
So to define an anchor you say with it you open it with a for anchor space and then you can define a
class.
The class here is button.
And then we want it to be aligned right.
Now let's just experiment a little bit.
What if I arrange that to align left.
Is it going to come all the way over here on the Contact Us section.
No it actually stays within it's one fourth area over here on the right.
But you can see that it's shifted to the left there.
There's another class for buttons and I can do all one word line center and you can see that it places
it in the center of the contact area and it also places a little bit of a margin around the top and
the bottom.
So when we align a button to the center not only does it a line in the content area left and right but
it aligns it top and bottom as well.
So I'm going to just go ahead and change that back to align right and you'll see that this whole block
becomes a little bit shorter because it's just placed right there.
If I extend C I'm just going to copy that piece of text and repeat it a couple times.
If I put more text there it will just extend the content area down lower and you can see with this button
defined as an align right button.
It places it at the top of the content area.
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
just define it as an align center and then it was centered in the content area there.
Great.
So the way that you finish a an anchor tag which is a link is that after you define the class you close
the quotation and then you'd find something else between the anchor tag.
The first one because you close and open an anchor tag a little bit differently but HGF is for the hyperlink
reference.
This is where you put the link.
Now if you put just a number symbol or a hash tag here it'll just make it clickable but it's not clickable
to anything.
And so that's just kind of a placeholder there.
I would actually place my contact page if I knew my contact page if it was up here and I could right
click and save the link then I could just paste the hyperlink down there where the tag is.
So then you close the initial carrot or the initial less than symbol with a greater than symbol to define.
OK here's the anchor and then right after the greater than symbol you place whatever text you want to
be clickable.
And by defining it like this that whole button is clickable wherever you roll your mouse over even just
the edge of the button and you can see in the stylesheet it's also defined a hover action so that when
you hover the cursor or your mouse over it you can see that it changes color just a little bit.
And then after you have the text that you want inside the button you close the anchor tag again with
a slash before the inside of the open and close or the greater then the lesson symbols.
And then of course we've got to close the div as well so that we were finishing out with the last one
fourth of this content area and we're going to close the div that was opened up here.
So I hope you followed along a little bit takes some time and pause the video if you need to and arrange
your contact us call to action area.
Experimenting with that button code and with the columns code just a little bit I'm going to go in and
just to take out that extra text I had in there and we're going to arrange this to have some words that
makes sense and connect this to our contact page in a later video.
But I'm going to leave it at a line right.
And just a small amount of text up there and I've got a nice pretty call to action right here and I'll
hit save and publish inside the Customize her and then I can just close that customized.
And let's go back to the column class's page and create a new page of our own.
Suppose you had the column class's page here as a reference because you've imported the demo content
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
from the div class ONE-THIRD first down to the closing div and hit a Control-C and copy.
And now go ahead and follow along and let's add a new page to the Web site.
I'm just going to name it something obvious like three columns.
And when I paste some code into here I've got to make sure that I'm on the text editing.
I can tell because I've just got a few little buttons here where I can use this to make bold bold h
DML tag and then I could type something and then I can close the tag with these HVM l buttons up here.
I'm just going to take out make sure that I'm on the text.
Now the visual editor looks like this where you've got a more commonly familiar kind of like a word
processor.
This is how you open up the second line the toolbar toggle to get to your headings and things like that
for any of your code or any of your text.
But let's go to the text editing tab.
And I'm going to put the cursor there and hit Control V and paste my ONE-THIRD first one third and then
one third divs in there.
And it's got some example text.
So really I could just publish this and then take a look at it on the page by clicking here I'm going
to right click and open a new tab again still on the same editing page.
There you go so there is a page that's got three columns inside of this content area and a sidebar on
the right hand side.
Now what's the difference here.
McCollam classes page here is set up a little bit differently.
It doesn't have the sidebar right here.
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
paragraphs of Laura ipsum text and I'll paste it in there.
OK copy and I'll go back to the page where I was here and now drove to paste by Laura amid some text
and then if I hit update I can save it.
Let's look at it first.
See that it's within the ONE-THIRD first.
And the closing div..
Perfect.
So I can click Update right there.
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
that first column and then there's my second column and my third column.
Now if I open up that page to edit as well I can see that as I scroll down Genesis gives me some layout
settings down here and the default layout settings inside of the theme settings area.
It's actually set at using the primary sidebar because I can see that it's set at the default settings
and we're using the sidebar widget area here and we can arrange that how we want if I wanted to actually
override the default layout.
I could just click that one on the right which is a full width and update the page and I can just override
the default settings for any particular page by using that layout setting inside of the page editing
screen.
There we go those columns are a little bit wider and I don't have the sidebar in this video.
You experimented with the Genesis column classes that are defined by default in the Genesis framework
and you used a version of the classes to arrange the content of the call to action section of the site.
So it looks nice in the next lesson you'll arrange content in the header and footer areas of the site
including creating the navigation buttons