Slide Types

Image slides are a basic slide type included in MetaSlider (free) and MetaSlider Pro. An image slide will simply display an image with a caption. You can optionally link the slide to a URL of your choice.

Compatibility:

• Flex Slider ✔
• Responsive Slides ✔
• Coin Slider ✔
• Nivo Slider ✔

Step 1: Add Image Slides to your slideshow

Click the ‘Add Slide’ button to launch the Media Manager and select ‘Image’ from the left. From here, you can either upload new images or select existing images from your Media Library to use as slides. Tip: Hold down CTRL to select multiple images.

Click the Add To Slider button. The Media Manager will close and the slides will be loaded into your slideshow. A spinning disc will show next to the ‘Save & Preview’ button while this process is happening.

Step 2: Configure your Image Slides

General

The general tab lets you define the slide caption and URL. Check the ‘New Window’ box to force the link to open in a new browser window when clicked.

SEO

The SEO tab lets you set image title and alt text for your slide. The Title text should provide additional information about the slide, whereas the alt text should be used to describe the image itself. This data allows search engines to ‘read’ your slides and helps with search engine rankings!

Crop

Your slides will be cropped to match the size specified in your slideshow settings. By default the largest, most central area of the image will be cropped. If you find the wrong part of your slide is being cropped (for example, the image is of a person and their head is being cropped out of the slide), you can choose to crop a different area of the image.

Post Feed slides are a slide type included in the MetaSlider Pro addon pack.

Post Feed slides dynamically pull in slides based on your WordPress posts, using the featured image (required) as the slide. They are also commonly known as “Content Sliders”, “Featured Sliders”, “Post Sliders” or “Dynamic Sliders”.

Compatibility:

• Flex Slider ✔
• Responsive Slides ✔
• Coin Slider ✔
• Nivo Slider ✔

Important: Posts must have a featured image on them in order to display within the post feed slider. It is not possible to create “text only” post feed sliders.

Step 1: Add a new Post Feed Slide to your slideshow

Click the ‘Add Slide’ button to launch the Media Manager and select ‘Post Feed’ from the left.

There’s no configuration to be done yet, so just click the Add To Slider button. The Media Manager will close and a blank Post Feed slide will be added to the bottom of your slideshow.

Step 2: Configure your Post Feed slide

Caption Template

The caption template defines how the slide caption is displayed for each of your posts.

We’ve provided 11 built in template tags to output standard fields such as the post title and publish date. Each of your custom fields will also be displayed in the ‘Insert Tag’ selector.

If you have WooCommerce or The Events Calendar installed, you’ll also see template tags relating specifically to those plugins (eg, {price} and {start_date}).

Post Types

Select the Post Types to display in your slideshow. Custom Post Types will also be displayed here.

Taxonomies

Select the categories or tags that the posts must be tagged to in order to display in the slideshow. Custom Taxonomies will also be listed here.

Display Settings

Choose how many posts to display in the Post Feed, where each slide should link to and how the slides should be ordered.

If you have The Events Calendar installed you will be able to order the posts by the event date.

When the Preserve New Lines checkbox is checked, new lines in the caption template will be output as br tags in the caption output.

External URL Slides are a slide type included in MetaSlider Pro. External URL slides allow you to load images directly from a non-WordPress sources, for example CDN’s or image hosts.

Compatibility:

• Flex Slider ✔
• Responsive Slides ✔
• Coin Slider ✔
• Nivo Slider ✔

Step 1: Add an External URL Slide to your slideshow

Click the ‘Add Slide’ button to launch the Media Manager and select ‘External URL’ from the left.

There’s no configuration to do yet, so just click ‘Add to slider’. A new External URL Slide will be added to the bottom of your slideshow.

Step 2: Configure the External URL slide

General

The general tab lets you define the External Image URL (the URL to load the image from) and the Link URL (where the user should be taken when clicking on the slide). Check the ‘New Window’ box to force the link to open in a new browser window when clicked.

SEO

The SEO tab lets you set image title and alt text for your slide. The Title text should provide additional information about the slide, whereas the alt text should be used to describe the image itself. This data allows search engines to ‘read’ your slides and helps with search engine rankings!

Limitations of External URL slides

MetaSlider doesn’t have control over the images loaded from external URLs. This means we cannot crop the images, so you’ll need to make sure the images are correctly sized for your slideshow. The inability to crop the images also presents issues with Filmstrip navigation, therefore we recommend using ‘Dots’ or ‘Thumbnails’ as the navigation type for your slideshow when it includes External URL slides.

Vimeo slides are a slide type included in the MetaSlider Pro addon pack.

A Vimeo slide will display a video in your slideshow directly from Vimeo. The video will automatically pause if the user skips to the next slide.

Compatibility:

• Flex Slider
• Responsive Slides

Step 1: Add a new Vimeo slide to your slideshow

Click the ‘Add Slide’ button to launch the Media Manager and select ‘Vimeo’ from the left. Paste any Vimeo URL into the text input. A preview of the video will load in the space below.

Click the Add To Slider button. The Media Manager will close and your Vimeo slide will be added to your slideshow.

Step 2: Configure your Vimeo slide

General

The general tab allows you to configure the parameters used for the embedded video.

Enable Auto Play to start the video as soon as the slide is displayed.

YouTube slides are a slide type included in the MetaSlider Pro add-on pack.

Compatibility:

• Flex Slider ✔
• Responsive Slides ✔

Step 1: Add a new YouTube slide to your slideshow

Click the ‘Add Slide’ button to launch the Media Manager and select ‘YouTube’ from the left. Paste any YouTube URL into the text input. A preview of the video will load in the space below.

Click the Add To Slider button. The Media Manager will close and your YouTube slide will be added to your slideshow.

Step 2: Configure the YouTube slide

General

The general tab allows you to configure the parameters used for the embedded video.

Enable Auto Play to start the video as soon as the slide is displayed.

Theme

The Theme tab will let you choose the theme (Dark or Light) and the color (Red or White) for the embedded YouTube video.

Layer slides are a slide type included in the MetaSlider Pro add-on 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.

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.