Creating a custom module in Elementor: example with a prompt interface using generative AI
Have you ever felt that page builders such as Elementor offer great ease of design, but end up hindering your customization ambitions? Well, you're not alone.
In this article, we'll not only identify the limitations of these popular page builders, we'll also show you how to overcome these challenges and achieve even more unique websites tailored to our specific needs.
To illustrate our point, we'll use the concrete example of one of our customers. In this project, we created a prompt interface using generative AI, opening the door to highly personalized and interactive functionalities that traditional page builders couldn't easily achieve.
Find out how you too can push the boundaries of customization with Elementor and unleash your website's full potential.
Page builders such as Elementor have revolutionized the way we create websites. They offer the possibility of creating attractive, functional designs that limit development to pure code. However, while these tools have become a must-have for many web designers, it’s essential to step back and take a closer look at their limitations when it comes to customization.
One of the main limitations lies in the prefabricated nature of templates and design elements. This can sometimes get in the way of creativity, especially for those looking to create unique and innovative designs. Customization options can also be limited in scope, leaving users at a dead end when seeking to meet specific needs or advanced requirements. This frustration is often the result of a generic design that can’t always adapt to complex individual requests. In this article, you’ll learn more about the main advantages and disadvantages of different approaches to WordPress development.
Yet, there is a solution to these limitations. By developing custom modules with Elementor, you can overcome these obstacles and realize truly unique website designs, while meeting unique customization needs.
In the rest of this article, we’ll explore how to achieve this advanced customization and how it was implemented for one of our customers through a generative AI-based prompt interface.
Creating a customized plug-in with Elementor
One of our customers called on our expertise to create something entirely unique: a prompt interface powered by generative AI. This is relatively easy to implement on a fully customized website, but it was a different story in this case, as their site had been built using Elementor.
We faced the need to find a solution for integrating such a highly customized element into a page builder, which initially had no functionality for this type of advanced customization. Our response to this challenge was to develop what is known as an Elementor plugin, also known as add-ons.
Elementor add-ons offer a remarkable advantage: they enable the creation of customized widgets, which can then be used and added to the website with the same ease and simplicity as any other standard Elementor element, simply by dragging and dropping.
Thanks to this Elementor feature, we were able to give free rein to our creativity, creating a widget as unique as possible, where the only limit is our imagination.
The technologies involved
Creating a custom widget with Elementor requires some HTML, JavaScript and CSS knowledge.
HTML code is essential to establish the widget’s structure. We identified 3 major elements for our prompt: the list of topics on the left, the conversation in progress with the AI on the right, and the prompt itself. These elements were defined using HTML code.
As for the widget’s styling, including colors, element shapes and interactions when the mouse hovers over certain elements, this is the domain of CSS (Cascading Style Sheets), a language used in every website to add style to an HTML page.
Finally, one of the crucial aspects of a widget of this kind is managing user interaction and dynamic elements, which JavaScript handles. Thanks to JavaScript, we could load a specific discussion when the user clicked on one of the threads, creating the illusion that the chat was responding in real-time, progressively displaying the content of the conversation.
To facilitate our client’s work and enable them to modify the content of the various prompts autonomously, we set up a separate file listing the discussions, which can be modified directly from the WordPress administration interface.
The challenges encountered
We faced several challenges in developing the plugin.
First of all, integrating the widget into the web page proved to be a significant challenge. We had to ensure the widget could adapt seamlessly to different screen sizes while retaining its visual appeal. This required meticulous, responsive design work to ensure an optimal user experience on all devices, from widescreens to smartphones.
Another crucial challenge was enabling our customers to modify the chat without our constant intervention. To achieve this, we developed a user-friendly interface in the WordPress back-end, enabling the site administrator to update and customize chat content easily. This feature has greatly simplified the ongoing management of the plug-in.
Finally, meeting specific chat customization needs was essential. Our customer wanted to be able to bold certain elements, create lists or insert links directly into the chat. To achieve this, we had to develop advanced text editing functionality within the widget while ensuring that these elements integrated harmoniously into the user interface.
In conclusion
Overall, developing this plugin has been an exhilarating, technical adventure involving complex challenges that have been successfully overcome to provide our customer with a highly customized and flexible solution.
Our experience has shown that, with the right approach and a thorough understanding of the underlying technologies, it’s possible to overcome the limitations of page builders.
If you, too, are interested in pushing back the boundaries of website customization, don’t hesitate to contact us. Our team is ready to take on new challenges and help you turn your innovative ideas into reality.
