fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

February Updates
Currency Converter Cover
Layers Widget

Post Magazine Grid

Using “Post Magazine Grid Widget” you can create dynamic post magazine layouts for your WordPress posts on your Elementor website. By listing posts in a space-saving grid layout, each post takes up less amount of space and you can highlight certain posts more than others. It also supports the advanced options like connected widgets, post pagination and ajax filtering.

 

Let’s look at each of the options in the “Post Magazine Grid” below.

Install Post Magazine Widget for Elementor

This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Post Magazine”
  3. Hover over the widget in the search results and click install
  4. Add your “Post Magazine” widget to any Elementor Page

General Settings

1

Post List Image Size

Select the desired size for post list image.

  • Medium Large
  • Large
  • Medium
  • Thumbnail
  • Full Size
  • Woocommerce Thumbnail
  • Woocommerce Single
  • Woocommerce Gallery Thumbnail
  • Shop Catalog
  • Shop Single
  • Shop Thumbnail
2

Grid Columns

Set the number of columns you want to display.

3

Grid Gap

Set the gap between grid items.

4

Intro Number of Characters

Set the number of characters to display as intro.

5

Button Text

Type the custom text for button.

6

Responsive Breakpoint

Set the breakpoint to change the layout to responsive.

7

Responsive Number of Columns

Set the number of columns you want to display in responsive layout.

8

Show Empty Message

It shows the empty message when no posts answer the query.

9

Empty Message

Type the custom text for empty message.

Layout Settings

Show or hide elements in Post Magazine Grid.

1

Show Categories

Show/Hide the categories of posts.

  • No
  • All Categories
  • Only Main Category
2

Show Title

Show/Hide the title element.

3

Show Intro

Show/Hide intro in magazine grid.

4

Show Button

Show/Hide the button.

5

Meta Data

Show/Hide the meta data of posts.

  • Hide
  • After Intro
  • Before Intro
6

Show Date (Meta Data)

Show/Hide the date meta data.

7

Date Icon

Choose an icon to display as date icon.

8

Show Author(Meta Data)

Show/Hide the author name.

9

Author Icon

Choose an icon for author.

Grid Settings

Set the column and row span for each item.

Post Query Setting

Select the exact posts you want to show on your Post Magazine Grid.

1

Posts Source

Choose any of the below options for your post source.

  • Current Query Post
  • Custom Posts
  • Related Posts
  • Manual Selection
2

Post Types

Choose the type of post you want to display.

3

Include By

Include the posts from different options given below

  • Include Sticky Posts
  • Get Only Sticky Posts
  • Author
  • Date
  • Post Parent
  • Post Meta
  • Most Viewed
  • ID's from PHP function
  • ID's from Post Meta
  • ID's from Dynamic Field
4

Include By Terms

Choose specific posts that you would like to include from your selection by adding rules.

  • Include By Terms Relation
  • Include Terms Children
5

Exclude By

Choose specific posts that you would like to exclude from your selection by adding rules.

  • Terms
  • Current Posts
  • Author
  • Post Without Featured Image
  • Posts with current category
  • Posts with current tags
  • Offset
  • Avoid Duplicates
  • ID's from Dynamic Field

To know more about post query setting, please visit our article on Advanced Post Selection

Post Pagination and Ajax Filtering

1

Pagination

Display the pagination for your post grid

  • None
  • Numbers
  • Using Pagination Widget
2

Enable Post Filtering

When turned on you can use all the post-filter widgets like tab filters, load more and infinite scroll.

3

Filters Behaviour

  • Ajax
  • Ajax and URL change - Will change the URL each time the filter changes and add the possibility to use browser back navigation.

Learn more about the diffrent Ajax filters that can work with the Post Magazine Grid in the links bellow:

Post Magazine Grid Widget Styling

Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.

Item Styling

Set the item background, height, shadow, border, and radius.

Image Styling

In this section, set the image opacity, positioning, and blend styling.

Image Overlay Styling

You can set the image overlay color and image.

Content Styling

In this section, set the content padding, margin, background, alignment and border.

Category Styling

Style the color, background, typography, and padding of the post category.

Title Styling

Here, you can style the color, typography, spacing, etc. of the title.

Meta Data Styling

You can style the color, typography, spacing, width, and alignment of the metadata.

Intro Styling

Set the intro color, typography, and spacing.

Grid Styling

Style the grid background, padding, border, and radius.

Button Styling

You can style the padding, radius, color, background, spacing, border, typography etc. of the button.

Button Hover Styling

This section lets you set the button hover typography, color, background, and hover effect.

Empty Message Styling

Style the typography, color, background, radius, padding, margin etc. of the empty message item.

Usage Examples

Here are some live use cases for the Post Magazine Grid Widget.

Post Magazine Grid with Post Pagination.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!