WP Portfolio Block Guide

The WP Portfolio Block was introduced to simplify and enhance the process of adding a WP Portfolio, overcoming the limitations of shortcodes. This block makes it easier than ever to showcase portfolios on your website with a wide range of customization options.

Adding the WP Portfolio Block with Spectra

To use the WP Portfolio Block, ensure that the WP Portfolio plugin and Spectra Plugin are installed and activated on your site.

Steps to Add the WP Portfolio Block with Spectra

1. Navigate to the page editor settings.
2. Click on the + sign to search for a Container.
   
   
   
   
3. Select the Container widget and choose the layout you want.
   
   

4. Then click on Add Block (+)  and type WP Portfolio Block in the search bar and select it.
   
   

Once added, all block settings will be available in the right-side panel.

WP Portfolio Block Settings

The WP Portfolio Block offers five main customization options:

1. Portfolio Settings
2. Layout Settings
3. Header
4. CTA Button
5. Advanced

1. Portfolio Settings

This section allows you to configure the core aspects of the portfolio display.

• Layout: Choose between a Masonry Layout or Grid Layout.
• Quick View Text: Customize the text displayed for the quick view when hovering over a portfolio image.
• Select Categories: Filter portfolios by specific categories or display all categories.
• Select Tags: Filter portfolios using tags. Multiple tags can be added by separating them with commas or pressing the Enter key.

2. Layout Settings

Define how the portfolio items are displayed on your site.

• Columns: Configure the number of portfolio columns, with up to 4 columns available.
• Show Title At: Place the portfolio title at the top or bottom of the portfolio item.
  
  

• Number of Items Per Page: Set the number of portfolios displayed per page.

Note: When setting the layout to 4 columns, make sure to increase the content width to 1200px or reduce the font size from style option. This adjustment is necessary because block-based themes typically have a narrower default content width compared to classic themes. Without this change, alignment issues may arise.

To change the content width please follow the below steps

1. Go to Appearance -> Editor
2. Then go to Styles
   
   
   
   
3. Edit Styles
   
   
   
   
4. Go to Layout
   
   
   
   
5. Set the Content Width as 1200px
   
   
   

3. Header

Customize the layout and appearance of the header to match your design preferences.

4. CTA Button

Modify the appearance and behavior of the Call-to-Action (CTA) button for better user engagement.

5. Advanced

For developers or advanced users, this section provides the option to add custom CSS.
Tip: Separate multiple classes with spaces for clean and efficient customization.

With these settings, the WP Portfolio Block offers flexibility and ease of use, enabling you to create stunning portfolio displays tailored to your needs.