The Portfolio Card widget is a robust tool for displaying your projects in a card-based layout. It offers seamless integration with existing portfolio posts or the flexibility to curate a custom list manually.

Content Settings #

Choose the source and behavior of your portfolio items.

Source Type: Dynamic (From Portfolio Post Type) #

Use this option to sync the widget with your site’s portfolio entries automatically.

• Filter by Category: Select specific categories to display or choose Show All Categories.
• Number of Items: Define the maximum number of project cards to display in the grid.
• Order By: Sort your projects by criteria such as Date.
• Order: Choose between DESC (Descending) or ASC (Ascending) to control the sorting direction.

Source Type: Manual Selection #

This option allows you to hand-pick and build each project card individually.

Portfolio List: An accordion-style interface where you can manage each item.

• Image: Upload or select a custom thumbnail for the project.
• Meta / Category: Enter text for category labels (e.g., “House, Office”).
• Title: Manually input the project name.
• Project Link: Set a specific destination URL for the individual card.

Add Item: Click this button to append a new card to your manual list.

Layout Settings #

This section defines the structural arrangement of your portfolio grid.

• Columns: Select the number of portfolios to display per row (e.g., 3).
• Columns Gap: Control the horizontal and vertical spacing between individual portfolios in the grid.

Style Tab: Portfolio Item #

This section allows you to customize the general appearance of the individual project cards within the Portfolio Card widget for both Normal and Hover states.

• Background Color: Select a custom background color for the card container.
• Border Radius: Define the roundness of the card corners by entering pixel values. The preview shows a default value of 12px applied to all corners to create a modern, rounded look.
• Box Shadow: Click the pencil icon to add a shadow effect, giving the cards depth and making them pop against the page background.
• Min Height: Use the slider or input field to set a minimum height (e.g., 450px) to ensure all cards in a row maintain a uniform size regardless of content length.

Style Tab: Image #

This section provides controls for how the project thumbnail is displayed within the portfolio card container.

• Image Size: Choose how the image fits into its area (e.g., Cover) to ensure it fills the space while maintaining its aspect ratio.
• Image Position: Set the focal point of the image (e.g., Center Center) to ensure the most important part of the thumbnail remains visible.

Style Tab: Card Style #

The Card Style section provides specific controls for the container holding your project information within the Portfolio Card widget, allowing for distinct looks in both Normal and Hover states.

• Background Color: Customize the background color of the card content area.
• Border Radius: Adjust the roundness of the content container’s corners. The current configuration shows a uniform 10px radius.
• Padding: Control the internal spacing within the card to ensure text and meta information are well-positioned. A default padding of 20px is currently applied to all sides.
• Box Shadow: Enhance the card’s depth with a shadow effect.
  • Horizontal Offset: Move the shadow left or right; currently set to 20px.
  • Vertical Offset: Move the shadow up or down; currently set to 20px.

Note: The vertical offset uses the bottom by default for consistent anchoring.

Style Tab: Content Style #

The Content Style section provides granular control over the typography and colors for the text and button elements within the Portfolio Card. You can customize styles for both the Normal state and the Hover (Card Hover) state, allowing the content to react when a user interacts with the card.

Title #

• Color: Set the specific text color for the project title.
• Typography: Access full font settings, including family, size, and weight, to ensure the title stands out.

Meta #

• Color: Define the color for the metadata or category labels.
• Typography: Customize the font style for the meta information to maintain a clear hierarchy.

Button / Link #

• Color: Choose the color for the action button or project link text.
• Typography: Set the font properties for the button to ensure clear calls to action.