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:
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.
Three quick and easy steps to create Call to Action page elements with background images pulled from 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.
We dropped a new layout container at the bottom of the page, setting it to accept three equal size 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.
Note how the three Call to Action graphics at the bottom of the page match the look and feel of the site.
Tag(s): Pro Tips