We just finished the second section of the landing page by adding styling to the content area in Agility so next up is the third section. The third section of the page has these two columns and what we’re going to do is use widget columns for these. There will be a widget here and here and then we’ll use a wysiwyg widget to put the content in here.
Create Section Using Agility’s Content Grid Section
We do that by coming over to the Skin Editor and instead of the column section, now we’re going to use the Agility Content Grid Section. The Content Grid Section behaves very much like the header section except it has different choices.
Let’s change that to 10c Video Landing Page and we’re going to call it “additional content section”. I want to drag it over here and then down. So that’s our third section. Let’s save the template.
Configuration in Skin Content
All the configuration for this content grid section happens in Skin Content so you don’t need to do it here in the Skin Editor. Let’s come back over to Thesis and then Skin Content. Go again to 10c landing page additional content section and we’re going to do Two columns, equally sized and each one is going to be a widget area. We’re not going to use a heading and we’re not going to use an overlay so we’re just going to say save options.
Naming the Widgets
Now we can come back over here to our widget areas, so appearance and widgets. Actually, I made the name here too long so let’s change the name as it’s not particularly useful. To do that we’ll go back over to the Skin Editor and change that.
Go over to the Skin Editor and to the landing page. Then let’s change the name of this to landing page widgets then come back over to Thesis, then come over to Skin Content, back down here to this, to widget areas, save those options again and now we’ll have the properly named widget areas.
Let’s come back over to appearance and widgets and now we have names here we can read, landing page widgets column 1, column 2.
Add Content to the Supporting Documentation Section
She’s got the Black Studio TinyMCE plugin installed so we’re just going to use this Visual Editor plugin, go to column 1 and let’s look at what this looks like. Okay, so we’re not going to use a heading at all. We’re going to come here and first we’re going to add copy. Let’s paste that.
Change to visual view and we’ll make Before a Heading 2. Let’s come over here and add our media. I’m looking for the Before Image and here it is. So we’re going to make this alignment to the left, we’re not going to link it anything and we’re going to insert into the post like that. Come over and look at our visual. It’s fine so we can save this.
And then we’re going to the same thing again by dragging this Visual Editor up into here. This is the After and again we’ll turn that into a Heading 2. Then we’ll add the media and this one was October 2014. Well, that’s way too big.
Actually, we’re going to insert that into the poster size but then we’re going to take this image and we’re going to edit it. We’ll use a custom size and take it over to 205 the way the other image is so they are the same size. Hit update.
Importance of Having Images the Same Size
We may need to make some changes but let’s save that for the moment and reload it. In order for us to be able to really pull this kind of thing off, we really need images to be the same size. So that’s worth looking at when you think about laying your page out you want to think about making images exactly the same size.
Let’s see if we can’t fix that. This image is 205 x 341 and this image is whoops 205 x 481. Let’s edit that original. We’re going to crop it, click in there to crop it. How many pixels is this? It’s 204 x 381. So now they are now the same size. I think it’s always better that you do this in advance but you get what I intent here.
Review the Finished Section
Now hit save and update. Now we save it again. Let’s check it out and see how well we did. Okay that’s better. We probably want to get another little bit of text in there too but we have pretty much replicated what we wanted.
Let’s see the slideshow again from beginning. We’ve got our heading and our menu right, heading and menu our header image in menu. We’ve got our big call to action banner and our nice-looking headline. We’ve got our video box of secondary headline and our content and our call to action.
The last thing we need to do is make the video landing page responsive and so we’ll turn to that next followed by a Q&A session.