Portfolio – Responsive Blocks

Display multiple portfolios throughout your WordPress website in a professional-looking grid with the Gutenberg Portfolio block.

How To Add The Portfolio Block #

1. 1.Open a page or a post and click on the plus icon to add a new block and look for the Portfolio or you can search for it if it doesn’t pop up quickly for you.
2. 2.By default, you’ll get the below design-

How To Configure The Portfolio Block #

To configure the content of your Portfolio block, switch to the ‘Content’ tab.

Query #

• Content Type: Select the content type you want to get a portfolio for – Post, Pages, Courses, or Lessons.
• Taxonomy: Select the type of taxonomy you want to display in your list- Categories or Tags.

Layout #

• Columns – Decide the number of columns to display.
• Number of items – Decide the number of items you want to display.
• Image size – Select the size of the image as Full Size, Thumbnail, Medium, or Large.
• Image ratio – You can set the image ratio from here.
• Title – Toggle button to display/hide the title.

How To Style The Portfolio Block #

Switch to the ‘Style’ tab to customize every element of the Portfolio block.

Spacing #

Spacing tab offer options to customize the spacing for Row and Column.

Border #

• Border Style – You can 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 Radius – You can give a border radius to the box from here.
• Border Color – You can give color to the border from here.

Item Overlay #

You can style overlay for the block on hovering from here.

• Alignment – Adjust the horizontal and vertical alignment of the text within the portfolio block.
• Background color – Select the background color of the portfolio grid.
• Text color – Customize the text color from here.
• Opacity – Adjust the background color opacity.

Overlay Text Typography #

Under this tab, options for font family, font size, font weight, and line height are available for the Overlay Text.

Overlay Text Spacing

The spacing tab offers options to customize the horizontal and vertical space of the overlay text.