Simple Elementor Media Carousel With Text Captions !

Simple Elementor Media Carousel With Text Captions !

Check out our CSS Course, made especially for Elementor users.

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!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

22 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

  2. My client wants more than one of these on the same page. How do I limit the css to ONLY change on one of the carousels instead of all of them on the same page? I know it's got to be super easy... but I'm stumped (overthinking?)...

    1. Give your media carousel the class name 'custom-carousel' , then add this code instead of the one above:

      body .elementor-section .custom-carousel .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 .custom-carousel .swiper-slide {
          overflow: visible;
      }
      
      body .elementor-section .custom-carousel .swiper-container {
          padding-bottom: 90px;
      }
      
  3. I would keep the border radius on images (30px) but this piece of code bellow transform the border radius on 0px because of the swiper-slide class instead of carrousel media. How can I do? Thanks

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

  4. Hi,
    I am using Elementor Free, there is no "Overlay" option. Is there any way to put a comment inside carousel's images?
    Thanks, Tin

    1. Hey Tin!

      Easiest is really just to get Elementor Pro. You could make it work with free, but it will cost you as much or much in custom work, than Pro.

  5. Plzz Help! By applying the same step my captions are over-written I mean all slides' captions are showing at a time and making a mess.

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.