Elementor Blog Post Card Carousel/Slider Layout Design in WordPress (Elementor Custom Skin Loop)

In this tutorial, I'll show you how to make Elementor Blog Post Card Carousel/Slider Layout Design in WordPress with Elementor Custom Skin Loop.

✅Get Elementor Pro:

✅Get code snippet for Elementor Post Card:

✅Get this READY-MADE template on TEMPLATISH:

Have you ever seen this kind of blog post layout with a cool hover effect? If not, then I will show you how to design beautiful cards, how to organize them with an awesome overlapping layout, and also how to add a cool hover effect with that.

If you want, you can get this post template from my Gumroad shop. But, if you don't want to get this post carousel template, you can also start it from scratch.

First, you need to create a container and inside this create 2 containers on left and right. We have make a gradient border on our left container and add some content inside that.

On the right side, we add the post widget and also use the Elementor custom skin loop plugin to create a customized loop template. Then, inside the loop we have also added the featured image, title, category and all other data and also design the post items.

After designing the loop, we have select that loop template from that widget option. And finally, add some CSS and JavaScript code to create that overlapping layout and also the hover effect. We have also add a multicolor border on the right side of the cards. Finally, I also check this on tablet and mobile devices.

So, That's how you can create this custom post slider layout in Elementor. If you enjoy this blog post design in WordPress tutorial, don't forget to like and subscribe.

[trishajoanbaltazar]

I don't understand why you are so underrated!

[omurmigisi]

Love this. It is so so so amazing. Each step is explained in detail, one by one. Thanks for this great tutorial.

[ugurguven]

you may be the best tutorial i've ever seen. Thank you :)

[nadeem]

i cannot find custom skin it only showing 3 options cards classic and full control ther eis not option named custom in post style ihave pro ver installed and clear cach and recheck Flexbox Container active install and activate the "Elementor Custom Skin" plugin already installed

[olanrewajuoluwadunmininu]

This is so Amazing. Thank you for yet another Wonderful Tutorial.

[mahmudulhasanbijoy]

Great tutorial. At last finally find something unique for carousel design.

Can you please tell how to add left and right arrow and make it functional for the carousel instead of just dragging!

[zhiyuenkhosummer]

I did a little work around this works perfectly!

[WaffleBytesIT]

but in my site not showing choose custom template option .

[YAFONOOB]

Very clever design. You did a good job showing and explaining it. Thank you.

[davidmuller]

hi there amazing tutorial, can i change the cintent to be not dynamic also ? when i purchase the reday template?

[SamsonAdeyemi]

lovely..I am actually hoping that we can slide a blog post with images, it will be so nice

[royennns]

Hello sir, this so great tutorial.

But i have question, can this work in section not container?

[marcvangijn]

Very, very nice!!! Compliments! Gonna implement this if I can as some as possible. One question; what is the function for the 'see all' - button? Did I miss something there? Would be nice to give it the 'scroll/drag' function.

[ibrahimbelfakir]

Thank you, I have benefited a lot, but I have a small problem. I do not know how to make the other loops, if it was made in the same way, how can I show it all inside the post as you did?

[jadebowes]

I don't have the 'container' widget on my Elementor and I am on the pro version. Is there an alternative?

[deanazelinova]

Hi, very good tutorial. I imagine if you can rewiev tutorial for Elementor loop. Now we don't need third party plugin. Thank you

[Art-]

Thank u so much.
I hope you can make some tutorials for Crocoblocks plugins too, like Jet Engine Listing Grid.

[wmougayar]

The Left/Right arrows stopped working after an Elementor plugin update. Clicking on the arrows goes to the top of the page. Any ideas what might be going on? There's a # currently in the Button Link field.

[rmigallois]

Hello thanks for this great tutorial! I have lil problem, when i go in the posts layout options i don't have custom layout choice, i only have classic, cards or full content. Could you help me please ? Thanks

[nawabsherif]

Great tutorial! completely enjoyed your work and creativity.. I do have a query.. Elementor has introduced their own loop grids.. i tried to build the same design using that elementor loop grid instead of using custom loop plugin but the hover effect and the overflow property of the card is not working. I need to change the css code accordingly. Can you help ?