Tag: ajax filters

Clients and recruiters want to see only the work that matters to them. A filterable portfolio allows visitors to sort projects by category, technology, or role. Below is a detailed walkthrough for building this feature in Elementor Pro, using the ReeniClone design as an example.

Prerequisites

• WordPress 6.2+ with Elementor & Elementor Pro installed.
• A custom post type called Projects (created via the CPT UI plugin or code).
• Custom taxonomies: Project Type and Technology.

Step 1 – Create the Project Template

In Elementor > Templates > Add New, choose “Single” and select the Projects post type. Use the following widgets:

1. Featured Image: Full‑width, with a subtle box‑shadow.
2. Project Title: Heading widget, Rajdhani, 60 px, color #FF014F.
3. Project Details: Icon List widget for client, date, and tools used.
4. Content: Text Editor for description, using Rubik body font.

Style the section background with #141414 and round the corners to match the site’s card design.

Step 2 – Build the Archive Page

Go to Elementor > Templates > Add New > Archive. Select the Projects archive. Add these sections:

• Section 1 – Filter Bar: Use the “Posts” widget, enable “Query ID” (e.g., portfolio_filter), and turn on “Custom Filters”. Add Buttons for each taxonomy term. Set the button style to the pink pill shape.
• Section 2 – Grid: Still within the Posts widget, choose “Skin: Cards”, set columns to 3 (desktop), 2 (tablet), 1 (mobile). Use the card layout that matches the #141414 background and round corners.

Enable “AJAX” so the grid updates without page reload, preserving smoothness.

Step 3 – Add Custom CSS for Hover Effects

/* Card hover */
.elementor-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(255,1,79,0.3);
    transition: all 0.3s ease;
}
/* Filter button active state */
.filter-button.elementor-active {
    background: linear-gradient(135deg, #ff014f, #ff6fa1);
    color: #fff;
}

This CSS reinforces the brand’s pink accent on interaction.

Step 4 – Make It Responsive

Elementor automatically adjusts columns, but double‑check the breakpoints:

• Desktop (≥1200 px): 3 columns.
• Tablet (768‑1199 px): 2 columns.
• Mobile (≤767 px): 1 column, filters stack vertically.

Step 5 – SEO & Performance Tips

1. Use descriptive alt attributes on project images.
2. Limit the number of visible cards per page (e.g., 9) and enable pagination.
3. Leverage caching plugins (WP Rocket, LiteSpeed) to keep AJAX requests fast.

Conclusion

With Elementor Pro you can build a sleek, filterable portfolio in less than an hour. The result is a fast, visually consistent gallery that mirrors the dark‑theme aesthetic of ReeniClone while giving visitors instant access to the most relevant work.