BugWP logo BugWP
Back to Community
Home / Community / General

How to Customize and Position MetaSlider Captions: A Complete Guide

32 threads Sep 16, 2025

Content

Customizing the appearance and position of captions in the 'Slider, Gallery, and Carousel by MetaSlider – Image Slider, Video Slider' plugin is a common challenge for many users. Whether you want to move the caption below the image, change its styling, or fix display issues, this guide covers the most effective solutions based on community discussions.

Common Caption Customization Requests

Users frequently want to:

  • Move captions from overlaying the image to a position below it.
  • Change the caption's background color, font size, or alignment.
  • Ensure captions display correctly on mobile devices.
  • Add custom content like images or Advanced Custom Fields (ACF) data to captions.
  • Fix issues where captions cause page content to shift during slideshow transitions.

Why These Issues Occur

The default behavior of MetaSlider captions is to overlay the image, which is part of the plugin's core design. Customization often requires adjustments because:

  • The free version offers limited built-in styling options through pre-defined themes.
  • Caption positioning is controlled by CSS properties like position: absolute, which places them over the image.
  • Some themes or slider types (like Nivo or FlexSlider) may handle HTML content in captions differently.
  • Mobile responsiveness can be affected by theme-specific CSS or viewport settings.

Most Effective Solutions

1. Moving Captions Below the Image

The most common method to move captions below the image is using custom CSS. Add the following code to your theme's custom CSS section or a CSS plugin:

.metaslider .caption-wrap {
    position: static !important;
}

Note: This can cause navigation dots or arrows to appear too far below the slider. To adjust this, you may need additional CSS for the .flex-control-nav or other navigation elements.

2. Styling Captions (Background, Font, Color)

To change the appearance of captions, use CSS targeting the appropriate classes. For example:

.metaslider .caption-wrap {
    background: white !important;
    color: black !important;
    text-align: center !important;
}
.metaslider .caption {
    font-size: 1.2em !important;
}

If changes don't appear immediately, clear any caching plugins you might be using.

3. Adding Custom Content to Captions

Captions support HTML. You can manually add line breaks with <br> tags or include images and other HTML elements. For dynamic content from custom fields (like ACF), shortcodes can be used within the caption field if your theme supports them. For more advanced integration, PHP hooks are available. For example, to combine the image title and caption:

add_filter('metaslider_image_slide_attributes', function($slide) {
    $slide['caption'] = $slide['title'] . $slide['caption'];
    return $slide;
});

Add this code to your theme's functions.php file.

4. Ensuring Mobile Responsiveness

If captions look good on desktop but break on mobile, use CSS media queries to adjust styles for different screen sizes. For example, to reduce font size on mobile:

@media (max-width: 768px) {
    .metaslider .caption {
        font-size: 0.9em !important;
    }
}

5. Preventing Page Content Shifting

If captions of different heights cause the page content below the slider to jump, set a fixed minimum height for the caption container:

.metaslider .caption-wrap {
    min-height: 60px; /* Adjust as needed */
}

Important Considerations

  • CSS Specificity: Use the !important rule if your styles aren't applying, as theme CSS may be overriding them.
  • Slider Type: Some CSS rules are specific to the slider type (e.g., FlexSlider vs. NivoSlider). Check your slider's HTML classes using browser developer tools.
  • Child Themes: Always add custom code to a child theme to prevent loss during updates.

By following these methods, you can achieve greater control over your MetaSlider captions and integrate them seamlessly into your site's design.

Related Support Threads Support