Build Your Own Business Website header image

How to Create a Landing Page in Thesis 2 & Agility – Part 8 – Style the Call to Action

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.

The last thing we need to do to finish this Landing Page we’ve created here in Thesis 2 is to style the Call-to-Action. I want to create a new call to action button that looks like this button here and I want this to be big.

To do that we’ll come over to that page, we’ve got the Landing Page example, and go over to our text. What I’m going to do now is I’m going to add a span tag to this. Actually, I’m going to add a class to it and we’ll just call it a

If we come back over to our Skin Editor, we can create a single element style, Do it now, do_it and the CSS selector is . do-it, that’s how I did it before. Then in Options, we’re going to make our font size say 24 pixels, our font weight will be bold.

Our text color is going to be that orange color so let’s grab that orange colo and I think we’re good at the moment with that. We’ll come back down here to and we’ll add “do-it” into there okay, “DO IT NOW! click here!”.

Style the Typical Link

Now what we need to do is style this link. I don’t believe the typical link has a background color to it. Yes, it does have a background color, okay. So, we’re going to create a Links package, this is going to be the Do it button, do_it_link, this would be .do-it a, okay.

Our text color is going to be white, background color is going to be that orange, whatever that orange was. Let’s go back over to there and get this orange, copy it, background color will be that.

Padding is going to have 5, 20, 5, 20 and I’m just going to make it darker when you hover over it. Add &do_it_link to that, save that, we may need to have a little margin to that, I hadn’t really thought about that let’s see, “DO IT NOW! click here!”.

We want to get rid of that underline too and it would be nice to have it rounded corners so we come back down to our Do it button, it doesn’t give us the ability to adjust margins so we’re just going to give ourselves some, margin left:24px.

If we come back over to our Options, we’re going to say hovered links, text decoration, none, active links, text decoration, none and I think we’ll also give ourselves a border radius of 10px.

Okay, there you go, “DO IT NOW! click here!” and then well, I guess feel like you probably have got the gist of this, right? What this is a process of doing is reconstructing the HTML using the Agility tools, simplifying the page down and then adding new styles to that.

Is the Process the Same for Creating Sales and Other Pages in Agility?

Yes, Scott asked if it’s the same process to do sales pages and others and yes, of course. It’s the same process, I mean really, the concept is the landing page. The process is the same no matter what you’re doing with Agility.

All you’re going to be doing with Agility is, either you’re going to use the way it’s laid out right now or you’re going to change the layout and if you change the layout, this is the process you go through whether for a landing page or a sales page or a contact us page or any kind of custom page template.

It doesn’t really matter what that custom template is, it’s always going to be constructed using these tools and doing this stuff. We just happened to use those tools to create a custom template that creates a landing page but it doesn’t really matter what the page type is or what the purpose for the custom template is. What matters is, the process that you go through to create a custom template and this is the process you go through both in restructuring the HTML and in styling the CSS.

0 Comments… add one
0 comments… add one

Leave a Comment