How to add text to Image Carousel in Elementor: (Updated September 2020)

In this guide, we’ll cover all the steps you need to take to add text to images in the Image Carousel widget that comes with Elementor, the excellent page design plugin for WordPress.

We’ll show you how to add fixed overlay text with a transparent background, and how to embed different text into each image.  We’ll also show you how to get text to appear ‘on hover’, and lastly how to make each image a (different) clickable URL.

There are many ways to add text to Image Carousel in Elementor, from dedicated plugins to complex HTML code. We’ve tried to choose the methods that give the best results, and with the easiest learning curve. 

Rank Math vs SEOPress – which is the best for WordPress SEO?

Upgrading to Elementor 3.0

On 23 August 2020, Elementor released version 3.0, which was a major upgrade. This introduced quite a few new features, including a new theme builder, a design system to maintain look and feel across all pages, and several performance enhancements. 

A lot of users haven’t upgraded yet as, according to Elementor, the new version includes some “substantial infrastructure changes”. In fact, the upgrade has annoyed a lot of users, and quite a few live pages have had colours and fonts changed without the users’ knowledge. There are also complaints that a lot of Elementor third-party plugins have stopped working. 

We’re firm believers in the ‘never-install-on-day-one’ approach to upgrades, and at the time of writing, we’re still running the older 2.10 version. This guide is therefore based on Elementor version 2.10:  specifically, the Pro version. However, everything below also applies to the new version 3.0, so rest assured all these techniques will still work!

Creating the Image Carousel

This guide assumes that you know how to create an image slider using the Elementor Image Carousel widget, which is available in both free and Pro versions. If you’re not too sure, we suggest you look at the how-to video on Elementor’s blog. But make sure you bookmark our page, as the techniques we’re covering are not available from Elementor’s website. 

How to Add Overlay Text in Elementor Image Carousel

This technique will give you a static block of text, on a transparent background,  that sits on top of the images in the Carousel. The images can still scroll left and right, but the block remains in place, so it looks as if the text is ‘floating’ over the images. This adds a subtle 3D effect to your page design, which can be very effective.

How to add text to image carousel in Elementor: Demo 1

Step 1. Create your overlay text. We suggest using a Heading Element and a Text Element in a Section, and then choose a coloured background with transparency set at about 50% initially. You can always change this later if you want more or less of the carousel images to bleed through the text. Save the completed overlay in your WordPress library, and make a note of the shortcode.   

Step 2. Create a new Section in Elementor. Select the single column option, and under ‘Layout Options’ select Full Width and No Gap.

Step 3. Add the carousel. From the Elementor main menu, open the list of widgets and select the Image Carousel. Now just drag and drop that into the section. At this point, you can select whether to have autoplay on or off. 

Step 4. Add some images (we assume you know how to do this, but if not, view the Elementor how-to demo.) For image size, we’ve found that using a custom size of 1920 x 500 works well, in conjunction with ‘Slides to Show’ set to ‘1’ and ‘Image Stretch’ set to ‘Yes’.

Step 5 (Optional). Add Clickable URL. If you’re using the Image Carousel on a blank canvass-type page, you should add a clickable URL at this step. Because unless this is a landing page with a CTA (Call To Action), users are stuck here unless they use the back button. A custom URL, such as your own home page, allows you to control the next page viewed. There’s more about clickable URLs later in this guide. 

Step 6. Add another column. From the Elements toolbar, select the Column Widget and drag it to the top of the page, so that it sits on top of the carousel. This creates another Section, which we need, but also a Column, which we don’t need. Therefore, using the red ‘x’, delete the Column — which leaves us with an empty Section. (We need the Section as a container for the overlay text — without this, the text would auto-stretch to fit the width of the screen and the background colour wouldn’t be shown.)

‘404 Permalinks not working’ in WordPress? We’ll help you fix that.

Step 7. Add the overlay text. From the Elements menu, choose the Shortcode Widget and drop it into the empty Section. Now paste in the shortcode of the overlay text.   Hover your mouse inside the overlay text and click on ‘Section’ to bring up the Edit Section menu. From here, click on the ‘Advanced’ tab.

Step 8. Negative Margin Hack. This is quite a useful hack that can be used for a lot of custom element positioning. Firstly, set the ‘Top Margin’ to between 100 and 120. Now we need to set the ‘Bottom Margin’ to a negative figure, in this case -335. Unfortunately, you can’t just type in a minus figure, as the input field doesn’t allow manual entry of a ‘-’ sign. So you’ll either need to copy and paste ‘-335’ from somewhere else, or click on the tiny down arrow next to the input box 335 times!

Step 9. Check it works. Save the layout and refresh in the usual way. You should now see your overlay text floating above the carousel images. Check that the carousel buttons are functioning, and lastly check that the clickable URL is working. Make any final colour and size tweaks and you’re done!  

How to Embed Different Text for Every Image in Elementor Image Carousel

This technique will give every image a unique text caption which you can display embedded into the image.  If you use faded versions of your images in the carousel, they can act as great backgrounds which make your text stand out. 

 First off, we should tell you that this only works with the Pro version of Elementor, as it uses some custom CSS code and the free version doesn’t include the Custom CSS widget. If you don’t have the Pro version, then please see our section on plugins near the end of this guide. There are quite a few plugins with advanced text features that can achieve the same effect — and often much more!

