Build Your Own Business Website header image

Agility Call to Action Box

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

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

So far we have looked at the Featured Content Box and the Icon Content Box which were very similar. Next we’ll take a look at the Agility Call To Action Box which is entirely different than those.

Multiple Locations on the Site

We have the Agility Call To Action Box in a bunch of places on the site. We’ve got it here, we’ve got it here on the front page, that’s what the notice bar is. Let’s come over to one of our templates. This is an Agility Call To Action Box with an AWeber form in it and this is also an Agility Call To Action Box with an AWeber form in it.

So the call to action boxes take a number of shapes and configurations. That is one of the things you set when you are setting up a call to action box.

Set the Configuration

Let’s come back over to the Front Page and go to the call to action box. The first thing you do is choose a configuration.

  • Tall and Wide
  • Short and Wide
  • Vertical Stacked

Tall and Wide is intended to be horizontal in its in its layout. Not vertical but horizontal. Tall and wide ends up with bigger text and larger padding than the short and wide.

So the short and wide one is like the notice bar here on the Front Page. It doesn’t have as big a text and doesn’t have a big a padding. It’s intended to just to be short and low profile. It’s not supposed to dominate page the same way that the tall and wide one does.

The Vertical Stacked is intended to be a vertical aligned call to action. In that case, the vertical align call to action again has different automatic styling applied to it.

Set the Style

Here we choose a tall and wide. We can also choose a style. This has no style by default which means it just takes the generic or default style for the tall and wide in the context that it’s in.

So if it’s in a full width single column, the text is big and the button is big and the spacing is big. If it was in a half width column everything gets sort of shrunk down.

You can also choose one of these call-to-action styles. There are 3 styles available for you and right now they are empty. Those styles are not set up yet. You set them up in Skin Design. So if you chose one now, it wouldn’t do anything because there’s no style associated with them. We’ll talk more about styling here when we go to the Styling Agility seminar.

Set an Overlay Element

You could again choose to add an overlay element. This element only sits over the top of the call to action box. So if we said add an overlay element here and we left it as default, that puts it right in this section only. It doesn’t span the whole distance because the call to action box is actually only this big.

I recently saw overlays used to good effect at digitalfarmworkshops. He’s got it going right around there and so it makes it stand out even a little bit more. I kind of like that. So that’s what it does, it doesn’t fill up the whole screen it just fills the box. But we’re not going to have an overlay element here.

Tall and Wide Options

If you choose a tall and wide configuration, you automatically have a call to action heading. Let’s look at that on the front page. Here’s the call to action heading – it’s the big text here and this is the call to action message – that smaller text. This is the call to action button down here.

Let’s go back to our settings and look at those. Here’s your call to action heading, your call to action text and then your link text. That’s the call to action button, next is link text.

You can choose to remove the message. You can choose to remove the heading. I wish I could say you could choose to remove the link but you can’t so you wouldn’t use this if you weren’t using a link. So you don’t have to have a heading and action text if you don’t want to, you can always choose one of them to remove.

Short and Wide Options

If you choose short and wide that automatically takes the heading out so you don’t have a choice of the heading. You just have some text to put in and the call to action button ends up on the edge of it. This is what that short wide looks like. It takes the message and the button and it puts them side by side and whereas the tall wide stacks the elements with heading then message followed by the button.

Vertical Stacked Options

Then if you choose Vertical Stacked you go back to the whole set of choices like you have with tall and wide.

So that’s how that call to action works and it’s fairly straightforward. It works this way in every single one of your call to action boxes.

0 Comments… add one
0 comments… add one

Leave a Comment