Post Grid / Blog List

A robust mobile-friendly widget to showcase your content with great customizability.

Using Post Grid  #

Make sure you have the Post Grid widget enabled from your Dashboard > Droit Addons > Elements.  

Step 1 #

Let’s start by searching the Post Grid widget from the left-hand side menu, and dragging the widget to your preferred section.

Post Grid widget on Elementor page builder

Step 2 #

Now create columns for your grid, You can create as many as you need. Or you can duplicate existing columns.

Column edit menu for Elementor page builder

Step 3 #

To start editing click on the column and a menu will appear on the left hand side of your screen.

Now click on layouts, from here you can add length, content type, post per row and Meta Data such as date, time, comments, author, modified date with icons to your posts.

Post Grid layouts settings tab

Step 4 #

Next up you can add query to your grid, from here you can add recent post, category post, and manual selection.

Post Grid query settings tab

Step 5  #

Rearrange your content within each post from here.

Content ordering settings tab for Post Grid widget

Step 6 #

Add content to your read more button from here. You can edit the read more text and add an icon to it.

Post Grid read more settings tab

Step 7 #

Hide/Show your title, content, meta, read more, show category, and image from here.

Post Grid show/hide content settings tab

Step 8 #

Set your Pagination settings from here.

Post Grid pagination settings tab

Step 9 #

From the general settings you can stylish your grid with background, padding, margin, border and shadow.

Post Grid general style settings tab

Step 10 #

Add background and padding to your posts from here.

Post Grid blog content box settings tab

Step 11 #

Customize your title with typography, color, fonts, and more from here.

Post Grid title settings tab

Step 12 #

Same as the title section you can further customize your description from here.

Post Grid title settings tab

Step 13 #

Customize your images to fit your post grid from the thumbnail option. You can resize, add padding, margin, border, and add shadow to your image.

Post Grid thumbnail settings tab

Step 14 #

To customize your read more button, click on the button option, from here you can add typography, padding, background, border and more. 

Post Grid button settings tab

That’s it.

Powered by BetterDocs