Category: Portfolio

Case studies are social proof that convince prospects to choose your agency. WPCLONE’s portfolio section uses a clean grid, subtle hover effects, and filters to let visitors explore projects. In this guide we’ll show you how to replicate that layout using Elementor’s built‑in tools and a custom post type.

Step 1: Create a Custom Post Type for Case Studies

Add the following code to your theme’s functions.php:

function wpclone_register_case_study_cpt() {
    $args = array(
        'label' => 'Case Studies',
        'public' => true,
        'show_in_rest' => true,
        'supports' => array('title','editor','thumbnail','excerpt'),
        'menu_icon' => 'dashicons-portfolio',
    );
    register_post_type('case_study', $args);
}
add_action('init', 'wpclone_register_case_study_cpt');

Step 2: Add Custom Fields

Use Advanced Custom Fields (ACF) to create fields such as:

• Client Name
• Industry
• Result Metrics (numeric values)
• Project URL

Step 3: Build the Grid with Elementor

1. Create a new Elementor template and select “Archive” as the type.
2. Add a Section with a 3‑column layout. Set column gap to calc(var(--spacing-unit) * 2).
3. Insert the “Posts” widget.
   • Source: Case Study post type.
   • Layout: Grid, 3 columns.
   • Image Size: Medium (fits the 4‑12 px border‑radius).
   • Hover Effect: Slight elevation with box-shadow: 0 4px 8px rgba(0,0,0,0.15).
4. Enable “Skin” → “Cards” to show the featured image, title, and a short excerpt.

Step 4: Add Filter Buttons

Use the “Posts Filter” add‑on (available in Elementor Pro) to insert filter buttons above the grid:

• Filter by custom taxonomy “Industry”.
• Style the active filter with the accent blue background and white text.

Step 5: Styling for Brand Consistency

Apply the following CSS (added to the theme’s stylesheet) to match the WPCLONE design:

.case-study-card { 
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}
.case-study-card:hover { 
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

Step 6: Populate the Portfolio

Enter case studies via the WordPress dashboard. Include compelling images, concise summaries, and specific ROI numbers. The more data you provide, the richer the filter experience becomes.

SEO Benefits

Each case study is a stand‑alone page with its own meta title, description, and schema markup (Article). This improves indexability and gives you additional keyword opportunities.

Performance Tips

• Enable lazy loading on the case study images.
• Set a limit of 9 items per page to reduce initial load.
• Use the “Load More” button (Ajax) to fetch additional items without a full page refresh.

Conclusion

With Elementor, custom post types, and a few lines of CSS, you can recreate a sophisticated, filterable case‑study section that aligns with WPCLONE’s design system. This not only showcases your work but also drives conversions by providing visitors with tangible proof of your agency’s capabilities.