There’s no doubt that one of the many reasons why Elementor is the web’s most popular WordPress page builder is that it plays well with a plethora of other third-party tools.
However, although the platform was recently updated with several new AI features, Elementor doesn’t yet officially offer ChatGPT integration.
Not that this needs to be a major problem.
In this guide, we’ll show you how you can harness the power of AI to make your page-building process more efficient without using ChatGPT. If you’d still instead use the ground-breaking OpenAI platform, we’ll show you how to use third-party extensions to integrate ChatGPT with the Elementor page builder.
5 Things You Can Do With Elementor AI and ChatGPT Integration
1. Generate and Rewrite Web Content
It’s no secret that one of the best possible uses of ChatGPT for website owners is that it can automatically generate content for you.
Although you can still do this manually by creating your content within the platform and then pasting it into your Elementor templates, there’s no longer any need as Elementor now offers a Write With Ai feature.
To access this, you only need to click on any text item within your page and select Write With AI.
Next, tell the AI tool what you’d like it to do, for example:
Write a captivating headline for a WordPress SEO agency.
or;
Draft an introduction for a blog post about the best running shoes for beginners.
When that’s done, tap Generate Text.
You can then see what the AI came up with and adjust it by:
- Simplifying the language
- Changing the length of the text
- Correcting spelling and grammar errors
- Changing the tone
- Translating to a different language.
Once you’re happy, click Use text, and your page template will be updated accordingly.
Elementor ChatGPT Extensions to Generate Text
If you’d prefer ChatGPT to generate your content without using Elementor, you can do this with a plugin like AI Content Generator For Elementor.
After installing this plugin, you must log in to OpenAI (you can do this using your existing ChatGPT credentials) and create an API key.
Copy the OpenAI key, paste it into the appropriate field in the plugin’s settings, and click save.
When you select a text element to edit, you’ll find a new section in the editor menu called AI Content Generator, which gives you a menu of premade ChatGPT prompts for creating content.
2. Fine-Tune Your Design Elements With AI-Generated CSS
One of the underrated highlights of the Elementor Page Builder has always been the ability to take full control over every pixel and tweak premade elements using custom CSS (Cascading Style Sheets).
Of course, until now, that feature was only useful if you already knew enough about CSS to be able to craft your code accurately.
With the addition of Elementor’s new AI capabilities, that’s no longer the case, at least not for premium users.
Suppose you’re using the paid version of the popular page builder Elementor Pro. In that case, you can now use the in-built AI feature to automatically generate accurate CSS, even if you have zero coding knowledge.
To do this, simply select the element you want to tweak, select Custom CSS from the Advanced options under your editing menu, and tap the AI icon, which looks like a cluster of three stars.
Next, all you have to do is prompt the AI to create what you need in much the same way that you would with ChatGPT, for example:
“Create CSS to set the line height at 1.5px.”
Or
“On hover, animate 20% bigger, rotate 10 deg CCW.”
Your new code is automatically generated for you, and you can use the Insert button to add it directly to your website without cutting and pasting.
Elementor ChatGPT Extensions for Custom CSS
If you don’t have Elementor Pro or you simply prefer ChatGPT’s output to that of Elementor’s own AI tool, there is a workaround:
XPro Addons for Elementor is a widely-used extension for Elementor that provides several free tools. This includes an AI chatbot integration feature that allows you to use ChatGPT for many tasks, including creating custom CSS.
Once you’ve installed the addon, you’ll find that you now have two Custom CSS options when you navigate to the Advanced options for your element.
The first is the standard Elementor Custom CSS menu that will still be inaccessible if you’re not an Elementor Pro user.
The second is labeled Xpro, and this unlocks the Custom CSS feature and its associated AI tools even if you’re using the free version of the Elementor Page Builder.
3. Add New Elements and Backend Functions With Custom HTML
Another new Elementor AI feature available exclusively for Pro users allows you to use AI to generate custom scripts and code automatically.
The possibilities are practically endless here.
For example, if you want to save time integrating Google Analytics into your site, you can do this from your WordPress dashboard by going to Elementor – Custom Code – Write Me Code.
Enter a prompt such as “Write a Google Analytics Embed Code” and tap Generate Code.
Once again, the required code is produced for you, and all you have to do to add it to your website is click Insert.
4. Improve User Experience and Customer Service With AI Chatbots
Content creation may be the task website owners use ChatGPT for the most, but one of its most impressive capabilities is that you can use it to create your chatbot widgets and embed them into your site.
Doing so provides users with a quick and easy way to get answers to common questions and find the information they’re looking for on your website.
Unfortunately, this isn’t a feature that Elementor offers out of the box, but again, there are ways to add a ChatGPT chatbot to your Elementor site using third-party extensions.
This time, we will use the Complete AI Pack for WordPress by AI Power, which uses GPT-4 to offer a whole host of features, including chatbot integration.
To access this feature, install the plugin and navigate to ChatGPT.
This gives you a premade chatbot that you can customize to your liking. You can even learn how to train your chatbot to understand your content better and provide users with relevant, accurate answers to their questions.
You can add your ChatGPT-powered chatbot to your site by using a shortcode to include it on individual pages or by turning it into a widget available across your entire website.
5. Generate AI Images
The ability to generate images using AI isn’t yet available in Elementor. The platform promises this feature is coming soon, but until then, you’ll have to use another plugin.
Flusso is an AI-powered WordPress tool that integrates with ChatGPT 4 and other OpenAI platforms, such as the DALL-E image generator.
To use this feature, you’ll need some credits in your DALL-E account that you can use to create images.
Once you’ve got those, enter your image prompt and press Create.
When you access your media library through Elementor, you’ll find your AI-generated images waiting for you, ready to be added to your page.
ChatGPT Integration in the Elementor Page Builder: Final Thoughts
With its new AI features, the Elementor page builder is off to a flying start. However, it still has a long way to go before it truly allows users to harness the full power of artificial intelligence.
This is especially true if you’re using the accessible version of Elementor, where valuable features such as AI-powered CSS code generators are still off-limits.
Fortunately, an increasing number of WordPress plugins and Elementor addons allow you to use ChatGPT integration with Elementor.
The AI Content Generator and Flusso WordPress AI Plugin both do an exceptional job creating quality content on the fly. At the same time, the all-encompassing AI Power extension is tremendous for creating chatbot widgets powered by ChatGPT 4.
Before you go off to install these tools and put them to work in streamlining your page creation process, allow us to leave you with a tiny reminder:
It’s important to note that AI tools like ChatGPT are still in their infancy and tend to get things wrong occasionally.
With that in mind, those of you using the tools outlined in this guide to create custom code will benefit from validating that code before inserting it into your site.
The W3C CSS Validator can be used to check that any CSS code generated by AI is accurate and properly formatted, while the same service can also be used to check your HTML for errors.
Only once you’ve used those services should you go ahead and insert your AI-generated code, safe in the knowledge that it won’t cause problems with the design or functionality of your site.
For even more helpful tools to help create and manage your website as easily as possible, see our recommended list of eight essential WordPress plugins.
