Portfolio Grid

Estimated reading: 3 minutes 302 views

The Portfolio Grid widget allows you to display portfolio items in a clean and structured grid layout using Elementor. It provides flexible controls for querying portfolio posts, configuring grid layouts, and choosing which portfolio elements should appear inside each item.

This widget is ideal for showcasing projects, case studies, design work, or any portfolio content in a responsive grid format while maintaining full design control within Elementor.

General Overview


The Portfolio Grid widget helps you showcase portfolio items with full control over:
  • Portfolio posts query and filtering
  • Grid column layout
  • Displayed portfolio elements
  • Metadata placement
  • Read more button customization
  • Image behavior and styling

Widget Controls


The widget settings are divided into several sections inside the Content tab in Elementor


1. General Section

null

  • Extra Class: Add a custom CSS class for additional styling or advanced customization.

2. Query Section

null

  • Excerpt Length: Controls how many words are displayed in the portfolio excerpt.
  • Author: Filter portfolio items by selecting specific authors.
  • Categories: Select categories to include in the portfolio grid.
  • Exclude Categories: Select categories that should not appear in the portfolio grid.
  • Include Posts: Manually select specific portfolio posts to display.
  • Exclude Posts: Remove selected posts from the grid.
  • Order By: Sort portfolio items by ID, title, date, or other available options.
  • Order: Choose ascending or descending order.

3. Layout Section

null null

  • Columns: Define the number of columns used to display portfolio items.
  • Post Items: Drag-and-drop builder to enable or disable portfolio elements such as feature image, title, excerpt, read more button, categories, tags, and author.
  • Post Overlay Items Options: Enable or disable elements that appear on hover overlay.
  • Post Overlay Items: Configure which elements appear inside the image overlay.
  • Top Meta: Display metadata above the portfolio content such as categories, author, or date.
  • Bottom Meta: Display metadata below the portfolio content.
  • Post Heading Tag: Choose the HTML heading tag used for portfolio titles (H1–H6).

4. Read More Section

null

  • Read More Text: Customize the label of the read more button.
  • Icon: Add an icon to the read more button.
  • Icon Position: Choose whether the icon appears before or after the text.
  • Icon Spacing: Adjust the spacing between the icon and the button text.

5. Image Section

null

  • Thumbnail: Choose the image size used for portfolio thumbnails.
  • Image Behavior: Control how the portfolio image behaves when hovered.
  • Overlay Options: Configure overlay effects and hover behavior for portfolio images.

Styling Options


All elements of the Portfolio Grid widget can be styled using Elementor’s Style tab.
  • Typography and color controls for titles and excerpts
  • Grid column gaps and spacing
  • Image borders, radius, and hover effects
  • Overlay styling and animations
  • Metadata styling for categories, tags, and author
  • Read more button styles including background, hover effects, and typography

Summary


The Portfolio Grid widget provides a flexible and powerful way to showcase portfolio items inside Elementor. It supports:
  • Advanced portfolio query filtering
  • Flexible grid column layouts
  • Drag-and-drop control of portfolio elements
  • Customizable metadata placement
  • Image overlays and hover interactions
  • Complete styling control through Elementor
This widget is perfect for creating modern portfolio galleries, agency project showcases, designer portfolios, and case study listings.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share this Doc

Portfolio Grid

Or copy link

CONTENTS

Powered By EazyDocs