Home > Design > Homepage Featured Content

Homepage Featured Content

   15 images


Learn how to:

1) Add images to your slideshow

2) Charge the order of your slideshow images

3) Change the thumbnail image under your slideshow

4) Change the slideshow from 550 pixels wide to full width of your website

5) View 12 minute video at bottom of this page



Homepage Slideshow 1-1

Feature Pages and Articles in the slideshow

  1. Only pages with images attached can be featured in the slideshow
  2. After you attach an image to a page, the featured Content slideshow star will become red. 
  3. Click the red start to feature the page in the slideshow
  4. All green stars are featured in the slideshow




Homepage Slideshow 2

Images in the slideshow don't always fit

  1. Because the slideshow is wider than taller, tall images will not fill the slideshow window
  2. For a clean/professional look, you want to fill the entire slideshow area
  3. Options to fill the area are
    1. Choose an image for your page that is wider than taller to feature in the slideshow
    2. Images smaller than 550 pixels wide by 300 pixels high will never fill the slideshow
    3. Crop the image to fit 550 pixels wide by 300 pixels high



Homepage Slideshow 2a

The image in the 1st position is the featured image

  1. If you have more than one image attached to a page, you can change the featured image by dragging any image to the 1st position.



Homepage Slideshow 3

Edit Image for the Slideshow

Click the Edit icon to make the following changes:

  1. Replace the image with a new image
  2. Add a Featured Homepage Slideshow image
  3. Add a Featured Homepage Slideshow Thumbnail image
  4. Change the Text Overlay position in the Homepage Slideshow
  5. http://resize.it will allow you to crop and resize your images for free




Homepage Slideshow 4

Change the Text Overlay position

  1. Go to the Image Edit page to select the location of the Text Overlay
  2. You can also select to hide the Text Overlay.  In this case, you may want to embed the text in your image, using a photo editing program, like Photoshop.


Homepage Slideshow 5

Here is an example of a Text Overlay positioned on the Right

Example of a Right-aligned Text Overlay

  1. The Title of the Text Overlay is the Title of the page this image is linked to
  2. The description, under the Title, is the META Description for the page.  You can change this text on the Edit for the Page
  3. You cannot change the width or height of the Text Overlay background
  4. Using a Stylesheet, you can change the color and transparency of the gray background in the Text overlay and the color of the text.  Visit Instructions on how to change the Text Overlay Stylesheet.


Homepage Slideshow 6

Upload a 2nd Image to be Featured

  1. If your images doesn't fit the height and width of the slideshow, you can upload a 2nd image that does.
  2. By uploading a 2nd image, you retain the original image to be used on the page being featured.  Only the 2nd image is displayed in the slideshow.
  3. Return to the Edit page for the image to upload a 2nd featured image


Homepage Slideshow 7

You can change the Thumbnail image in the slideshow

  1. By default, the thumbnail image is a smaller version of the original image
  2. In some cases, this makes the content of the thumbnail difficult to see.
  3. You can feature a small section of the original image as the thumbnail image



Homepage Slideshow 8

Upload a Custom Thumbnail Image

  1. Use a photo editing program to crop a portion of the original image, that is approximately 200 pixels wide by 142 pixels high.
  2. Return to the Image Edit screen
  3. Click the button to upload a thumbnail image
  4. Return to the home page to see your new thumbnail image in the slideshow




Homepage Slideshow 9

Change the Order of images in the slideshow

  1. Click the Admin/Pages menu
  2. To the right of the HOME page, click "Manage Homepage Features"


Homepage Slideshow 10

Drag and Drop Image Order

  1. Drag the up/down arrow to reposition the order of images in your slideshow


Homepage Slideshow 11

Add Blog Articles to your slideshow

  1. You will see the Featured Slideshow star on your Admin blog summary page
  2. Any Blog Article that has an image attached can be included in your slideshow
  3. Depending on other SiteNinja module you have, you can feature other content, including Events, Products and Directory Listings


Change the Width of your Slideshow

Homepage Slideshow 12
  1. Your slideshow can fill the body of the homepage, or the full width of the homepage
  2. You can change the width back-and-forth at anytime.  The full -width slideshow has a larger impact on the visitor, but forces other content to be pushed further down the page
  3. To change the slideshow width go to Admin/Settings/Homepage.
  4. You will see checkboxes to set the width of slideshow.
  5. You can also show or hide the thumbnail images


Example of a Full-Width Slideshow

Homepage Slideshow 13






See a 12 minute video demonstration of all items described above

Homepage Slideshow 14


Search Support for More: