Practical projectsLesson 1 of 8 · 6 steps

Build your first Elementor page

Create one editable draft, check it on mobile, and make one focused improvement.

Video coming soon

Your next step is ready.

Follow the complete written guide below.
The video will join it here when it’s ready.

Start the written lesson

Before you start

A verified AI connection.
Elementor active and selected in Page Builders.
A practice site or draft page.

Let’s do this, step by step.

Step 01

Confirm the site and available widgets

Ask the AI to identify the site and inspect heading, text, and button widgets without editing.

We will build a fictional studio page. First, check the site and the widgets it actually has. Do not assume a successful connection means every widget is available.

Copy and adapt

                    Identify this site and list its pages. Check that Elementor is active and inspect the heading, text-editor and button widgets. Do not change anything.

Step 02

Give a small, complete brief

Use the prompt below and review the planned sections before the AI saves.

Tell the AI what the page should say and keep it a draft. We want normal editable Elementor parts, so we can keep working in the editor afterward.

Copy and adapt

                    Create one Elementor draft titled Northline Studio — practice. Use native containers, headings, text and a button. Add a hero for a fictional design studio, three service cards for Brand identity, Web design and Launch support, and a contact introduction saying real contact details will be added before launch. Use one H1. Do not invent testimonials or contact details. Keep styles page-local, stack cards on mobile and do not change the global kit. Show the plan first.

Step 03

Validate and create once

Ask the AI to validate build-page with dry_run, review warnings, then create the draft once.

The build-page action creates the page itself. Do not create an empty page first. If the request times out, check whether the draft exists before repeating it.

Step 04

Read back the saved result

Record the returned page ID. Ask for the saved structure, draft status, and preview link.

Use the saved page ID for all later changes. The AI should read WordPress again and check every section, rather than only saying the task is done.

Step 05

Open the editor and preview

Open the draft in Elementor. Select individual headings, inspect the Navigator, and review desktop and phone widths.

Check that headings are separate editable widgets. Scroll through the whole page, test the button, and look for clipped text or sideways scrolling.

Step 06

Make one revision

Describe one visible issue and ask the AI to fix only that part on the same page ID.

For example, ask it to reduce mobile spacing in one section. Read the saved result and check the preview again. Leave this fictional example as a draft.

Copy and adapt

                    On the same draft page ID, inspect the services section and reduce excessive mobile spacing only. Preserve the copy, desktop layout and draft status. Do not create another page. Read the saved change back.

You’re done when…

One draft exists, its sections are individually editable, and desktop/mobile previews have been checked.

Keep the reference handy.

The docs cover tool details and requirements for this lesson.