This block provides options to showcase custom post types anywhere on the page. It provides category controls to choose categories or tags.
How To Add The Post & Page Grid Block #
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Post & Page Grid or you can search for it if it doesn’t pop up quickly for you.
- 2.By default, you’ll get the below design-
.png?alt=media&token=055baeb1-4392-4b17-abf8-d2c6d15bfbae)
How To Configure The Post & Page Grid Block #
To configure the content of your Post & Page Grid, switch to the ‘Content’ tab.
Query #
Text Alignment option allows choosing left, center, or right as the alignment of the text content.
Content Type option allows choosing post types – posts or pages.
Taxonomy option is available to filter your post from Categories or Tags. Upon selecting Categories, Category control will be visible to allow you to choose posts according to categories.
.png?alt=media&token=3dad08b8-1628-456f-b997-e9b51417a9ce)
Post and Page Grid Settings #
Under the Post and page grid settings tab, the following options are available.
Number of Items – Increase or decrease the number of posts to display.
Order by option allows you to order posts according to date, title, random order, or menu order.
Order option allows you to order the posts in descending or ascending order.
Number of items to offset option allows you to select the number of posts to skip in the display.
Column – Customize the number of columns that you want to display.
Equal Height – Switch on the toggle to display the posts for equal height.
Post Pagination – Switch on the toggle to display the post’s pagination.
Page Limit – Select the limit of pages to display for pagination
.png?alt=media&token=b76ae12f-e4c6-42dc-b22d-99a8246bfe90)
Post and Page Grid Markup #
Post Grid Section Tag section – You can select the tag that you want to allot to the grid section such as div, header, section, main, aside, footer.
Post Title Heading tag – You can select the tag that you want to allot to the section title from H2 to H6.
.png?alt=media&token=4e260321-ae5d-4eb3-84c3-ba7423277a99)
Post and Page Grid Content #
Display Section Title – Hide or Display a title on top of the post grid. If you choose to display the title, an input box will appear for you to write a title.
Display Featured Image – Hide or Display featured image of post/page if there is one.
Display Title – Hide or Display the title of the post.
Display Author – Hide or Display the name of the author of the post.
Display Date – Hide or Display the published date of the post.
Display Excerpt – Hide or Display the excerpt of the post. If you choose to display the excerpt, a slider will appear for you to select the excerpt length of the post.
Display Continue Reading Link – Hide or Display a continue reading link for the post. If you choose to display the link, an input box will appear for you to customize the continue reading text.
post and page grid
How To Style The Post & Page Block #
Switch to the ‘Style’ tab to customize every element of the Post & Page block.
Typography #
Under the Typography tab, options for font family, font size, font-weight, line-height, and text transform are available for Excerpt, Meta, Title, and Read More Link. You can now set the responsive font size of Title for Mobile and Tablet view.
.png?alt=media&token=98a16ee6-14db-4cd6-9b46-c1016e8698fd)
Border #
Border – Select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
Border Width – Set a width for the border from here.
Border Color – Set color to the border from here.
Border Radius – Set border radius to the box to control corner roundness.
Box Shadow – You can give box-shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.
Hover Box Shadow – This option allows box-shadow on hover to the block with a number of options available for customization such as color, blur, spread, position, etc.
.png?alt=media&token=cd46ec0f-c158-4a5c-827d-f5c1aab6a6f5)
Colors #
Under the Color tab, color options are available for Blog Post Background, Title, Meta, Excerpt, Read More Link, and Read More Hover Color.
.png?alt=media&token=1f793676-b5cd-40f9-865b-b23c622d2664)
Pagination #
Select the Layout and Alignment of Pagination. You can also give border size and border-radius from here and select the next button and previous button text from here. Set color for the text and customize the spacing between numbers from here.
.png?alt=media&token=3bc209f4-fd96-42da-9fe9-0ade6e7d2879)
Spacing #
Spacing can be managed for the content from here.
