The official Elementor MCP is out of beta. In this complete tutorial I combine Claude AI, Elementor Pro and Angie to build a professional WordPress website step by step, just by having a conversation with Claude. Claude builds the layouts with native Elementor elements, so you can keep editing everything visually in Elementor afterwards.
Get web hosting and a free domain: Hostinger (use coupon code FERDY for an extra 10% discount). Get Elementor Pro.
What you will learn
- Set up WordPress, Elementor Pro, Claude and the Elementor MCP
- Use Angie to set up Advanced Custom Fields and custom post types
- Build pages from screenshots and prompts
- Create headers, footers, mobile menus and dynamic templates
- Add live filters, conditional form fields and website search
- Build an alphabetical knowledge base
- Troubleshoot errors and understand the AI usage costs
At the end I ask Claude to review my homepage as if it were a complete web design agency, including the copy, the layout and the calls to action.
Chapters
- 00:00 Intro
- 03:11 Domain and hosting
- 06:13 WordPress setup
- 09:25 Elementor Pro
- 12:09 Claude setup
- 14:06 Connect Elementor MCP
- 15:55 Homepage build
- 22:17 Interactive cards
- 24:42 Header
- 26:28 Angie and ACF
- 28:38 Mobile menu
- 31:57 Blog templates
- 40:33 Tutorial templates
- 43:11 Archives and filters
- 46:43 Contact form
- 48:37 Footer
- 50:16 Search
- 51:55 Cookies and policies
- 53:23 Knowledge base
- 1:00:06 AI costs and animations
- 1:05:33 Final website
Some links are affiliate links. If you purchase through them, I may earn a commission at no extra cost to you.
