Layer Slides are included in MetaSlider Pro.
Layer Slides allow you to creates layer of different elements on top. You can add text, video, colors, animations and even other images on top of your first image.
Add a new Layer Slide to your slideshow
- Click the “Add Slide” button to launch the Media Manager.
- Select “Vimeo” from the left.
- 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 slideshow” button.
- The Media Manager will close and a Layer Slide will be added to your slideshow.
How to use the Layer Editor
- Click the blue “Launch Layer Editor” button to open the layer editor lightbox.
- Click the “New Layer” button located at the top left of the editor to add a new layer.
Layers can include plain text, formatted text, HTML, images, videos, and even shortcodes. Use the buttons in the main toolbar to add any element you need.
Advanced users can take advantage of the “Source” button to edit the HTML of each layer directly.
You can adjust the padding and background color of each layer by using the options located on the bottom row of the toolbar.
- 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.
How to add Animations to Layers
You can add animation effects to any layer.
- Select the Layer. A white dashed border will appear around the selected layer.
- Use the “Animation” options in the middle role of the toolbar.
- Save the slide by using the “Save” button located at the top of the Layer Editor.
How to add video backgrounds
Layer Slides allows 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.
- Upload your videos somewhere. You could upload directly to WordPress (by going to Media > Add New) or directly to somewhere like Amazon S3.
- 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 and tricks for using Layer Slides
- 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.
- 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.
Compatibility with slideshow types
MetaSlider allows you to use four different slideshow libraries. YouTube Slides are compatible with two slideshow options:
- Flex Slider
- Responsive Slides