Fraud Blocker
BdThemes Web Solution Company

Table Of Contents

How to use Post Grid widget by Element Pack Pro

The Post Grid widget is a popular post interface to showcase featured or ongoing posts inside your landing page. This is one of the most feature-rich widgets from Element Pack.

Let’s explore the widget customizations.

Inserting Widgets

inserting post grid widget

Please find the Post Grid widget from the widget panel and drag it inside the page editor. Note that you need both Element Pack and Elementor plugins installed in order to use this feature.

Content tab customizations

Layout section

Go to Content > Layout

image 160 - BdThemes

The first section is the layout section, and here you can customize the Skin of the post grid widget, along with determining the number of posts to display through the Item Limit option. You can configure the Column Gap to adjust the spaces between the grid items.

image 161 - BdThemes

The Skin option lets you choose from 10 different post layouts. Each skin has unique presentations.

image 162 - BdThemes

You can adjust the Primary Item Height scrollbar to change the height of the primary items (the two posts on the top). The Image Size option is also for the primary items to change the image dimensions.

image 163 - BdThemes

Then you can change the number of Columns for the secondary items, along with a custom Secondary Item Height scrollbar. There is another Image Size option available for the secondary items. Also, there is a content Alignment option that works on both primary and secondary items, plus an additional only Secondary Alignment option.

Post grid widget - BdThemes

Ajax Load More Switcher added here to work on Ajax Feature. When you enable the switcher it will appear Load More Item Box and Load More Button. As you demonstrate in the screenshot above. When you click on the Load More Button it will show more items as you mention in the Item box.

Query section

Go to Content > Query

image 165 - BdThemes

In this section, the first option lets you select a Source for the Post Grid widget to show content on display. The source could be posts, pages, portfolios, etc.

image 166 - BdThemes

The Include and Exclude fields are filters that let you show or hide specific posts by Authors or by Terms. For instance, within the include subsection, you can select Terms and then select a category from the field below to show posts only belonging to that category.

image 167 - BdThemes

Then below, the Offset option lets you choose a post by the hierarchical order using simple numbers to exclude that post from displaying. Then there are some sorting options below, along with two switchers that can hide Sticky Posts and Posts without Featured Images.

Additional Section

Go to Content > Additional

image 169 - BdThemes

In this section, you will find a bunch of switchers that let you show/hide certain elements from the widget interface. For instance, you can turn off the Author switcher to hide author information from the post grid widget.

A couple of switchers are turned off by default: the Human Different Time, Tags, Show Text and Read More. Turning on these switchers will reveal those elements on the grid as well as generate styling options inside the Style tab.

Style tab customizations

The Style part of the Post Grid widget lets you customize the appearance to personalize the design according to your preferences.

Item section

Go to Style > Item

image 170 - BdThemes

Here, you can adjust the content padding and content margin of the Post Grid. However, make sure to properly adjust the padding & margin values to avoid overlaps or line breaks.

image 171 - BdThemes

Then you can go for an overlay color to act on top of the images (or Post Grid backgrounds) while controlling the overlay opacity.

image 172 - BdThemes

It is possible to set up a border around the grid items with a custom border width, color, and border radius. You can also use padding to adjust the area around the items or use box shadow to add 3D shadow effects.

Image section

Go to Style > Image

image 173 - BdThemes

In the Image section, you are going to find the CSS Filters option that lets you configure the color, blur, brightness, and more properties to enhance the images.

Title section

Go to Style > Title

image 174 - BdThemes

For the title part of the Post Grid widget, you can customize the color of the title text as well as its hover text color. The spacing scrollbar lets you adjust the gap between the title and meta.

Also, you will find different Typography options for the Primary items (the first two on top) and the secondary items.

image 175 - BdThemes

Then again, there is a switcher named Advanced Style within the Title section. Turning on this switcher will reveal more styling options like background type, text shadow, border, box shadow, and padding. By utilizing these options, you can generate more unique designs.

Author section

Go to Style > Author

image 176 - BdThemes

In this section, you can customize the author info text by changing the text color, hover color, and typography.

Date section

Go to Style > Date

image 177 - BdThemes

Here, you can change the color, divider color, and typography to customize the date text.

Comments section

Go to Style > Comments

image 178 - BdThemes

You can change the color and typography for the comments icon which is a part of the meta text.

Category section

Go to Style > Category

image 179 - BdThemes

For the category of the Post Grid widget, you can easily customize the text color and background color with additional border, border radius, padding, and margin options.

Also, you can adjust the space between the categories (applicable for multiple category texts in a single post) as well as customize the typography and Box shadow for the category.

Note that the color options are available for hover also.

Video Assist

Please watch the videos to learn more about Post Grid widget. See the demo page to get more live examples.

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.

Our supported payment system and security badge