Design Essentials


 





Create a New Banner

Who can use this feature?

system_admin.pngSlash.pngOwner.png

 

Overview

This article will show you how to create a new Banner for your homepage.

There are four modes that are available for Banner configuration:

  • Static: Will keep the single image visible
  • Refreshing: Will filter through the images upon page refresh
  • Slideshow: Will show the active images through a slideshow
  • Video: Allows you to upload a video

Instructions

  1. Navigate to Modules > Site Tools > Design Center
    modules_site_cools_design_center.png
  2. Select the Theme Manager
    theme_manager.png
  3. Select an existing banner
    existing_baner.png
  4. Click Add New Banner
    add_new_banner.png
  5. Fill out the rest of the Options
    • Static:
      • Scale to Fit: Select to force images in the banner slot to scale to fit
      • Image Alignment: Choose Left, Right, or Center
      • Scroll: Select to allow images in the banner slot to scroll with the site's content
    • Refreshing:
      • Scale to Fit: Select to force images in the banner slot to scale to fit
      • Image Alignment: Choose Left, Right, or Center
      • Scroll: Select to allow images in the banner slot to scroll with the site's content
      • Show Slideshow Controls: Choose where to show the controls, or to not show the controls at all
    • Slideshow:
      • Slideshow Slide Timing: Add a timing in seconds
      • Slideshow Transition: Choose to Fade or choose no transition (None)
      • Slideshow Transition Timing: Add a timing in seconds
      • Scale to Fit: Select to force images in the banner slot to scale to fit
      • Image Alignment: Choose Left, Center, or Right
      • Scroll: Select to force images in the banner slot scroll with the site's content
      • Show Slideshow Controls: Choose where to show the slideshow controls or choose not to display the controls at all
    • Video:
  6. On the Images tab, click Choose Image to add images to the banner
    choose_iamge.png
    1. Navigate to the folder that has your desired image in it
      folder.png
    2. Click Insert
      insert_image.png
  7. Repeat and add as many images as you want to add to the banner
  8. Configure Margin, Padding, Width, and Height on the Spacing & Sizing tab
    spacing_and_sizing.png
  9. Configure the shadow on the Shadow tab
    shadow.png
    • Color: Select a shadow color
    • Blur Radius: Indicate how big the blur should be
    • Offset X and Offset Y: Indicate the offset sizes
  10. Return to the Options tab and click Make this Banner Active
    make_this_banner_active_static.png
  11. Click to exit the pop-up
    exit_popup.png
  12. Click Save Changes
    Save_Changes_Banners.png



I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow

Article Feedback

  • Avatar
    Tyler Hoffmann

    Hi there, our Civic Plus system does have banners, but does not have the Design Center option under site tools. Has this been moved or renamed?

    Thanks!