Follow

Managing home page spotlights

The home page of your site utilizes "Spotlights" to display content to site visitors. The overall concept is that the spotlights should be short, efficient, teaser content which brings the site visitor further in to the full content within your site. Therefore, the spotlights are more restrictive with content and how it is displayed, so that you may keep your home page looking clean and neat without overloading it with text and images. This allows you to maintain emphasis on your organization's brand while keeping the styling consistent.

Add A Spotlight

A user with the Site Content Manager is able to add spotlights:
  1. After logging in, navigate to the toolbar at the top of the browser screen.
  2. Click Add > Web Content Display (Note: make sure the Edit Controls checkbox is checked or you won't see the new spotlight to manage)
    Add_Spotlight.png 
  3. The spotlight is now added to the 1st location available on the page, ready for content to be added to it. It will look similar to:
    New_Spotlight.png 

Edit Spotlight Content

If this is a new spotlight, click on the "Add Web Content" Add_New_Content.png icon to create new content to be displayed in the spotlight, otherwise click on the "Edit Web Content" Edit_Content.png icon to edit currently existing content. This will open up the content editor.

Editing home page spotlight content is similar to in other areas of the site, but unlike content in other areas of the site, spotlight content on the home page has multiple fields which are displayed in specific ways once published. All of these fields are optional, and depending on which fields are used for a given spotlight, the location will be shown or hidden from the example structure template figure shown below:

spotlight.png spotlight_plain.png
Note that the above image is just an example, and the actual styling depends on your site's design theme.
  • Title: This is simply an identifier for this piece of content when viewed in lists and other administrative areas. It is not displayed anywhere in the spotlight.
  • Headline: This is the main title, displayed in the header of the spotlight. The text displayed is limited to 40 characters. If more than 40 characters are used, in the display, the title is trimmed to 37 characters and a 3 character ellipses is added at the end ...
    (This is shown by location #2 in the figure)
  • Thumbnail: Displayed on the left side of the header of the spotlight, to the left of the headline. The document chooser is used to select an image from your site's document & media library, so the image must have already been uploaded using that portlet. The image is confined to a maximum width of 65px by the display, so it is recommended to choose an image with that size or smaller.
    (This is shown by location #1 in the figure) 
  • Summary: The main body of the spotlight utilizing a simplified rich text editor and limited to 1250 characters total (including HTML source code.) If the text exceeds 1250 characters, the display will show a warning message with the current character count once the spotlight is published.  If you are adding a direct link to an estore category/product or a calendar event this will eat up the available characters and really restrict what you can place in the spotlight.   We recommend using a link shortening service such as TinyURL.com or Google URL Shorterner to shorten your link that you use in the spotlight.
    (This is shown by location #4 in the figure)
  • Accent Image: This is an image displayed within the body of the spotlight with the alignment determined by the Accent Image Alignment field (left or right.) The document chooser is used to select an image from your site's document & media library, so the image must have already been uploaded using that portlet. The width is restricted to a maximum of 300px in the display template, so it is recommended to choose an image with that size or smaller. The Summary text will wrap around the image to keep it in line with the content.
    (This is shown by location #3 in the figure)
  • Accent Image Alignment: Choose between a left (default) or right alignment for the Accent Image within the Summary text.
    (This is shown by location #3 in the figure) 
  • Accent Image URL: Choose a page within the site to which to link the accent image. This also adds a "more.." link in the footer of the spotlight which links to the chosen page. This can be used to draw the user in to a page with more detailed content within your site.
    (This is shown by location #5 in the figure) 

Move a Spotlight

A user with the Site Content Manager is able to move spotlights:
  1. After logging in, find the spotlight which you wish to move.
  2. Click on the header area or specifically on the "Move Portlet" move_spotlight.png icon, so that your mouse cursor changes to the "Move" move_cursor.png cursor.
  3. Now if you click and hold, you may drag the spotlight to other locations within the page which are available as drop zones for portlets. You will see a blue line in the location where you may drop the spotlight, similar to the image below:
    spotlight_move.png 

Remove a Spotlight

 A user with the Site Content Manager is able to move spotlights: 

  1. After logging in, find the spotlight which you wish to move.
  2. Hover your mouse over the spotlight's header in order to view the "Close" close_spotlight.png icon.
  3. Click on the icon to remove the spotlight from the page.
    Note that this does not delete the content displayed in the spotlight itself. That is preserved separately from the spotlight that actually is displaying it.
    spotlight_close.png 
Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk