Grids

To display your blog posts in a thumbnail grid on your blog, category, or archive pages, you will not use a grid module within your page or layout. Instead, you will edit the settings for your WordPress content module so that posts appear in a grid layout.

To display your blog in a thumbnail grid, follow these steps:

1. Edit your blog page layout using the ProPhoto editor.
2. Click the pink settings gear for your WordPress Content module within your layout.
3. In the popup, navigate to the Excerpt styles > Excerpt settings options.
4. Check the option to show excerpts on blog posts pages.
5. Enable the grid excerpt style.
6. Use the Grid Excerpts options to choose the grid style, crop/masonry, and sizing for your blog page.

For more information about using excerpt grids for your blog pages, category pages, or other archives see our separate Excerpts on posts pages tutorial.

Insert a grid into a ProPhoto Layout by placing a grid module into a block. For example, you could work on a separate Portfolio page layout featuring a grid module added along the top to link three galleries.

To insert a grid in a ProPhoto layout, follow these steps:

1. Visit your page and use ProPhoto to edit your layout.
2. In the sidebar, visit the Elements > Grids area.
3. Drag into a block the grid style you wish to use.
4. A grid will be added automatically, set to the default Recent Posts type. But you can select any grid type in the module settings popup.
5. Use the popup Grid Settings area to setup the items & options for the grid, such as size and column controls.

This clip demonstrates the setup of a simple galleries grid which links directly to ProPhoto galleries which have already been created:

In many cases it is fastest to insert a grid directly into a WordPress page instead of making a ProPhoto layout for one page and then assign the layout to the page and add a grid to it.

To add a grid in a page or post in the WordPress editor, follow these steps:

1. Edit a page or post in WordPress.
2. Click the + button within the editor.
3. Browse or search to click the ProPhoto Grid block.
4. A "recent posts" grid will be inserted by default. Use the sidebar to edit the block's settings.

The grid block provides several options in the sidebar, including grid type for linking to different things, grid style for choosing the appearance of text, layout for cropped or masonry thumbnails, spacing, width limits, and column limits. Use these controls to alter the look & behavior of a grid.

This video clip demonstrates the setup of a simple galleries grid which links directly to ProPhoto galleries which have already been created:

To learn about how to work with each of the different types of grids you can use to link to different content, see the grid types section below.

To learn about how to change the appearance of title, description, or "read more" text for a grid, or to control background color, border or other appearance options, see the grid styles section below.

NOTE: The content of your page should be visible as long as your ProPhoto layout displays the page content with the WordPress Content module. If you do not see your grid when you view the page, confirm that the layout has this module somewhere in the layout.

To create a new grid style, follow these steps:

1. Use ProPhoto to work in a page layout–preferably with a grid on screen to experiment with.
2. Navigate in the sidebar to the Elements > Grids area.
3. Click the button to Add grid style and edit the default "New Grid Style" title to something helpful.
4. Make selections in the sidebar Basic and Advanced tabs to achieve the look and layout for grid items that you like best. (see below for details)

After a grid style is created, simply edit any grid in your layouts or page content and choose the new style to apply it to a grid.

There is a tremendous amount of control over the look of each grid you create. The appearance of a grid is controlled by several factors, including:

• images used in the grid
• basic grid style options
• advanced grid style options
• individual grid options

Details for each of these grid styling capabilities is explained in depth, below:

Grid item image

Each grid item will use a photo from the page, post, or gallery that it links to. By default, this is the first image appearing within the content. Category grids show the first image from the latest post added to each category.

If you want to control which photo is used for each item in your grid, use the the Featured Image option in each page/post/gallery you create within WordPress. You can pick a different image or even upload a photo that doesn't even appear in your content, and it will be used for your grid thumbnail.

Grid style basic options

Each grid style you setup can apply a set of appearance settings to each grid you create. Use multiple styles to achieve different looks for different grids.

Basic style options allow you to choose whether your grid should display text below each thumbnail, or if text should be shown overlaid on the thumbnail when you rollover the grid items.

You'll also find that you can change the title and text appearance by applying font styles and alignment options, as seen in this example:

Further down the basic settings for your grid style are the controls for background color and background image which are applied to each grid item (not the whole grid), as seen in this example:

Grid style advanced options

Each grid style has a separate tab in the sidebar offering advanced style controls that are used less frequently:

Thumbnail images in a grid can be displayed with rounded corners and can also have a border around the image, as seen combined in this example:

Apart from the border around grid images, there is also a set of controls for border and spacing around each item within the grid, as seen in this example:

Below the advanced settings for borders are the options for background color and background image which fill the entire space the grid takes up in your layout–appearing behind the group of grid items and their own background settings, seen in this example:

Near the bottom of the advanced settings sidebar is the fallback image option where you can upload/select an image or graphic to use for any grid items which have no photo to use, as seen in this example:

