Post Listing

Post Listing

The Post Listing block is used to showcase posts on your website. You just need to add the post and set the style then you’re done. Our element’s options give full justice to all needs related to it.

You can create amazing post layouts with lots of listing, customization, and styling options using this block for WordPress using Gutenberg.

Pro tip
Why not add post listing to your website using this widget, You will get multiple post layouts to choose from. Choose the layout which suits your post the best.

Configuration for Post Listing

In Post Listing block you can see the details of your post for Normal, Archive, Single page and you can use search list too.

How to use the Post Listing Block of The Plus Addons For Gutenberg

The Post Listing block comes with different layouts and customized styling options using which you can create stylish-looking posts for your websites.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Post Listing into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Post Listing after “/” sign, eg.“/Post Listing”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content Listing

Select Post Listing Types

Select the preferred Post Listing Types for the post. You will get four options here:
1. Normal Page
2. Archive Page
3. Single Page Related Posts
4. Search List

Select Related Post Type

Select the preferred Post Types for the Single Page. You will get three options here:
1. Based on Category
2. Based on Tags
3. Both

Select Post Type

Select the preferred Post Types for the post . You will get three options here:
1. Posts
2. Pages
3. Nexter Builder
4. Products (Based On Plugin)

Select Style

Select your preferred style for the post. You will get five style options here:
1. Style 1
2. Style 2
3. Style 3
4. Style 4
5. Custom

Select Block Template

Select your preferred template for custom style here.

Select Layout

Select your preferred Layout for the post listing here. You will get three layout options here:
1. Grid
2. Masonry
3. Carousel

Content Alignment

Set the alignment of your content in the listing cards.

Select Style Layout

Select your preferred style layout for style 2 or style 3 here. You will get two style layout options here:
1. Style 1
2. Style 2

Minimum Height

You can set the minimum height of the post for style 4 here.

Query

Taxonomies

Select your taxonomy from the ones available in the dropdown.

Select Category

Select your category from the ones available in the dropdown.

Select Tags

Select your preferred tags. You can add multiple tags.

Include Post

Set which posts you want to include by entering the post title.

Exclude Post

Set your desired posts to exclude by entering the post title.

Display Posts

Set the maximum number of posts to display per page.

Offset Posts

This option is used to hide posts at the beginning of the listing.

Order By

Order your listings based on date, author, title, random, comment count, etc.

Order

Order your listings based on date, author, title, random, comment count, etc.

Columns Manager

Columns Gap/Space Between

Select how much Gap will be there in between the Columns.

Desktop Column

Set the column you want to display on desktop devices. You will get six-column styles to choose from:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Tablet Column

Set the column you want to display on Tablet devices. You will get six-column styles to choose from:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Mobile Column

Set the column you want to display on Mobile devices. You will get six-column styles to choose from:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Filters

Category Wise Filter

By enabling this option you can see the filter category and filter customization options here.

Select Filter by

You can select filter by an option between category or tag here.

All Filter

By enabling this option you can see all category options here.

All Category Text

Change the custom text of the All Filter default text.

Child Category Filter

By enabling this option you can see the child category here only if you have a child category.

Select Style

Select a style for category filter.

Select Hover Style

Select a style for category filter hover.

Filter Name

You can set the custom filter name for category style 4 here.

Alignment

Set the alignment of your filter to left, right or center.

Button

Show Button

Enable the Button options here.

Select Style

Select your preferred style for the button. You will get three style options here:
1. Style 1
2. Style 2
3. Style 3

Alignment

Set the alignment of your button to left, right or center.

Button Text

You can set custom button text here.

Select Icon Type

Icon type is a selection whether you want an icon or not.

Select Icon

You can select an icon from this option here.

Select Icon Position

You can set an icon position whether you want it before the content or after the content here.

Extra Options

Show Title

Enable the Title options here.

Title Tag

Select a title tag for your post.

Select Title Limit

Enable this to limit the title by word or character count.

Maximum Letters/Words

Limit the title by setting the number of words or characters.

Show Excerpt/Content

Enable this to display excerpt content.

Select Excerpt Limit

Set the count value of your post excerpt.

Maximum Letters/Words

Limit the title by setting the number of words or characters for the excerpt content.

Show Post Category

By enabling this option, you can see the post category on each post here.

Select Category Style

You can adjust the category style from this option here.

Show Post Meta

Slide this option to Yes to display Post Meta.

Post Meta Style

Set the styling for your post meta tag using the dropdown below.

Show Date

Slide this option to display the post date.

Show Author

Slide this option to display the post author.

Show Author Picture

Slide this option to display the post author image for the post meta style 3 here.

Show Image Size

By enabling this option, you can see the display image size options.

Image Size

Set the Display Image Size options here.

More Post Loading Options

Select your preferred post loading option from the dropdown. We have provided you with Pagination, Lazy Load and Load More.

Post View On Click/On Scroll

You can display more posts on click and on scroll here.

Button Text

You can set custom button text to load more options here.

Loading Text

You can set custom loading text here.

