Layer Slides

Layer slides are a slide type included in the Meta Slider Pro addon pack.

Compatibility:

  • Flex Slider
  • Responsive Slides

In this tutorial we’ll create a new layer slide, add some layers and animate them with CSS3!

Step 1: Add a new Layer Slide to your slideshow

Click the ‘Add Slide’ button to launch the Media Manager.

In the left menu of the Media Manager, Select ‘Layer Slide’. From here you can select a background image for the slide, or upload a new image.

layer1

Click the Add To Slider button. The Media Manager will close and a Layer Slide will be added to your slideshow.

layer_slide_screenshot

Step 2: Launch the Layer Editor

Click the large ‘Launch Layer Editor’ button to open the layer editor lightbox.

layer_editor

Step 3: Add Layers

Click the ‘Add Layer’ button located at the top left of the editor to add a new layer.

To reposition a layer, use the drag and drop handle located at the bottom left of the layer.

To resize a layer, use the resize handle located at the bottom right of the layer.

To delete a layer, click the delete icon located in the top right of the layer.

Adjust the padding and background colour of each layer by using the options located on the bottom row of the toolbar.

Layers can include text, html, images, videos – even shortcodes! Layers can accept any HTML, advanced users can take advantage of the ‘View Source’ button to edit the HTML of each layer directly.

Step 4: Animating Layers

Select the Layer (a white dashed border will appear around the selected layer) and use the “Animation” options.

layer6

Save the slide by using the ‘Save’ button located at the top of the Layer Editor.

HTML5 Video Backgrounds

An additional feature of Layer Slides (since version 2.6) is the ability to use a video as the slide background.

To add a video background you’ll first need your background video in two formats: .mp4 and .webm. If your video is not yet in either of these formats you can convert it using an online tool such as online-convert.com.

Once you have the video in both formats you’ll need to upload them somewhere. You could upload directly to WordPress (by going to Media > Add New) or directly to somewhere like Amazon S3.

After the videos have been uploaded go to the slideshow and click the ‘Video Background’ tab on a Layer Slide. Paste in the URL to each video in the appropriate field.

Screenshot of Layer Slide background video tab

The slide image will be used in place of the video for browsers that don’t support the HTML5 <video> tag, so we recommend using a still of the first frame of the video or a transparent PNG image.

Tips & Tricks

  • If you’re editing the Layer HTML Source manually, be sure to specify your font sizes and line heights in ‘em’ units. This ensures your layers will scale responsively.
  • For transparent layer backgrounds, click the background color picker and drag the bottom horizontal bar all the way to the left.
  • Want to insert buttons into your Layers? Install the SvelgliaT Buttons plugin and insert the button shortcode directly into a layer.
  • The preview does not load your themes stylesheet. There may be differences between what you see in the preview and what you see when you embed the slideshow into your site. If layers are working in the preview, but not on your site, then it means there is a CSS conflict coming from your theme or other plugins. If you need help tracking down and fixing the conflict down please get in touch.