…Building a WordPress Site with AI: Integrating Elementor Pro with chatGPT
In this post, I will describe one way to integrate Elementor Pro with AI. All the features that Elementor Pro offers, including its user-friendly graphical interface, together with chatGPT. The integration is between elements that seem like Elementor Pro was "born" for them, such as a header with a menu, etc., along with an HTML code widget that uses chatGPT, specifically its Code Generator.
This integration is particularly suitable, for example, for posts where a kind of "fixed design framework" is maintained, with only the text and images within it changing.
It should be noted that the images in this guide are intended to assist in the tutorial, but one can equally manage without them, and they are merely "nice to have."
Here is one example (which you can replicate on your site):
After you've set up posts, header, and footer – leave their main part unstyled in Elementor Pro.
All you need to do is create an HTML widget and then use the HTML code writing function in ChatGPT called: Code Generator.
Step I:
Upload an image you want to feature in a strip that will span the entire width of the screen in the post you wish to create.
You will do this using the regular WordPress dashboard -> Media -> Add New Media File and upload the image to the site.
After uploading the image, go to the regular WordPress dashboard -> Media -> Library.
Click on the new image, for accessibility (recommended but I'm not an accessibility expert, so it's not guaranteed) – add an ALT description where it says "Alternative Text," briefly describing what is in the image.
Now click on: the "Copy Link to Clipboard" button and then paste the image URL in the appropriate place in the prompt in the next step…
See the following image:
Step II:
The following small sentence, which you place in ChatGPT, in its Code Generator – will create a strip across the screen with an image on one side and a title with text underneath on the other side:
create html div element code for a website with photo on left half of screen width and the title: "יתרון ראשון: קוד מצומצם" and the text: "קוד HTML יעיל מבטיח זמני טעינה מהירים יותר, משפר את חוויית המשתמש ומפחית שיעורי נטישה, קריטי לשמירה על מעורבות מבקרים באתרים קטנים." on the right half of screen width. The photo is at the link: https://guyshaked.com/wp-content/uploads/2024/04/FixWPCampaign.jpg
Of course, on your site, you can replace the text within the quotes in the paragraph above as well as the title within the quotes and the image URL with those relevant to your specific site.
Step III:
Select the code under the <body> tag, starting from (and including) the expression <div class="container"> up to just before (but not including) the </body> tag. Then copy it.
Paste the code into the full-width container in the Elementor dashboard within the area under the "HTML Code" title.
See the following image:
And that's it! You have added your first full-width strip to a WordPress page or post using Elementor Pro…
Click on the following link to view the result: Integrating Elementor Pro with ChatGPT!
What are the advantages of a site that incorporates code like this from ChatGPT? – Let's let ChatGPT itself answer that for us. And I quote:
1. Efficient HTML code ensures faster loading times, improves user experience, and reduces bounce rates, which is critical for maintaining visitor engagement on small websites.
2. Clean HTML code enhances site performance, simplifies site management and updates, saving time and resources for small business owners.
3. Optimal HTML contributes to better search engine optimization (SEO), increasing visibility and search engine rankings, which is essential for small websites to attract more traffic.
4. Lightweight HTML reduces server load and bandwidth usage, leading to cost savings, especially for small businesses with limited budgets.
5. Efficient HTML code improves cross-browser compatibility, ensuring the site functions well on different devices and platforms, providing a consistent user experience.
6. Simple HTML structures make it easier for search engine crawlers to index the site, improving search engine rankings and online presence for small businesses.
7. Minimized HTML code reduces the risk of errors and bugs, leading to a more stable and reliable website, which is critical for maintaining credibility.
8. Clean HTML allows for better integration with CSS and JavaScript, enhancing the overall functionality and interactivity of a small website.
9. Efficient HTML improves accessibility, ensuring the site is easy to navigate for users with disabilities, and expands the potential audience.
10. Optimized HTML makes the site more flexible for future changes and upgrades, ensuring long-term sustainability and ease of maintenance for small websites.
Conclusions:
I believe that combining the complex features that Elementor Pro offers, such as complex forms, complex menus, etc., with the simplicity of ChatGPT is particularly suitable for posts where there is a "standard" internal structure, for example, and perhaps less so for pages and certainly less so for product pages of an e-commerce site. In other words: integrating Elementor Pro with AI is suitable for certain things and not for others.
Regarding the method and order of work, it is not correct to write a prompt (instruction text) and then ask ChatGPT to change or correct something in it, because in the future, when you want another change, it will be a problem. The right way to work, it seems to me, is to write a prompt, then rewrite it with the change you want, and then save it in a Word file at the end of the work, noting which page on your site it refers to, so that when you want a change or correction on that page, you can use the same prompt again along with the change you want on the page.
Please note that if you add texts that AI wrote for you, others may be allowed to copy them because they are not protected by copyright (although I am not a lawyer and not an expert in this, and I may be wrong in saying this, so check before deciding on this matter). So it seems there is still some advantage to human writing (and I did not let ChatGPT draft and edit this sentence for me, so it wouldn't be hurt and offended by what I said).
In conclusion – aside from designing post pages, I might not "rush" today to use ChatGPT and the like for building websites. The reason: building simple things with them might be quite easy and quick, but the problem will be significant when I need complex things, and/or corrections and changes in things that have already been done.
So, best of luck!
For any questions or advice, please send me a Email message at: shaked69@gmail.com
Guy Shaked © 2024