All Post Loaded Text

You can set custom-loaded text here.

2. Style

The Style tab is used for customizing the appearance of all the Post Listing Block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Post Title

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign suitable color to the text.

Post Excerpt/Content

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign suitable color to the text.

Post Meta

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign suitable color to the text.

Category List

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign suitable color to the text.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Filter Category

Typography

Assign a size, weight, spacing, and much more to fonts.

Padding

Put-in some inner space to an element.

Margin

Put-in some outer space to an element.

Hover Border Color

A color picker to assign a suitable (hover) border color to an element.

Category Filter Color

A color picker to assign suitable color to the text.

Background

Apply suitable background like color/ gradient to an element.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Count Background

Apply suitable background like color/ gradient to an element.

Category Count Color

A color picker to assign suitable color to the count value.

Count Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Content Background

Content Space

Put-in some left space to the content.

Background

Apply suitable background like color/ gradient to an element.

Color

A color picker to assign suitable color to the text.

Featured Image

Image Hover Effect

You can set the image hover effect from this option here.

Background

Apply suitable background like color/ gradient to an element.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Image Height

You can set the minimum or maximum image height here.

Box Background

Padding

Put-in some inner space to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Button

Typography

Assign a size, weight, spacing, and much more to fonts.

Text Color

A color picker to assign a suitable color to the text.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the image’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Padding

Put-in some inner space to an element.

Pagination/Load More Button/Lazy Load

Pagination Typography

Assign size, weight, spacing and much more to fonts.

Pagination Text Color

A color picker to assign a suitable color to the text.

Pagination Text Hover Color

A color picker assigns a suitable color to an element on hover.

Button Text Typography

Assign a size, weight, spacing, and much more to fonts when you selected the load more option.

Text Color

A color picker to assign a suitable color to the text when you selected the load more option.

Background

Apply a suitable background like color/gradient to an element when you selected the load more option.

Border

Draw a border around the element and give width and color when you selected the load more option.

Border Radius

Set the radius curve of the element’s corner when you selected the load more option.

All Post Loaded Text Typography

Assign a size, weight, spacing, and much more to fonts.

All Post Loaded Text Color

A color picker to assign a suitable color to the text.

Loading Spinner Size

You can set the loading spinner size when you selected the lazy load option.

Loading Spinner Border Size

You can set the loading spinner border size when you selected the lazy load option.

Loading Spinner Color

A color picker assigns a suitable color to the spinner when you selected the lazy load option.

Carousel Options

Slider Mode

Select slide direction of slider from here.

Height Ratio

You can set Hight ratio for vertical layout here.

Slide Speed

Slider speed in milliseconds.

Columns

Select how many columns you want to have per slide.

Default Slide Active

Select the first slide to display on slider load.

Next Previous

Select if you want to rotate all rows at once or not.

Columns Gap/Space

Put in some space between columns.

Draggable

If slider is draggable, then you can drag any slide to side and see the next one without using arrows for navigation.

Infinite Mode

If slider is in infinite mode, slider will repeat it self after last slide.

Pause on Hover

Slider will stop sliding on mouse hover.

Auto play

If auto play is enabled, slider will be in play state when page load is completed.

Auto play Speed

Slide shifting time for auto play.

Show Dots

Select if you want dots / slide count or not.

Dots Style ⭐

Select dots / slider counter style from here.

Border Color

A color picker to assign suitable color to the border.

Active Border Color

A color picker to assign suitable color to the currently active slide’s border.

Background Color

A color picker to assign suitable color to the background.

Active Background Color

A color picker to assign suitable color to the currently active slide’s background.

Dots Top Margin

Apply space from top in root container from here.

On Hover Dots ⭐

Show dots only on hover.

Show Arrows

Show arrows / slider navigator or not.

Arrows Style ⭐

Select arrows / slider navigator’s Style from here.

Arrows Position⭐

Select arrows / slider navigator’s Position from here.

Background Color

A color picker to assign suitable color to the background of arrows.

Icon Color

A color picker to assign suitable color to the icons of arrows.

Hover Background Color

A color picker to assign suitable color to the background of arrows on hover.

Hover Icon Color

A color picker to assign suitable color to the icons of arrows on hover.

Outer Arrows

Place arrows outside it’s root container or not.

On Hover Arrows ⭐

Show arrows only on hover.

Centre Mode

Centre mode enables active slide to be shown as visually center or in braced up mode.

Centre Padding ⭐

Put-in some inner space to centered slide.

Centre Slide Effect ⭐

Choose how you want to make look centre slide different from others.

Scale ⭐

Choosing scale would make centre slide look bigger than others. Choose scale for centre & normal slides from below options.

Shadow ⭐

Choosing shadow would create shadow effect on center slide different than others. Apply custom shadow from below option provided.

Normal Slide Opacity ⭐

Apply opacity / transparency for normal slide from here.

Trim Space ⭐

Apply opacity / transparency for normal slide from here.

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Note : ⭐ Symbol as a suffix displays a Pro feature field.

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.