How To Use

How To Use Portfolio Block

Portfolio Block Setup

With the Portfolio Block, you can easily display your projects or works on your website using different layouts, making your site more engaging and professional.

You can follow the steps below to use the Portfolio Block.

Add To The Page or Post

To get started, open the post or page where you want to display your portfolio section.

Next, click the Add Block (+) button to open the block inserter. From the block panel, search for Portfolio and insert it into your desired location on the page or post.

Settings / Options

After selecting the Portfolio Block, you will see all settings in the right sidebar. The sidebar has two main sections: General and Style. 

In the General tab, you can change the main block settings, while in Style, you can customize the appearance of the block to match your website design.

Themes

From the Themes option, you can select from multiple portfolio layouts. Portfolio Block currently offers 7 layout themes, including Grid, Masonry, Card Hover, Slider, Split Screen, Minimal List, and Stacked Cards.

When you change the theme, some settings may automatically adjust, as each theme has its own layout structure and behavior.

Add or Remove Categories

From the sidebar, you can manage filter categories. You can add new categories, edit category names, or remove categories. Removing a category will automatically remove it from all associated portfolio items.

Add or Remove Portfolios

You can manage each portfolio item from the sidebar. Here, you can upload or change images, set titles, assign internal or external links, and select one or multiple categories. You can also duplicate existing items, remove items, or add new portfolio items.

Layout Settings

In Layout Settings, you can adjust the number of columns for Desktop, Tablet, and Mobile. You can also control the gaps between columns and rows for a neat and organized layout.

Link Settings

From Link Settings, you can control how portfolio item links behave. You can change the link text (depending on the theme) and choose whether links open in the same tab or a new browser tab. This helps you control user navigation and external linking behavior.

View All Button (Split Screen Theme)

When using the Split Screen theme, you can enable a “View All” button. This button allows visitors to navigate to a full portfolio page or another destination.

You can show or hide the button, change its text, set a custom link, and decide whether it opens in a new tab.

Slider Settings (Slider Theme)

If you are using a Slider theme, you can configure the slider behavior. This includes enabling infinite loop, auto-play, setting auto-play delay, and pausing on hover. These options help make portfolio sliders dynamic and interactive.

Portfolio Style

Switch to the Style tab to customize the Portfolio Block appearance. You can change the background, adjust padding, and set borders or border-radius. This section applies to the overall block.

Filter / Categories Style

This section controls how category filter buttons appear on the frontend. You can change the alignment of filters, adjust button shape and spacing, and style typography and colors. These settings help filters match your site’s design and improve user interaction.

Item Container (Split Screen Theme)

In the Split Screen theme, portfolio items are wrapped inside a container. This section allows you to style that container separately, giving more control over spacing and visual grouping of items.

Item Style

Item Style controls how individual portfolio items look. Depending on the selected theme, you can adjust item height, enable hover effects, add shadows, and control border radius. You can also decide whether clicking the item preview opens the link or not.

Title Style

Title Style allows you to customize how portfolio titles appear. You can choose different title display styles, apply background overlays, and control typography and color.This helps keep titles readable and visually consistent across layouts.

Number (Minimal List Theme)

In the Minimal List theme, portfolio items can display a number. This section allows you to style that number so it aligns with your overall design and improves readability.

Category Text

This section controls how category names appear inside portfolio items. You can adjust typography and colors so category labels remain clear and visually balanced with the rest of the content.

Description (slider and Stacked Cards Theme)

When using the Stacked Cards theme, portfolio descriptions are visible. This section lets you control how descriptions look so they remain readable and consistent with your design.

Link Style

Link Style controls the appearance of portfolio links such as “View Project” or similar actions. You can adjust typography and colors, including hover styles, depending on the selected theme.

Underline (Split Screen Theme)

In the Split Screen theme, an underline element can be styled separately. This helps visually separate content and improves layout structure.

Icon Style (Minimal List & Card Hover Themes)

Some themes display icons with portfolio items. This section allows you to style icon borders, radius, and colors, including hover states, so icons match your design.

View All Button Style

If the View All button is enabled, this section lets you style its typography and colors. You can also customize hover states to improve user interaction.

Badge (Stacked Cards Theme)

In the Stacked Cards theme, badges can be displayed on portfolio items. This section allows you to control badge typography, shape, and colors to highlight important information.

Publish & Go:

Finally, click on the Save or Publish button to display your portfolio.

Now visit your page and preview the portfolio on the frontend.

That’s it for the Portfolio Block.

ShortCode Usage

Use a simple shortcode to display the Portfolio Block anywhere on your site, including posts, pages, widgets, or custom shortcode-supported areas.

First, go to your WordPress admin dashboard. From the dashboard menu, navigate to Portfolio Block → Add New Portfolio to create a new portfolio.

Then you can customize your portfolio using your preferred layout and theme.

Note: We already covered the full customization. As the processes are the same, we prefer not to repeat here.

After customization, click the Publish or Save button to return to the dashboard.

Now, click on the Shortcode button to copy your portfolio shortcode.

Insert the copied shortcode into a Shortcode block from the block editor. Paste the shortcode inside the block, then save or publish the page.

Then visit the page and preview your portfolio on the frontend.

That’s it.