skip navigation

Call to Action page element released for Sitebuilder

By Loren Nelson, 06/06/15, 5:15PM CDT

Share

Stylized combination of text, images and links drives viewers to important pages

They are called CTAs in web design lingo, and they are all the rage.

CTA is short for Call to Action, which is long for saying a link. That’s all Call to Action buttons or animated graphics are – fancy looking links. You’ll see these CTAs popping up on the homepages of many new or redesigned websites (see images below).


Call to Action buttons are displayed prominently below the top navigation on these homepages

These styled-up links, or CTAs, can be effectively used to drive viewers into specific areas of a site. Say, for instance, that an organization is starting a registration session. Then it might make sense to use a CTA as a link to that registration form. Or, if an organization is in desperate need of volunteers, it could create a prominent Volunteers button that drives viewers into a page with a sign-up form.

The great thing about CTAs is they can be easily updated, replaced or deleted depending on an organization’s current objectives and needs. Previously, creating a CTA required some basic graphic design skills or custom work from Sport Ngin’s design staff. 

With Sport Ngin’s new Call to Action page element, that’s no longer the case. You can now create and place your custom CTAs on your site in a matter of minutes (no graphic design software or experience required).


How it works


Decide where on your site you want to place a Call to Action button or graphic, then select it from the list of page elements (as of this writing it is second from the bottom).

First, choose the image you want to load. Then paste the URL for the webpage you want linked to the image in the Image URL field. Enter the text you want placed over the image in the Title Text field. Choose the color of the title text by using the color picker in the Title Color field.

As you continue to set up your Call to Action page element, chose the Action Style. This will determine the type of animation associated with the CTA graphic. Select Yes in the Show Original Image drop down for optimum sharpness and clarity. Click the Create this Page Element or Save Changes at the bottom (see image below).

About the action style settings

None: The title text is placed in the middle of the image, with no animation or effects.

Slide Up: The title text is placed in a dark, opaque band spanning the bottom of the image, and the band rises up to fill the entire image when the cursor is hovered over the CTA.

Image Zoom: The image size increases when the cursor is hovered over the CTA.

Text Zoom: The text size increases when the cursor is hovered over the CTA.

Border: The text is centered on the image and a dark, opaque boarder appears when the cursor is hovered over the CTA.

 

The finished product

Learn

Meet

Share

Call to Action page element set up with subtitles and the Slide Up "Action Style."

Meet

Call to Action page element using the Image Zoom "Action Style" setting.

Share

Call to Action page element using the Text Zoom "Action Style" setting.

 

Related articles

How to use the Media Slider page element

How to use the Social Media page element

 

Learn More

To learn more about how to add Call to Action page elements to your site schedule a chat with a Sport Ngin expert through our Get Started form: sportngin.com/get-started

About Loren Nelson

Loren Nelson Headshot

Loren Nelson is Community Manager at SportsEngine. He is also the National Media Editor and has served in a variety of other customer facing and media roles since 2009.

Loren's Social Media Contacts