📖 Complete Guide

TemplateGoat AI Section Generator

Everything you need to know to build stunning Elementor sections with AI — from your first generation to advanced refinements.

✦   Open the AI Generator
What Would You Like to Learn?
🤖
Section 01

What the AI Section Generator Does

The TemplateGoat AI Section Generator is a powerful tool that uses Claude AI to instantly create production-ready HTML sections for your WordPress Elementor websites. Instead of spending hours coding or designing from scratch, you describe what you want and the AI builds it for you in seconds.

Every section generated is a complete, self-contained HTML snippet — with all CSS included, animations, responsive design, and real copy. Just paste it into an Elementor HTML widget and it's live on your site.

✓
Brand-Matched Design

Analyse your website URL to extract brand colors and fonts, or upload a screenshot — the AI visually matches your existing design language.

✓
11 Section Types

Hero banners, pricing tables, testimonials, FAQs, portfolios, contact forms, stats sections and more — each with its own professional blueprint.

✓
9 Style Vibes

From Modern Minimal to Dark Luxury, Glassmorphism to Brutalist — pick the aesthetic that fits your brand perfectly.

✓
AI Refine — Free

Not happy with something? Describe the change and the AI modifies it instantly. No extra credits needed — 3 free refines per generation.

✓
Save & Reuse Sections

Save your best sections to your account. Load them any time, edit them, or use them as starting points for new projects.

👣
Section 02

Step-by-Step: How to Use It

🔐
Members only: You need a TemplateGoat account to use the generator. Free members get 3 credits, Premium members get 20 credits, and Admins get 200 credits.
1

Open the Generator & Log In

Go to templategoat.com/ai-section-builder/templategoat-generator and log in with your account. You'll see your status bar showing your role and remaining credits.

2

Add Your Website Reference (Optional but Recommended)

Enter your website URL and click Analyse to extract your brand colors and fonts automatically. Or click Screenshot to upload a screenshot of your site — this gives Claude the best visual reference to match your design.

3

Choose Section Type, Style & Animations

Select the type of section you want (Hero, Pricing, FAQ, etc.), pick your preferred style vibe (Dark Luxury, Modern Minimal, etc.), and choose your animation preference. These three dropdowns shape the entire output.

4

Describe Your Section

In the text area, describe exactly what you want. Be specific — mention your company name, key messages, colors, CTAs. The more detail you give, the better the result. For example: "A hero section for Optimus Agency with a bold headline about AI solutions, dark purple background, gold CTA button saying Get Started, floating particle effects."

5

Click Generate

Hit the ✦ Generate HTML Section button. The form will be replaced by a loading animation showing each step of the generation process. This usually takes 15-30 seconds.

6

Preview & Download

Your section appears in a Live Preview panel below. Switch between Live Preview, HTML Code, and Edit & Refine tabs. When you're happy, click Copy HTML or Download .html.

✏️
Section 03

How to Use Edit & Refine

The Edit & Refine tab is one of the most powerful features of the generator. After your section is generated, click the ✏️ Edit & Refine tab in the preview panel to access three powerful tools.

✦

Live Code Editor

The left panel shows the full HTML of your section. You can edit it directly — change text, colors, sizes, anything. It's a real code editor inside your browser.

✦

AI Refine — Free, No Credits

Describe a change in plain English and the AI modifies the section for you. Examples: "Make the headline bigger", "Change the button color to red", "Add a gradient background", "Make it more modern". You get 3 free refines per section — generate a new section to reset the counter.

✦

Apply to Preview

After editing the code manually, click ↺ Apply to Preview to update the live preview with your changes. This also saves a version in the history.

✦

Version History

The right panel keeps a history of your last 3 versions. Made a change you don't like? Click Restore on any previous version to go back instantly.

💡
Pro tip: Use AI Refine for big changes (restructure, restyle) and the manual editor for small tweaks (change a word, swap a color hex). This combination gives you full control without spending extra credits.
💾
Section 04

