Build a WordPress Website with GPT-6.1 Sol + Elementor MCP
👉 Hosting.com good deal for websites imo (code: BYTEGRAD): https://go.hosting.com/bytegrad (sponsored) 👉 Work with me: support@bytegrad.com 👉 React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: https://bytegrad.com/courses/professional-css 👉 Web development roadmap & newsletter: https://email.bytegrad.com 👉 Discord: all my courses have a private Discord TIMESTAMPS 00:00 The editable AI website 05:15 ChatGPT setup 09:24 Building the HTML site 11:15 Improving the design 15:18 Generating images 17:27 Creating the background video 19:13 WordPress setup 24:19 Connecting Elementor MCP 27:13 Rebuilding in Elementor 29:17 Navigation & contact forms 31:39 Manual edits & mobile PROMPTS Use these in the same chat so the agent can access your local site. Replace the studio name and use your own design references. The reference and navigation prompts below are cleaned up from my dictation; the other prompts are transcribed from the recording. 1. BUILD THE HTML SITE Build a simple HTML website for an interior-design studio called Form & Field. Show its services and let visitors request a consultation. Start from scratch, leave out images and video for now, and open it in the Codex browser. 2. IMPROVE THE DESIGN I like this reference site. Can you make our design look more like it? I like its header and hero section, but please don't blindly copy it. Make our own version, in our own style. 3. ADD IMAGES This looks good. Can you add some interior-design images now, especially a full-width background image in the hero instead of the geometric shapes? Keep it in our own style. Editorial interior photography of a warm living room with natural oak, travertine, cream linen and soft daylight. Believable furniture proportions, restrained styling and no text. Leave space for a website headline. 4. REFINE THE HEADER Can you make the header transparent over the hero image, like the reference site, and have it turn solid when I scroll? 5. CREATE THE BACKGROUND VIDEO (OPTIONAL) Can you turn the hero image into a subtle background video? Keep the same room and our style, with slow, natural movement and the headline still easy to read. Video generation uses the external Higgsfield integration shown in the video. Connect it first, or supply your own MP4; an image alone does not produce a video file. 6. CHECK THE MCP CONNECTION After connecting through Elementor / Elementor MCP using your own private setup prompt: Tell me about the site that you now have access to with MCP. Which tools do you have access to now with that MCP? 7. REBUILD IN ELEMENTOR Can you recreate our local Form & Field website on this WordPress site using Elementor? Keep it editable in Elementor, save it as a draft and let me preview it before publishing. 8. ADD NAVIGATION & SAVE FORM SUBMISSIONS Can you use proper navigation for the different pages? Create separate pages for Studio, Services and Contact. For the form, make sure the submitted data is actually saved in Forminator. Keep application passwords and sign-in links private. In the video I verify saved submissions; email delivery needs separate configuration. #wordpress #elementor #ai Note that these videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. ByteGrad and any of its affiliated people are not responsible for mistakes in code. This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 and KRS-number: 0001125554
