• Menu
  • Skip to right header navigation
  • Skip to main content
  • Skip to primary sidebar

Before Header

Why Genesis is the Foundation of Any Smart WordPress Design ↴

Flagship Content

Web design tutorials for service business owners.

  • Search
  • Home
  • Start Here
  • Content
    • About
    • Flagship Content: How is it different to cornerstone content?
    • Homepage Content Blueprint
    • Content needed for a Service Business website
  • DIY Page Layouts
    • Start Here
    • Atomic Blocks Layouts
      • View The Layouts
      • Using Layouts
      • Adding blocks to an Atomic Blocks layout
      • Tips For Using Layouts
      • Problems and Solutions
    • Examples of Atomic Blocks
    • List of Atomic Blocks
    • List of WordPress Blocks
    • Block Navigation
    • Eye Candy
    • Tips for New Users
    • Blocks that Serve a Specific Purpose
  • Navigator Page
  • Search
  • Home
  • Start Here
  • Content
    • About
    • Flagship Content: How is it different to cornerstone content?
    • Homepage Content Blueprint
    • Content needed for a Service Business website
  • DIY Page Layouts
    • Start Here
    • Atomic Blocks Layouts
      • View The Layouts
      • Using Layouts
      • Adding blocks to an Atomic Blocks layout
      • Tips For Using Layouts
      • Problems and Solutions
    • Examples of Atomic Blocks
    • List of Atomic Blocks
    • List of WordPress Blocks
    • Block Navigation
    • Eye Candy
    • Tips for New Users
    • Blocks that Serve a Specific Purpose
  • Navigator Page

Post and Page Grid Block

These are the settings for the Atomic Blocks, Post and Page Grid block.

You are here: Home / Atomic Blocks settings / Post and Page Grid Block

I’m writing this post in the early summer of 2019, and in my opinion the Atomic Blocks Post and Page Grid block is still a work in progress.

Having said that, this is still a really useful block. It just needs a bit of refining which I’m sure will happen as the WordPress block editor matures.

An example page

First take a look at an example of the Atomic Blocks Post and Page Grid block in use

List view or grid view?


List view

This is a screenshot of the Atomic Blocks Post and Page Grid block using the list view.


Grid view

This is a screenshot of the Atomic Blocks Post and Page Grid block using the grid view.

The settings

As with all blocks there are two places to look for settings. The screenshot below shows the settings above the selected block.

Select a block to see the settings.

A.) I chose Align Center width option. My theme has two other width options, wide width and full width.

B.) I chose the list layout. The other option is grid layout.

Most options are in the sidebar

I chopped the settings sidebar into pieces so I could explain more clearly what each setting does.

Post and Page Grid settings

1.) You can build your grid from posts or pages. I chose posts.
2.) List your posts from newest to oldest or from A to Z,
3.) I made, then used, a category that contained the specific posts I wanted to show in this grid.
4.) Number of items (posts) to display.
5.) Offset enables you to start your list with the 3, 4th or 5th post in the category etc. Useful if you’ve already displayed some posts from this category on this page already.

The settings above used drop down lists. The settings below use toggle switches to show or hide page elements such as the post title or featured image.

Post and Page Grid Content

6.) Don’t confuse the post title and the section title. The section title displays above the post grid.
7.) Show or hide the featured image in your post grid.
8.) If you display the featured image in your grid, you can choose from several image sizes. From thumbnail to full size.
9.) The featured image can be square or landscape.
10.) The post title displays below or to the side of the featured image in the post grid.
11.) Author’s name: show or hide the post author’s name.
12.) Post date: show or hide the day the post was published on.
13.) Post excerpt: show or hide the first few words in the first paragraph of the post.
14.) If you show the post excerpt you can control how many words are included here.
15.) Continue reading link: show or hide.
16.) Continue reading text: change this to “more info” or anything else that entices your readers to read more.

Grid markup and CSS

Grid markup lets you change the block’s HTML to match your own theme’s code.

Advanced CSS enables you to add CSS classes to this specific block.

Both of these options are beyond the scope of this tutorial.

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Get Premium WordPress ThemesChoose Your Theme

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Get Genesis Framework & StudioPress Themes free.Free themes with hosting

High Quality Hosting

Filed Under: Atomic Blocks settings

Previous Post: « Share Buttons
Next Post: Spacer Block »

Site Footer

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy

Copyright © 2023 · Mai Law Pro on Genesis Framework · WordPress · Log in