Custom loop grid with portfolio like filtering

Do you want to add this portfolio like filtering of custom post types with advanced fields and the default portfolio widget does not suite your needs? You can du it without adding extra plugin, leveraging the functionalities of Elementor pro. ------ Content of the Tutorial -------- 00:00 - Intro 01:41 - Page speed optimisation video coming soon 03:03 - Creating custom post type with CPT UI and ACF 08:20 - Custom loop build in Elementor and Ele Custom Skin 15:36 - Custom navigation layout in Elementor 18:08 - Custom CSS preparation for JS 24:40 - Portfolio-like filtering with Custom JS ------------------------------------------------------- Here is the final JS code, there is no json as it would not include the custom post type. jQuery( document ).ready(function() { jQuery("#all").click(function() { jQuery(".my_nav").removeClass("my_active"); jQuery("#all").addClass("my_active"); jQuery(".ecs-post-loop").hide(); jQuery(".ecs-post-loop").fadeToggle(); }); jQuery("#html").click(function() { jQuery(".my_nav").removeClass("my_active"); jQuery("#html").addClass("my_active"); jQuery(".ecs-post-loop").hide(); jQuery(".HTML").parent().closest(".ecs-post-loop").fadeToggle(); }); jQuery("#css").click(function() { jQuery(".my_nav").removeClass("my_active"); jQuery("#css").addClass("my_active"); jQuery(".ecs-post-loop").hide(); jQuery(".CSS").parent().closest(".ecs-post-loop").fadeToggle(); }); jQuery("#javascript").click(function() { jQuery(".my_nav").removeClass("my_active"); jQuery("#javascript").addClass("my_active"); jQuery(".ecs-post-loop").hide(); jQuery(".JavaScript").parent().closest(".ecs-post-loop").fadeToggle(); }); jQuery("#php").click(function() { jQuery(".my_nav").removeClass("my_active"); jQuery("#php").addClass("my_active"); jQuery(".ecs-post-loop").hide(); jQuery(".PHP").parent().closest(".ecs-post-loop").fadeToggle(); }); }); ------------------------------------------------------- → Check out current Elementor Pro Offers and discounts: [https://elementor.com/?ref=23425&campaign=JCwebTECH](https://elementor.com/?ref=23425&campaign=JCwebTECH) → Get reliable hosting with Cloudways https://www.cloudways.com/en/?id=785560 My portfolio: https://jcweb.tech/ Instagram: https://www.instagram.com/jcweb.tech/ Facebook: https://www.facebook.com/JCwebTECHcz --------------------------------- Some of the above links are affiliate links, which means that I earn a commission when you make a purchase via my link, however, you do not pay anything extra.