800,000+ WordPress sites are already using MetaSlider!

Introduction to Layer Slides in MetaSlider

One of the most creative and stylish options in MetaSlider Pro are Layer Slides. This allows you to add a basic image to your slideshow and then layer other elements on top. You can add text, video, colors, animations and even other images on top of your first image.

In this guide, I’ll introduce you to the power of Layer Slides in MetaSlider Pro.

How to create a new Layer Slide in MetaSlider Pro

  • Go to “MetaSlider Pro” in your admin menu.
  • Click the “New” button in the top toolbar. This will create a new slideshow.
  • Click “Add Slide” in the top toolbar.
  • Choose the “Layer Slide” option.
  • Choose the background image you want to use and click the blue “Add to slideshow” button.
Creating a new Layer Slider

You will see a new slide created with a “Layer Slide” heading.

The Layer Slider Editor button

To appreciate the extra features in this Layer Slide option, let’s compare the screenshot above to a normal image slide below. This has the heading “Image Slide”. The Layer Slide has all these extra features:

  • The “Launch Layer Editor” button.
  • The “Extra” tab.
  • The “Video Background” tab.
  • The “Edit Source” tab.
An Image Slide in MetaSlider

Using the Layer Editor

When you click the “Launch Layer Editor” button, you’ll open up a new window as shown in the screenshot below.

  • Click the “New Layer” button in the top-left corner.
Adding a New Layer Slide
  • You will now see more editing features. On top of the image, you’ll also see a darker background area with text. You can update this text with all the formatting options in the toolbar.
the formatting options for a Layer Slide

In this example below, I’ve added a layer with a green background and a font size of 30 pixels. I’ve also added an animation to the layer that will start 2 seconds after the slide loads.

A layer slide with text

The “Extra” tab

The “Extra” option in Layer Slides allows you to add a link to the background image in your slide. There’s also a checkbox to force the link to open in a new window.

The Extra option in MetaSlider Layer Slides

The “Video Background” tab

The “Video Background” tab is also a layer option. This feature allows you to add videos as a background layer. In the screenshot below, I’ve added a video to my site’s video library and added a link to the “Video Background” tab. This feature supports MP4 and WebM videos. Click here to see what video types you can use in WordPress.

The Video Background tab in MetaSlider Layer Sliders

The other necessary step is to make sure that your video has enough room:

  • Click the “General” tab.
  • Click “Launch Layer Editor”.
  • Make sure the “Snap to grid” box is unchecked.
  • Save your slideshow.

On the front of your site, you’ll now see that your video is playing inside the slideshow. In the screenshot below, the beach scene is a video that’s playing inside the slideshow.

A video background showing in MetaSlider Layer Slides

The “Edit Source” tab

The “Edit Source” option enables you to edit the code inside your layer slide. This screenshot below shows the CSS and HTML used to create a single layer slide. You can modify this code to meet the needs of your site.

The Edit Source tab in MetaSlider Layer Slides

Do more with MetaSlider slideshows

As you can see, these extra options you have with Layer Slides allow you to do so much more with your slideshows. For example, you can use Layer Slides to add a date and time onto your slides.

If you want to show these slides on large screen you want to use this full-screen approach for your slideshow. There are also other ways to add elements on top of sldieshows without using Layer Slides. For example, this guide shows how to add a button over your slides. You could also add animation so that the date loads on the screen after the main image.

2 Replies to “Introduction to Layer Slides in MetaSlider”

  1. Dan Kardell
    February 9, 2024

    Do we have access to Google Fonts?

    1. Steve Burge
      February 9, 2024

      Hi Dan. Google Fonts are available in the Theme Editor for the slideshow design. They should be available for the Layer Slides soon after the new Font Library arrives in WordPress 6.5.

Leave a Comment

Start Using Your Slider Today!

Create and publish WordPress slideshows in minutes… What are you waiting for?