Build Your Own Business Website header image

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.

Agility Call to Action Box

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Next in lesson 11, Add Style and Content to the Home Page, of this Build a Professional Website using WordPress and Thesis course we are going to look at the Call to Action box. So far we have looked at the Featured Content Box, Icon Content Boxwidget areas and Thesis text box.

The Call to Action shows up in many places on on this site. For example, this is a Call to Action and this is a Call to Action. And, in fact, this is a Call to Action and so is this and this. These calls to action come in different configurations depending upon where they are used.

Call to Action Options

Let’s get to work on the Call to Action Box here. First, you make the choice that it’s a Call to Action. Then you have a choice of whether or not you want to add an overlay element. An overlay element is the thing that gives this dark background that you can see through back to the image, right?

Overlay Element

If we turn off the overlay image element for a second and look at it, the text is automatically made darker. You can see the image just becomes a normal light image. The purpose for this overlay is really to make it easy to read text when it sits over an image. That’s its primary purpose. So we darken it and then make the text white so it can stand out.

We are going to turn it back on and use it. You can actually choose 4 different styles. There’s the default style and then overlay styles 1, 2 and 3. Overlay styles 1, 2 and 3 require you to create them. You can do that inside of Skin Design.

We’ll be doing that in a few minutes but if you want to learn more about that you can look on the Styling Agility 3.2 videos for how to create a custom overlay. You’ll see all the styles that you can use to apply that. If you create an overlay style 1 then you can choose it from here instead of the default.

Section Heading

Again, you could add a section heading. Because this is up here we don’t want a section heading but actually if you come down to this, this is a section heading. And so sometimes a section heading there is a great idea but in this case not above our Call to Action.

Three Configuration Options

Once we’ve saved that we come back over to Skin Content and now we’ve got a bunch of options to set for this. The first option is what kind of configuration do you want. Do you want it to be tall and wide? Do you want it to be short and wide? Or do you want it vertically stacked.

Tall and Wide

Let’s look at tall and wide. This is an example here. It’s got a heading, it’s got message text and it’s got a button. They’re all stacked. It’s designed to span the entire horizontal space and to be tall vertically.

Short and Wide

Then there’s short and wide. This is short and wide here. This does not have a heading. It’s just got message text and then a button and they are side by side. It’s meant just to be a little strip. That’s what short and wide is.

Vertically Stacked

And then vertically stacked is meant to go inside of a column one way or the other. For example, this is a vertically stacked Call to Action where everything stacks on top of itself and it’s designed not to stretch out but to fit inside of a column. So this is vertically stacked and so is this.

This is a vertically stacked Call to Action. Actually, no it’s not. This is a tall and wide Call to Action because that’s what puts all this stuff in line. If it was vertically stacked you’d have the name above the email above the get updates button. So this is a tall and wide. And this is vertically stacked. Anyway you have the choice.

Styling Options

You can choose a style as well. We’ll look at Call to Action styles in a little while but essentially a Call to Action style let’s you configure the styles of the heading and of the message and of the button.

But we’re going to choose no style which is essentially the built in style. Every other style requires you to create a custom style in Skin Design.

Overlay Element

This is not a situation where we’re going to add an overlay element. We added the overlay element to the area so we don’t need to add an overlay element to the Call to Action.

Although if we did add one to the Call to Action, here’s what it looks like. Because the Call to Action is actually only this part here, right. So the area spans the whole width but the Call to Action is inside of the column and the column is the width of the page. So that’s why we end up having it like this. But this is not the look we are looking for so we aren’t going to add an overlay element.

Set the Heading and Text

Then we can set a Call to Action heading and text. So maybe in our Call to Action is, “Get a Free Assessment of your Design”. That can be our heading and then you’ve got some text. You can click to remove the heading or the message if you wish.

In the link text we’ll put “call us today” and in the link URL what I want to do is send that to the About Us page. So I’m going to come over to About. Oh yeah, we don’t have any contact information here yet but we will by the time we’re done.

Let’s come over to this and put that URL in there and “Call us Today” or this could be “Contact Us”. Save those options. Now if we reload them there’s “Get a Free Assessment of your Design” and the rest of our text. Then “Contact us Today”. Click on it and it takes you over to the About Us page in this case.

And that’s about all there is to do to setup the Call to Action box. We’ll talk about setting up the image and things like that when we get to styling the front page. Right now all we are doing is just setting up the content for the front page. Styling the front page is a whole different topic and we’ll get to that in a little while.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment