If you use MetaSlider, you already know it’s one of the easiest ways to add beautiful slideshows to your WordPress site. It’s simple, quick, and looks great out of the box.
There’s a brand-new feature in MetaSlider Pro that takes your slideshows to the next level. It’s called the “Container” feature. And it’s perfect if you want your slideshows to blend smoothly with your theme, look more professional, and match the design of your site.
Let’s explore how this new feature works.
Table of Contents for this post
What is the Container Feature?
In earlier versions of MetaSlider, your slideshow sat directly on your page. It didn’t have its own space, background, or padding. That worked fine, but sometimes the slideshow looked like it was floating awkwardly on the page.
The new Container feature fixes that. It lets you wrap your slideshow inside its own box: the “container.” You can choose the container’s background color, padding, and margins.
Think of it as giving your slideshow a stylish frame. The frame doesn’t steal attention from your images. It simply helps them fit perfectly into your site’s overall design.
This screenshot shows a slideshow that uses the “Hero” theme. By default, MetaSlider does not set a background color for the slideshow area.
This next screenshot shows the same slideshow but with the “Container” feature activated. We have set a yellow background for the slideshow area. This feature makes it easier to integrate MetaSlider into your slideshow design.
Why the Container Matters
Design is about more than just colors and fonts. It’s about balance and structure. When a slideshow has a clean, well-defined area around it, it feels intentional. It looks like part of the design — not something dropped randomly on the page.
The Container feature helps you do just that. It allows you to:
- Match your slideshow background to your site’s color scheme.
- Add space between the slideshow and other content blocks.
- Highlight the slideshow by giving it contrast with the rest of the page.
- Create a professional layout without using CSS or hiring a designer.
Even small adjustments to background and spacing can make a huge difference.
How to Use the Container Feature
Let’s walk through it together.
- Open your slideshow in MetaSlider Pro. From your WordPress dashboard, go to “MetaSlider” and select the slideshow you want to edit.
- Find the “Container” section. On the right-hand side, you’ll see several tabs. Click the one labeled Container.
You can control the background for your slideshow container, plus the padding and margin.
- Choose a background color. In the “Background” area, pick a color that matches or complements your site’s theme. You can go bold or keep it subtle with grey or white. The goal is to make your slideshow feel like it belongs.
- Add padding. Padding creates space inside the container, between the edges of the container and your slideshow. It’s like adding breathing room around your slides. Try 20 or 30 pixels to start. You’ll instantly see the difference.
- Set the margin. The margin adds space outside the container. It separates the slideshow from other elements on the page. A little margin helps prevent your layout from feeling cramped.
That’s it! You’ve just styled your slideshow like a pro, and you didn’t have to touch a single line of code. If you want to do this for every aspect of your slideshow, try the Theme Editor.
Real-World Example of a Container
Here are a few ways you can use the Container feature to make your slideshows stand out.
With the Container feature, you can give your slideshows a bold background color that matches your brand. In this example, let’s start with this slideshow in the screenshot below. The design of this site uses a light blue background. The slideshow theme is “Bubble”.
Now let’s add a deep navy background. The dark container makes the slideshow pop and gives your homepage a strong visual start. We’ll add some padding so the slides don’t touch the edges, and you’re done.
By default, the Container feature will not provide any background color and the padding and margin will be limited.
You can modify these options by adding a background color and some more significant padding.
This next screenshot shows the end result. There is a dark background around our slideshow.
Container Design Tips
You don’t need to be a designer to make this work. Just keep these tips in mind:
- Stick to your brand colors. Choose colors that already appear on your site.
- Less is more. Don’t overdo it with bright colors or heavy borders. Keep it simple.
- Add just enough padding. A bit of space makes your slideshow easier to look at.
- Check the mobile view. Make sure your container doesn’t take up too much room on small screens.
- Use contrast wisely. Dark containers make light images stand out, and vice versa.
If something looks off, it usually just needs a small tweak. A few pixels more or less padding can change everything.
Why You’ll Love The Container Feature
The new Container feature is simple but powerful. It’s one of those updates that make your life easier right away.
You no longer need to edit CSS files or hire a designer to adjust layout spacing. Everything happens inside MetaSlider. The controls are visual, fast, and beginner-friendly.
Whether you want a dramatic hero section, a clean portfolio display, or just a little more polish on your homepage, the Container feature gives you the flexibility you need.
Try the Container Feature Today
If you’re using MetaSlider Pro, open your slideshow and explore the Container tab. Try changing the background, padding, and margins. You’ll be surprised how quickly your slideshows start to look like they were designed by a professional.
If you’re still on the free version, this feature alone makes upgrading worth it. It saves time, improves your design, and helps your site stand out.
MetaSlider continues to make WordPress design easier for everyone, and the new Container feature is another step in that direction.