Portfolio Details

Project Description

The client wanted a WordPress website featuring various tools, including AI tools, text editing tools, website editing tools, and image editing tools. The client preferred using Elementor to design these tools. However, Elementor's widgets were not suitable for building the tools themselves. The challenge was to meet the client's requirement of using Elementor for design while creating fully functional tools.

Solution

To address this issue, I first followed to the client's design vision by following a Figma file provided for the UI. I used Elementor to recreate the design, ensuring it was pixel-perfect and responsive. For the tools, I custom-coded them using HTML, CSS, and JavaScript. To integrate these tools into the Elementor-designed site, I used a PHP shortcode plugin. This allowed me to embed the custom-coded tools seamlessly, making them fully functional within the WordPress site. This approach met the client's design requirements and provided the necessary functionality for the tools.