Build Your Own Business Website header image

Add Video and Text

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

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.

Add the Text

We’re going to paste the text there. Let’s go to visual for a second. There it is, there’s the copy. So we update that. Now we view the page. We’ve got a headline, we’ve got her call to action, content and we’ve got our call to action button here. Now we need her video.

Actually, Gertrude wants me to use her contact page here. So we can come back over and find the contact page. All pages…contact, there we go. There’s a contact page. So we now have a little bit of text and when we click here takes us to the contact page.

Add the Video Using Agility Skin’s Page Specific Content Widget

Now we’ve got to put a video in here. Let’s go to YouTube and find one of her videos. I’m going to take this video. We’re going to use the share button here and grab this embed code.

Now we’re going to use a tool that’s unique to both my skins, Agility Skin and Carta Skin for Thesis Theme 2, and that is the page specific content. You scroll down here to the Agility page details and you’ll see this page specific content widget. It’s the easiest way to add a video. Just use this section here. In fact now you can see your video shows up.

Responsive Video

The only other thing we want to do is make sure the video is responsive. So we check that box and that gets us a responsive video in our page. It is nice and straightforward. You wouldn’t want to use the iframe version, you want to use just that raw section right there.

If you use that raw YouTube video or Vimeo video URL, if you use the raw ones it will automatically be responsive. If you use the iframe it won’t be, so you want to skip that whole iframe stuff.

Add the Widget to the Page

Let’s come back over here and update then view the page. The video doesn’t show up yet because we haven’t put the widget in this widget area. This is the landing widget area. When we open this up it takes us to our widget panel and here’s our video landing widget area.

All we need to do is drag this Agility Skin’s page specific content widget over and drop it there. We’re not going to use a title, we don’t need to use any special classes or select a style. We’ll just save it like that. Now come back over here, reload it and we’ve got a video that fills the space up.

You can see that given the video is this size we probably want the content to be a little smaller. This Fix It NOW sits up beside the video so that it looks just like our example.

Now that we have all the landing page areas created we’ll move on to styling the main content section.

0 Comments… add one
0 comments… add one

Leave a Comment