Revolution Slider 5.1.4

1. Create a new Slider

1.1 From the plugin's main admin page, select "Create New Slider".

1.2 Enter a Slider Title (1) and Alias (2), and click "Save".

Quick Note: Before saving, you can select several of the slider's settings from this page. But choosing these settings are not required to officially create a new slider, as they can be adjusted afterward.4

Alias Naming: The slider's "Title" can be anything, but the "Alias" should not have any special characters or spaces (but dashes and underscores are ok).

1.3 You'll now be redirected to the plugin's main admin page where you'll see your new slider listed.

2. Start with a Demo Slider

There are two types of demos that can be imported. The first are those included with the plugin by default, and the second are those that may be included with your purchased theme. When choosing “Add Slider Template”, you will be shown the “Template Library”, which will include a large array of free templates for you to choose from, and also where the Premium Sliders can be found.

2.1 Add Slider Template

Choose "Add Slider Template", the view the Template Library.

1. Category Filters: Narrow your template search to a specific category.
2. Update Library: Check to see if new templates are available.
3. New/Updated: View the latest templates.
4. Scrollbar: Scroll the template list window to view templates below the fold.
5. Preview Button: View the template’s live demo.
6. Installed: Signals that the template has already been downloaded.
7. Not Installed: Signals that the template has yet to be downloaded.

Click the "+" icon to view the template's details and install the template.

Quick Note: If the template has not been downloaded yet, #5 and #6 would just be replaced with a button titled "Install Slider".

1. Template Overview: Basic information about the template.
2. Setup Notes: Important information about using the slider.
3. Requirements: Information about the minimum plugin version and Add-Ons needed to install the the template.
4. Installed/Available Version: Information about what current version of the template is installed, and its latest available version.
5. Re-install Slider: Useful for when templates are updated, and also for cases when template content has been deleted by accident.
6. Add Slider: Install the template.

After choosing your template, choose how you wish to import it. “Online” will import the template automatically from the ThemePunch servers, but you can also choose “Local” and import the slider from one of the demo zips included with the plugin’s original source. For the example below, we’ll continue with the “Local” option

Quick Note: "Premium Templates" are only available as "Online" imports.

