Stand with Ukraine. Fight for freedom and democracy

Back to contents

How to arrange the blog posts in the form of attractive tile layout. JetBlog Smart Posts Tiles widget overview

Showcase your posts in a stylish way. This tutorial explains how to display the posts using Smart Posts Tiles widget, arranging them in the form of tiles.

The importance of beautiful posts layouts can be hardly overestimated. JetBlog plugin is made for assisting you in displaying posts. There are nine layout variations, diverse style settings, the carousel option, and more cool features that can be used to make your posts look better than ever! All these you’ll get by managing Smart Posts Tiles widget from JetBlog plugin.

So, let’s dive in and learn how to use Smart Posts Tiles widget, putting in motion your ideas about posts design!

Arranging posts into tiles layout with Posts Tiles

Step 1 — Open a page or template to which you need to add posts tiles layout.

Step 2 — Find Smart Posts Tiles widget and drag it to the section.

smart posts tile widget in elementor sidebar

The default posts will be displayed, arranged according to the 1st layout. Note, that you can select custom posts as well. We’ll describe this later on.

So, choose a suitable layout for your posts.

Step 3 — Now, you can set the preferable height and width of the boxes and play around with the image size value.

adjusting the smart posts tiles height and box width

Step 4 — In case your posts have got categories or tags, you can enable Show Posts Terms option. Select which terms you want to display, and set the maximum number of terms to show in the post box.

Step 5 — Afterward, set the length of the posts’ title. By clicking arrows you can choose the number of words for the title or leave it as 0 to show full title.

Step 6 — The same you can do with the posts’ excerpt. Here you also have an opportunity to set the excerpt trimming ending. By default, it is three dots, but you can type in your own ending symbol. Moreover, you can toggle to “yes” the option that allows showing the excerpt on small boxes only on hover.

excerpt settings in the smart posts tile widget

Step 7 — In the next subblock, you can add or hide the post author, date and comments. Just enable the Post Meta option. Additionally, there is an icons library where you can set the icons to show up for the author, date, and comments, marking the meta information. You can select the icon that fits or remove it completely.

active post meta toggle and its options

Customizing posts query

In this block, you select the posts you need to display, query posts by categories, set posts’ offset, etc.

Step 1 — The first option you face in this block is Use an Archive Template. You should enable it in case you are creating an archive template. In any other case, don’t toggle it to “yes”.

Step 2 — The next option is Use Custom Query, and it allows to generate custom query in WP Query Generator available at Crocoblock site. Using it, you get advanced opportunities to customize the posts query. You can find ways to works with this tool in this tutorial.

query and controls settings section

Step 3 — You can also use the default query tools available for this widget in case the query won’t be complex. You can easily select the Post Type from the dropdown list to set the specific custom post type for being displayed.

choosing a post type in the query and controls settings

In case, you need to display posts from different post types with common layout style settings, you can simply duplicate the section and select the needed post type.

Step 4 — The next option is sorting posts by categories, tags or IDs. Depending on the set query type the options below will allow you to either set the post IDs, categories and tags to include and exclude from showing up.

setting post type filtering options

Step 5 — Let’s jump to Posts Offset option. This option allows us to skip some of the posts that were already shown somewhere on the page. For instance, you need to display more posts with the help of Smart Posts Tiles widget. To do this you should duplicate the widget and set the preferable offset, skipping the fiest posts that were already displayed above, from being repeatedly shown. In my case, I need to showcase the next six posts, so I set 6 offset (this is how I skip the previous six posts).

smart posts tile widget offsets

Then, I want to add one more widget with posts and duplicate the section once more and set 12 offsets.

Step 6Filter by Custom Field option allows filtering the posts by custom field or even custom field value. In case you’ve got the custom fields for your posts, you can specify the meta_key and the particular values (regarding the content added to the field) to add extra query settings.

Step 7 — One more useful feature of Smart Posts Tiles widget is Сarousel option. Just enable the carousel option and choose the number of slides to show. Furthermore, you can enable Autoplay and set its speed, show control arrows and select the arrows type. In case you need to show arrows only on hover, you should toggle to “yes” the corresponding option.

Step 8 — Additionally, in the Custom Fields subblock you can pull out the custom fields from the database. Just paste the key from the database tables and set the label.

custom fields subtab in the smart posts list settings

Styling Smart Posts Tiles

As was mentioned at the beginning, each element of the Smart Posts Tiles widget is fully customizable and has various styling settings. In light of the fact that you can be an experienced Elementor user, I just remind you about this opportunity.

So, here is what we can achieve 🙂

smart posts tile on the front end

Thank you for reading and good luck while working with JetBlog plugin!