AI Builder Tutorial

Learn how to create amazing content with AI-powered WordPress blocks

Complete AI Builder Walkthrough

Watch this comprehensive tutorial to master all AI Builder features

Explore Real AI-Generated WordPress Page Examples

Browse concrete page screenshots created with AI Builder, with the exact prompts used for each style.

Looking for inspiration before generating your next page? Visit our AI Design Gallery to discover 9 editable style showcases and copy-ready prompts you can reuse in your own projects.

Open the AI Design Gallery

Key Features

Discover the powerful AI capabilities integrated into WordPress

AI-Powered Pages

Generate complete WordPress pages with AI using simple prompts

Smart Blocks

Create custom Gutenberg blocks with AI-generated content

AI Image Generation

Generate stunning images from text descriptions

AI Text Generation

Create compelling text content with AI assistance

AI Translation

Translate your pages and posts into multiple languages with AI

How to Use AI Builder

Step-by-step guide to master each feature

1. Creating AI-Powered Pages

Generate complete WordPress pages with AI

1

Access the Chat Widget

Look for the chat widget in the bottom-left corner of your WordPress editor

2

Describe Your Page

Enter a detailed prompt describing the page you want to create. Be specific about the content, style, and purpose

3

Generate Content

Click generate and watch as AI generates complete page content with appropriate Gutenberg blocks

💡
Pro Tip: If you don’t like how a block looks, you can reset it to the default style by removing the text in the right-hand sidebar under Block → Advanced → Additional CSS class(es).

2. Creating AI Blocks

Generate custom Gutenberg blocks with AI

1

Add AI Block

In the Gutenberg editor, click the "+" button and search for "AI Block"

2

Configure the Block

In the block settings panel, find the "AI Description" field

3

Describe Your Content

Enter a detailed description of the content you want the AI to generate for this block

💡
Pro Tip:AI blocks are perfect for adding content in a specific spot while keeping the rest of the page intact.

Editing Existing Blocks (Fast Workflow)

Iterate on your layout, content, and styles without starting from scratch

1

Add a New Block (Chat Widget)

Open the AI chat widget and click Generate block. AI will create a new block and append it to the bottom of the page without replacing your existing content.

2

Modify a Selected Block with AI

Click any block in the editor and use the small Modify with AI button. Describe what you want to change (for example: “Add a CTA button and make the section background light blue”).

3

Edit Block CSS (AI Builder CSS)

Select a block, open the block settings sidebar, and edit the AI Builder CSS field to customize styles for that block. This is the fastest way to fine-tune spacing, colors, typography, and effects.

4

Edit Global CSS

Use the widget’s CSS editor to manage your combined CSS (page + blocks) in one place when you need broader styling changes.

💡
Pro Tip: For better results, keep instructions specific.

3. Generating AI Images

Create stunning visuals from text descriptions

1

Add AI Image Block

Search for "AI Image" in the Gutenberg block library

2

Describe Your Image

In the block settings, enter a detailed description of the image you want to generate

💡
Pro Tip: You can select the aspect ratio when generating the image.

4. Creating AI Text Content

Generate compelling text with AI assistance

1

Add AI Text Block

Search for "AI Text" in the Gutenberg block library

2

Define Your Text

In the block settings, describe the type of text you want to generate (blog post, product description, etc.)

3

Generate and Edit

Click generate and edit the AI-created text to match your exact needs

💡
Pro Tip: Specify the tone (professional, casual, friendly), length, and target audience in your description for better results.

5. Translating Pages with AI

Automatically translate your content into multiple languages

1

Access Translation Feature

In the WordPress admin, go to your posts or pages list. You'll find a "✨ Translate with AI" link in the row actions for each post or page

2

Select Target Language

Click "Translate with AI" and a modal will appear. Choose the target language from the dropdown (English, French, Spanish, German, Italian, and more)

3

AI Translation Process

Click "Translate" and AI will automatically translate the page title, meta description, and all content blocks while preserving the structure and formatting

4

Review and Publish

A new draft page will be created with the translated content. Review it, make any necessary edits, and publish when ready

💡
Pro Tip: Translated pages are automatically linked together. Use the Language Switcher block on your frontend to let visitors switch between languages. You can also translate headers and footers from the Site Editor by clicking the "Translate with AI" button in the bottom-right corner.

Ready to Get Started?

Start creating amazing content with AI Builder today