Layer slides are a slide type included in the MetaSlider Pro add-on pack.
- 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.
Click the Add To Slider button. The Media Manager will close and a Layer Slide will be added to your slideshow.
Step 2: Launch the Layer Editor
Click the large ‘Launch Layer Editor’ button to open the layer editor lightbox.
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.
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.
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.