Impact Settings


Impact - Setup

  • Collapse In Edit Mode: (checkbox) Hide the contents of the Impact stack in Edit Mode to make more room on your page.
    • Default:
  • Foreground: (select) Add foreground content in front of all slides. You can add content to individual slides in the Impact slide stack settings
    • Default: None
    • Possible Values:
      • None
      • Floating (Same on all slides)
  • Show: (button-2) Choose to show the foreground content only when Impact is hovered or always
    • Enable: When Foreground is set to perShow
    • Default: [false, true]
  • Height: (select) Normally use full height to allow vertical centering of content with target. Use auto height to size to content and allow per slide content links to be clickable.
    • Enable: When Foreground is set to perShow
    • Default: Full Height
    • Possible Values:
      • Full Height
      • Auto Height

  • Size: (select) Determine how the height of the image scales with the width
    • Default: Full Screen Hero Header
    • Possible Values:
      • Full Screen Hero Header
      • Proportional
      • Flexible Height
      • Fixed Height
  • Remove after scroll?: (checkbox) Once scrolled away off the top of the browser, Impact will be removed from the page so that you cannot scroll back to it
    • Enable: When Size is set to fill-container hero-header
    • Default: false
  • Aspect Ratio: (select) Determine how the height of the image scales with the width
    • Enable: When Size is set to proportional-height
    • Default: 4:3 (Standard 75%)
    • Possible Values:
      • 10:3 (Shallow Headers 30%)
      • 21:9 (Headers 42%)
      • 16:9 (Wide 56%)
      • 8:5 (Standard 63%)
      • 4:3 (Standard 75%)
      • 1:1 (Square 100%)
      • 4:5 (Portrait 120%)
      • 8:10 (Portrait 125%)
      • 5:7 (Portrait 140%)
      • Custom
  • Ratio: (number-2) Enter the relative width and height of your images
    • Enable: When Aspect Ratio is set to custom
    • Default: [1200, 800]
    • Min Value: 0
    • Max Value: 3000
  • Flexible Height: (number) Makes impact a proportional height.
    • Enable: When Size is set to flexible-height
    • Default: 100%
    • Min Value: 5%
    • Max Value: 100%
  • Relative to: (select) Makes the flexible height relative to browser or the stack in which impact is placed. Note the parent stack must have a defined height. Columns and background image stacks often do not have a defined height
    • Enable: When Size is set to flexible-height
    • Default: Browser Height
    • Possible Values:
      • Browser Height
      • Parent
  • Static Height: (number) Sets a fixed static height for impact in pixels
    • Enable: When Size is set to fixed-height
    • Default: 400px
    • Min Value: 10px
    • Max Value: 1500px
  • Minimum Height: (number) The minimum height of the image when in proportional mode
    • Default: 300px
    • Min Value: 10px
    • Max Value: 2000px

Impact - Image Alignment

  • Portrait Vert: (select) The vertical alignment for images with a portrait aspect ratio.
    • Default: Center
    • Possible Values:
      • Top
      • Center
      • Bottom
  • Portrait Horiz: (select) The horizontal alignment for images with a portrait aspect ratio.
    • Default: Center
    • Possible Values:
      • Left
      • Center
      • Right

  • Landscape Vert: (select) The vertical alignment for images with a landscape aspect ratio.
    • Default: Center
    • Possible Values:
      • Top
      • Center
      • Bottom
  • Landscape Horiz: (select) The horizontal alignment for images with a landscape aspect ratio.
    • Default: Center
    • Possible Values:
      • Left
      • Center
      • Right

Impact - Setup

  • Show only once per session?: (checkbox) Impact will only be displayed once per browser session. This setting uses a session cookie to ensure that the visitor only sees Impact on first page load.
    • Enable: When Size is set to fill-container hero-header
    • Default: false

Impact - Animation

  • Transition: (select) Selects the transition type between slides
    • Default: Fade
    • Possible Values:
      • Fade
      • Slide

  • AutoPlay: (button-2) Auto play the slide show, either continuously or once only, stopping at the last slide
    • Default: [true, false]
  • Pause on hover?: (checkbox) Pause the slide show when the mouse pointer is hovered over the stack.
    • Default: false
  • Randomize Slides?: (checkbox) Randomize the order in which the slides are displayed each time the page loads.
    • Default: false
  • Slide Duration: (number) The time the each slide is displayed for
    • Enable: When AutoPlay is set to true
    • Default: 3000ms
    • Min Value: 0ms
    • Max Value: 20000ms
  • Transition Speed: (number) The time taken for the slide transition
    • Default: 2000ms
    • Min Value: 1ms
    • Max Value: 8000ms
  • Inital Fade In: (number) The time for the background fade in on the intitial slide.
    • Default: 80ms
    • Min Value: 0ms
    • Max Value: 4000ms
  • Cross Fade: (slider) The relative speed of the fade out to the fade in
    • Default: 3x
    • Min Value: 1x
    • Max Value: 5x

  • Initial Start: (select) Set this to “Start immediately” if your Impact stack is in view at the top of the page or there are problems with it autoplaying.
    • Default: Start immediately
    • Possible Values:
      • When scrolled into view
      • Start immediately

