Ultimate Elementor MCP

# 💡 Ultimate Elementor MCP - Usage Examples Real-world examples and step-by-step guides for common tasks. --- ## 📋 **Table of Contents** - [Simple Examples](#simple-examples) - [Page Building Examples](#page-building-examples) - [Advanced Examples](#advanced-examples) - [Workflow Examples](#workflow-examples) - [Troubleshooting Examples](#troubleshooting-examples) --- ## 🎯 **Simple Examples** ### **Example 1: Create Your First Page** **Request:** ``` Create a new page called "My First Page" with a heading "Welcome" and text "This is my first AI-generated page" ``` **What AI Does:** 1. Creates WordPress page 2. Builds Elementor structure 3. Adds heading and text widgets 4. Saves and returns URL **Expected Result:** ``` ✅ Page created successfully! • Page ID: 123 • Title: My First Page • URL: https://your-site.com/my-first-page/ • Status: Draft • Elementor: ✅ Enabled ``` --- ### **Example 2: Update Existing Content** **Request:** ``` Update page ID 456 to change the main heading to "New Heading Text" ``` **What AI Does:** 1. Gets current Elementor data 2. Finds heading widget 3. Updates the title setting 4. Saves changes --- ### **Example 3: List Your Content** **Request:** ``` Show me all my published pages ``` **Expected Result:** ``` 📄 Found 12 published pages: 1. Homepage (ID: 10) 2. About Us (ID: 23) 3. Services (ID: 45) 4. Contact (ID: 67) ... ``` --- ## 🎨 **Page Building Examples** ### **Example 4: Create a Landing Page** **Request:** ``` Create a landing page for "Product Launch" with: 1. Hero section with purple gradient background 2. Heading: "Revolutionary Product" 3. Subheading: "Transform your workflow" 4. Call-to-action button "Get Started" ``` **What AI Builds:** ```javascript Section (Hero) ├─ Background: Purple gradient (#667eea to #764ba2) ├─ Column (100% width) │ ├─ Heading Widget: "Revolutionary Product" (H1) │ ├─ Heading Widget: "Transform your workflow" (H2) │ └─ Button Widget: "Get Started" ``` **Expected Result:** ``` ✅ Landing page created! • Page ID: 789 • URL: https://your-site.com/product-launch/ • Elements: 1 section, 1 column, 3 widgets • Edit in Elementor: https://your-site.com/wp-admin/post.php?post=789&action=elementor ``` --- ### **Example 5: Three-Column Features Section** **Request:** ``` Create a page with a 3-column features section. Each column should have: - An icon (heading with emoji) - Feature title - Feature description Features: 1. 🚀 Fast Performance - Lightning-fast loading 2. 🔒 Secure - Enterprise-grade security 3. 💡 Easy to Use - Intuitive interface ``` **What AI Builds:** ```javascript Section (Features) ├─ Column 1 (33.33% width) │ ├─ Heading: "🚀" │ ├─ Heading: "Fast Performance" │ └─ Text: "Lightning-fast loading" ├─ Column 2 (33.33% width) │ ├─ Heading: "🔒" │ ├─ Heading: "Secure" │ └─ Text: "Enterprise-grade security" └─ Column 3 (33.33% width) ├─ Heading: "💡" ├─ Heading: "Easy to Use" └─ Text: "Intuitive interface" ``` --- ### **Example 6: Full Homepage** **Request:** ``` Create a complete homepage with: 1. Hero Section: - Full-width gradient background (blue to purple) - Centered heading "Welcome to Our Site" - Subheading "Building the Future" - Button "Explore" 2. About Section: - White background - Heading "About Us" - Paragraph text 3. Services Section: - Light gray background - Heading "Our Services" - 3 columns with service descriptions 4. Contact Section: - Dark background - Heading "Get in Touch" - Contact button ``` **Expected Result:** ``` ✅ Complete homepage created! • Page ID: 234 • URL: https://your-site.com/homepage/ • Sections: 4 • Columns: 5 • Widgets: 15 • Status: Draft (ready for review) ``` --- ## 🔄 **Advanced Examples** ### **Example 7: Clone and Modify** **Request:** ``` Clone the layout from "Services" page, create a new page called "Products", and change all blue colors to green ``` **What AI Does:** 1. Gets Elementor data from "Services" page 2. Creates new "Products" page 3. Clones all elements 4. Finds all elements with blue colors 5. Updates to green 6. Saves to new page --- ### **Example 8: Batch Page Creation** **Request:** ``` Create 5 team member pages with the same layout: - Team Member: John Doe - Team Member: Jane Smith - Team Member: Bob Johnson - Team Member: Alice Williams - Team Member: Charlie Brown Each page should have a heading with their name and placeholder text ``` **What AI Does:** 1. Creates 5 pages 2. Builds identical Elementor structure for each 3. Customizes heading with each name 4. Returns all page URLs --- ### **Example 9: Template-Based Workflow** **Request:** ``` 1. Create a template from the "Product Page" layout 2. Create 10 new product pages using this template 3. Customize the heading for each product ``` **What AI Does:** 1. Exports "Product Page" as template 2. Creates 10 new pages 3. Applies template to each 4. Customizes content for each product 5. Returns summary --- ### **Example 10: Data Migration** **Request:** ``` Export all Elementor page layouts to backup files, then create a report of what was exported ``` **What AI Does:** 1. Lists all pages 2. Exports each page's Elementor data 3. Creates checksums for validation 4. Generates detailed report with: - Total pages exported - File locations - Data sizes - Export timestamps --- ## 🔧 **Workflow Examples** ### **Workflow 1: Redesign a Page** **Step-by-Step:** 1. **Backup Original:** ``` Create a backup of page "About Us" with label "Before Redesign" ``` 2. **Get Current Structure:** ``` Show me the structure of the "About Us" page ``` 3. **Make Changes:** ``` Update the About Us page: - Change hero background to gradient (blue to purple) - Update heading to "About Our Company" - Add a new section with 3-column team members ``` 4. **Review in Elementor:** ``` What's the Elementor editor URL for the About Us page? ``` 5. **If Issues, Restore:** ``` Restore the About Us page from backup "Before Redesign" ``` --- ### **Workflow 2: Build Multi-Page Site** **Complete Site Creation:** ``` Build a complete business website with these pages: 1. Homepage: - Hero section with company tagline - Services overview (3 columns) - Testimonials - Contact CTA 2. About Page: - Company history - Team section (4 columns) - Mission statement 3. Services Page: - Services header - 6 service cards (2 rows, 3 columns each) 4. Contact Page: - Contact heading - Contact form (placeholder) - Office locations All pages should use consistent brand colors: #667eea (primary), #48bb78 (accent) ``` **What AI Does:** 1. Creates all 4 pages 2. Builds custom Elementor layouts for each 3. Applies consistent styling 4. Links pages appropriately 5. Returns complete site map --- ### **Workflow 3: Content Replication** **Scenario: Franchise Sites** ``` I have a master site with perfect page layouts. I need to replicate these 5 pages to 10 franchise locations: - Homepage - Services - About - Locations - Contact For each franchise site: 1. Export layouts from master 2. Create pages on franchise site 3. Import layouts 4. Customize contact information ``` --- ## 🐛 **Troubleshooting Examples** ### **Example: Debug Connection Issues** **Request:** ``` I'm getting connection errors. Can you: 1. Check the health of the WordPress connection 2. Test if I can retrieve any pages 3. Show me error statistics ``` **What AI Does:** 1. Runs `health_check` tool 2. Attempts `get_pages` with error handling 3. Gets `error_statistics` 4. Provides diagnostic report --- ### **Example: Find Missing Elementor Data** **Request:** ``` Some of my pages show empty in Elementor editor. Can you check all pages and tell me which ones have Elementor data and which don't? ``` **What AI Does:** 1. Uses `list_all_content` to get all pages 2. Checks Elementor status for each 3. Returns categorized list: - ✅ Pages with Elementor data - ⚠️ Pages with partial data - ❌ Pages without Elementor data --- ### **Example: Performance Optimization** **Request:** ``` My page ID 123 is very large and slow to load in the editor. Can you: 1. Analyze the page structure 2. Get the data in smaller chunks 3. Tell me what might be causing performance issues ``` **What AI Does:** 1. Uses `extract_page_structure` to analyze 2. Uses `get_elementor_data_chunked` for efficient loading 3. Reports: - Total elements count - Widget types distribution - Potential performance issues - Optimization suggestions --- ## 🎯 **Quick Reference** ### **Create Content** ``` Create a [post/page] called "[title]" with [description] ``` ### **Update Content** ``` Update [post/page] [ID/slug] to change [what] to [new value] ``` ### **Build Layout** ``` Create a [description] section with [elements] ``` ### **Export/Backup** ``` [Export/Backup] [page ID/slug] to [file/backup] ``` ### **Import/Restore** ``` [Import/Restore] [file path/backup ID] to [page ID] ``` ### **Analyze** ``` Show me the structure of [page ID/slug] ``` ### **Batch Operations** ``` Create [number] [content type] with [specifications] ``` --- ## 💬 **Example Conversations** ### **Conversation 1: Complete Page Creation** **You:** > Create a new "Services" page **AI:** > I've created a draft page called "Services" with ID 456. What layout would you like? **You:** > Add a hero section with heading "Our Services", then a 3-column section for service descriptions **AI:** > Done! I've added: > - Hero section with "Our Services" heading > - 3-column section ready for content > > Would you like me to add specific service content to each column? **You:** > Yes, add: Web Development, Mobile Apps, Cloud Solutions **AI:** > Perfect! Each column now has a heading and placeholder text. The page is ready for review at: https://your-site.com/services/ --- ### **Conversation 2: Troubleshooting** **You:** > I can't see my Elementor changes on the live site **AI:** > Let me help diagnose this. First, let me check the page status... > > The page is currently in "draft" status. Would you like me to publish it? **You:** > Yes, publish it **AI:** > Page published! Also, I've cleared the Elementor cache. Your changes should now be visible at: https://your-site.com/your-page/ --- ## 📚 **Next Steps** - Explore [Tools Reference](TOOLS_REFERENCE.md) for detailed tool documentation - Read [Developer Guide](DEVELOPER_GUIDE.md) for advanced customization - Check [Troubleshooting Guide](TROUBLESHOOTING.md) for common issues --- **🔧 Ready to create amazing WordPress sites with AI!** 🚀