Article

Creating Spotlights for your Responsive Site Design

« Go Back

Information

 
Solution

Create custom spotlights for the banner/masthead area of your home page to engage your website visitor, and prompt them to take action on the message you're sending. Multiple active spotlights automatically rotate in a slider or a fade. As with other elements of your website design, your spotlights will resize and reposition for optimal display when your site is viewed on different devices. So, it's important to think about the image you use in your spotlight, and how it will display at each size.

Here are some tips for selecting, editing and saving images for your responsive spotlight.

Choose a horizontal image*. Due to the placement and format of the spotlight content, think landscape orientation vs portrait.

Embrace the photography Rule of Thirds. The basic principle behind the rule of thirds is to imagine breaking an image down into thirds, both horizontally and vertically, so that you have 9 parts. The imaginary grid identifies four parts of the image that are best to place points of interest in. The image on the left is before cropping. The image on the right shows the cropping based on the Rule of Thirds. 

cropping before and after rule of thirds

Consider this rule as you edit the photos for your spotlights. This screen shot shows the resulting spotlight, in the Desktop display.

desktop

The Rule of Thirds not only results in a more eye-catching image, it also works with the way the spotlight content responds to different screen sizes. The image does not just get smaller, the focal point repositions. By following the Rule of Thirds, your points of interest will remain in the image, at an appropriate size, even with the new display dimensions for other screen sizes. Here are results with the properly cropped image.

Tablet horizontal:

tablet horizontal

Tablet vertical:

tablet vertical

Mobile:

mobile

To add your spotlight, follow these steps in your Springboard.

1. Find the size of the Spotlight content, so you can save your image at the right size.

The size of your spotlight image is determined by the desktop mode of your website design. You'll find your spotlight image size in your Springboard.

  • Click My Website and Website Content.
  • Click the Title of your home page.
  • The left menu lists content locations. Spotlight dimensions (in pixels) are shown in parentheses. Hover your cursor over the Spotlight tab to see the complete number. 

spotlight image size

Save your image at this size—it is the largest display size. The large image will size down to display well on smaller screens, but a small image cannot stretch to display on large screens without becoming distorted.
Format should be .jpg or .png. 

2. Add your Spotlight into the spotlight content area on your website's home page.

  • Click Add Spotlight Item.
  • Click Select a Spotlight and select the spotlight image from your library.* If your image is not yet in the library, click Upload Spotlight(s) and and choose the file from your computer. Click Upload and then Select this Spotlight.
  • Type a Title, which displays as the Headline on the spotlight. It will also be used as its Alt Tag. An Alt Tag is a few words that describe an image, which also helps with search engine optimization.
  • Type the Text to display with the title and image. Be concise and compelling, use words wisely—you do not want to cover the whole image with text. The font and text size is already determined by your website design.
  • Type the Button Text, which is your call to action. Again, the style of the button is based on your site design.
  • Link: Select whether your Spotlight links to another site, another page on your site, to a downloadable file, or to an email address.
  • NOTE: Be sure to include a call to action and link on each spotlight. At minimum, add "Learn more" and link it to another area of your website, to encourage visitors to click around and learn more about who you are and what you offer.
  • Click Save & Close.

add spotlight

3. Test and adjust. Take the time to place, and then view the image and text on your site. Adjust as necessary.

4. Manage the Display of your Spotlights.

  • The Display column in the Spotlight content determines which spotlights are displaying on your site. Check or un-check the boxes accordingly. Checked items are the items displaying on your public site. When multiple spotlights are checked to display, they will slide or fade in the order they are listed here.
  • To update the display order, click the crosshairs icon for an item, then drag and drop to position it where you want it.  
  • To Delete a spotlight, click Delete in the Actions column, then confirm that you want to delete it.

*Upload images directly into your Spotlights library. In addition to uploading the image in the spotlight content, you can drag and drop one or more images directly into the Spotlights Library following these steps:

  • Click My Website and under Libraries, click Spotlights.
  • Your Spotlights Library works like your image and document libraries. Click and drag your spotlight file, or click to select multiple files and drag them, onto the window and drop them onto the grey box that appears, which says Drop files here to upload.
  • Give each image an optional Title, or the filename will be used as the title.
  • Click Save & Finish.

spotlights library

Images in the Spotlights Library will be ready to select from the Add Spotlight modal.

*NOTE: Be aware that not all images you find online are free to use however you want. Penalties for piracy are real and can vary from a few to a few hundreds of dollars. Understand the licensing rules of your photo source.

Related: Stock Photo Options