Source: https://divicake.com/blog/build-divi-5-landing-page-with-claude-or-chatgpt/ [Blog](https://divicake.com/blog/)/[Tutorials](https://divicake.com/category/tutorials/) # How to build a Divi 5 landing page with Claude or ChatGPT By Asad·4 October 2026·Updated 11 October 2026·4 min read How to Build a Divi 5 Landing Page with Claude or ChatGPT On this page - [What you need](https://divicake.com#what-you-need) - [Step 1: Install MCP for Divi 5](https://divicake.com#step-1-install-mcp-for-divi-5) - [Step 2: Connect claude.ai or ChatGPT](https://divicake.com#step-2-connect-claudeai-or-chatgpt) - [Step 3: Write the prompt](https://divicake.com#step-3-write-the-prompt) - [Step 4: Read what comes back](https://divicake.com#step-4-read-what-comes-back) - [Step 5: Check the page, then finish it in the Visual Builder](https://divicake.com#step-5-check-the-page-then-finish-it-in-the-visual-builder) - [Using ChatGPT instead](https://divicake.com#using-chatgpt-instead) - [Next steps](https://divicake.com#next-steps) You can describe a page in plain English and have Claude or ChatGPT build it on your Divi 5 site. The result is a draft made of real Divi modules, so you keep editing it in the Visual Builder like any page you built yourself. This guide uses [MCP for Divi 5](https://divicake.com/shop/mcp-for-divi/), the plugin that connects the assistant to your site. The example is a made-up bakery, Crumb & Co, built on a test site. ## What you need - Divi 5.1 or later - [MCP for Divi 5](https://divicake.com/shop/mcp-for-divi/), installed and activated - A site that is reachable from the internet over HTTPS. claude.ai and ChatGPT connect from the internet, so a site that only runs on your computer will not work. - A claude.ai or ChatGPT account. ## Step 1: Install MCP for Divi 5 Upload the plugin under Plugins → Add New → Upload Plugin and activate it. Then open Divi → MCP for Divi 5. The setup screen walks you through your licence and a site check that confirms Divi 5, HTTPS and permalinks are right. The [install guide](https://divicake.com/docs/mcp-for-divi/install-mcp-for-divi-5/) has the details. ## Step 2: Connect claude.ai or ChatGPT In the Connect your tool step, pick claude.ai or ChatGPT. The screen shows your site’s connector URL with a Copy button. In claude.ai: open Settings → Connectors, choose Add custom connector, paste the URL and click Connect. WordPress opens in your browser. Sign in and click Allow. The Claude desktop app works the same way, under the same Settings → Connectors. In ChatGPT: open Plugins, click Add and choose Add custom MCP server. Give it a name, paste the URL and keep OAuth as the authentication. Tick I understand and want to continue, click Create as a plugin, then Continue to MCP for Divi 5. WordPress opens in your browser. Sign in and click Allow. If Add custom MCP server is not in the menu, turn on developer mode in ChatGPT’s settings first. There is no password to copy into either app. [Connect your AI tool](https://divicake.com/docs/mcp-for-divi/connect-your-ai-tool/) covers every tool the plugin supports. ## Step 3: Write the prompt A good prompt names the sections in order, the text on the main button, where the colours come from, and asks the assistant to check its work. This is the prompt we used, in claude.ai: Using MCP for Divi 5, build a draft landing page for “Crumb & Co”, a small neighbourhood bakery: a hero with a headline and a “See today’s menu” button, three feature columns (fresh daily, local flour, order ahead), a testimonial, and a contact section. Use the site’s global colours. Check the page after saving and tell me what you found. “Use the site’s global colours” matters. The page then follows your palette, and a later colour change reaches it too. The page saves as a draft. Nothing goes live until you publish it. ## Step 4: Read what comes back While it works, Claude shows each step: it reads the plugin’s guide and your global colours, validates the structure, builds the page, then checks how it renders. claude.ai working through the build: loading the plugin’s guide and colours, validating the structure, building the page and running the render checks After about two minutes, Claude replied with the draft’s page ID, a link to open it, a list of the sections it built and the global colours it used. claude.ai with the Crumb & Co prompt, and Claude’s reply listing the sections and the site’s global colours Further down, it reported what the plugin’s checks found and what it could not know. The address, phone number and opening hours were left in brackets. It flagged the testimonial as invented, and it named the two links that had nowhere to go yet. Claude’s report: what the checks found, the column fix, and the placeholders still to fill in Treat that list as your to-do list before you publish. What the checks caught On this first run every column saved at full width, so the three cards stacked. Claude spotted it in the rendered page, fixed the widths and asked us to confirm on desktop. The plugin now tells the assistant how Divi 5 sets column widths, so columns land side by side on the first save. ## Step 5: Check the page, then finish it in the Visual Builder Preview the draft on desktop and on your phone. The Crumb & Co draft Claude built: a hero, three feature cards, a testimonial and a contact section with bracketed placeholders Every section is a normal Divi module. Open the page in the Visual Builder to swap in real photos, opening hours and a real customer quote. The same page open in the Divi 5 Visual Builder Then publish it. ## Using ChatGPT instead The steps are the same. We gave ChatGPT the same prompt, and it worked for just over two minutes before showing a build summary: 37 blocks saved, no validation warnings and no empty modules. ChatGPT with the same prompt and its build summary for the Crumb & Co draft Each assistant writes its own copy and makes its own layout choices, so expect a different page from the same prompt. The draft ChatGPT built: a different hero headline and three feature cards side by side ## Next steps - [Rewrite a page’s copy without changing the design](https://divicake.com/blog/rewrite-divi-5-page-copy-with-ai/) - [Rebrand your site’s colours and button presets](https://divicake.com/blog/rebrand-divi-5-site-with-ai/) - [Undo anything the assistant changed](https://divicake.com/blog/undo-ai-changes-divi-5/) MCP for Divi 5 works from claude.ai and ChatGPT in the browser, with nothing to install on your computer. [See how it works](https://divicake.com/shop/mcp-for-divi/). ## Written by Asad Founder of [Karobar Solutions LLC](https://www.karobarhq.com/), the company behind Divi Cake Asad started freelancing in 2016, and his first project was a Divi site. Over a decade later, his team builds plugins that other companies sell. Divi Cake is where they sell their own. - [About Asad](https://divicake.com/about/) - [LinkedIn](https://linkedin.com/in/asadurrehman0) - [X](https://x.com/AsadUrRehman0) ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tutorials [ How to Undo AI Changes on a Divi 5 Site Tutorials2 min read ### How to undo AI changes on a Divi 5 site Undo what Claude or ChatGPT changed on your Divi 5 site: colours, presets, Theme Builder templates and pages, in one prompt or from the Revisions screen. 10 October 2026](https://divicake.com/blog/undo-ai-changes-divi-5/) [ How to Rebrand a Divi 5 Site with AI Tutorials2 min read ### How to rebrand a Divi 5 site with AI: global colours and button presets Change a Divi 5 site's brand colour and every button preset with Claude or ChatGPT: start with a dry run, answer its questions, apply, then check. 8 October 2026](https://divicake.com/blog/rebrand-divi-5-site-with-ai/) [ How to Rewrite Divi 5 Page Copy with AI Tutorials2 min read ### How to rewrite a Divi 5 page's copy with AI without changing the design Rewrite every line on a Divi 5 page with Claude or ChatGPT in one prompt, then check that the colours, spacing, widths and links did not move. 6 October 2026](https://divicake.com/blog/rewrite-divi-5-page-copy-with-ai/)