Simple Elementor Media Carousel With Text Captions !

Table of Contents

How to add elementor media carousel text captions using CSS only! No plugins needed!

First, add Captions to every 'Slides' in the Elementor Media Carousel

Place various inner sections in this column. Every inner section will become a slide of this Elementor vertical carousel.

Simple Elementor Media Carousel With Text Captions ! 1

Then, set overlay to 'Text' and caption to 'Caption'

Simple Elementor Media Carousel With Text Captions ! 2

Finally, add this CSS to enable the Elementor media carousel text captions!

Under the Custom CSS for the element is a good place.

    
body .elementor-section .elementor-carousel-image-overlay {
background-color: transparent;
    color: black; /* Change the color here to change the color of the caption */
    font-size: 23px; /* Change the font size here to change the size of the caption */
    height:30px;
    top:107%;/* Slightly increase or decrease this value to position the caption */
    opacity: 1!important;
    transform:none!important;
}

body .elementor-section .swiper-slide {
    overflow: visible;
}

body .elementor-section .swiper-container {
    padding-bottom: 90px;
}

That's all! Enjoy your Elementor Media Carousel Captions!

Watch the video for more info! Let me know if everything works for you!

Comments

9 Responses

    1. Hey Dyanna! Yes this is possible. You will need to use HTML in the 'caption' field. Such as the following :

      <div style='display:flex;flex-direction:row;'>
      <strong>Kayak</strong>
      <div>Kayaking the river Laurent</div></div>
      

      Then, to accomodate for the 2 or 3 lines of text, you will need greater height, top and padding-bottom values in the CSS. Here is my full CSS now :

      body .elementor-section .elementor-carousel-image-overlay {
      background-color: transparent;
      color: black; /* Change the color here to change the color of the caption */
      font-size: 23px; /* Change the font size here to change the size of the caption */
      height:48px;
      top:118%;/* Slightly increase or decrease this value to position the caption */
      opacity: 1!important;
      transform:none!important;
      }

      body .elementor-section .swiper-slide {
      overflow: visible;
      }

      body .elementor-section .swiper-container {
      padding-bottom: 140px;
      }

      1. It works like a charm, thank you Maxime!
        I posted the same question in the Elementor forum and left your solution there.

        Best regards, Otto

  1. There is a way to make the text selectable and dont go to the media?
    Also for the html text in captions im using " " At the end I need to put and when I want to finish with the color I put
    Not elegant but do the job

Leave a Reply