Create an Image Box Card Carousel with Text Overlay in WordPress with Elementor | Portfolio Slider
Вставка
- Опубліковано 8 лют 2025
- In this tutorial, I'll show you how to create an Image Box Card Carousel with Text Overlay in WordPress with Elementor and make this Portfolio Slider.
✅Get Elementor Pro:
makedreamwebsi...
✅Get code snippet for Elementor Card Carousel:
makedreamwebsi...
✅Get this READY-MADE template on TEMPLATISH (including Link Option):
templatish.com...
You may see this kind of image carousel with text overlay in a lot of website. But do you know how you can make that image box carousel in your website by using Elementor? So, today I’ll show you the easiest way to make this card carousel with 2 column structure where some of it’s portion goes outside of the screen. And you can fully navigate through it by dragging it on left and right or also by clicking on the arrows.
If you want, you can get this Elementor card slider template from my Gumroad shop. But, if you don't want to get this template, you can also start it from scratch.
First, you need to create a 2 column layout and in the first column take some content. On the right column, take an Testimonial Carousel Widget. Here, on this video, we specifically made an portfolio carousel. Then, we make some styles with the left column content and also added left and right arrows under that as buttons.
For that carousel, first we increase its width and write down some custom CSS code to make that card shape for the sides of this custom carousel. We have also use a slight gradient overlay below the texts. Also make some other styling with the slider.
Then, to enable the left/right arrows, we need to add some classes and also add some JavaScript code. Finally, we make it responsive for tablet and mobile. On mobile, I have placed the arrow buttons at the bottom of the slider.
So, That's how you can create this full width image box slider in Elementor. If you enjoy this video, don't forget to like and subscribe.
(UPDATED) Ready-made template including *Link Option* - templatish.com/template/elementor-card-carousel
That's nice. Is it possible to swap column in your template ? Controls on the right and slider images on the left ?
Hi!, can i open Elementor's pop-up with the Ready-Made template?
No, you can't. Only can insert URL
the arrows don't work with the new containers
@@investidordeplantao Which version of Elementor do you use now?
Hard to believe this is two years old. Elementor was capable then and it's an unstoppable powerhouse as of now. While these tutorials and the stuff you sell is still valid and worthwhile, I'd like to see (in a tutorial) how they work in the new container and grid features.
Actually all the videos are not working properly which I've done with sections/columns. I need to update their code snippets. Some videos still works (like this one) because the code here is related to the widgets. As both in the container and section/column version the widgets are the same, so it's working without any issues.
Hi,
I love your videos. I have watched several Elementor tutorials on your channel, and I have learned a lot from them. I think you are doing a fantastic job with this channel, and I will definitely share this video with my friends to help them learn this trick as well. I am really looking forward to creating the same effect on my next projects and I hope they turn out this great as well. Thanks a lot for sharing such an amazing video.
Why the buttons are not working event I have written the javascript code in the html
That was excellent. Really appreciated. Template ordered. Will keep an eye out for more of your work and content.
Thank you for your amazing feedback!
Amazing tutorial! I really love it when existing widgets can be modified creatively. I'd love it even more if you could share the CSS for the overflow to work with the new containers :)
For those asking for the link, you can apply the same principle and same CSS code to the testimonial slider and it works. The testimonial slider has a link field (this should be an option on all sliders!), however, it only works on the text and not the whole slide.
The other thing to point out is the Title is at the bottom and the Name is above it, if you put the category name in the Name field it leaves too much of a gap, as unlike other Elementor widgets, if the Title field is empty it doesn't conditionally not show it and the space it should occupy remains there.
Sorry I mean the Reviews carousel!!
@@spraydecqualitydecorators Thank you for your Comment!
This is EXCELLENT WORK, PERFECT EXECUTION, PERFECT TEACHER. KEEP UP
Thank you so much! Glad you like it!
I Don´t nkow with which version of elementor you do it because now with the Versión 3.19.2 itsn´t, please if you can make a new video with the actual version or if you can say me something for help me you can make me happy!! but you still have my like because you help me a lot with your videos!!!!!!!👏👏
Ok, I'll check it and update the code snippet on my website if needed. Thank you for your support!
Is not the code, is ELEMENTOR, because with the new version i can’t not left the button in line, if you pass me your email i can send you a picture
Bro. You are pro! I didn't ever think these powers of the testimonial.
Thanks a ton! Glad to help you...
Hello, really amazing tutorial!
1 Request: Please, could you also add some feature so that if someone click the image it's pop up and visitor can zoom in? Thanks
Thank you for your help, this is awesome.
You're very welcome!
This is amazing, thank you so much for sharing this amazing design!
Welcome!
@@MakeDreamWebsite Hi, I really found your video helpful please I would like your help; How do I offset the mobile to showing half a part of the next slide for clearer user experience
Awsome Tutorial mate. Thanks
You're welcome!
Bro I like your videos you truly inspires me to make my site
You're welcome! Glad to hear that!
Thanks for the code👏
Works like awesome 🤟
You're very welcome 🙏
This is a great tutorial, can you explain how to add a link to these as well so they go to a specific page?
Same Question
Hi there, I seem to get a horizontal scroll bar as soon as I set the width to a higher standard. With 1200 it does not get the complete screen, so therefore I adjusted it to 1400px. But now I get a horizontal scroll bar? How do I make sure it does not appear?
You can make the overflow hidden for that section/container
great stuff man. many thanks
You're welcome!
Amazing Content I really enjoy it... Its so easy and useful for wordpress developer... Thanks Bro for this kindness....
You're welcome!
Amazing tutorial 🎉 is that for Elementor Pro only or can be used to free too?
As there is testimonial carousel has been used, so you need to have Elementor Pro.
The arrows just don't work. Everything was done the same way as in the video - css and classes everywhere. Could you help me why it doesn't work?
Can you email me your page link...
@@MakeDreamWebsite You didn't find anything either, right? Well, that's a mystery, I guess.
Excellent work!
Thank you!
Hi thank you for the video, great tutorial. I couldn't use it because I needed Elementor Pro. I'm using the free version for now. Maybe it's good idea to mention that in your title or maybe I should just get the Pro version so that it doesn't matter....😁
Thank you very much , excellent tutorial.
Glad you liked it
very useful..thanks bro
You're welcome
when i click the arrow buttons it takes me to the top of the page lol ... any help? thanks for the content! it had helped me a lot!
Can you please make sure you have done everything properly? Your JavaScript code is not working...
Thanks for this video, it helps alot
You're welcome!
@Make Dream Website pls I see someone ask a question: How can I make just one template as a repeater to display from the testimonial post type or use the method for another like services carousel
@@iwebmediahub8087 for that kind of situation, you can use loop carousel instead
Okay cool so I can still create custom button to control the loop carousel slider right
@@iwebmediahub8087 it probably work, if you use the same code snippet. I'm not 100% sure, as I didn't test it.
Thanks for the video! I can't seem to Drag / Swipe the image slides using the mouse - any ideas why?
Is it possible to make this slider dynamic with specific posts type in a certain category? For example if I wanted to create this slider on my WooCommerce Shop page or a WooCommerce Product Category Archive page, to pull in the products in a certain category, to be fully automated and dynamic, so that as products are added to that category, they will automatically be added to the slider instead of me needing to create a new slide...
Asking same thing :)
Yes, it's possible, but you need to do more things for that...
@@MakeDreamWebsite there would be a lot of demand for this. Could you make an explainer video of this? Also I would like to see that the slider is offset. so the next half out of the picture. so you know there's a next one.
Your videos are really good and bring Elementor to the next level, keep it up!
Glad you like them!
@@MakeDreamWebsite I don't have elementor pro what do you suggest i do ?
@@kiaehe6292 buy one.
@@domieSinday ohhh I didn't know i could have done that, I mean all this time and what i needed to do was just upgrade to a pro version who could have figured it out that easily it's not like it's written or anything
@@kiaehe6292 I can't believe you didn't figure that out earlier, it's not that hard to understand.
Thank you! it is amazing, unfortunately the HTML code IDK why it's not working, any common mistakes that someone make when adding the HTML code? Thanks
Can you please repeat the process again carefully?
This is amazing. Holy!
does this work with flexbox container?
The custom control doesnt seems to be working with the new elementor container system
You can email me your page link
@@MakeDreamWebsite how do I mail you sir, can you provide the email, I can send the elementor json over, thanks 🙏
If I don't have Elementor with the custom CSS option, can I buy the ready-made template?
No, I don't recommend. Because without Elementor Pro this template won't work.
Great turtorial and I also bought your template to access the link option but I see if I click where the text is it doesn't work which is not so good because many people go to the text and click so is there a solution for this. Thanks
Ok, I'll resolve it and get back to you!
Great thank you for your fast answer@@MakeDreamWebsite
I haven't heard something from you, do you have an solution?@@MakeDreamWebsite
@@MakeDreamWebsite Did you find any solution for my question
Hi, great content. Everything's working, except for the card-prev & card-next buttons... Any idea on how to make this work? Thanks for sharing.
yes brother same problems here
@@bestclips9295 We may need to purchase the template. That should inevitably work lol.
Hey man, don't do that, if this video don't work for you the template also don't work. They both are same.
@@pleuratpllana Do you think think I'm a fraud businessman? lol. If so then please unsubscribe and leave this channel
@@MakeDreamWebsite Don’t get me wrong, I would not subscribe and follow your videos in first place if I had such thoughts. I was meant to say the purchase of template could work since you said you updated the code.
hi, thank you for the video. But the slider is going out of the container. What should I do?
Go to the container settings and make its overflow hidden...
Is it possible to make the second slide as if it was the fist to view?
The effect that i want to create is: the second image is highlighted by being taller and bigger than the other two slide at his left and right
Hello! Thank you for this video, first of all! But I was trying to visit your website for the code and it's not working, is there any other place where I can see the code? Thank you!
I just fixed my website. You can check it now!
@@MakeDreamWebsite Thank you!!
youre the best sir, thx for that!
You're welcome!
Just was having a little trouble with the tablet media size. When I’m tablet mode some of the images seem stretched or not in the right position. Wonder if I cropped them all down to the same size if that would fix my issue, I’ve played around with the css a lot changing object-fit and object-position. Have you ran into this problem?
JS is not working in my elementor. i follow all the step, the slider with buttons is not working, kindly help in that thanks
Hello, this is very useful for you, but I would like to know if it is possible to add a link to each photo so that my customers can jump to the corresponding page by clicking on the photo
After a lot of requests after uploading the video I have added the clickable card option and add it as a separate version inside the template…
nice tutorial, thx bro
You're welcome
i buy the files but it is not working properly. what may bey the reason?
Can you email me your website link? I'll have a look
When I add the css code to the carrousel, the carrousel simply disappears 🙈what am I doing wrong?
This is awesome!!! Thanks for sharing it . Something which still not clear for me is how we can use it in another pages or sections? How to avoid conflict because we`re repeating the same line code , or any other tricks to avoid those problems ? With mobile as mostly used for people browsing website right now , this kind of layout will be giving better UX than keep scrolling to bottom right ? . Again Thanks for this one
I have created the design in template and then use its shortcode in elementor testimonils slider but my button is not working as it should. How can i solve this?
Custom code doesn’t properly work inside template. You need to insert it directly inside your page…
@@MakeDreamWebsite is there any way that I add buttons and some how I can slide the slider using those buttons instead of the navigation of testimonials slider
@sumitumak yes, you can see these two arrows here are actually 2 button widgets. You can customise it as you want.
@@MakeDreamWebsite yes but they are not working as your working
Hi bro... Thank you for the tutorial...
Is there a way we can make the Carousel auto sliding?
You can turn on the autoplay option from that carousel widget settings.
How do the arrow buttons work? I didn't see you configuring them.
Hi, I bought this item but the cards all have a black tint on them which makes all my pictures darker, how do I remove the tint?
Yes, you can email me. I'll have a look
Useful video thanks 🙏
Welcome😇
Can you put 2 testimonials on the same landing page but with different effects, for example changing the height?
Yes, you can
The cards are not clickable to redirect to a link, how can I make them so, please? Thank you.
Hi Kohen, after publishing the video lot of people ask me how they can add link. So, later I've added a version of this with links which I have added with the ready template.
I bought it but it didn't work for me :c what can I be doing wrong? I just install it but I can't see all cards
Can you please email me? I will have a look...
I don't know why, but the part with JS and jquery doesn't work for me, I followed along the video but the button don't work.
Any idea please?
Thanks.
You can email me your page link
@@MakeDreamWebsite I was writing you an email, when I decided to see your video again, I noticed at 3:00 I turned off the arrows, that was the problem, Solved bro, Thank you very much.
hi .. I bought the Elementor Card Carousel but I can't include pictures :(
You can email me your page link
@@MakeDreamWebsite give me your email please
@Make Dream Website I did not find your email
@@yousefobaid it's contact@makedreamwebsite.com
I want to buy it but i dont know if Is it possible to make carousel linkable to another website?.
Yes, it's possible. There actually I have 2 versions: with link and without link. You can use any of them...
Hello, is there a solution to the arrow problem?
Have you hidden the default arrow of the slider? If so then it will not work!
I want to change the arrow or totally delete the arrow, also want to put a custom arrow underneath the image with text. How to do that? I have bought your pack
You can email me
@@MakeDreamWebsite sure whats the email!
@@ashome7622 contact@makedreamwebsite.com
hi, I initially build out the element with the guidance of your video. Worked awesome. As many I needed the slides to link so I purchased your gumroad file. Im trying to upload the template (container) but not sure which json is the one with the link version... 1821 or 1824?
Thank you so much
You need to upload 1824
Thank you! @@MakeDreamWebsite
Hey my friend! Just downloaded the asset its really beautiful! But is there a way to attach the slider pictures with youtube or vimeo links? Thanks!
Yes. There are 2 files and one of them support link for each slide
@@MakeDreamWebsite Thank you so much, Really appreciate that! And ive got one more question. I thought about turning the pictures into portfolio categories like "sports commercials" and "branding campaigns" ect. Do you have a clever way to stack all of my cases within that on picture? so when a client presses on the picture, theyll be able to see all of that specific line of work? You the best! 🙏
hi brother I created a custom post type using Crocoblock can you help me with how to make this. It is not working with custom post types
Hello how are you? I used the name of the testimony and created a link, I would like this link to stay out of the image a little, but every way I do it it is cut. Would you help me?
Hello, I've purchased your section, If I insert this, some elements of my current page disappear...coul you please give me help?
You can email me, I'll have a look!
Thanks! Its help me a lot
Welcome ☺️
plz paste code here that is used on your website
Great tutorial. I love it! Thanks
Is it possible to swap column? Text on right and carousel on left
@MakeDreamWebsite Hi, I really found your video helpful please I would like your help; How do I offset the slide on mobile to showing half a part of the next slide for clearer user experience ?
I watched the video until the end. but there's a problem. when the width becomes 1200 pixels, it is not the content that shifts but the screen that shifts. anyone help me
I just bought your template but I don't have the cards to add in the pictures :( Please help me
You can email me
@@MakeDreamWebsite Thank you, I did, hopefully you can help me. When do you think I will receive a response?
Definitely!
@@MakeDreamWebsite When??
@@eslialessa4059 I just replied back to you. Sorry about the delayed response
Hi there, is there a way to add links on each element ?
Thank you for this great work
Regards
A lot of you requested for that option. So, later I've also added that link version with my ready template.
Hi, I just purchased the template, but it only shows 2 slides, even though the slides per view set to 3!!!! please advise
You can email me your page link...
@@MakeDreamWebsite thanks for your reply. there was an elementor issue, It works now. many thanks
@@Shshohreh Glad to know you can solve it!
Hi, could you suggest, how to place the text (name & title) to top left of the card, instead of the bottom left?
On the CSS, you can see a line, align-items: flex-end; you need to make it, align-items: flex-start;
Hello. Great plugin. But I can't figure out how to add a Link to each item from the image. Is that possible?
Yes, with the ready template you also have a version with link...
@@MakeDreamWebsite yes thanks. Just realized it.
love this thanks
Welcome
Hello, I tried to buy the template but your website says 'back soon'. Also, if I try from scratch is there a way to change the card shape to border shape 0-100-0-100 px?
I have resolved my website issue. You can make the changes on the css for that. On line number 9 instead of border-radius: var(--radius); you can write border-radius: 0px 100px 0px 100px;
Is it possible to make it clickable like link to somewhere posts?
I've added a carousel with link version with my readymade template where you can manually put any link with each slides.
@@MakeDreamWebsite Thanks!!
Hi very good tutorial. I have one question if I want a link to link individually to each photo how would I do this? Also with custom html?
You need to modify the code for that. By the way, I have added that link functionality with my readymade template. You can check my pinned comment.
@@MakeDreamWebsite ok thank you very much.
Hi, just bought the template, the navigation buttons don't seem to work on my website. Also the width of the images changed as soon as I a single change to the content title in the carousel. Please help!
You can email me your page link...
is there any option where we can change text on offset along with image slide
Elementor Grand Master literally
Thank you 😇
i want the text on the left to move also with the pic (each pic deferent text) is that possible ?
You can watch this video: ua-cam.com/video/B5LJtXf6QTY/v-deo.html
Hi mate, I was wondering if this works with other Elementor carousel widgets apart from testimonial carousel?
hello, by any chance do you know how can I fix the blank space on the right while i use this widget? thank you so much for this tutorial, i loveee it, last night i bought the widget
You need to increase the width and also increase slides to show to fill up that space. You just play around with these two options and see which looks better for you.
@@MakeDreamWebsite thank you so much for your reply, it was def very helpful; wish you tons of success
✨🙌🏼✨
Hi thanks for the video! I also wonder what need to change (the code) so that the carousel can also be partially hidden (like 12:25) on mobile? I can't find any answer&question related to it in the comment section. Thanks in advance
I've set its width 100% on mobile with custom css (see around the last line). You can increase this value and also slides per view option on mobile to achieve that.
Thanks a lot, how i can make the image COVER, please
The image is already set to cover by the code snippet...
@@MakeDreamWebsite Thanks, in case in want it to change, how can i do it? i tried by obert-fit: can't work. please help
It's set from the custom css code
youre the best !
Can't believe tNice tutorials is free
Hey really nice work. I bought this Template and thought i could put Links on them. Seems it isnt that easy. Is it possible that all these elements link to a page?
Yes, for that you can put the same link for each slides...
Thanks for the fast respond! So it isnt possible to give each slide a different link?
@@MakeDreamWebsite
got the template but not working? I can send screenshot if you like? Thanks
You can email me. I'll have a look
Custom Css cant make element outside section what makes different from video
Are you working with new flexbox container? then, it may not work properly...
@@MakeDreamWebsite How to fix it?
@@MakeDreamWebsite I check my setting and I didn’t use flexbox container
Amazing but the html code for the navigation doesn't work - keeps on giving me error 403 when I'm trying to update the page. Could you update the code? 🙏🏼
Maybe you have some plugin that causes the conflict
Is it possible to add box shadow per slide? Not box shadow to the whole widget just one box
You can do it with custom CSS
@@MakeDreamWebsite where do i need to add the code and which class? I tried to but is makes the whole widget box shadow not just one slide. Thanks for your fast reply btw!
I've purchased your slider but it's not working properly in my case. I want slider to be little offset, as showing in your yt video that only 2 slides are visible completely but the 3rd one is only half visible , I want that style but it's not working in my case. kindly help me out with this
You can email me your page link...
How can i add a link to a card? does i need an other css code for that, or do i need to choose an other Elementor element instead the Testimonial card?
Initially I made it without the link option.. But, after that lot of you requested me to add a link option... So, later I add an another template with link option and add it with my ready template...
how its possible add link to specific page?
Much helpful! Do you have any idea, how could we make it clickable and redirect it to other pages?
I have added that functionally with my ready-made template. You can check the new pinned comment!
@@MakeDreamWebsite Thanks a lot, mate!
Hi Sir,
Is there a way I can display the contents of the image in the slider ?
seems like now the contents are behind the background image. Which code can I use to bring them to front
That code doesn't work, also I have changed elementor version to 3.7.0 assuming maybe for the updates this code snippet doesn't work. But even after changing the elementor version, this code still doesn't work. Can you suggest me something what should I do?
You can email me your page link
@@MakeDreamWebsite I am having the same issue, could you assist?