Create an Image Box Card Carousel with Text Overlay in WordPress with Elementor | Portfolio Slider
Vložit
- čas přidán 12. 09. 2024
- 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?
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.
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!
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.
This is a great tutorial, can you explain how to add a link to these as well so they go to a specific page?
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
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
This is EXCELLENT WORK, PERFECT EXECUTION, PERFECT TEACHER. KEEP UP
Thank you so much! Glad you like it!
great stuff man. many thanks
You're welcome!
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!
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
Why the buttons are not working event I have written the javascript code in the html
Bro. You are pro! I didn't ever think these powers of the testimonial.
Thanks a ton! Glad to help you...
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 for your help, this is awesome.
You're very welcome!
Excellent work!
Thank you!
Bro I like your videos you truly inspires me to make my site
You're welcome! Glad to hear that!
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.
Awsome Tutorial mate. Thanks
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.
Amazing Content I really enjoy it... Its so easy and useful for wordpress developer... Thanks Bro for this kindness....
You're welcome!
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
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....😁
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
Thank you very much , excellent tutorial.
Glad you liked it
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.
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.
youre the best sir, thx for that!
You're welcome!
Thanks for the code👏
Works like awesome 🤟
You're very welcome 🙏
This is amazing. Holy!
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?
Great tutorial. I love it! Thanks
Is it possible to swap column? Text on right and carousel on left
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…
Thanks for the video! I can't seem to Drag / Swipe the image slides using the mouse - any ideas why?
nice tutorial, thx bro
You're welcome
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! Its help me a lot
Welcome ☺️
plz paste code here that is used on your website
love this thanks
Welcome
Useful video thanks 🙏
Welcome😇
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.
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! 🙏
very useful..thanks bro
You're welcome
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.
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, 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
youre the best !
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?
Hii, thank you so much. Love your tutorials! Is it possible to add a hover on the pics, f.e. make the pic blury and have text in the hover? That would be just perfect! Thank you :)
You need more css for that
@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 ?
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
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...
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 mate, I was wondering if this works with other Elementor carousel widgets apart from testimonial carousel?
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.
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 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.
Can you put 2 testimonials on the same landing page but with different effects, for example changing the height?
Yes, you can
Hey this tutorial was amazing and I absolutely love your designs!
I have a problem with the html code, it never works on my site, I've crosschecked the spellings and everything, just wont work, same happened with one of your previous tutorials too, I cant figure out what's going wrong, could you help me here.
You can email me your page link
I'm actually having the same issue. When I past the HTML in this tutorial, the image stays in the thumbnail picture but on the card in the top right in a bubble.
The other tutorial, it would show up for then disappear after a split second.
@@MakeDreamWebsite I'm actually having the same issue. When I past the HTML in this tutorial, the image stays in the thumbnail picture but on the card in the top right in a bubble.
The other tutorial, it would show up for then disappear after a split second.
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
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!!
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!
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.
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?
How do the arrow buttons work? I didn't see you configuring them.
thanks for sharing
You're welcome!
Thank You Sir
You're welcome!
you make some incredible designs thank you !
You're welcome!
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.
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;
Hi thanks for the tutorial, i also bought the ready-made template. I was wondering if its possible to make the overlay of the higlighted (with cursor} darker than the orther boxes? And if so how to?
You can email me for that
JS is not working in my elementor. i follow all the step, the slider with buttons is not working, kindly help in that thanks
Nicely done! Is there a way to implement this with a custom post type and use a repeater/loop to display the slides? So that the list is easy to maintain?
Yes, it's possible
@@MakeDreamWebsite how can one make this possible
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...
Hey I really want to get the plugin but don't have any payment option!! 😭😭😭😭
How do I get it!!!!😭😭😭😭
You can pay with PayPal, card, google pay. If you don’t have any of this option you can email me. Or if you have bKash also let me know through email…
Thanks so much for the great tutorial!
How can I add a clickable link for each of the images?
I've later added a clickable link version of it with my template. You can check it on my description...
Je n’arrive pas à payer le template avec la carte de crédit VISA
Yes, you can pay with any cards, PayPal, Google Pay, Apple Pay... etc
@@MakeDreamWebsite je vois seulement le mode de payement paddle « Pagayer »
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;
Thanks for your tutorial mate, helps me a lot. I want to link these cards individually to different pages. I can't buy your template, because I don't have a credit card. Can you add a PayPal pay method or can you send me the code for this? Thank you!
You can email me...
@@MakeDreamWebsite What is your email?
@@timvanoosten432 It's contact@makedreamwebsite.com
You can now pay with PayPal: templatish.com/template/elementor-card-carousel
does this work with flexbox container?
is there any option where we can change text on offset along with image slide
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...
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
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...
When I add the css code to the carrousel, the carrousel simply disappears 🙈what am I doing wrong?
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
✨🙌🏼✨
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
How can i display the "Content" for each slide e.g. on hover? Or just in a static way, just like the Title and NAme @Make Dream Website ?
You need to change the css cofe for that...
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...
Awesome! Can I put videos in the cards?
No, you can't!
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...
6:27 when i duplicate the button it doesnt show on the same line instead it shows on another line
Amazing .... can you please also let us know how can we make each card linkable?
Later, I have added a link version of this template and added it with my ready template.
@@MakeDreamWebsite 🤦♂🤦♂
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!
Супер. спасибо!!!
Пожалуйста!
The code is not working anymore, Elementor Updates might have caused this. Also bought the template and it was not working.
It should work on the latest elementor version. Maybe there is another reason of the issue... You can email me. I'll have a look on that.
great tutorial as always! can this type of design can be done for elementor posts widgets?
I need to check that
@@MakeDreamWebsite i tried from your code but its totally different classes to target in posts widget. please bro kindly when you can do a tutorial on elementor posts widget custom styling like this one. thanks alot!
Yeah, I have a plan to make that
But, if you need that immediately you can take my paid service.
This is awesome can you do this with blog posts?
Yes, I'll make a video about that topic later...
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
got the template but not working? I can send screenshot if you like? Thanks
You can email me. I'll have a look
can i add url link on the images? if it can, how to add url link on the images?
I’ve later added a link version with my ready templates where you can put links with each slide from their content fields