Step 1. Add your text. In the Edit Image Carousel menu of Elementor, open your image gallery and click on any single image. On the right-hand side, you’ll see options for ‘Alt Text’, ‘Title’, ‘Caption’ and ‘Description’ (you may need to scroll down to see them).  Elementor can use any one of the last three as the text caption, not just the one marked ‘Caption’. So for each image, add the text you want in either ‘Title’, ‘Caption’ or ‘Description’, but make sure it’s the same field across every image. 

Step 2. Display your text. Once you’ve added your text, update the images by clicking on ‘Insert Gallery’. In the Edit Image Carousel menu (‘Content’ tab), scroll down to the bottom and select ‘Caption’. You’ll get a choice from ‘Title’, ‘Caption’ and ‘Description’, and you should choose whichever you used in Step 1. You’ll see that all the images in the carousel now have text in the space below the image. 

How to build a WooCommerce Sales Funnel – we show you all the easy steps

This text will scroll along with the image, so you may want to consider stopping at this point. Bear in mind that the text has to be in the same position for every image, and this could hide important visual detail.

Step 3. Create a CSS ID. Now it’s time to enter some custom CSS code. But before you do this, it’s good practice to create an ID for the code you’re about to enter.  To do this, switch to the ‘Advanced’ tab and click on ‘Custom CSS’. You’ll be asked to enter an ID, so choose something meaningful, like “my-slider”. (Don’t worry about the CSS Classes field, you can leave this empty.)

Step 4. Enter your Custom CSS. Now scroll down to the ‘Custom CSS’ button and click it. This will open up a text box for custom CSS code. Please copy the following code, then paste it into the Custom CSS box — replacing “my-slider” with whatever ID you chose in Step 3.


#my-slider figcaption {
position: absolute;
top: 70px; left: 10px
margin-right: 20px;
text-shadow: 0px 0px 10p #000;
}

#my-slider {
cursor: pointer;
}

What Does All That Code Mean? 

In the code above, ‘figcaption’ is the internal name for the text you added to each image. The next three lines move this start of figcaption to 70 pixels from the top of the image and 10 pixels from the left. The code also creates a margin of 20 pixels, so your text doesn’t stray too far over to the right-hand side of the image. The next line adds some very subtle shadow, and the last two lines change the cursor to a pointer when it hovers over an image. (This is optional but it’s good practice, especially if you want to make the images clickable.)

As soon as you’ve pasted the CSS code, you should see the text jump from underneath each image to its new position as specified in the code.

Step 5. Adjust the text properties. Now you need to make the text stand out (or blend in), so from the Edit Image Carousel menu, select the ‘Style’ tab. Expand the ‘Caption’ sub-menu, and you’ll find options for ‘Alignment’ and Text Colour.  The ‘Typography’ option gives you further fine-tuning controls for how you want the text to be displayed. And, of course, you can go back to the Custom CSS and play around with the positioning some more.

How to Add Custom URL Links to Each Image in Elementor Image Carousel.

We’ve almost covered this already, as the option to add a custom URL is in the Edit Image Carousel menu, under the ‘Content’ tab. It’s actually quite simple.

Step 1. Select the Image. Then select ‘Link’ from the ‘Content’ tab menu, and from the dropdown list select ‘Custom URL’. 

Build your website authority: We tell you why you need backlinks.

Step 2. Enter the URLs. In the text box that appears, enter the destination URL for the first image. If this is all that you enter, clicking on any of your images will send the user to that URL. If that’s what you wanted, you’re done!  However, if you want different URLs for different images, then you need one more step.

Step 3. Add additional URLs. If you have more than one image, you need to follow the first URL with URLs for all the other images, with a comma separating each URL. Elementor automatically assigns the first URL to the first image, the second URL to the second image, and so on.

Elementor Alternatives: Third-Party Plugins

There’s no denying that Elementor is a great theme builder and editor, but sometimes the included widgets are a little light on features. That’s not really a complaint, as there are so many great widgets, but sometimes you just hope for a little more, especially with everyday elements such as an image slider.

Fortunately, there are some great third-party plugins that focus on just one particular type of widget, and this allows them to develop some really useful features.

For an alternative to Image Carousel, top of the list must be Elementor’s own Media Carousel. You can embed text in the image, or have a block of floating text. You can also include videos amongst the images, and trigger them to autoplay.

For third-party plugins, we recommend looking at Jet  Elements Advanced Carousel, which has some very cool and effective carousel features. Another great take on the carousel theme is from Top Digital, with their boast that you can add anything to a carousel.

Lastly, there’s the Carousel Slider widget from the ever-popular Unlimited Elements plugin. Unlimited Elements, at $39 for a 1-user, 1-year license, is perhaps overkill for a few image carousels. But it’s a great plugin which really extends Elementor, so you might want to give it a look.

In Conclusion

Well, that’s the end of our quick guide to adding text to images in Elementor’s Image Carousel. We hope we’ve been able to show you some useful techniques, and maybe you’ve already got some great new design ideas running around inside your head!

Are There Genuinely Free Alternatives to ClickFunnels? (Yes, There Are!)

If we’ve been helpful, then it would be great to hear from you — we always love it when we’ve helped somebody!