Layer slides are a slide type included in the MetaSlider Pro add-on pack.
In this tutorial we’ll create a new layer slide, add some layers and animate them with CSS3!
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.
Click the Add To Slider button. The Media Manager will close and a Layer Slide will be added to your slideshow.
Click the large ‘Launch Layer Editor’ button to open the layer editor lightbox.
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.
Select the Layer (a white dashed border will appear around the selected layer) and use the “Animation” options.
Save the slide by using the ‘Save’ button located at the top of the Layer Editor.
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.
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.
Create and Publish Forms in Minutes… What are you waiting for?