The DP Portfolio Grid module allows you to showcase your projects in a clean, multi-column grid layout. It includes on-page live category filter tabs, column spacing controls, and flexible post element visibility settings to display your work professionally.

How to add module on page

To add the DP Portfolio Grid module to your Divi layout, use the following steps:

1. Create/Edit a Page/Post using the Divi builder.
2. Create/Edit a row.
3. Click on Add New Module option; choose the DP Portfolio Grid module.

Content settings

Layout and columns

Configure the grid structure by selecting the number of columns to display. The column layout is fully responsive, allowing you to set different column counts (from 1 to 6) for desktop, tablet, and mobile devices.

Category filter tabs

Enable clickable category buttons at the top of the grid. Visitors can click on different category names to instantly filter projects using AJAX without reloading the page.

Query and pagination

Select which categories to display, set post counts, and choose standard numbered pagination or AJAX-based Load More options.

Design settings

Category filter buttons

Design the filter tabs with custom background colors, active state highlights, hover effects, text fonts, borders, and margins to blend the filter menu with your brand.

Portfolio cards

Customize individual portfolio item cards. Add border-radius, background colors, custom card margins, padding, and subtle shadows for a premium grid appearance.

Frequently Asked Questions

Do category tabs require page reloads to filter projects?

No. The category filter buttons use client-side AJAX filtering to instantly rearrange and show the correct projects without reloading the webpage.

Can I control the grid column count on mobile devices?

Yes. The column settings are fully responsive, letting you define separate column counts (for example, 3 on desktop, 2 on tablet, and 1 on mobile).

Is numbered pagination supported in the grid?

Yes. You can choose to display standard numbered page navigation or disable pagination completely to display all projects in a single view.