Build Your Own Business Website header image

BYOB Agility 3 Skin

Question and Answer

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Rick: It's time for questions...Gertrude has a question. Good evening, Gertrude, hi. Gertrude: Good evening. Yeah and I'm just wondering if it would not be a good idea just to have the video, the Fix It video which means this is just a sample, instead of having 2 columns, have that going right across and

Make the Video Landing Page Responsive

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

We are at the final step in creating a video landing page in Agility. It’s time to make sure the page is responsive. Let’s go over to the responsinator and you can see it actually is nice and responsive. You start off seeing the site on a phone. The image comes down to the right

Setup the Supporting Documentation Section

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

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

Styling the Content Area

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

We finished adding content on the landing page in Agility with text and video and now it’s time to work on some styling. Here's our example, the video sits here, we’ve got a secondary headline and then we've got our text. Finally, we’ve got our DO IT NOW! We can actually style this text separately

Add Video and Text

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Now that we have the call to action area of the landing page done, we want to put the content in here. I have a block of content to put in this, so we're going to come over and edit the page. We're going to paste the text there. Let’s go to visual for a

Setup the Call to Action Link

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

We’ve just finished setting up the content area for the landing page in Agility and it's kind of hard to see the structure here at the moment. Here's a place where our videos are going to go and here's the place where content and our call to action are going to go. This default call

Setup the Content Area

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Now that we have the header for our Agility Skin landing page set up, we have to move on to our content area. We are going to create it using the Agility Easy Responsive Column Section. Come back over to the Skin Editor and back to the Video Landing Page and then choose Easy Responsive

Setup the Header

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Now that we’ve gotten this template created for the landing page in Agility, it's best just to start from the top of your design and work your way. In this case at the top of the design is the header so we are going to create the header first. Then we'll create this content area,

Choosing the Right Template to Begin With

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Once you've got a good understanding of your landing page layout you have to decide what template you're going to begin with in the Agility theme. That's actually how this seminar came about. Gertrude asked the question “What template should I use in order to create my landing page?” Once you know your layout the next

Landing Page Layout

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

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

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