Individual Slide Settings

Everything that would apply to an individual slide only is managed in this section. This includes setting a slides main background image, additional layer content, hyperlinking and animations.

Before getting started with each individual settings, let’s review some of the general admin page controls:

 

General Slide Settings

^ back to Slide Settings menu

  1. Slide Title: The name of the slide. Can be anything, and is only used in the admin for keeping track of your slides.
  2. Published: The “published” state of the slider. If “published”, slide will show up inside the slider on the front-end. “Unpublished” means the slide will still exist in the admin, but will be hidden when the slider is viewed on the front-end (useful for creating new slides and not having them show up live on your site until the slide is officially ready for production).

 

  1. Visible From: A date and time-stamp from which to start showing the slide on the front-end of your site.
  2. Visible Until: A date and time-stamp from which to start hiding the slide from the front-end of your site.

 

  1. Transitions: Select one or more transitions for when the slide animates into view (this transition is for the slide itself, and not for individual content layers). Multiple selections will alternate each time the slide is visited. Or choose only a single transition (leave all others deselected) to dedicate a single transition to the slide. “Random Transitions” will automatically apply multiple random transitions. You can also choose a simple “Fade” or even “No Transition”.

  2. Slot Amount: Applicable to all transitions with “slot” in the name. A “slot” named transition is when the background image will break into multiple parts and animate. The number of “slots” defined here will represent the amount of “parts” the animation breaks apart into. Use a number 7 or less here for optimal performance.
  3. Rotation: Rotation (-720 -> 720, 999 = random) Only for Simple Transitions.
  4. Transition Duration: The speed of the transition in milliseconds (a number between 300 and 1000 is usually best).

 

  1. Delay: The amount of time before the next slide shows. Leave blank to use the slider’s master delay value. Otherwise, enter a number here to override the slider’s master delay value, and apply a specific delay to this slide only.
  2. Save Performance: Normally when a the slider changes, any remaining visible layers from the current slide will animate out at the same time the new slide animates in. And in cases when the current slide has a large number of layers, this leads to lots of elements animating at the same time, which can sometimes cause the animations to appear slow or jagged. In these cases, the “Save Performance” option can be extremely helpful. When set to “On”, all remaining visible layers from the current slide will animate out completely before the next slide animates in.

 

 

These options are for hyperlinking the entire slide. Click here for more information about hyperlinking slider content.

  1. Enable Link: Add a hyperlink to the entire slide.
    • “Enable” = Use hyperlink
    • “Disable” = No hyperlink.
  2. Link Type:
    • “Regular” = hyperlink to another web page.
    • “To Slide” = hyperlink to another slide within the current slider.
  3. Slide Link: Enter the url of the web page you wish to hyperlink to here (applicable when “Link Type” = “Regular”)
  4. Link Opens In: (applicable when “Link Type” = “Regular”)
    • “Same Window” = open the link normally
    • “New Window” = open the link in a new tab/window
  5. Link to Slide: Choose the slide number to link to (applicable when “Link Type” = “To Slide”)
  6. Link Position:
    • “Front” = the entire slide will be clickable, regardless of layer content.
    • “Back” = the hyperlink will only be clickable when the user’s mouse is not hovering one of the slide’s layers.

 

Thumbnail: Specify a separate file to represent the slide’s thumbnail (thumbnails must be enabled first in the slider’s navigation settings). If no thumbnail is set, and the slider’s navigation includes thumbs, a copy of the slide’s main background image will be automatically resized and used as the slide’s thumbnail.

 

  1. Class: Assign a custom class to the slide’s main HTML element. Useful for applying custom external CSS styles.
  2. ID: Assign an “ID” attribute to the slide’s main HTML element. Useful for quickly grabbing the slide’s main HTML element with jQuery from an external script.
  3. Attribute: Add an attribute without a value to the slide’s main HTML element.
  4. Custom Fields: Add custom attributes to the slide’s main HTML element (multiple attributes supported, separate multiple attributes with commas).

 

Slide Main Image / Background

^ back to Slide Settings menu

An individual slide’s main background can be an image, a solid color, or nothing at all (transparent). You can also customize the appearance of your main background image by adjusting the “Background Settings” described below.

Special Note: This is different than the main background applied to the slider itself. Click here to review the slider’s main background settings.

 

  1. Background Source:
    • Image BG: If you didn’t already select an image background when creating the slide, or if you want to change the image you previously selected, click the “Change Image” button and the WP media dialogue will popup, allowing you to choose a new image.

       

    • External URL: Use this option if you want to load an image from another website.

       

    • Transparent: Use this option for no background image and no background color (for a completely transparent slider, you’ll also need to adjust the slider’s main background settings as well)

       

    • Solid Colored: Choose a solid color for the slide’s main background.

       

  2. Background Settings:
    • Background Fit: The best way to make your images fit perfectly inside the slider is to resize your images in Photoshop to the same exact size used for the slider’s Grid Width and Grid Height settings. Using “Cover” here is usually the best option.
      • Cover: The image will always cover the entire slider. Cropping may occur.
      • Contain: The image will always be shown in its entirety. No cropping will ever occur, but blank space may occur.
      • Percentages: Choose a width and height percentage for image resizing.
      • Normal: Never resize the image.

       

      As mentioned above, sizing your images to match the same size as the slider’s Grid Width and Grid Height is always best! But in cases where this isn’t possible, lets explore how “Cover” and “Contain” would look if the original image size didn’t match the slider’s “Grid Width” and “Grid Height”. For this example, we’ll use a “Grid Width” and “Grid Height” of 900×300, and an image size of 600×300.

      Original Image:

      Background Fit = Cover: (when original image size doesn’t match the slider’s Grid Width and Grid Height)

      Background Fit = Contain: (when original image size doesn’t match the slider’s Grid Width and Grid Height)

       

    • Background Repeat: Useful when using a pattern based background image (10x10px png, etc.), that’s meant to repeat.

       

    • Background Position: 9 position points available. Useful for controlling how your image is positioned inside the slide. “Left Top” and “Center Center” are usually the best options.

      Let’s take a look at some examples of background position combined with the “Background Fit” options above:

      Background Fit = Cover, Background Position = “Left Bottom”

      Background Fit = Contain, Background Position = “Right Top”

     

  3. Ken Burns / Pan Zoom Settings Once the slide animates into view, you can use this setting to create the effect shown in the demo here.

     

    Special Notes:

    • For a traditional Ken Burns Effect, using “Linear.easeNone” for the “Easing” setting is the best option.
    • If you want the transition to last the entire duration of the slide’s appearance on the screen, set the “Duration” to match the slide’s delay value.

     

    1. Start Position: The starting point of the “pan” transition.
    2. End Position: The ending point of the “pan” transition (image will move from the “Start Position” point to the “End Position” point.
    3. Start Fit: The amount the image will scale to when before the transition begins.
    4. End Fit: The ending scale percentage of the image (image will scale from the “Start Fit” percentage to the “End Fit” percentage).
    5. Easing: The transition “easing” type (usually “Linear.easeNone” is best)
    6. Duration: The total duration of the transition (a number between 1000-10000 is usually best).