# Slide Layers

07.25.2015 Jason

#### Contents

- 1. Add New Layer
  - 1.1 Text/HTML (plus Icons & Shortcodes)
  - 1.2 Image
  - 1.3 Video (YouTube, Vimeo, HTML5 Video)
  - 1.4 Button
  - 1.5 Shape
- 2. Layer Editing & Controls
- 3. Slide/Layer Canvas

#### 1. Add New Layer

back to menu

##### Quick Layer Selector

Toggle between layers for editing from the “Quick Layer Selector”.

Click the "lock" icon to prevent the layer from further editing, and then when locked, click the "unlock" icon to enable editing again.
Click the "eye" icon to toggle layer visibility in the WYSIWYG editor.

- 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).

##### 1.1 Text / HTML, Icons, Shortcodes

back to menu

###### 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.

- Special Note
  Validate your HTML to make sure it doesn't break the page's markup.

###### 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.

###### Add a shortcode from another plugin as the layer's content.

Most shortcodes from other plugins are automatically compatible, but if for some reason your shortcode’s content isn’t nshowing up correctly, the following Custom CSS will often help:

.tp-caption ul, .tp-caption li { position: static !important; visibility: visible !important; }

1 2 3 4 5 6 7 8 9 | .tp-caption ul, .tp-caption li { position: static !important; visibility: visible !important; }

##### 1.2 Add an Image Layer

back to menu

##### 1.3 Add a YouTube, Vimeo or HTML5 Video

back to menu

- A. Source
- B. Sizing
- C. Settings
- D. Visibility
- E. Arguments

##### A. YouTube Source

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

##### B. YouTube Sizing

back to menu

###### 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”

##### C. YouTube Settings

back to menu

###### 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.

If autoplay is chosen, you can then choose Only 1st Time, which means the video will only autoplay 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.

###### 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.

###### Mute Video

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

###### 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.

##### D. YouTube Visibility

back to menu

- 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.
2. If 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.

.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; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .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; }

##### E. YouTube Arguments

back to menu

“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:

hd=1&wmode=opaque&showinfo=0&ref=0;

1 2 3 | hd=1&wmode=opaque&showinfo=0&ref=0;

would become this:

rel=0&hd=1&wmode=opaque&showinfo=0&ref=0;

1 2 3 | rel=0&hd=1&wmode=opaque&showinfo=0&ref=0;

- A. Source
- B. Sizing
- C. Settings
- D. Visibility
- E. Arguments

##### A. Vimeo Source

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

##### B. Vimeo Sizing

back to menu

###### Full Screen

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

ON = Vimeo’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 *

Vimeo 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”

##### C. Vimeo Settings

back to menu

###### 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.

If autoplay is chosen, you can then choose Only 1st Time, which means the video will only autoplay 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.

###### 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.

###### Mute Video

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

###### 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.

##### C. Vimeo Visibility

back to menu

- Quick Tip
  For optimal performance, always use a preview image! This way the video will only load from Vimeo.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 Vimeo.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 this PSD and extract its play button graphic, or create your own.
2. Resize the play button to 76x43 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.

.tp-caption .tp-videoposter:after { background-image: url(http://site.com/wp-content/uploads/2015/07/vimeo.png); background-position: center center; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; margin: -22px 0 0 -38px; content: ""; width: 76px; height: 43px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .tp-caption .tp-videoposter:after { background-image: url(http://site.com/wp-content/uploads/2015/07/vimeo.png); background-position: center center; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; margin: -22px 0 0 -38px; content: ""; width: 76px; height: 43px; }

##### E. Vimeo Arguments

back to menu

Additional parameters that can be passed to the video from this list.

Useful options from the list are “color” and “title” (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:

title=0&byline=0&portrait=0&api=1

1 2 3 | title=0&byline=0&portrait=0&api=1

would become this:

color=00adef&title=0color=00adef&&byline=0&portrait=0&api=1

1 2 3 | color=00adef&title=0color=00adef&&byline=0&portrait=0&api=1

- A. Source
- B. Sizing
- C. Settings
- D. Visibility

##### A. HTML5 Video Source

- Quick Tip
  For optimal performance, use a poster/preview image in addition to "Video Preload -> Disable" (see settings here). This way the video will only load when the it actually plays.

###### Poster Image URL

Click “Set Image” to choose a preview/poster image for the video from your WP Media library, or enter url to the image directly.

###### MP4, WEBM & OGV Url

Upload your video files to your website via ftp, and then enter their url locations here.

You could also use the “Set Video” option to choose or upload a video from your WP Media library, but depending on the size of your video(s), they may need to be uploaded via ftp.

An “.mp4″ version of your video is mandatory, and will work almost everywhere except Firefox on Macs. Because of this, it’s also important to include an alternative version of the video, which can be either “WEBM” or “OGV”. Firefox on Mac supports both of these, so you only need one or the other.

Here’s a free tool you can use to create “ogv” and “webm” versions of your video.

##### B. HTML5 Video Sizing

back to menu

###### Full Screen

OFF = Video size will be whatever width and height you choose (see Layer Styles).

ON = Video 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 *

Choose which aspect ratio the video should be resized by. For video backgrounds, 16×9 is usually best.

* only applicable if “Force Cover” is set to “On”

##### C. HTML5 Video Settings

back to menu

###### 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.

If autoplay is chosen, you can then choose Only 1st Time, which means the video will only autoplay 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.

###### 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.

###### Mute Video

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

###### 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 Source section) whenever the video is paused.

###### Video Preload

The preloading behaviour for the video.

If the video is meant to autoplay as soon as its shown, choose “Auto”.

If autoplay is disabled, choose “Disable” or “Meta”.

##### D. HTML5 Video Visibility

back to menu

###### 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/poster image will be shown on mobile devices (video will never be loaded).

##### 1.4 Add a Button

back to menu

###### 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.

##### 1.5 Add a Shape

back to menu

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.

#### 2. Layer Editing & Controls

back to menu

After adding a content layer to the slide, click the tabs below to see how the original content can be edited.

###### Edit Text/HTML

###### Save Changes

###### Additional Layer Controls

######

- 1. Move/Position Layer
- 2. Snap Layer Size Back to Normal
- 3. Delete Current Layer
- 4. Duplicate Layer Layer
- 5. Apply Rotation to Layer

- 1. Move/Position Layer
- 2. Reset Image Size Back to Normal
- 3. Change Image Source
- 4. Delete Current Layer
- 5. Duplicate Layer Layer
- 6. Apply Rotation to Layer

- 1. Move/Position Layer
- 2. Edit Video Settings
- 3. Delete Current Layer
- 4. Duplicate Layer Layer
- 5. Apply Rotation to Layer

- 1. Move/Position Layer
- 2. Edit Button Text
- 3. Snap Size back to Normal
- 4. Delete Current Layer
- 5. Duplicate Layer Layer
- 6. Apply Rotation to Layer

- 1. Move/Position Layer
- 2. Delete Current Layer
- 3. Duplicate Layer Layer
- 4. Apply Rotation to Layer

#### 3. Slide/Layer Canvas

back to menu

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

- 1. Layers Grid Boundary
- 2. Helper Grid Guide Lines
- 3. Snap to:
- 4. Screen/Device

1. Layers Grid Boundary

The green dotted lines that represent the current Layers Grid size based the Screen/Device selection (#4).

See “Special Note” below for important layer positioning information.

2. 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.

3. 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.

4. 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.

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

###### GOOD!

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!
Back
Next