Build Your Own Business Website header image

How to Create a Video Landing Page Using Thesis & Agility 3

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

This is a special seminar on how to create a video landing page using Thesis Theme 2.2 and Agility Skin 3. Agility has some special tools that make this process very easy that other skins don’t have.

We create a 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. It also has some good advice so I encourage anyone who’s creating a landing page to take a look at this. It does a good job of talking about what you should put on a landing page.

This seminar is not about the content of the landing page rather it’s about the mechanics of creating it. A landing page is really comprised of both its content and its layout and here we focus on the layout.


  • We are making a landing page based on this article
  • The session should last 90 minutes
  • Use the question window

Landing Page Layout

  • Horizontal Layout
    • Header
    • Main Optin Content
    • Supporting Content
  • Vertical sections
    • Header split in 2
    • Content split horiz then in 2
    • Supporting split in 2

Choosing the right template to begin with

  • Typical Agility page layout
    • Top Header bar
    • Main header area
    • Top menu area
    • Content – w/2 columns
    • Top footer area
    • Bottom footer area
  • In this case the best option is to start from scratch

Setup the Header

  • Backup the site data
  • Create a new template
  • Add an Agility Simple Header

Setup the Main Content Section

Setup the Call to Action Link

Add the Video and Text

Style the Main Content Section

Setup the Supporting Documentation

Make the Video Landing Page Responsive

Question and Answer

0 Comments… add one
0 comments… add one