Read more link

Grid styles can optionally display a read more item that links to the page content. Enable or disable this option in the advanced grid style settings. You can also change the text, select a font style that has the link appearance you want, set alignment and spacing.

You can also setup the "read more" link using an image or a tile design you select. Tiles can even provide hover effect for layers you create, allowing for a unique appearance.

This is the grid type that is selected by default when you drag a grid module into your layout. It shows the most recent posts from you blog and automatically updates with the latest posts when you publish new content. This grid type is usually only helpful if you want to feature just a few of your most recent posts at a time, such as on the front page of your website.

NOTE: if you want your blog to appear in a grid layout, make sure to edit your WordPress content module settings to use an excerpt grid appearance instead of adding a grid module in your blog layout!

This grid type allows you to manually select from your published posts or pages created in WordPress, adding each one individually to the grid. Since this type is created manually, it will not add items automatically—you must edit it when you need new posts or pages to be listed, so consider one of the other automatic grid types if you need posts to appear in the grid automatically after publishing.

1. Choose the Selected posts grid type.
2. Click "Add Item" to choose a post or page to add.
3. Use the selection screen to pick posts or pages to include in your grid.

You may filter to show only posts or pages, or search by name in the selection view. See this clip for a demonstration:

An alternative to using a manual grid like the Selected posts type is to setup a category in WordPress which you can apply selectively to your blog posts. By using a Recent posts from category grid type (see below), your grid can update automatically when blog posts are added to that category. One example of this alternate approach would be to have a "Featured Posts" category, and a grid which shows posts added to that category.

This grid type will automatically represent each post category that your WordPress blog is using.

NOTE: only blog categories which have at least one public post will be shown, so if a category is not being shown make sure it is applied to a public blog post!

The image used for each category will automatically come from the latest post published in the category. In decreasing order of priority, each category grid image will come from:

1. the post featured image
2. the first image inserted in the post or in a ProPhoto gallery appearing in the post
3. the fallback image setup in the grid style (Advanced tab of the grid style)
4. an automatic placeholder graphic provided by ProPhoto

Overriding category images

A WordPress plugin can be used to set a persistent image for any of your categories. Try installing one like this, and you can set an image for each category in the "Posts > Categories" area of your dashboard.

Reordering categories

WordPress will order blog categories alphabetically by default. If you want to display your categories in a different order, try installing  this plugin - Category Order and Taxonomy Terms Order - and you can visit a new "Posts > Taxonomy Order" area in your WordPress dashboard to reorder your categories in any arrangement.

This grid type displays a limited number of recent posts from a selected blog category, and it will update automatically to reflect the latest posts as they are published in that category. It is typically used to feature a small number of posts, for example to feature the most recent weddings blog posts below your "Weddings" gallery in a portfolio page.

NOTE: WordPress automatically creates category archive blog page where your most recent posts from each category can be seen. If you'd like to link to this page, try using a category page link and display your category pages in a grid with the excerpts grid feature as an alternative to making a special layout with the grid type described above.

This grid type displays a limited number of posts from the blog in order of the most comments left on each post, and it will update automatically as new posts and comments are added to your blog. Simply choose a style for the grid, the number of posts to show, and the sizing/spacing controls and the rest is handled for you.

This grid type automatically displays recent posts from a public Instagram account. Using this grid type requires that you first authorize an Instagram account in the ProPhoto Settings area, so make sure that has been done before using this grid type.

This grid type allows you to manually select ProPhoto galleries you have created, with each grid item linking directly to each photo gallery for viewing. Linking directly to a gallery is a quick and easy way to show off your photos without the need to insert a gallery into a separate page or layout.

1. Choose the Galleries grid type.
2. Click "Add Item" to add a ProPhoto gallery to the grid.
3. Use the selector tool to pick galleries to include in your grid.

NOTE: Linking directly to galleries will view them as individual pages, typically using the default layout of your ProPhoto design. If you do not see your gallery displayed when visiting the page, confirm that your ProPhoto layout includes a WordPress Content module.

This grid type can be used when you want to manually link to pages not available with the other grid types. (usually on another website) For example, a custom grid linking to vendor websites or publication websites that have featured your business.

1. Choose the Custom grid type.
2. Click "Add Item" to make a new grid item.
3. Type/paste a full URL address (including the https:// or http:// part!) for the grid item to link to.
4. Enter a title for the grid item.
5. Choose whether the link should open in the same browser window/tab or in a new one when clicked.
6. Provide optional description text about the grid item.
7. Select or upload an image for the grid item.

Repeat steps 2 through 7 for each grid item.

NOTE: URLs for links should always include the full address including the http:// or https:// at the beginning. Without a full URL, links may be treated as relative links within your website.