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).
Step 1: 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).
Step 2: 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.
Step 3: 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).
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.
Call to Action page element set up with subtitles and the Slide Up "Action Style."
Call to Action page element using the Image Zoom "Action Style" setting.
Call to Action page element using the Text Zoom "Action Style" setting.