Elementor Blog Post Card Carousel/Slider Layout Design in WordPress (Elementor Custom Skin Loop)
34.1 هزار بار بازدید -
2 سال پیش
-
In this tutorial, I'll show
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:
https://makedreamwebsite.com/elemento...
✅Get code snippet for Elementor Post Card:
https://makedreamwebsite.com/elemento...
✅Get this READY-MADE template on TEMPLATISH:
https://templatish.com/template/eleme...
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.
✅Get Elementor Pro:
https://makedreamwebsite.com/elemento...
✅Get code snippet for Elementor Post Card:
https://makedreamwebsite.com/elemento...
✅Get this READY-MADE template on TEMPLATISH:
https://templatish.com/template/eleme...
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.
2 سال پیش
در تاریخ 1401/03/20 منتشر شده
است.
34,135
بـار بازدید شده