How to Save & Manage Sections

Your generated sections can be saved to your TemplateGoat account so you can access them anytime — even after closing the browser. This is perfect for building a personal library of sections for different projects.

1

Save a Section

After generating a section, click the 💾 Save Section button in the preview header. You'll be prompted to give it a name — something descriptive like "Hero — Optimus Agency Dark" makes it easy to find later.

2

View Saved Sections

Your saved sections appear in the sidebar on the right of the page. Each shows a live mini-preview thumbnail so you can visually identify them at a glance. The sidebar shows your 2 most recent sections.

3

View All Sections

Once you have 3 or more sections saved, a View All button appears. Click it to open the full gallery modal showing all your saved sections in a grid with larger thumbnails.

4

Load a Saved Section

Click Load on any saved section to bring it back into the editor. It will appear in the Live Preview and Edit & Refine tabs — ready to tweak, download, or use as a starting point.

📦
Storage limits: Free members can save up to 5 sections. Premium members can save up to 50 sections. To save a new section when you're at the limit, delete an older one first.
⚡
Section 05

How to Paste into Elementor

Getting your generated section into Elementor is a simple 3-step process. The HTML is designed specifically to work inside Elementor's HTML widget without any conflicts.

1

Copy the HTML

In the preview panel, click ⧉ Copy HTML to copy the full section code to your clipboard. Alternatively, click ⬇ Download .html to save it as a file first.

2

Add an HTML Widget in Elementor

Open your page in Elementor. Add a new section or find where you want to place it. Search for the HTML widget in the element panel and drag it onto your page.

3

Paste & Update

Click on the HTML widget to open its settings. In the HTML Code field, paste your copied code. Click Update — your section is now live on the page!

🛡️
No style conflicts: Every generated section is wrapped in a unique scoped CSS class, so Elementor's global styles won't interfere with your section's design. What you see in the preview is exactly what you'll get on your page.
📐
Full width tip: For hero sections or full-width designs, set the Elementor section to Full Width and set padding to 0 before adding the HTML widget. The generated HTML handles its own spacing internally.
🏆
Section 06

Tips for Best Results

Getting great results from the AI comes down to how well you communicate your vision. Here are the most impactful tips from power users:

📸
Always Upload a Screenshot
A screenshot of your website gives Claude the full visual context — colors, spacing, typography, card styles. This single step dramatically improves how well the section matches your brand.
✍️
Be Specific in Your Prompt
Include your company name, exact CTA text, key messages, and any specific design requests. "A hero section" gives generic results. "A dark hero for Optimus Agency with 'Get More Clients' headline and gold CTA" gives something stunning.
🎨
Match Style to Your Brand
The Style/Vibe dropdown makes a huge difference. A law firm should use "Clean Corporate", a luxury brand should use "Dark Luxury", a startup can use "Bold & Vibrant". Pick the closest match to your existing brand.
🔄
Use Regenerate Freely
Each generation costs 1 credit but gives you a completely fresh take. If the first result isn't quite right, try regenerating with a slightly different prompt before using refines. Different seeds = different creative directions.
🎯
Use Refine for Small Tweaks
AI Refine is free and powerful. Use it for targeted changes: "Make the headline font bigger", "Remove the background image", "Change all gold colors to my brand purple #5A2860". Be specific about what to change.
💡
Mention Real Content
Instead of letting the AI guess your content, mention real details: your actual service names, real statistics ("10,000+ customers"), your actual tagline. The AI writes real copy — give it real material to work with.
📱
Always Check Mobile
Every section is built responsive, but always check the mobile view after pasting into Elementor. Use Elementor's device preview to verify it looks great on phones and tablets before publishing.
💾
Save Versions as You Go
Hit 💾 Save Section after each round of refinements you're happy with. This builds a library of your work and means you can always go back to a previous version if you over-refine.

Ready to Build Something Stunning?

Open the AI Section Generator and create your first section in under 2 minutes.

✦   Start Generating Now