Impact - Video

  • Video Playback: (select) Makes the flexible height relative to browser or the stack in which impact is placed. Note the parent stack must have a defined height. Columns and background image stacks often do not have a defined height
    • Default: Start Immediately
    • Possible Values:
      • Start Immediately
      • When Slide Becomes Active
      • Play when active, pause when inactive
  • Restart Video?: (checkbox) Restart the video from the start each time its’ slide comes in to view.
    • Enable: When Video Playback is set to pauseInactive
    • Default: false
  • Touch Screens: (button) Use poster image for touch screens instead of video. Touch devices do not support autoplaying of videos.
    • Enable: When Size is set to dummy
    • Default: [true]

Impact - Preloader

  • Pre Loader: (select) Show the first image (including the video poster image), or a custom immediately on page load. This can prevent the appearance of a blank stack when loading large videos.
    • Default: None
    • Possible Values:
      • None
      • First Image in Slideshow
      • Custom Image
      • Color
  • Color: (color) The color preloader background
    • Enable: When Pre Loader is set to preload-color
    • Allows Opacity: true
  • Preload Image: (button) Show the first image or video poster image immediately. This can prevent the appearance of a blank stack when loading large videos.
    • Enable: When Pre Loader is set to dummy
    • Default: [false]
  • Custom Image: (button-2) Use either a local or warehoused image for the background image
    • Enable: When Pre Loader is set to bg-image custom-image
    • Default: [true, false]
  • Custom Image: (image) Add a custom image to use as the preloader background
    • Enable: When Pre Loader is set to bg-image custom-image
    • Default:
  • Custom Image: (link) Add a custom warehouse image to use as the preloader background
    • Enable: When Pre Loader is set to bg-image custom-image
    • Default:

  • Preload Spinner: (button) Show a spinner on the preloading image
    • Default: [false]
  • Icon: (select) The icon used for the spinner
    • Enable: When Preload Spinner is set to true
    • Default: Pulsing Dots
    • Possible Values:
      • Spinner
      • Notched Circle
      • Pulsing Circle
      • Circle Arrows
      • Pulsing Dots
      • Cog
  • Color: (color) The color preloader spinner
    • Enable: When Preload Spinner is set to true
    • Allows Opacity: true

Impact - Touch Device Cover Image

  • Static Image: (button) Use a static cover image for touch devices
    • Default: [false]
  • Image: (button-2) Use either a local or warehoused image for the background image
    • Enable: When Static Image is set to true
    • Default: [true, false]
  • Touch Image: (image) Use a separate image for mobile touch devices. This is an optional setting.
    • Enable: When Image is set to true
    • Default:
  • Warehouse Image: (link) The url to the image used for the background image on touch devices. This is an optional setting.
    • Enable: When Image is set to true
    • Default:

Impact - Overlay

  • Overlay: (button-2) Apply color and tiled images overlays to all slides
    • Default: [false, false]
  • Overlay Color: (color) The color of the overlay
    • Enable: When Overlay is set to true
    • Allows Opacity: true
  • Overlay: (image) An overlay that will be applied on top of the slideshow. If you leave this blank, no overlay will be applied.
    • Enable: When Overlay is set to true
    • Default:
  • Image Opacity: (number) The opacity of the tiled overlay that is placed on top of the cover image
    • Enable: When Overlay is set to true
    • Default: 30
    • Min Value: 0
    • Max Value: 100