To complete the “Local” import, from the plugin’s original source folder, you’ll find a folder named “example-zips”. Click the “browse” button (#1), and locate the zip file listed in the green box from your computer (i.e. “exwebproduct.zip”). Then click “Import Template Slider” (#2).

You'll then see the template slider listed in the plugin's main admin page.

2.2 Import Slider

Use this option to import a demo that was possibly included with your purchased theme.

Special Note: Unless otherwise instructed by your theme author, use the default "Custom Animation" and "Default Styles" selections.

3. Slider Management

1. General Options
   1. Embed Slider - View options for how the slider can be added to one of your pages.
   2. Export - Create a zip file of your slider that can be imported to a different website.
   3. Delete - Delete the slider.
   4. Duplicate - Create a copy of the current slider.
   5. Preview - View a quick preview of the slider from inside the slider's admin.
2. Slider Settings - Content Source, Layout Options, etc.
3. Create/Edit Slides - Individual slide management.

Content Sources

1. Default Slider

Default Slider Post Based Slider / Specific Posts Social & Video Streams / WooCommerce A slider that usually contains images from your WP Media library, where slides are created and managed individually.

2 Social & Video Streams

Full tutorial for setting up a Special Content Source slider such as Instagram, Facebook, YouTube, WooCommerce and more:

https://www.themepunch.com/revslider-doc/special-content-sources/

Important Article Note! Since the setup for each of these special content sources is all very similar, in the beginning of this article, we'll walk through a single, general example, and then toward the end, discuss the different specific settings for each source.

2.1 Select a Source

2.2 Fill out the Source's Settings

Most of the special sources require some type of ID / additional data. Use the linked resources (circles in red in example below) to learn how you can retrieve this special information.

2.3 Select "Stream Image" or "Stream Video", depending on your special source.

Quick Note: A "slide" for a "special content source slider" is a template that will be used for how the content will be displayed. Only one template is required, meaning only one "slide" needs to be setup

2.4 Add some Text/HTML Layers to pull in special content

Then click the "Edit Meta" icon for the layer, and choose one of the listed options that can be pulled in for the special content source.

Next, style the layer as you would a regular text field, and then save the current slide.

Specific settings for each content source Refer to sections #1-2 above for where these settings can be found

1. Slides (max 500) - Choose the number of items to pull in from your content source.
2. Cache (sec) - A cache of 1200 (20 minutes) would allow your pages to load faster, as the Instagram API would only be called for your site every 20 minutes.
3. Flickr API Key - Click here to learn how you can get your API Key
4. Source - Choose the Flickr Source:
   1. User Public Photos - Requires Flickr User URL
   2. User Photoset - Requires Flickr User URL + Photoset Selection
   3. Gallery - Requires Flickr Gallery URL
   4. Group Photos - Requires Flickr Group URL

Slider Title & Hook

Slider type

Standard Slider

The famous, traditional Slider Revolution.

Hero scene

Essentially a “one slide” Slider. When selected, multi-slide options such as navigation, autoplay, etc. will be hidden from the slider’s main settings automatically.

Will your slider end up having more than one slide? Choose "Standard Slider" instead for your official Slider Type.

Carousel Slider

When selected, a new Carousel Settings section will become visible where you can setup a wide variety of carousel views.

Preset Settings

Load a settings preset template for your current slider, or save the slider’s currently selected settings as a preset template to be used for future sliders.

Slider Layout

Auto

The default “responsive” layout. The slider will always inherit the width of its immediate HTML container, allowing it to fit seamlessly inside your theme’s page layout.

Full width

Slider will always stretch across the entire width of the screen.

Full Screen

Slider will always become the same size as the entire screen size.

Layers Grid Size

Desktop Large The default Canvas Size for your slider's content.

Custom Grid Sizes

Use Custom Grid Sizes to enable CSS Media Queries for your slider’s content. Highly useful for setting up your content to look great on mobile devices.

In order to enable the ability to design content for multiple screen sizes, you first need to set the “Custom Grid Size” to “On” as shown in the screenshot above. Then once you’ve activated at least one “Custom Grid Size”, when you edit a slide, you can set different styles (such as varying font-sizes) for each enabled “Custom Grid Size”.

Advanced Layout Options

Auto/Full-Width Options

1. Overflow Hidden - Useful for Carousel sliders. Otherwise, if you have any content that's placed outside the main slider, leave this "Off".
2. Respect Aspect Ratio - The "Layers Grid" height essentially acts as the "max-height" for the slider. But setting the "Respect Aspect Ratio" option to "On" will allow the slider's height to expand beyond this value (effectively disabling a "max-height" for the slider).
3. Min. Height - Sometimes a slider can be quite wide with a short height. But then when the slider is resized down, the short height may become too short. In these cases, applying a "min-height" value will ensure that the slider never becomes too short when its resized down.
4. Max. Width - Useful for restricting the slider's width. For example, if the slider's width is covering the entire width of the screen, but you want the slider's width to match your theme's boxed container instead, you could enter a number such as "960" here, and then then slider's width would never advance past 960px wide.

Full-Screen Options

1. Min. Height - Apply a minimum height in pixels to your FullScreen slider, ensuring that the slider's height is never smaller than this number.
2. Disable Force Full Width - Useful for sites with a main menu placed at the left or right side of the page.
3. Containers - Useful for placing a "FullScreen" slider in between your page's header menu and footer (see note in screenshot for common examples).
4. PX or % - Reduce the slider's height by a specific amount of pixels or percentage.

Settings Previews

Important Note about Slider Settings: Depending on your Slider Type, not all settings will be applicable for your slider. For example, the Carousel Settings will only be shown when your "Slider Type" is set to "Carousel", and Navigation Settings will not be shown for a "Hero Scene" slider.

When adjusting your slider’s settings, a small preview box will be shown to illustrate each setting. This is particularly useful for settings such as “Appearance”, “Navigation”, etc., as it will give you a quick visual of the specific setting. In the following screenshot, “Shadow Type 1” is illustrated in the hover preview box.

General Settings

1. Slideshow
2. Defaults
3. Progress Bar
4. 1st Slide
5. Misc.

1 Slideshow

Stop Slide on Hover

Stop slider progress when the user hovers their mouse over the slider.

Stop Slider After.

• Amount of Loops:

  Stop the slider after all slides have looped a set amount of times.

At Slide:

• Stop the slider at a specific slide. On Mobile Only

Shuffle / Random Mode

Stop slider progress when use hovers their mouse over the slider.

Loop Single Slide

Choose to loop your slider if it has only one slide (“Standard Slider” much be chosen as the Slider Type).

Stop Slider out of Viewport

Stop slider when the page is scrolled and the slider is no longer visible.

Out of Viewport:

• Wait:Only start the slider when its scrolled into view (useful for sliders further down the page).

• Pause:Pause the slider when its scrolled out of view.

Area out of Viewport:

A percentage of the slider that needs to be inside/outside the viewport before slider starts or pauses.

Wait for revapi1.revstart()

If you’re a developer who’s using the slider’s API, this option can be used to only start the slider when this API method is explicitly called. Click here to view a code example of how this option can be used. general-settings-slideshow

2. Defaults

Set the default individual slide settings. For example, let’s say you always want your individual slides to start off with a “Slide to Top” transition. Adjusting the “Transitions” value will set it up so all new slides have have a “Slide to Top” transition by default. Or if you already have individual slides created, you can change the value of “Transitions” and then select its checkbox, and then click the “Overwrite Selected Settings on all Slides” button, and the main transition for all existing slides will be changed to the new default value.

3. Progress Bar

The timer line that illustrates the amount of time before the next slide is shown. If active, choose the progress bar’s position (top or bottom of slider), its height in pixels, and also its color and transparency level.

4. First Slide

Alternative 1st Slide Normally the slider will always start with slide #1. But if you’d like your slider to start with a different slide, enter the slide’s number here. First Transition Active Sometimes when your slider first starts, it’s more elegant to have a different transition such as a simple fade at the very beginning. Use this option if you’d like to specify a special, initial transition for the very first slide. When set, the special transition will only be executed on the very first slide once. Then once the slider loops, the original slide will default back to its individual slide transition settings.

5. Misc.

Next Slide on Focus & Disable Blur/Focus Behavior Browser behaviour varies when switching between windows/tabs (JavaScript stops executing, etc.). But these options will often correct slider issues related to switching between tabs and windows.

Layout & Visual

1. Appearance

Shadow Type

Shadows will be shown beneath the slider. Choose between 6 different styles, or choose “No Shadow” (the default option). And preview the Shadow Type as shown in the Primer section above.

Dotted Overlay Size

Dotted overlays are transparent grid-like graphics that will be placed above the slides, giving the slider a “mesh” type look (4 styles available). Preview the options as shown in the Primer section above.

Slider Background

The slider’s main background. Normally if your individual slides have their own background images, the slider’s main background would only be visible when the slider first loads, and before the first slide displays. But setting a background here for the slider itself is particularly useful for when you’re using “Transparent” slides (slides with no background image). Choose a solid color or set an image as the background. Apply some padding to give your slider a border. And set specific background image options such as Background Fit, Background Repeat, and Background Position.

2. Spinner

The slider's animated preloader graphic.

The spinner will be shown when the slider first loads, and also for additional slides if LazyLoad is being used. Choose between 6 different spinner styles, or choose “Off” for no spinner.

3. Mobile

Disable Slider on Mobile

Choose to disable the entire slider on mobile devices. If disabled, you can replace the slider with a simple fallback image.

Disable Ken Burn on Mobile

The Ken Burns effect is an advanced animation that looks great on desktop computers, but for mobile devices, providing a more simple slider can sometimes be a better user-experience. Depending on your preference, toggle the KenBurns effect on and off for mobile with this setting.

Hide Element Under Width

Choose to hide the entire slider, individual layers, or all layers when the screen size is below a specific pixel width (i.e. 640px, etc.). Hiding layers is useful for when lots of content displays nicely on desktop, but there isn’t really enough real estate (screen space) to fit everything on mobile. “Predefined Layers” are specific layers you’ve designed to “hide” under the pixel width set here for this setting.

4. Position

Position on the page

The default alignment for the slider. Options are “left”, “center” or “right”.

Margin Top, Margin Bottom

Add some space above or below the slider in relation to other content on the page. Both positive and negative numbers supported.

Navigation

Quick Tip: Check out this screeencast to learn advanced techniques for editing navigation styles.

1. Common Options: Visibility & Position

Arrows, Bullets, Tabs and Thumbs all have similar “Visibility” and “Position” options, which will be described here in the “Common Options” section for brevity.

1.1 Visibility

Always Show

Yes = Show navigation element at all times

No = Only show navigation element on mouse hover

Hide Under Width

Disable navigation element below a certain screen width. For example, thumbnails look great on desktop, but are often better hidden on smaller screens.

Hide After on Mobile

The amount of time in milliseconds before the navigation fades out of view after a “tap” occurs on mobile devices.

Hide Over Width

Disable navigation element above a certain screen width.

Practical application of "Hide Under Width" and "Hide Over Width" combined:

Combining these two options is particularly useful for switching between two different navigation types depending on the screen size:

Tabs -> Hide Below Width -> 850px

Bullets -> Hide Over Width -> 850px

RESULT: Tabs will be shown above 850px screen size (desktop)

Bullets will be shown below 850px screen size (mobile)

1.2 Position

Horizontal Align / Horizontal Offset

Horizontal Align: Align navigation to the left, right or center of the slider.

Horizontal Offset: Apply a left/right margin to the navigation in relation to its horizontal alignment (positive and negative numbers supported).

Vertical Align / Vertical Offset

Vertical Align: Align navigation to the top, bottom or middle of the slider.

Vertical Offset: Apply a top/bottom margin to the navigation in relation to its vertical alignment (positive and negative numbers supported).

Aligned by

Choose whether the navigation elements should align themselves based on the entire slider’s area, or if it should always be confined to the “Layers Grid” (works the same way as the Layer Responsive Behavior option).

2. Common Options: Custom Navigation Styles

Select #1 to open the custom styles panel.

Then choose the colors and styles you’d like to use for your slider’s navigation (#2)

Then save your favorite set of colors for your selected Navigation Style as a “Preset” (3a), and then reuse your favorite styles for your next slider (3b).

3. Arrows

Enable Arrows / Arrow Style

Choose to enable/disable navigation arrows, and if enabled, choose between 15 different pre-built styles.

RTL Direction

Change direction of Arrow functionality for RTL Support.

Visibility, Left/Right Arrow Position

See Common Navigation Options above.

4. Bullets

Enable Bullets / Bullet Style

Choose to enable/disable navigation arrows, and if enabled, choose between 15 different pre-built styles.

RTL Direction

Change direction of Bullets functionality for RTL Support.

Space / Direction

Set the spacing between the bullets in pixels, and choose if the bullets should be displayed horizontally (bullets displayed side by side) or vertically (bullets placed on top of one another) .

Visibility, Position

See Common Navigation Options above.

5. Tabs / Thumbs

Quick Note: Tabs and Thumbs share the same exact options, and are combined here in this section for brevity.

RTL Direction

Change direction of tab/thumbnail functionality for RTL support.

Wrapping Container

Wrapper Padding:

Space between edge of slider and edge of thumbs/tabs container.

Span Wrapper:

ON: thumbs/tabs will always be stretched across the full size of the slider.

OFF: thumbs/tabs will be stretched to the slider’s Layers Grid.

Wrapper Color / Opacity

Adjust the color and opacity of the tab/thumbs section. Will only be visible if either “Space” or “Wrapper Padding” exists.

Style, Visible Amount, Space & Direction

Style:

Choose between 7 different pre-built styles.

Visible Amount:

The amount of thumbs or tabs that will be visibly shown. For example, if you have 7 slides, but only want 3 thumbnails to be displayed, technically the thumb strip will still contain 7 items, but only 3 thumbs will be visible at any given time, and the additional thumbs will only be shown on mouse-movement.

Space / Direction

Set the spacing between the tabs/thumbs in pixels, and choose if the they should be displayed horizontally (side by side) or vertically (placed on top of one another) .

Width, Height, Min.

Width Set the tab/thumb width and height. The width will act as a “Max Width”, and the “Height” will resize proportionally. For example, let’s say the slider itself was resized down by 50% for mobile. If the thumb width/height were set to 100×50, the thumb size would also be resized down by 50%, and the new thumb width/height would be 50×25. However, this is where the “Min Width” value is useful. For example, let’s say the thumb width/height were set to 100×50. If the “Min Width” were also set to “100px”, the thumbnails would never resize down.

Visibility, Position

See Common Navigation Options above.

6. Touch

Touch Enabled

Choose to enable/disable touch navigation for mobile. If enabled, swiping the slider left or right with your finger will change slides back and forth.

Drag Block Vertical

Allow for the page to be scrolled vertically when “touch” is enabled. For example, when “ON” is applied, “swiping” the slider in a vertical direction will also scroll the page itself. But when set to “OFF”, the page itself will not be scrolled when swiping the slider in a vertical direction.

Swipe Threshold, Min. Finger

Threshold

The swipe action sensitivity. A smaller number would mean that only a short “swipe” is needed for the slide to change. A larger number would mean that a more elaborate “swipe” would need to take place for the slide to change.

Min. Finger

The number of fingers needed for a “swipe” action to be registered. “1” finger is usually best, as that’s what most users are used to, but depending on your site you can require that users use two fingers to “swipe”, etc.

Swipe Direction

Horizontal:

Traditional left-to-right touch-swipe navigation.

Vertical:

Useful for when your slide animations are set to “Slide Vertical (Next/Previous)”. In this case, swiping up or down would change the slides.

7. Misc.

Keyboard Navigation

Choose to enable arrow keys to navigate between slides.

Key Direction

Vertical:

Up and down keys will act as “next / previous” controls for the slider.

Horizontal:

Left and right keys will act as “next / previous” controls for the slider.

Mouse Scroll Navigation

On/Off:

Capture mouse-wheel movement to change between slides.

Carousel:

Allow for “infinite MouseWheel scroll” for Carousel-based sliders.

Reverse Mouse Scroll

Reverse the direction that the slides change when the mouse-wheel is used.

Parallax

Paralax

Enable Parallax / Disable on Mobile

Choose to enable the parallax effect for the slider, and if enabled, choose to disable the effect for mobile only (since parallax is based on mouse movement and page scrolling, parallax usually works best on desktop computers).

Mouse Sensibility

Parallax Origin:

“Mouse Enter Point” – Parallax is based on where the mouse first entered the slider. “Slider Center” – Parallax is always based on the very center point of the slider (usually the best option).

Event:

Choose “Mouse Move”, “Scroll Position” (page scrolling) or “Move & Scroll” (first two combined).

Animation Speed:

The transition duration for the content’s movement. Use a lower number such as “750” for fast movement, and a higher number such as “2000” for smoother motion.

Parallax Levels

Each individual layer can be assigned a “Parallax Level”. And you can define up to ten different “levels”. Applying different levels to different slide layers is what gives the content its “depth” in relation to other parallax layers. In this example, you’ll notice that some content layers have less movement than others. This is because the different layers have different “Parallax Levels” assigned. When choosing your parallax level values, a smaller number would mean less movement, and a higher number would allow for a larger amount of movement.

2. [3D]

Converts a Parallax effect from a traditional 2D view into a 3-dimensional world

3D Settings

3D Shadow:

Adds a CSS3 box-shadow to the elements to enhance the 3D visual.

3D Background Disabled:

Choose to disable the 3D behavior for the slide’s main background image. Then the 3D effect will only be applied to the Slider’s Content Layers.

Slider Overflow Hidden:

Prevents the slider’s content from protruding past the slider’s normal boundaries.

Layers Overflow Hidden:

Prevents the slider’s Layer Content from protruding past the slider’s normal boundaries.

3D Crop Fix:

Helps to prevent Safari-specific 3D issues by separating content along the z-axis plane.

Mouse Sensibility

Animation Speed:

The transition duration for the content’s movement. Use a lower number such as “750” for fast movement, and a higher number such as “2000” for smoother motion.

3D Depth Levels

The strength of the 3D rotation on the background and layer groups in relation to mouse movement. The higher the value, the more movement. In a 3D environment, applying different depth levels to different Layers is what brings the 3D world to life. In this example, each content layer has a slightly different depth applied.

Perfomance & SEO Optimization

1. Lazy Load

All:

Load all images in the slider after the page initially loads, ensuring no delays between slide content when switching between slides. Best for sliders with advanced navigation such as thumbnails, bullets and tabs.

Smart:

Load images from the very first slide after the page initially loads, and also preload images from neighboring slides. For example, when the slider first loads, the 2nd slide will be preloaded in anticipation of the slider changing. And then once the 2nd slide is viewed, the 3rd slide would then be preloaded, and so on. A great option for sliders that only contain basic navigation, where progression is always “next” or “previous”.

Single:

Always load slide content “on demand”. Meaning only the first slide will be initially loaded, and subsequent slides will only be loaded when it’s their turn to be shown in the slider. No Lazy Loading: All content will be loaded when the page first loads. Often ok for sliders with minimal content. Not recommended for sliders with lots of slides and/or content.

2. Performance

The green bar shown in the screenshot to the right is a general evaluation based on your LazyLoad choice, and the average image sizes you’re using in the slider. Toggle between the LazyLoad options to see the estimated Load Speed between common internet speeds such as DSL, Cable (T1), etc.

Show Full Statistics:

View a detailed listing of Image Performance, Google Fonts, etc.

Show All Issues:

View items that could be slowing down your slider. In the example screenshot to the right, the background image being used for the first slide is 1.7mb, which is much larger than it should be for web. Reducing the file size for this image in Photoshop (using the Save for Web option) to a more reasonable size such as 300kb or lower will dramatically improve the slider’s performance.

Problem Handlings

1. Fallbacks

For compatibility with older mobile devices and legacy IE, you can choose to simplify the slider’s functionality or replace it with an alternative image.

Simplify on iOS4/IE8

Animations will be set to simple “fade” for older iOS and IE, which will will dramatically improve performance for these environments.

Use Alternative Image

Choose to use an alternative image in place of the slider for mobile devices, IE8, or both. When an alternative image is used, enter the image’s absolute url into the “Alternative Image” field.

Ignore Height Changes *

Often useful for fullscreen sliders on mobile devices to help prevent image size changes when the native browser address bar appears and disappears.

*Option will only appear for FullScreen sliders only

Ignore Height Changes Under *

The same as the option above, except here you can define a specific height where browser height changes would start to be ignored (640px, etc.)

* Option will only appear for FullScreen sliders only

2. Troubleshooting

Use the troubleshooting options to solve common conflicts with other plugins and themes.

jQuery No Conflict Mode

Using jQuery noConflict is considered best practice, and Slider Revolution uses this by default. But sometimes another theme or plugin may not be built using this best practice, which can often cause a conflict. In these cases, setting this option to “OFF” can sometimes resolve this issue.

Put JS Includes to Body

Often solves conflicts with “minify” plugins and also certain themes that don’t call “wp_head()” properly.

Output Filters Protection

Sometimes a theme runs special filters over the page’s content (against WP best practices), which results in breaking the slider’s HTML markup (if you view the slider’s HTML source in your browser, you’ll often find “

” tags injected throughout the slider’s markup). The “Output Filters Protection” option will attempt to combat this conflict. “By Echo Output” will often place the slider above all other content on the page, which is fine for sliders that are originally placed above the other page’s content to begin with, but when the slider is meant to be shown below other page content, “By Compressing Output” is best.

Debug Mode

Adds visual debug information when testing the frontend version of the slider.

Import/Export/Replace

1. Import

Overwrite current slider settings and slides with those from the imported slider zip.

Browse

Select the slider import zip from your computer.

Custom Animations / Static Styles

Overwrite:

Overwrite previous styles and animations with those from the imported slider.

Append:

Preserve previous styles and custom animations (usually the best option).

2. Export

Export the current slider, creates a “zip” file that can be saved to your computer for later usage (i.e. “imported” to a different website).

3. Replace URL

Image URL’s in your sliders are stored as absolute urls, so if you’re moving your site from one domain to another (such as localhost to a live site), this tool can be used to update urls for the slider’s images with the new site’s domain name.

Replace From:

The base url from the old site’s domain.

Replace To:

The base url of the new site’s domain.

API Functions

Extend the slider’s functionality with API methods and events. Extend the slider’s functionality with API methods and events. All of the available methods and events are listed in this section of the slider’s settings, and can be copied and pasted directly from this section into the slider’s Custom JavaScript section. Each slider will have its own unique API variable which is based on the slider’s ID. In the screenshot to the right, the API variable is “revapi5”, but this will vary depending on your particular slider.

Hover your mouse over each code sample for brief explanations of each method or event.

The following is a quick sample of using the slider’s API, where we’ll pause the slider when the second to last slide is shown.

// listen for when the slider initially loads
 
 
revapi5.bind('revolution.slide.onloaded', function() {
 
 
console.log('Slider Loaded');
 
 
// get number of total slides in slider
 
 
var totalSlides = revapi5.revmaxslide();
 
 
// listen for when a new slide is shown
 
 
revapi5.bind('revolution.slide.onchange', function(e, data) {
 
 
// get current slide number
 
 
var currentSlide = data.slideIndex;
 
 
// pause slider at the second to last slide
 
 
if(currentSlide === totalSlides - 1) {
 
 
console.log('Slider Paused');
 
 
revapi5.revpause();
 
 
}
 
 
});
 
 
});

Google fonts

Google Fonts get automatically loaded once the font has been officially applied to a Content Layer.

To apply a Google Font to a Layer, first edit a content Layers for one of your slides:

http://www.themepunch.com/revslider-doc/slide-layers/#addnewlayer

http://www.themepunch.com/revslider-doc/slide-layers/#layercontrols

Then select a Google Font from the Style Editor:

Then after selecting any Google Font, it will show up at the top of the fonts-list drop-down for easy future access.

And then from the slider’s main settings page, the new Google Fonts section is just a reflection of what’s currently assigned to any of the slide’s Text Layers. Select a slide from the “Used in Slide” dropdown to be take to the slide editor where the font is being used. And choose to load the “Latin” charset or not for the font.

Carousel settings

Any slider can be displayed as a super-flexible carousel. To see an example, just choose “Carousel” for your slider’s Slider Type. Once the “Slider Type” is set to “Carousel”, the “Carousel Settings” will appear beneath the “Navigation” section.

Quick Tip: Use Carousel Preset Templates to setup the perfect carousel for your website.

1. Basics

Infinity Scroll

OFF:

Carousel will have a “beginning” and an “end”. Meaning when the end is reached, the slider will not automatically loop, and the only way to view previous slides would be to navigate backwards.

ON:

The carousel will loop infinitely. Meaning when the last slide is reached, the next slide shown be be a copy of the very first slide, and so on, allowing you to click forward endlessly.

Space Between Slides

In a carousel format, normally items are shown as “blocks” that have spaces between them. This spacing is optional, but if you want to display a traditional carousel look, add some spacing here.

Border Radius

Add rounded corners to your carousel items by applying a pixel value here. Or to achieve perfect circles, add a “50%” border-radius.

Padding Top / Padding Bottom

Add some padding to the top and bottom of the carousel items, creating some extra space for the items in relation to the rest of the page’s content.

Max Visible Items

Represents the number of items that will be visible. For example, using the number “3”, the selected slide will be centered in the carousel, and then there will be 1 carousel item to the right (representing the “next” slide), and 1 carousel item to the left (representing the “previous” slide).

Stretch Element

The selected carousel item will be stretched to cover the entire size of the slider. When this option is used, “previous” and “next” carousel items will not be visible, regardless of the “Max Visible Items” value.

2. Transformations

Special Note: A brief explanation of Varying Fade, Varying Rotation and Varying Scale

When a “varying” option is enabled, it means that the calculation will be based on the position of the item in relation to the currently selected item. For example, let’s say you have a carousel with 5 visible items, and a “Varying Scale” of “50%”. When you cycle through the carousel items, the 5th item on the right will be scaled to 50%. Then when the 5th item becomes the 4th visible item, it will be scaled to 75%. And then when it finally reaches the center of the carousel, it will be scaled to 100%. But when no varying option is used, with the same carousel (5 visible items), the 5th item will have a 50% scale. And then when it becomes the 4th visible item, it will still have a 50% scale. And then when it finally reaches the center of the carousel, only then will it scale from 50% to 100%.

Fade All Elements

All previous and next carousel items will be semi-transparent.

Varying Fade – See Special Note above.

OFF:

Fading will only occur for immediate neighboring items.

ON:

Fading will occur throughout the visible cycle of the item.

Rotation

Apply a “skew” to items when the carousel progresses forward and back (this gives the effect of a window opening from the side). Degree values ranging from 45 to 180 usually work best.

Varying Rotation – See Special Note above.

OFF:

Rotation will only occur for immediate neighboring items.

ON:

Rotation will occur throughout the visible cycle of the item.

Scale

Scale previous and next slides down based on a percentage.

Max Scaledown

The percentage to scale previous and next items down. For example, 50% would means that previous and next slides would be resized to half the size of the selected carousel item.

Varying Scale – See Special Note above

OFF:

Scaling will only occur for immediate neighboring items.

ON:

Scaling will occur throughout the visible cycle of the item.

3. Aligns

Choose a vertical and horizontal alignment for the carousel’s main item. For example, if the alignment is set to “right center”, when the the main selected item comes into focus, it will be aligned to the very right of the slider’s layout.

Sliders list

Once you’ve created a slider, click the “Edit Slides” button shown in the screenshot below to started creating and editing individual slides.

You’ll then be taken to a page where the slides are listed at the top of the screen, and the first slide is automatically selected and ready to be edited.

Note #1 In previous versions of the plugin, the first slide needed to be created manually. With 5.0+, the first slide is automatically created by default.

Static / Global Layers

A special editor where you can add global content for the slider. This content is slide independent, and will simply be placed on top of your other slides.

Static Layer Options

Choose the CSS overflow value for the Static Layers slide, and also choose what slide each individual Layer should start and end on.

Manage Current Slideback to top

3.1 Activate or deactivate the slide

If a slide has an “inactive” status, the slide will still exist in the admin, and can still be edited, but will not be shown in the actual slider on the front-end of your site.

3.2 Additional Slide Options

1. Duplicate - Create a copy of the current slide.

2. Add to Templates - Save the current slide's content and settings as a "Slide Template" for future slides.

3. Delete - Delete the current slide.

3.3 Customize Slide Order

When two or more slides exist, change the slide order by moving the slide horizontally with your mouse

And now the slide is now positioned as the second slide in the slider’s rotation order.

Create a New Slide

To create a new slide, hover your mouse over the “Add Slide” box:

Then choose one of the options listed below:

4.1 Add Blank Slide

Create a new slide with default settings.

4.2 Add Bulk Slides

Create multiple slides at once, based on a selection of media gallery images of your choice.

And a new slide will be created for each image you’ve chosen, with the selected image set as the slide’s main background image.

Overview

Main background

Regular image

1. Set/Change Image

Click the “Change Image” button to select an image you’ve already uploaded, or to upload a new image for the slide.

2. Source Settings

1. Source Info

The absolute url to the selected image (read-only).

2. Image Source Size

When you upload an image to a WordPress site, WP will automatically create multiple size versions of the image that can be used. And for your slide’s main background image, you can choose which of these versions you’d like to use. Common options are “Original Size”, “Medium” and “Large”. A reasonably sized main background image for web is around 1600×900 pixels. If your original images are larger than this, you can choose “Large” or “Medium” here, and this will help to improve page loading performance.

3. Alt Text (the SEO title for the image)

From Media Library:

Value is taken from “WP Menu -> Media -> Library -> Select Image -> Alt Text”.

From Filename:

Alt text will be the same as the name of the file (i.e. “my-image.jpg”).

Custom:

Enter your own custom text to be used as the image’s Alt Text.

4. Title (useful for certain lightbox information)

From Media Library:

Value is taken from “WP Menu -> Media -> Library -> Select Image -> Title”.

From Filename:

Title attribute will be the same as the name of the file (i.e. “my-image.jpg”).

Custom:

Enter your own custom text to be used as the image’s Title attribute.

5. Background Fit

Cover:

The most common option. This will ensure that your image will always fill the entire size of the slider (cropping may occur depending on the size ratio of the image in relation to the slider’s layout).

Contain:

Always fit the entire image inside the slider’s boundaries. Image cropping will never occur, but you may end up with blank space on the sides of the image (similar to a letterbox movie on an older television screen).

Ideal Image Size Curious about what the best size is for your images? Click here for some information about this topic.

6-7. Background Position / Background Repeat

Click here for information about “Background Position”.

Click here for information about “Background Repeat”.

3. Parallax

Parallax Level

To use this option, first make sure “Enable Parallax” is set to “ON” in the slider’s main parallax settings. Adding a parallax level here will apply some movement to the main background based on mouse-move, scrolling, or both. Check out the “Parallax Levels” part of the link above for help with choosing a “level” if you wish to use this option.

4. Ken Burns effect

An elegant pan/zoom that will move and scale the main background image slowly after the slide comes into view.

Scale

From:

The starting scale percentage of the image

To:

The ending scale percentage of the image

If you want your image to “zoom in”, set the “From” value to “100” and the “To” value to something larger than 100 (such as 150, which means the image would scale up by 50%). If you want your image to “zoom out”, set the “From” value to something larger than 100, and then the “To” value to “100”.

Horizontal / Vertical Offsets

These offset values are in relation to your main background image’s Background Position value (see section B above). For example, if your Background Position is “center center”, entering a Horizontal Offset of “100” would mean 100px to the right of the very center, which would then serve as the starting position of the Ken Burns effect. And a Horizontal Offset of “-100” would be 100px to the left of center.

Important Note

The main background image's "Background Position" (see section B above) plays an important role when setting up your Ken Burns effect. For an example, set your "Scale To" value to "200", and your "Scale From" value to "100". Then set the image's "Background Position" to "center center" and preview the slide. Then go back and change the "Background Position" to "top left", and this will give you a good idea of how the main image's "Background Position" impacts the Ken Burns animation.

Rotation

Apply a starting and ending rotation for the effect. Smaller degrees such as 10-20 work best.

Easing

“Easing” is what gives a web animation that “real life” type of movement. For a traditional Ken Burns effect, “Linear.easeNone” is usually the best choice. But you can test the other options to see which one you like best.

Duration

The total time the Ken Burns effect will last, in milliseconds (1000 = 1 second). It’s usually best to set this to the same number used for the slide’s delay value (“Edit Slide -> General Settings -> Slide Delay”).

General Settings

1. Slide "Delay"

Override the Default Slide Duration for this one individual slide. This number also represents the duration of the slide’s layer animation timeline.

2. Pause Slider

Choose to pause the slider’s progress when the slide is reached. Similar to the Stop Slider After -> At Slide option, but added as an individual slide option for the possibility to apply the option to more than one slide.

3. Slide in Navigation (invisible) This option allows for “wildcard” slides, which is essentially a slide that wouldn’t be in the slider’s normal rotation. A “wildcard” slide can be shown by adding an Action to a Layer Element.

4. Slide State

Similarly to a traditional WordPress post, choose whether or not the individual slide should be officially “Published” or not. If “Unpublished”, the slide will still exist in the backend, but will be excluded when the slider is shown on the frontend of your site.

5. Hide Slide After Loop

Choose if the slide should be hidden after a certain amount of loops. For example, the slide could be shown initially, and then once the slider has looped through all the slides, the slide could be hidden on the second time around.

6. Hide Slide On Mobile

Choose if the slide should be hidden on mobile devices. This option could be used to “minify” your sliders on mobile devices (where 5 slides is probably a more effective presentation for mobile than 10, etc.).

7-8. Visible From / Visible Until

Normally the slide will always be visible by default. But you can choose specific dates to enable/disable the slide. Clicking one these fields will show a calendar popup where you can choose a date for each option.

Slide thumbnail

Set a thumbnail for the slide if your slider has thumbnail navigation, or just set a thumbnail to be used for the slide’s admin preview.

Thumbnail Dimensions

Choose From Slider Settings (recommended setting), or “Original Size”.

Thumbnail Admin Purpose

Set this to “On” to use the thumbnail as the slide’s admin preview. Or if set to “Off”, the slide’s admin preview thumb will be taken form the slide’s main background image.

Slide Animation

To preview an animation, first select a category (1). Then hover your mouse over one of the choices (2), and a small live preview of the animation will appear. Once you find an animation you’d like to use for the slide, select its checkbox (2), and then it will appear in the “Used Transitions” list (3). If you wish, you can select multiple animations for the current slide, and the slide will alternate between the selected animations in order each time the slide is shown within the slider.

When multiple animations have been chosen, select one from the list to adjust its individual settings. To remove the selected animation, click the “x” icon. And drag the arrow icons with your mouse to position the selections on top of one another, which will change the order of the selected animations.

Animation Settings

The animation settings that will be applied to the selected animation (see screenshot above for example).

Quick Note The first two settings, "Slot / Box Amount" and "Slot Rotation" are only applicable to animations from the "Slots And Boxes", "Curtain" and "Premium Transitions" categories.

Slot / Box Amount

Represents the number of “pieces” the image is divided into for these animations. Applicable to animations from the “Slots And Boxes”, “Curtain” and “Premium Transitions” categories. Click the option field for a special menu to help make your selection. “Thumbs Up” is the recommended choice.

Slot Rotation

Applies a starting rotation to the slot-based animation. Applicable to animations from the “Slots And Boxes”, “Curtain” and “Premium Transitions” categories. Click the option field for a special menu to help make your selection. “Thumbs Up” is the recommended choice.

Animation Duration

How long the animation will last from start to finish in milliseconds (1000 = 1 second). An optimal number will depend on your chosen animation. For example, when using a simple “Fade”, a number between 300-500 is usually best, but for more complex animations (especially when using an “easeInOut” easing), a higher number such as 500-1000 will work well.

Easing In / Easing Out

Easing In:

The easing applied when the background animates into view.

Easing Out:

The easing applied when the background animates out of view (on slide change). “Easing” is what gives a web animation that “real life” type of movement. Choose between over 35 options to see which one you like best. The most commonly used options are “Power2.easeOut”, and “Power3.easeOut”.

Link & SEO

1. Custom Slide Attributes

For advanced usage, you can add a special class name (1), ID attribute (2), or additional attribute (3) to the HTML list element that represents the slide. For example, if you wanted to style hyperlinks for one slide differently from another, you could write some default CSS:

.. and then add a class name of “second-slide” in the “Link & SEO” section, which would allow you to adjust the default CSS above for an individual slide:

2. Slide Link

1. Enable Link

Options are “Enable” (add a link to the entire slide), and “Disable” (no master slide link).

2.1 Link Type: Regular

Slide Link

Add a url to one of your site’s pages or an external website.

Special Note Type in {{link}} as shown below to automatically link to original pages for special content sliders such as post-based sliders, Twitter, etc.

Link Target

Options are “Same Window” or “New Window” (i.e. new tab).

Link Sensibility

Front:

Slide’s hyperlink will be placed on top of the slide’s content layers (only a good option when additional content layers are not hyperlinked).

Back:

Slide’s hyperlink will be placed behind the slide’s content layers, allowing for additional hyperlinked content layers.

2.2 Link Type: To Slide

Link To Slide

Options are “Next Slide”, “Previous Slide” or a specific slide number. You can also choose “Scroll Below Slider”, which will scroll the page to additional content beneath the slider when the slide is clicked.

Link Sensibility

Front:

Slide’s hyperlink will be placed on top of the slide’s content layers (only a good option when additional content layers are not hyperlinked).

Back:

Slide’s hyperlink will be placed behind the slide’s content layers, allowing for additional hyperlinked content layers.

0

Slide info

Slide Info are special meta that can be used for certain navigation types. The following steps illustrate how the two are connected.

5.1 Enter a value for both "Parameter 1" and "Parameter 2".

5.2 Enable/Setup Navigation Tabs

From the slider’s settings, in the navigation section, enable “Tabs”, and select “Hermes” for the “Tab Style”, with a width and height of 200.

Layer Controls & WYSIWYG Editor

1. Add New Layer

Layer Selector & Controls

Toggle between layers for editing.

Quick Note Toggling "layer visibility" here is for the WYSIWYG editor only (i.e. does not apply to the front-end version of the slider).

2. Layer Editing & Controls

3. Slide/Layer Canvas

The layer’s WYSIWYG editor is a visual representation of the current slide.

• 1. Layers Grid Boundary
• 2. Screen/Device
• 3. Force Inherit Styles
• 4. Undo/Redo
• 5. Helper Grid Guide Lines
• 6. Snap to:

1. Layers Grid Boundary

The green dotted lines that represent the current Layers Grid size based on the current Screen/Device selection (2). See “Special Note” below for important layer positioning information.

2. Screen/Device

To use this option, you first have to enable a Custom Grid Size for additional screens/devices. Toggling between the different options here will allow you to style and position your Layer content based on the selected screen/device. For example, if you had a text-based layer, you could assign it a font-size of 64px, with a top-right position for desktop view. Then if you switch to the smartphone view, you could change the layer’s font-size to 32px, and give it a bottom-left position.

3. Force Inherit Styles

Choose to automatically inherit the parent Layers Grid styles. For example, once Custom Grid Sizes are activated (2), after adding a Layer and styling it, if the Layer’s color were changed afterward, it would only be applied to the currently selected device (2), and therefore would need to be adjusted for all 4 devices (2) (or however many Custom Grid Sizes are currently being used). But when “Force Inherit Styles” is activated, the activated styles (2.1) will only need to be changed once, and then all other Custom Grid Sizes will inherit the new change.

4. Undo/Redo

Every change made in the editor will get recorded in the “Undo/Redo” list, allowing you to easily revert (4.1) an undesired change.

5. Helper Grid Guide Lines

The solid green lines as shown in the screenshot above. These are optional pixel based guide lines that can help when positioning your layers on the canvas.

6. Snap to:

When dragging and dropping your Layers around the canvas, you can choose to snap the Layer’s position based on the Helper Grid Lines or in relation to other layers.

SPECIAL NOTE: Always Position your Layers inside the Layers Grid! Otherwise your layer content may bleed off the screen when the slider is resized.

Layer Positioned Inside the Layer's Grid (dotted green lines).

Incorrect Position! Layer Positioned OUTSIDE the Layer's Grid (dotted green lines). In this case, the layer may bleed off the screen (not be fully visible) when the slider is resized!

Text/HTML/Icons

Text/HTML

Basic Text

Type in some regular text to be used for the layer’s content.

HTML Markup

Enter raw HTML depending on your layer content needs.

ICONS

1. Click the blue grid to add an icon.

2. Then choose from over 350+ possible icons.

3. And then after making a selection, the icon's HTML will automatically be entered into the layer.

Image Layers

1. Add an Image Layer

2. Select or upload the image you wish to add

3. Position and Resize the Image on the stage

Audio Layers

1. Add an Audio Layer to the stage

2. Choose your Audio File

3. Select your Audio Settings

Loop: Always replay the song when it ends.

Autoplay: Play the song without any type of user-interaction needed (not applicable for mobile devices, most mobile devices do not allow for media autoplay).

Stop other Media: Pause all other video and audio in the current slide.

Next Slide on End: Automatically navigate to the next slide when the song ends.

Rewind at Slide Start: Always replay the song from the very beginning when the slide becomes visible again.

Hide Controls: Choose to disable the HTML5 Audio controls.

Volume: Set the volume for the song (a number between 0-100)

Segment Start: Start the song at a specific time

Segment End: End the song at a specific time

Invisible on Frontend: Play the audio in the background

Audio Preload:

• Metadata: Only load the audio file’s meta data when the page loads (usually the best choice for songs that are NOT set to autoplay)
• Progress: Play the song as soon as downloading begins
• Can Play: Play the song as soon as the first chunk has loaded (usually the best choice for songs that are set to autoplay)
• Can Play Through: Only start the song when the entire song has fully downloaded.

Ignore Preload After: Play the song regardless of the desired preload setting after a certain amount of seconds have elapsed.

YouTube, Vimeo, HTML5 Video

YouTube

1. Add Video Layer

2. Source

Enter the YouTube ID or full URL, then click the “Search” button.

3. Sizing

Full Screen

OFF = YouTube’s video iframe will be whatever width and height you choose (see Layer Styles).

ON = YouTube’s video iframe will cover the enter size of the slider (width and height will both automatically set to 100%).

Force Cover

OFF = Video will have a CSS background-size of “contain”. This means the video will never be cropped, but depending on the video’s original size ratio in relation to the slider’s actual size, blank space on the sides of the video may occur.

ON = Video will have a CSS background-size of “cover”. This means the video will always cover the entire size of the slider, but depending on the video’s original size ratio in relation to the slider’s actual size, video cropping may occur.

Dotted Overlay *

Choose to display a “mesh-like” transparent graphic on top of the video, adding some extra style to the video.

* only applicable if “Force Cover” is set to “On”. Aspect Ratio * YouTube offers 2 versions of the video that can be loaded which are 16×9 or 4×3. For video backgrounds, 16×9 is usually best. * only applicable if “Force Cover” is set to “On”

4. Settings

Loop Video

Disable:

Video will only play once each time the video is initially played.

Loop – Slide is paused:

Video will loop endlessly, and the slide will never change unless the slider’s navigation is used (next button clicked, etc.).

Loop – Slide does not stop:

Video will loop endlessly until the slide’s delay is reached. For example, if your slide’s are normally meant to be shown for 10 seconds, but your video’s length is only 5 seconds, the video will play twice before the slide actually changes.

Autoplay

Choose to autoplay the video when it animates into view. Or choose On 1st Time to autoplay only the first time the slide is shown. Or choose Not on 1st Time to only autoplay after the slide is shown at least once.

Stop Other Videos

If more than one videos are present in the slide at the same time, choose this option to make sure only one video can be played at a time.

Allow FullScreen

If chosen and controls are not hidden, the controls will include a Full Screen button.

Next Slide on End

ON: Slide will immediately change as soon as the video ends.

OFF: If video’s length is less than the slide’s delay, the slide will not change until the delay time has been reached.

Rewind At Slide Start

ON: Video will always start from the beginning each time the slide is shown.

OFF: Once the video plays, if the slide is changed before the video actually ends, when coming back to the same slide, the video will resume playing from the same point.

Hide Controls

Choose to hide the video’s default player controls.

Mute Video

Choose to mute the video’s volume if it normally has sound.

Volume (0-100)

Set the default volume level for the video.

Start At / End At

Choose to start and/or end the video at a specific time, in minutes:seconds format.

Example “Start At” value: 00:17 (start the video 17 seconds in)

Example “End At” value: 02:17 (end the video at 2 minutes, 17 seconds)

Show Cover at Pause

Show the video’s preview image (see Visibility section) whenever the video is paused.

Video Speed

A special option to play the video at a “fast forward” speed.

5. Visibility

Quick Tip For optimal performance, always use a preview image! This way the video will only load from YouTube.com when the video actually plays.

Preview Image

Enter a custom url, or click the “Image Library” button to choose an image from the WP Media library. Or choose “Video Thumbnail”, which will then automatically load the video’s preview image from YouTube.com.

Disable Mobile

Choose to disable the video for mobile devices (video layer will simply not be shown).

Only Preview on Mobile

When enabled, only the video’s preview image will be shown on mobile devices (video will never be loaded).

Play Button for your Preview Images Use the following technique to display a play button on top of your preview images.

1. Download the play button from YouTube.com, or create your own. I
2. f downloaded from YouTube, resize the button to 75x53 in Photoshop.
3. Upload the button graphic to your site, and make note of its url location.
4. Add the following CSS to the slider's Custom CSS section.

1. .tp-caption .tp-videoposter:after {
       background-image: url(http://site.com/wp-content/uploads/2015/07/youtube.png); 
       background-position: center center; 
       background-repeat: no-repeat;
       position: absolute;
       top: 50%; left: 50%; 
       margin: -26px 0 0 -37px;
       content: ""; 
       width: 75px; 
       height: 53px; 
   }

6. Arguments

“Arguments” are additional parameters that can be passed to the video from this list. Not all params are supported, but useful options from the list are “rel”, “iv_load_policy”, and “modestbranding” (see link above for descriptions of these params). To add an additional parameter, prepend it to the beginning of the default params string. For example, this:

would become this:

Add a button

Add Traditional Button

Preview Canvas:

Toggle between the “white” and “black” squares at the top left to see what the button would look like on a light or dark canvas.

Text:

Edit the button’s default text to be included with the button.

Idle State:

Choose the button’s default background color, text color, border styles, icon* and font-family.

Hover State:

Choose the background color, text color, border styles, icon* and font-family for the button on mouseover.

* Some buttons include an icon in the default state, and some include the icon on rollover (hover your mouse over the different buttons to see which ones include an icon on rollover).

Add Predefined Button

Scroll the left panel to see the list of predefined buttons that can be chosen from.

Add a shape

Toggle the white and black squares in the top left corner to see what the shape would look like against a light or dark background. Then adjust the shapes colors, opacity, border and size. When both “Full Width” and “Full Height” are selected, you’ll then have the ability to enter some padding for the shape, which can be based on pixels or a percentage.

Quick Tip: Enter "50%" for all 4 "Border Radius" fields to create a perfect circle.

1. Add an Object Layer

2. Choose your SVG Graphic/Icon

3. Resize and color your SVG

Import Layers

1. Select the slider that contains the Layer you wish to import from.

2. Narrow your search down to a specific slide.

3. Narrow your search down even further to a specific Layer Type.

4. Click the "+" icon to import the Layer.

5. And then click the "x" to close the window.

6. Imported Layer from "Classic Slider -> Slide: "Parallax" -> Layer: "Subtitle"

Layer Templates

When styling your layer, choose from one of the 100+ styles that’s closest to your desired styling. Then this will act as a “preset” of styles that can be further adjusted with the WYSIWYG editor.

When editing your layers, you’ll start of with a predefined layer style. And additional settings adjustments you make will only be applied to the current layer. However, once you’ve made adjustments for a specific layer, you can save your adjustments as a new “predefined” layer style to use for additional layers.

1. Save: Override the current preset style with your layer’s current settings (original predefined style will be permanently modified).

2. Save As: Create a new preset style based on the current layer settings (original predefined style will not be overridden).

3. Rename: Change the title of the currently selected preset style for your own convenience.

4. Reset: Revert currently adjusted settings to the predefined layer styles original settings.

5. Delete: Permanently delete the current predefined layer style (can not be undone!).

Layer Styles

1. Size & Position

• 1. Selected Preset
• 2. Font Family
• 3. Font Size
• 4. Line Height
• 5. Bold Text
• 6. Text Color
• 7. Horizontal Align
• 8. Vertical Align
• 9. Horizontal Offset
• 10. Vertical Offset
• 11. Layer Width
• 12. Layer Height
• 13. Layer Tag
• 14. Text Wrapping

2. Background & Advanced Styles

Click the “+” button to activate the advanced styling section.

Font

• 1. Font Opacity
• 2. Italics
• 3. Underline
• 4. Text Transform
• 5. Text Align
• 6. Layer Selectable

6. Layer Selectable

Choose if the text can be highlighted by the user for copy/paste

• 1. Font Opacity
• 2. Italics
• 3. Underline
• 4. Text Transform
• 5. Text Align
• 6. Layer Selectable

5. Text Align

Text align for the layer itself (unrelated to actuallayer positioning).

Useful for layer text with multiple lines (i.e. a paragraph of text).

6. Layer Selectable

Choose if the text can be highlighted by the user for copy/paste

Background

• 1. Background Color
• 2. Background Opacity
• 3. Padding Top
• 4. Padding Right
• 5. Padding Bottom
• 6. Padding Left

3-6. Padding

When a background color is used, add some “padding” to give your layer text a nice, spaced out background.

Otherwise, for layers with no background color (i.e. “Background Opacity” equals “0”), use the number “0” for the padding values.

Border

• 1. Border Color
• 2. Border Opacity
• 3. Border Style
• 4. Border Size
• 5. Top Border Radius
• 6. Right Border Radius
• 7. Bottom Border Radius
• 8. Left Border Radius

Transform

• 1. Opacity
• 2. scaleX
• 3. scaleY
• 4. skewX
• 5. skewY

4-5. skewX, skewY

Applies a 2D angle to the layer.Click herefor an example of “skewX”, andherefor an example of “skewY”.

Rotation

• 1. rotationX
• 2. rotationY
• 3. rotationZ
• 4. Horizontal Origin
• 5. Vertical Origin

1-2. rotationX, rotationY

Rotate the layer in 3D space:

Can be used in combination with #1 and #2 above, but can also be used by itself for a traditional rotation (i.e. non-3D).

4-5. Horizontal/ Vertical Origin

Usually “50%” is best.Click herefor more information.

Perspective

• 1. 3D Perspective
• 2. translateZ

1. translateZ

The layer’s z-axis position in 3D space.Click hereto see an example.

Corners

Apply sharp corners to the sides of your layers. The screenshot to the right is a useful example of this, where the layer is positioned at the bottom of the slider.

SVG

The options here can be applied to SVG Layers, and are for the SVG’s “stroke”. This is similar to a CSS border, but not exactly. Instead, it’s more similar to applying a “Layer Style -> Stroke” in Photoshop.

• 1. Stroke Color
• 2. Stroke Opacity
• 3. Stroke Width
• 4. Stroke Dash Array
• 5. Stroke Dash Offset

4. Stroke Dash Array

The amount of dashes to apply to the stroke.

CSS

Advanced CSS is in relation to the selected layer style (circled in the screenshot below).

Choose “Template” to modify the CSS for the currently selected predefined layer style. CSS entered here will be attached to the predefined layer style (i.e. will carry over when used for additional layer content). Style from Options: CSS styles automatically applied from the layer’s chosen settings. Additional Custom Styling: Add additional CSS that can’t normally be applied through the layer’s WYSIWYG editor.

Choose “Layer” to add CSS to this specific layer only. CSS entered here will not be attached to the predefined style, and therefore will not carry over when the predefined layer style is used for other layers.

Hover

The advanced styling section has two possible “states” where styles can be applied. The first is “idle”, which will be the default styles for the layer, and the second is “hover”, where you can change the layer’s styles for its mouseover state. To setup some special styles for the layer’s “hover” state, set “Layer Hover” to “ON”, as shown in the following screenshot:

Then once “Layer Hover” is set to “ON”, you’ll see settings for the two states that can be toggled. Then you’ll have the ability to set specific styles for both the layer’s “Idle” state (default appearance), and its “Hover” state (mouseover appearance).

For convenience, click the “copy” button to copy over styles from one state to the other. For example, if you’ve applied multiple styles to the “idle” state, but only want to adjust the border-color for the “hover” state, click the “hover” state button, then click the “copy” button, and then choose “copy from “idle”.

For convenience, click the “copy” button to copy over styles from one state to the other. For example, if you’ve applied multiple styles to the “idle” state, but only want to adjust the border-color for the “hover” state, click the “hover” state button, then click the “copy” button, and then choose “copy from “idle”.

Special Hover Settings

• 1. Animation Speed
• 2. Animation Easing
• 3. Hover Mouse Cursor
• 4. z-index Layer Order

3. Mouse Cursor

The most common choice for a hover mouse cursor is “pointer”, which will be a hand symbol. Other common choices are “auto” and “default”.

4. Z-Index

Specify a z-index for the Layer to help avoid visual and hotspot collisions with other Layers. Lower numbers (starting with 0) represent the lowest in the stacking order, and a high number such as “99” will ensure that the Layer is always displayed on top of all other Layers.

• 1. Animation Speed
• 2. Animation Easing
• 3. Hover Mouse Cursor
• 4. z-index Layer Order

1-2. Animation Speed / Easing

Idle styles will automatically animate when converted to their hover styles.

“Animation Speed” is in milliseconds, and a number between 200-500 is usually best.

Toggle

The “Toggle” option is great for switching between content on a mouse click. In the following example, we’ll use the “Toggle” option to setup a “FullScreen” button with two different icon states.

1. Add a Text/HTML Layer

2. Enable the Layer's "Toggle" option

3. Add two icons, one as the regular state ("Untoggled Content"), and one as the "Toggled Content" state

4. Add a "Toggle FullScreen" Action

Layer Animation

1. Layer Animations

When setting your layer animations, choose from one of the 30+ animation templates that’s closest to your desired look. Then this will act as a “preset” of settings that can adjusted further.

After adding a layer to the slide, and selecting it in the preview canvas, when you click the “Animation” tab, you’ll see a live preview of the layer’s animation.

Click the “Pause” button to stop the admin preview. And then click the same button to preview your animation once again.

Every content layer has a “Start” animation that will happen when the layer first appears, and an “End” animation for when the layer disappears.

The actual time when these animations take place will depend on the layer’s “Visible Timeline”, which is set in theLayers Timing and Sortingpart of the slide’s admin.

1.1 Presets, Easing, Speed & Text-splits

• Special Note:
  Select "No Animation" from #1 above if you do not want your layer to animate.

Legend:

• 1. Animation Template
• 2. Animation Easing
• 3. Animation Speed
• 4. Split Animation Text
• 5. Split Animation Delay

1. Animation Template

Choose from over 30+ prebuilt animations. And preview each option by clicking the “Play” button next to the “Animation” tab.

2. Animation Easing

“Easing” is what gives a web animation that “real life” type of movement. Choose between over 35 options to see which one you like best. The most commonly used options are “Power2.easeOut”, and “Power3.easeOut”.

3. Animation Speed

How long the animation will last from start to finish in milliseconds (1000 = 1 second).

An optimal number will depend on your chosen animation. For example, when using a simple “Fade”, a number between 300-500 is usually best, but for more complex animations (especially when using an “easeInOut” easing), a higher number such as 500-1000 will work well.

4. Animate by Words, Letters or Lines

For text-based layers, you can animate words, letters or lines one by one with this option.

Choose “No Split” to just animate the entire layer at once.

5. Split Animation Delay

When animating by words, letters or lines, the essence of the effect is that each will animate one after the other. The delay value here is the amount of time that will be used for this sequenced animation.

The delay value is in milliseconds. A number between 5-30 usually works best.

1.2 Advanced: Opacity, Transforms & Masking

Click the “+” button as shown in the following screenshot to edit the “Start” or “End” animation’s advanced settings.

STARTAnimation Settings = AnimateFROMthese settings

ENDAnimation Settings = AnimateTOthese settings

• Offset
• Opacity
• Rotation
• Scale
• Skew
• Masking

X = Horizontal Axis

Y = Vertical Axis

Z = 3D Axis

Choose “Inherit” to honor the animation’s original settings, “Custom” to enter a specific pixel value, or try out one of the other options to see which one you like best.

1.3 Animation Templates Management

When editing your animations, you’ll start of with a predefined animation template, and additional settings adjustments you make will only be applied to the current layer.

However, once you’ve made adjustments for a specific animation, you can save your adjustments as a new “Animation Template” to use for additional layers.

1. Save:Override the current preset animation with your adjusted current settings (original animation template will be permanently modified).

2. Save As:Create a new Animation Template based on the current settings (original predefined Animation Template will not be overridden).

3. Rename:Change the title of the currently selected Animation Template for your own convenience.

4. Reset:Revert currently adjusted settings to the predefined Animation Template’s original settings.

5. Delete:Permanently delete the current predefined Animation Template (can not be undone!).

2. Loop Animations

Apply continuous, animated movement to the layer even after it’s initially animated into view.

• Pendulum / Rotate
• Slide Loop
• Pulse
• Wave

• 1. Starting Rotation
• 2. Ending Rotation
• 3. Rotation X point
• 4. Rotation Y point

1-2. Starting/Ending Rotation

Choose the rotation degrees for the start and end of the looped animation. Use a negative number for the “start” value” and a positive number for the “end” value.

3-4. Rotation X/Y point (transform-origin)

Percentage based values that will act as the axis point for where the layer rotates from.

1.Play/preview the current slide’s animation sequence (slider’s main background and layers).

2.Reset the timeline so it can be previewed from the start.

3.Drag with your mouse for a slow motion / manual preview experience.

4.Increase/decrease theslide’s main delay.

5.Horizontal scrollbar to help view large timelines.

6.Drag to adjust Timeline section view.

1.Represents theSlide’s Main Backgroundthat initially animates in when the slide is shown.

2.ExampleText Layer

3.ExampleImage Layer

Use the editor shown in the screenshot below to enter precise numbers for the Layer’s animation.

1. Start Time:The time when the Layer will begin to animate into view.

2. End Time:The time when the Layer will begin to animate out of view.

3. Start Speed:The total duration of the Layer’s initial animation when it comes into view.

4. End Speed:The total duration of the Layer’s final animation when it transitions out of view.

Drag the Layer’s timeline left and right to position the layer’s “visibility” within the lifetime of the current slide.

In the above example, the “Image Layer” is set to animate in at the “1.5 second” mark, and then will animate out at the “5.5” second mark.

1.Drag to adjust the Layer’s “Start Time” (when the content will animate into view)

2.Drag to adjust the Layer’s “Start Speed” (the duration of the initial animation)

3.The Layer will be in a static state during this time.

4/5Drag to adjust the Layer’s End Time & End Speed.

The Layer will not animate out until the slide officially changes.

The Layer will animate out BEFORE the slide changes.

• Important Note:
  For "Single Slide" sliders (i.e.Hero Scene), always set the Layer to

Drag the listed Layers with your mouse on top of one another to sort the Layers, setting their z-index/stacking order. Layers that are hyperlinked should always have a higher z-index than other layers (i.e. positioned below other Layers in the list).

1. Shift Start Time *

   Show selected Layers sooner or later in the timeline (+/-)

2. Adjust to Start Time *

   Shift the collective timeline to a specific point

3. Adjust to Start Time / Delays *

   The same as #2 above, but also apply even delays for when each animation starts.

   For example, if a delay of 1000 is chosen, when the first animation has completed, exactly one second will pass before the second animation starts.

4. Adjust to Start Time / Overlap *

   The same as #3 above, except Layer animations will play sequentially, meaning as soon as one Layer has animated in completely, the next will begin.

5. 'In' animations finish at

   Choose a point in the timeline where all animations will officially complete.

   The Layer's START time will not be changed, which means the animation time is what will be adjusted to reach the new value.

6. 'Out' animations start at

   Choose a point in the timeline where all animations will officially begin to animate out.

   The Layer's END time will not be changed, which means the animation time is what will be adjusted backwards to reach the new value.

7. Adjust to Start Time

   Have all selected Layers animate IN at the same exact time.

8. Adjust to End Time

   Have all selected Layers animate OUT at the same exact time.

* Only available when more than one Layer is selected

Mobile Visibility

1. Mobile Device Visibility

Choose when the layer should be visible such as per device, above a certain screen width, or on mouse hover.

2. Show/Hide under Screen Width and/or on Slide Hover

1. Hide "Under" Width Layer will be hidden according to slider’s Hide Element Under Width -> Predefined Layers value in the slider’s main settings. 2. Only on Slide Hover Layer will only be shown when the user hovers their mouse over the screen (for mobile devices, the hover equivalent would be a finger “tap”).

Responsive Behavior

1. Resizing Behavior

1. Auto Responsive Choose to make the layer responsive by default (layer will resize when slider resizes).

2. Child Elements Responsive If the layer contains additional content (raw HTML, shortcode from other plugin, etc.), the slider will attempt to resize all nested elements.

2. Boxed vs. Full-Width Alignment

Layer Alignment is particularly useful for when using Full Width slider, as sometimes you want your content to align to the sides of the screen as opposed to your slider’s “Layers Grid” size. In the following example, the layer has a “top left” alignment, with an “Offset X” of 115px and an “Offset Y” of 65px.

The example slider below has a “Full Width” Slider Layout and a “Layers Grid” of 600×400. When the screenshots were taken, the screen size was 900px wide, so the slider had also “responded” to this width.

Align -> Grid Based (boxed)

Layer will always be aligned and positioned based on the slider's grid size (i.e. 115px from the left of the Layer's Grid boundaries).

Align -> Slide Based (full-width)

Alignment and positioning of Layers will always be based on the slider's actual size (i.e. 115px to the left of the screen).

3. Responsive Offset / Positioning

In the following example, the layer has a “top left” alignment, with a 50px offset from the top and left.

Responsive Offset: ON When the slider is resized down by 50%, the Layer’s original “Offset” values are also reduced by 50%.

Responsive Offset: OFF When the slider is resized down by 50%, the Layer’s original “Offset” values are NOT reduced or changed.

4. Image Layers: Lazy Load & Source Type

1. Lazy Loading: Default Settings – Image will be loaded according to the slider’s global Lazy Load setting. Force Lazy Loading – Lazy Load the image regardless of global Lazy Load setting. Ignore Lazy Loading – Do not Lazy Load the image regardless of global Lazy Load setting.

2. Source Type: Choose which version of the image should be loaded. Often “Original” can equal a very large file size, so usually “Large” or “Medium” is a good choice for optimal loading performance. Choose “Default Setting” to use the slider’s global Image Source Size setting. Or override the default setting with one of the other choices.

Layer Actions

To add a Layer Action, select the Layer on the preview stage canvas, and then from the "Actions" tab, click the "+" button.

Next, choose what type of mouse interaction should be applied to the Layer (click, "Mouse Enter" (mouse-over/hover), or "Mouse Leave" (i.e. mouse-out)

• Quick Tip:
  To show a "hand cursor" when hovering your mouse over the Layer, apply the settings shown inthis screenshot.

2. Link Layer to another web page

1. Actions Menu

Choose “Simple Link”

3. Link Target

Choose “Same Window” to open the link in the same window/tab.

Choose “New Window” to open the link in a new window/tab.

2. Link Url

Enter the full url (including the “http://” part) of the web page you wish to hyperlink to.

4. Link Type

Choose “A Tag Link” for best SEO practices. Or choose “jQuery link” if you’d rather the link be opened with JavaScript instead.

3. Navigate to a different slide

Navigate to Previous Slide

Navigate to Next Slide

4. Play/Pause Slider

Useful for building a special “play/pause” button to control the slider’s autoplay.

Play Slider

Pause Slider

Toggle Play/Pause

5. Scroll below slider

Useful for applying to a “Read More” button, which would then scroll to additional content below the slider.

Use the “Scroll Offset” option to scroll additional pixels below the slider.

6. Show/Hide Additional Layers

Add interactivity to your slides by controlling Layer visibility with these options (i.e. clicking one Layer shows another Layer).

• Quick Tip #1
  Learn how to create a tooltipusing this Action.

• Quick Tip #2
  Learn how to create Image Swapsusing this Action.

To get started, choose a "Target" Layer that you'd like to control (#2 below).

Next, choose one of the following options from the Layer Actions menu (#1 above).

• 1. Start Layer "in" Animation
• 2. Start Layer "out" Animation
• 3. Toggle Layer Animation

1. Start Layer "in" Animation"

“Target” Layer will be initially hidden, and then animated into view when current Layer’s Action is triggered (on-click or hover).

1. Target Layer

Other Layer that will be animated into view.

3. Animation Timing

Choose “Wait for Trigger” to honor the Layer Action’s default behaviour.

Or use one of the additional options to “replay” animations upon user-interaction.

2. Delay

Add a small delay (in milliseconds) before the Target Layer is animated into view.

4. Trigger Memory

Choose “Keep Last Selected State” to remember the user’s previous interaction.

Choose “Reset Animation and Trigger States every Loop” tonotremember the user’s previous interaction.

2. Start Layer "out" Animation

“Target” Layer will animate out of view when current Layer’s Action is triggered (on-click or hover).

1. Target Layer

Other Layer that will be animated out of view.

3. Animation Timing

Choose “Wait for Trigger” to honor the Layer Action’s default behaviour.

Or use one of the additional options to “replay” animations upon user-interaction.

2. Delay

Add a small delay (in milliseconds) before the Target Layer is animated out of view.

4. Trigger Memory

Choose “Keep Last Selected State” to remember the user’s previous interaction.

Choose “Reset Animation and Trigger States every Loop” tonotremember the user’s previous interaction.

3. Toggle Layer Animation

“Target” Layer will alternately animate into and out of view as current Layer’s Action is triggered (on-click or hover).

1. Target Layer

Other Layer that will be animated out of view.

3. At Start

The Target Layer’s initial visibility, where “Play in Animation” equals “initially visible” and “Keep Hidden” equals “initially hidden”.

5. Trigger Memory

Choose “Keep Last Selected State” to remember the user’s previous interaction.

Choose “Reset Animation and Trigger States every Loop” tonotremember the user’s previous interaction.

2. Delay

Add a small delay (in milliseconds) before the Target Layer is animated out of view.

4. Animation Timing

Choose “Wait for Trigger” to honor the Layer Action’s default behaviour.

Or use one of the additional options to “replay” animations upon user-interaction.

7. Play/Pause/Mute/Unmute Audio or Video

Useful for building a special “play/pause” or “volume/mute” button for Video or Audio.

1. Start Media:Play the video/audio
2. Stop Media:Pause the video/audio
3. Toggle Media:Toggle the video/audio’s play/pause state
4. Mute Media:Mute the video/audio’s volume
5. Unmute Media:Turn the video/audio’s volume back on
6. Toggle Mute Media:Toggle the video/audio’s mute/unmute state
7. Toggle Mute All Media:Toggle the volume of all video or audio for the current slide andStatic Layers slide.

1. Video Action

Choose to Start, Stop, or Toggle the play/pause state of the Target Layer’s Video.

2. Target Layer

Layer that contains the Video (can be current Layer or a different Layer).

3. Delay

Add a small delay (in milliseconds) before the Action takes place.

8. Advanced Actions:

Simulate Click / Toggle Layer Class / FullScreen Layout

Simulate Click:

Useful if other Layer has jQuery event attached that needs to be triggered.

1. Target Layer

Other Layer to simulate the click action.

2. Delay

Add a small delay (in milliseconds) before the Target Layer is animated out of view.

Toggle Layer Class:

Add/Remove CSS Class for a Layer.

For example, you couldadd a special Class to the Layerfor your custom CSS, and then toggle this class on and off with this Layer Action.

1. Target Layer

Layer where Class will be added/removed (can be current Layer or a different Layer).

2. Delay

Add a small delay (in milliseconds) before the Target Layer is animated out of view.

3. Class

Name of the CSS Class to toggle on and off.

Toggle FullScreen:

Switch the slider to aFullScreen Layout

Layer Action options are “Go FullScreen”, “Exit FullScreen”, and “Toggle FullScreen”.

Parallax / 3D

Apply a “Parallax Level” (1-10) or “3D Depth” to the layer. Click here to learn about the slider’s Parallax/3D option works and how it can be used. If Parallax is turned on, but without 3D, the Layer can be assigned a “Parallax Depth”.

If both Parallax and 3D are turned on, the Layer can be assigned a “3D Depth”.

Layer Attributes

Layer attributes can help with adding advanced Custom CSS for a specific Layer. For example, a custom class could be added to a Layer, and then some CSS could be applied to the Layer (added here). The example below would apply a CSS3 text-shadow to the Layer.

.tp-caption.custom-class {text-shadow: 0 0 1px rgba(0, 0, 0, 0.5)}

1-4. ID, Class, Title, Rel: Add a custom attribute to the Layer for advanced usage.

5: Image Alt Text: Add “Alt” text for Layer Images for maximum SEO. From Media Library: Alt text will be taken from “WP Main Menu -> Media -> Library -> Select Image -> Alt Text”. From Filename: Image’s filename will be used for the Alt text. Custom: Enter a custom value (field #6 above) for the Alt text.

How to Test for Conflicts

Simplify on iOS4/IE8

Animations will be set to simple “fade” for older iOS and IE, which will will dramatically improve performance for these environments.

Use Alternative Image

Choose to use an alternative image in place of the slider for mobile devices, IE8, or both. When an alternative image is used, enter the image’s absolute url into the “Alternative Image” field.

Ignore Height Changes *

Often useful for fullscreen sliders on mobile devices to help prevent image size changes when the native browser address bar appears and disappears.

* Option will only appear forFullScreen slidersonly

Ignore Height Changes Under *

The same as the option above, except here you can define a specific height where browser height changes would start to be ignored (640px, etc.)

* Option will only appear forFullScreen slidersonly