Genesis Blocks

Create effective content faster.

You are here: Home / Portfolio Block

Portfolio Block

This feature requires the Genesis Blocks Pro plugin which is available through a Genesis Pro subscription.

The Portfolio block allows you to display your latest work in a customizable grid-style layout. Using a dedicated custom post type, you can create unique portfolio pages complete with a title, text, images, galleries, videos, and more.

Table of Contents:

Create a Portfolio Item

Creating a portfolio item is very similar to creating a post or page. You can use the block editor to create an expressive, visually-impressive portfolio post with images, videos, galleries, and other blocks.

Before adding the Portfolio block to your page, you must first create a portfolio item.

Note: If you try adding the Portfolio block to the page before creating a portfolio item, you’ll see a No portfolio posts found message, as shown in the image below.

Screenshot of "No portfolio posts found" message in the Portfolio block

Click image to enlarge

Go to Portfolio Items > Add New to create your portfolio item.

Screenshot of "Add new portfolio item" in the Portfolio block

Click image to enlarge


  1. Title: Give this item a name. The title will be displayed at the top of the item’s page, as well as in the portfolio grid generated by the Portfolio block.

  2. Content: Add all the information you’d like to share for this item. You can get creative and use text, images, videos, galleries, and more.

  3. Portfolio Types: Portfolio Types allow you to categorize your portfolio items by type. For example, a graphic designer could assign client projects to a type named Projects. Or a portrait photographer could assign a group of photos to a type named Families.

  4. Featured Image: To ensure your portfolio grid displays properly, be sure to add a featured image. This image will be used to represent your portfolio item in the grid.

  5. Excerpt: If you’d like to display a custom excerpt on the grid page, add it here. Or leave this blank to display an automatic excerpt which will be generated from the text entered in step 2 above.

Configure the Portfolio block

After you’ve created one or more portfolio item, you’re ready to add the Portfolio block to your page and configure its settings, as described below.

Portfolio Settings

These settings determine the structure of the grid layout.

Portfolio settings in the Portfolio block

Click image to enlarge

  1. Display Width: Choose how wide the portfolio grid should be displayed on the page.
  2. Order by: Select the order in which the portfolio items should be displayed. They can be displayed in ascending or descending order based on publish date or by name.
  3. Category: Select which category (or portfolio type) of items should be displayed.
  4. Number of items: Enter the number of portfolio items to display in the grid.
  5. Number of items to offset: Enter the number of portfolio items to offset (or skip). Offset is used when you have portfolio items appearing elsewhere on the page (for example in another Portfolio block) and you don’t want to repeat them here.  Offsetting by 1 will show the next most recent item.
  6. Columns: Select the number of columns of portfolio items to display within the grid. In general, the maximum number of columns is 4. However, if you haven’t published at least 4 portfolio items in Portfolio > Add New, the max number of columns will match the number of published items. For example, if there are only 2 published items, the max number of columns will be 2. This prevents uneven rows in the grid display.

Portfolio Content

These settings determine how each portfolio item will appear within the grid layout.

Portfolio content settings in the Portfolio block

Click image to enlarge

  1. Display Section Title: Enable/disable the display of a section title.
  2. Section Title: If the section title is enabled above, enter the title you’d like to use which will be displayed on the site.
  3. Display Featured Image: Enable/disable the display of the featured image that’s assigned to the portfolio item.
  4. Image Size: If featured images are enabled above, choose the display size of the featured images. See below for important notes about the featured images displayed in this block.
  5. Display Title: Enable/disable the display of the portfolio item titles.
  6. Display Excerpt: Enable/disable the display of the portfolio item excerpts. This excerpt will be automatically generated using the text you’ve entered when creating the portfolio item in Portfolio Items > Add New. Or if you entered a custom excerpt when creating the portfolio item, that text will be displayed instead.
  7. Excerpt Length: If the excerpt is enabled above, enter the number of characters to use for the excerpt. Note: If you’re using a custom excerpt, this setting will not be applied and the length will not be limited.
  8. Display Continue Reading Link: Enable/disable the Continue Reading link.
  9. Customize Continue Reading Link: If the Continue Reading link is enabled above, enter the text you’d like to use for this link (example: Read More).
  • Available Image Sizes: The Portfolio block comes with settings to adjust the size of the featured image displayed in the post grid. The block will detect image sizes defined by the theme, as well as the standard thumbnail, medium, large, and full size image sizes provided by WordPress®.1 The block also provides  GB Grid Square and GB Grid Landscape sizes that are designed to fit the grid’s design.

    By default, the post grid will load the full size image, since this image will always be available. However, it is advised that you select an image size that suits your content accordingly.
  • Incorrectly Sized Images: There will be instances where there isn’t an image available for the image size that you select (indicated by a little yellow icon on the image). This could be that the featured image for that post is smaller than the size you selected, or that the image simply doesn’t have that size generated yet. This can happen if your image was uploaded before the image size was defined by a theme or plugin.

    The easiest way to fix this is by regenerating your image sizes by installing the Regenerate Thumbnails plugin. Once installed, go to Tools > Regenerate Thumbnails to run the plugin. This plugin will go through your media library and regenerate the missing image sizes. Once you’ve refreshed your images, you should have images available for all the image sizes in the post grid image size settings.

Portfolio Markup

These settings allow you to change the markup of this block to match your content.

Portfolio markup settings in the Portfolio block

Click image to enlarge


  1. Post Grid Section Tag: Select the HTML tag for the wrapper around the portfolio grid that matches the page’s content hierarchy.

  2. Post Title Heading Tag: Select the heading tag to use for the portfolio item titles displayed in this block that matches the page’s content hierarchy.

Advanced settings

Advanced settings in the Portfolio block

Click image to enlarge

  1. Additional CSS Class(es): You can add one or more CSS class to customize the appearance of this block. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.