Impact - Scroll Button

  • Show click to scroll button?: (checkbox) Show the clickable scroll button
    • Default: false
  • Hide Scroll button on mobile?: (checkbox) Hide the scroll button completely for small screens.
    • Default: false
  • Position: (select) Choose the position of the scroll button
    • Enable: When Show click to scroll button? is set to true
    • Default: Bottom
    • Possible Values:
      • Top
      • Bottom
  • Vertical Offset: (number) The distance from the top or bottom of the screen in pixels
    • Enable: When Show click to scroll button? is set to true
    • Default: 30px
    • Min Value: 0px
    • Max Value: 300px
  • Left: (number) The horizontal position of the scroll button
    • Enable: When Show click to scroll button? is set to true
    • Default: 50%
    • Min Value: 3%
    • Max Value: 97%

  • Scroll Button: (color-4) Style the background, hover background, arrow and hovered arrow with opacity colors
    • Enable: When Show click to scroll button? is set to true
    • Allows Opacity: true
  • Size: (slider) The size of the scroll button.
    • Enable: When Show click to scroll button? is set to true
    • Default: 0.7
    • Min Value: 0
    • Max Value: 1
  • Mobile Size: (slider) The size of the scroll button on small screens.
    • Enable: When Show click to scroll button? is set to true
    • Default: 0.7
    • Min Value: 0
    • Max Value: 1
  • Radius: (slider) The radius of the scroll button. 50% is a circle, 0% is a square
    • Enable: When Show click to scroll button? is set to true
    • Default: 50%
    • Min Value: 0%
    • Max Value: 50%
  • Arrow Thickness: (slider) The thickness of the scroll arrow
    • Enable: When Show click to scroll button? is set to true
    • Default: 2
    • Min Value: 1
    • Max Value: 10
  • Drop Shadow: (number-4) The amount of drop shadow around the scroll button.
    • Enable: When Show click to scroll button? is set to true
    • Default: [0, 0, 0, 0]
    • Min Value:
    • Max Value:
  • Border & Shadow: (color-2) Style the border and shadows with opacity colors
    • Enable: When Show click to scroll button? is set to true
    • Allows Opacity: true

  • Show Hint: (checkbox) Show a hint when the scroll button is hovered over
    • Enable: When Show click to scroll button? is set to true
    • Default: false
  • Hint Color: (color) The color of the hint text
    • Enable: When Show Hint is set to true
    • Allows Opacity: true
  • Hint Text: (input) The text displayed in the scroll button. You shoud keep this to one word or it will cover the arrow
    • Enable: When Show Hint is set to true
    • Default: Scroll
  • Hint Text Style: (button) Make the hint text italic
    • Enable: When Show Hint is set to true
    • Default: [true]

  • Fade button on scroll?: (checkbox) Fade out the scroll button on scrolling down
    • Enable: When Size is set to dummyValue
    • Default: true
  • Scroll Effect: (select) Selects the transition type between slides
    • Enable: When Size is set to dummyValue
    • Default: ease In Out Quad
    • Possible Values:
      • Linear
      • ease In Quad
      • ease Out Quad
      • ease In Out Quad
      • ease In Sine
      • ease In Expo
      • ease Out Expo
      • ease In Out Expo
      • ease In Out Circ
      • ease Out Sine
      • ease In Out Sine
      • ease Out Elastic
      • ease In Out Elastic
  • Speed: (number) Controls the time taken for the easing effect to complete
    • Enable: When Size is set to dummyValue
    • Default: 1200ms
    • Min Value: 500ms
    • Max Value: 4000ms

  • Animate scroll button?: (checkbox) Provides a subtle attention getter to the scroll button
    • Enable: When Show click to scroll button? is set to true
    • Default: false
  • Animate Delay: (number) The delay after page load before the scroll button animation begins
    • Enable: When Animate scroll button? is set to true
    • Default: 3000ms
    • Min Value: 0ms
    • Max Value: 90000ms
  • Repeat: (number) The numer of times to repeat an animation
    • Enable: When Animate scroll button? is set to true
    • Default: 3
    • Min Value: 1
    • Max Value: 10

  • Auto Scroll: (button) Auto scroll down the page after a defined time period
    • Default: [false]
  • Auto scroll after: (number) Imapact will automatically scroll out of view after the specified time in seconds
    • Enable: When Auto Scroll is set to true
    • Default: 5s
    • Min Value: 0s
    • Max Value: 100s

Impact - Advanced

  • z-index: (number) The z-index of the Impact container. Higher z-index values may be needed to bring it infront of other content
    • Default: 0
    • Min Value: 0
    • Max Value: 999999
  • Custom Class: (input) Assign a custom class to this Impact stack. Do not enter a dot before the class name.
    • Default:
  • Preserve topbar padding?: (checkbox) Use this id with the trigger classes to control the slideshow from external elements
    • Default: 0
  • Trigger ID: (input) Use this id with the trigger classes to control the slideshow from external elements
    • Default: impact
  • Show Trigger Classes: (checkbox) Shows the trigger classes in the edit mode window.
    • Default: false