[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"case-study-trouve-ta-banque-psd-to-wordpress":3},{"id":4,"slug":5,"title":6,"excerpt":7,"date":8,"featuredImage":9,"techStack":11,"category":20,"overview":21,"problem":22,"solution":23,"process":24,"results":43,"projectDetails":56,"gallery":75,"liveUrl":-1,"githubUrl":-1},"cG9zdDoyNzAw","trouve-ta-banque-psd-to-wordpress","Trouve Ta Banque | PSD to WordPress","","2026-04-27T02:48:13",{"url":10,"alt":7},"https:\u002F\u002Fcms.guevfstack.com\u002Fwp-content\u002Fuploads\u002F2026\u002F04\u002Ftrove-ta-elementor-editing-00.png",[12,13,14,15,16,17,18,19],"Wordpress","Adobe Photoshop","Elemetor","CSS","Gravity Form","Javascript","JQuery","Php","Wordpress Development","Trouve Ta Banque is a French-language comparison and guidance website helping users navigate banking options. The project involved converting a finalized PSD design into a fully functional WordPress website, built under subcontract for Oolong Media of Pix and Codes. A key feature of the site was a multi-step form built with Gravity Forms, guiding users through a structured banking comparison flow.","The agency had a complete PSD design for a French WordPress site with no live implementation. The build required faithful translation of the design into a WordPress environment with a custom child theme, integrated form handling, and pixel-accurate page layouts — without modifying the approved design. Critically, the design included a multi-step form that needed to function smoothly while matching the visual spec exactly.","Developed a WordPress child theme based on the Pindol parent theme, configured Elementor as the page builder for design fidelity, and integrated Gravity Forms to power a multi-step form experience for users comparing banking options. Each PSD artboard was converted into a live Elementor page matching the original design specifications, with the multi-step form styled to align with the site’s design language.",[25,28,31,34,37,40],{"step":26,"description":27},"Child Theme Setup","Created a WordPress child theme from the Pindol parent theme to isolate customizations and preserve upgrade safety.",{"step":29,"description":30},"Environment Configuration","Installed and configured Elementor as the page builder and Gravity Forms for form functionality, aligned to the project plugin requirements.",{"step":32,"description":33},"PSD Analysis","Reviewed all PSD artboards to extract typography, spacing, color values, component structures, and responsive layout intent before building.",{"step":35,"description":36},"Page Conversion","Converted each PSD artboard into a live Elementor page, building sections, widgets, and custom CSS to match the approved design precisely.",{"step":38,"description":39},"Multi-Step Form Integration","Built the multi-step banking comparison form using Gravity Forms, configuring each step, conditional logic, and custom styling to match the PSD spec.",{"step":41,"description":42},"QA and Handoff","Reviewed all pages and form flows for cross-browser consistency and design accuracy, then delivered to Oolong Media \u002F Pix and Codes.",[44,48,52],{"metric":45,"value":46,"description":47},"Design Accuracy","100%","PSD-to-live conversion with no design deviations approved by agency",{"metric":49,"value":50,"description":51},"Delivery","On Time","Completed within subcontract timeline with no revision cycles required",{"metric":53,"value":54,"description":55},"Plugin Integration","Fully Functional","Gravity Forms multi-step form and Elementor operational with no conflicts",[57,60,63,66,69,72],{"label":58,"value":59},"Client","Trove Ta Banque",{"label":61,"value":62},"Website","https:\u002F\u002Ftrouvetabanque.ca\u002F",{"label":64,"value":65},"Agency","Oolong Media + Pix and Codes",{"label":67,"value":68},"Location","Quebec, Canada",{"label":70,"value":71},"Role","Subcontracted WordPress Developer",{"label":73,"value":74},"Completed","February 2020",[10,76,77,78,79,80,81,82],"https:\u002F\u002Fcms.guevfstack.com\u002Fwp-content\u002Fuploads\u002F2026\u002F04\u002Ffinish-product-scaled.png","https:\u002F\u002Fcms.guevfstack.com\u002Fwp-content\u002Fuploads\u002F2026\u002F04\u002Ftrove-ta-elementor-editing-01.png","https:\u002F\u002Fcms.guevfstack.com\u002Fwp-content\u002Fuploads\u002F2026\u002F04\u002Ftrove-ta-banque-theme-form-setup.png","https:\u002F\u002Fcms.guevfstack.com\u002Fwp-content\u002Fuploads\u002F2026\u002F04\u002Ftrouve-ta-baque-psd-design.png","https:\u002F\u002Fcms.guevfstack.com\u002Fwp-content\u002Fuploads\u002F2026\u002F04\u002Fmulti-step-form-page-psd.png","https:\u002F\u002Fcms.guevfstack.com\u002Fwp-content\u002Fuploads\u002F2026\u002F04\u002Ftrove-ta-banque-theme-editing-02.png","https:\u002F\u002Fcms.guevfstack.com\u002Fwp-content\u002Fuploads\u002F2026\u002F04\u002Ftrove-ta-banque-theme-editing-01.png"]