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.
23 сен 2024
