skip navigation

Use background images to create custom CTAs

03/23/2016, 2:30am CDT
By Loren Nelson

As the popularity of Call to Action page elements grows, so too do the nuances in how to create them.

We’ve written about CTAs before, describing them as fancy looking links, and explaining step-by-step how to build and place them on a page.

We’re circling back today with a simple, smart trick for finding the perfect background images to use for CTAs. All you need to execute this Pro Tip is the ability to take a screen shot of a portion of your site (easy to do on a Mac – simply press Comman-Shift-4). Not quite so easy using a PC, as pressing the Print Screen button grabs a screenshot of your entire display.

Here are a couple of good tutorials that explain how to take screenshots:

How to take a screenshot on your Mac
How to take a screenshot on a PC with Windows 7, 8 or 10

Grabbing screenshots or images from your site’s background, then using them in your Call to Action graphics, gives a site a professional look without enlisting the help of a design pro.


Example of the Call to Action page elements on the Fort Zumwalt South Jr. Bulldogs Football homepage.

How it works

Three quick and easy steps to create Call to Action page elements with background images pulled from your site:

  1. Save background images of your site
  2. Set up your page
  3. Add the Call To Action page elements

Save background images of your site

In this example, we are taking background images of the Minnesota Hockey Hub. First, we maximized the view on our browser to see as much of the background as possible. We selected three similar areas of the background, with the idea of giving the CTAs a similar but different look.

Set up your page

We dropped a new layout container at the bottom of the page, setting it to accept three equal size Call to Action page elements

Add the Call to Action page elements

Choose the Call To Action page element. Click the Choose File button, then locate the background image you saved previously. Complete the other settings selections as desired, then click the Save Changes button at the bottom of the page. We repeated this process for the other two Call To Action elements we added at the bottom of the page, using a different background image each time.

The finished product

Note how the three Call to Action graphics at the bottom of the page match the look and feel of the site.

Learn More

Want to discuss how Sport Ngin can give your organization's website a design makeover? Let's talk: sportngin.com/get-started

 

Tag(s): Pro Tips