Now that you know what we are covering in this How to Create a Video Landing Page Using Thesis and Agility 3 seminar, let’s look at the basis of our landing page. We are creating the landing page based on this Formstack article, The Anatomy of a Perfect Landing Page. This article has a very good description of a landing page and the things that should go into a landing page. This here is actually just a larger version of that diagram with the URL of the site up here.
Now, something I observe often with beginners when they’re building a web page or landing page or website is they don’t really think in advance about the layout. And so that’s what we’re going to start off with here, the actual layout of the landing page.
The layout is not particularly complicated but before you ever do anything on a landing page it makes the most sense to understand the layout and understand what parts are going to go where.
Horizontal Divisions of the Landing Page
Web pages won’t always be easily divided horizontally. Some web pages maybe only have one horizontal demarcation and some web pages may have lots of horizontal demarcations but these red lines here represent the main horizontal areas or the main horizontal demarcations on this page.
So you’ve got this header area up here, then you’ve got the main content of the call to action or the main call to action section. And then you have the third section down is the sort of supporting documentation whether it’s testimonials or whatever it is. But you have this the supporting documentation as a third main horizontal section.
You can see how this divides up quite nicely. If there were a footer, which there is not on this, you’d see another horizontal section down below this section here.
And then once you have the big horizontal divisions of the landing page, the header, main content, supporting content sections, then you look at how to divide up each of those sections into smaller sections. In this case these blue lines represent those smaller sections.
If we look at the header the header is divided up into two; it’s divided in half. One half of it has the logo and the other half of it has an abbreviated menu. And so those are the two main components.
This second section is divided first into two horizontal groups. You’ve got this horizontal area which is just a great big headline across the top and then you’ve got the content area down below that.
That content area is further divided in half so that you’ve got a left column with the video and the right column that has the call to action. And then that call to action section is divided one more time between the content of the call to action and the actual call to action button.
Now it could very well be the case that this call to action button here is just part of this but given the tools that we have at our disposal, this is really going to be a separate element that sits in this second column. So you got column 1, column 2 and the big headline across both columns.
Then you go down into your supporting documentation and again the supporting documentation section is really divided up into two sections. Now this may look like it’s four sections: image, content, column, image content but really when we get down to creating this, the image is going to be a left floating image inside of this content area. It doesn’t have to actually be a structural element to make it sit there in that location on left.
Diagramming the Page
That is the main structural layout. Anytime you go to lay a page out, if the layout isn’t already given to you in a default layout that is already part of a template, then it makes a lot of sense for you to diagram out the layout of your page. First you identify all the big horizontal divisions and then you divide up each of those big horizontal sections into smaller vertical and horizontal sections.
Next we are going to choose a template for the landing page in Agility.