Back to contents

How to create a posts carousel using JetElements Posts widget

This tutorial will guide you through the process of creating a posts carousel using Posts widget, one of the 50 user-friendly widgets.

The Posts widget from JetElements plugin is a great way to showcase a lot of posts without occupying a lot of space on the web page. To create a posts carousel you should have several posts (the more the better) already created on your site.

Adding Posts Carousel with JetElements Posts Widget

Step 1 — Firstly, drag and drop the Posts widget to the page’s canvas in Elementor page builder.

Posts widget for Elementor

Step 2 — Secondly, navigate to the Content > Carousel block and turn on the Enable Carousel option in order to activate the carousel.

Posts widget adjustment

Step 3 — After that, go back to the Content > General block to specify the number of posts. Here set the number of columns in the Columns dropdown, pick the Post Type, etc. If you don’t want some posts to be displayed, as they are already published, just use the Post offset option.

Post widget general settings

Step 4 — Here, you can decide on the information you want to be either shown or hidden. It could be the Posts Title, the Posts Featured Image, the Posts Meta (the Posts Author, the Date, the Comments), etc.

Step 5 — You will be also able to add the “Read More” button below each post. Just enable the Show Read More Button option to allow your visitors click on it to navigate to the post’s page.

Posts widget set up

Step 6 — In order to customize the carousel navigation, proceed to the Content > Carousel block. Here, decide which type you prefer, the Arrows or the Dots (or maybe both?).

Posts widget carousel options

Step 7 — Then, you enable the Autoplay option if you want the posts move left automatically showing the range of posts you have. Don’t forget to set the Autoplay Speed and Animation Speed. Don’t make the posts move too quickly as visitors will not have enough time to read even through the titles!

Step 8 — It is also a great idea to make the titles shorter using the Title Word Trim option in the Content > General block.

Step 9 — Let’s design the posts carousel to make it look more engaging. In order to do so, open the Style block. First of all, if you want to set the distance between the columns, go to the Style > Column block. Set the column padding here. The larger the padding value is, the wider the gap gets.

Posts widget style settings

Step 10 — After that, in the next blocks you are able to customize the Post Item, Post Thumbnail, Post Item Content, Title, Meta,Excerpt, Button, Carousel Arrows, Carousel Dots and Custom Fields. For instance, you can make the post’s thumbnail image round, change the typography and color of the title, the meta data, and the excerpt.

Step 11 — Afterwards, design the “Read More” button when normal and on hover in the Style > Button block. You can as well add an icon to the button by enabling the Customize Icon option.

As you can see, it’s quite easy to set up the posts carousel!