Create a New Banner

Prev Next

This article will show you how to create a new Banner for your homepage. Four modes 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

Who can use this feature?

System Administrators | Owners

Important Note:

The Design Center Pro module may incur an additional cost. Please contact your Customer Success Manager for more information.

Instructions

  1. Sign in to your website solution

  2. Navigate to Modules and on the Site Tools tab, select Design Center The expanded Modules drop-down menu, with the Design Center option of the Site Tools tab highlighted.

  3. Select the Theme Manager The Design Center module with the Theme Manager option highlighted.

  4. Select an existing banner The Theme Manager of Design Center Pro with a Banner container highlighted.

  5. In the resulting Banner Options dialog box, click Add New Banner The Banner Options dialog window with the Add New Banner button highlighted.

  6. Enter Banner Name The Banner Options dialog window for a new banner with the banner Name field highlighted.

  7. Fill out the rest of the Options The Banner Options dialog window for a new banner with options for mode, alignment, and more.

    • 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 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 transition time 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 to 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

  8. On the Images tab, click Choose Image to add images to the banner The Banner Options dialog window for a new banner with the Choose Image button highlighted.

  9. Navigate to the folder that has your desired image in it The Banner Images window with the image storage folders section highlighted.

  10. Click Insert next to the image A banner image in the Banner Images window with the Insert button highlighted.

  11. Repeat and add as many images as you want to add to the banner

    • Static: Add images to replace expiring images

    • Refreshing: Add images to add to the refreshing cycle

    • Slideshow: Add images to the slideshow

    • Video: Images tab will not display, view a Video tab instead

  12. (Optional) Configure Margin, Padding, Width, and Height on the Spacing and Sizing tab The Banner Options dialog window with the Spacing & Sizing tab highlighted.

  13. (Optional) Configure the shadow on the Shadow tab The Banner Options dialog window with the Shadow tab highlighted.

    • Color: Select a shadow color

    • Blur Radius: Indicate how big the blur should be

    • Offset X and Offset Y: Indicate the offset sizes

  14. Return to the Options tab and click Make this Banner Active The Banner Options dialog window with the Options tab and Make This Banner Active button highlighted.

  15. Click X to exit the pop-up The X icon in the top-right corner of the Banner Options box.

  16. Click Save Changes:The Theme Manager administrative user of Design Center Pro with the Save Changes button highlighted.