Choose your builderLesson 2 of 11 · 7 steps

Build with Breakdance

Build a nested native layout and adjust responsive settings.

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

EMCP Pro and a verified AI connection.
Breakdance 2.8.3–2.8.x in Breakdance mode.
A practice site and a draft page.

Let’s do this, step by step.

Step 01

Select and save the builder

Open Setup → Page Builders. Select Breakdance under 1. Standalone builder. Choose Save changes. A Not detected card lists missing requirements.

Start with the required plugin or theme active. Select this builder and click Save changes. This does not convert existing content.

Step 02

Enable the actions and reconnect

Open Setup → Tools → Breakdance. Inspect read and write switches; enable the actions needed for this practice task, then Save changes and reconnect your AI app.

Open this integration’s Tools tab. Check both read and write actions; Pro read tools can also start off on a fresh install. Save your choices and reconnect the app so it reads the updated list.

Step 03

Inspect before building

Ask the AI to read Breakdance's context, supported element controls, and existing design settings.

Ask what this installed version can actually edit. Seeing an element in the catalog does not always mean EMCP can create or change it.

Step 04

Create the page structure

Create one Breakdance draft with a section, text, image, and button using the discovered native controls.

The AI should keep sections and their children in the structure Breakdance expects. Let it create the empty native draft, then add the reviewed layout.

Step 05

Set phone-specific values

Read the installed breakpoints and set appropriate mobile typography and spacing.

Breakdance has its own responsive controls. Ask the AI to use those exact controls instead of copying Elementor settings.

Step 06

Preserve shared design

Keep global design settings and template assignments unchanged while revising the draft.

This walkthrough edits page content. Forms, specialized nesting, code, and shared global blocks need workflows outside this supported structural subset.

Step 07

Read back and preview

Read the saved page again. Open the native editor, then inspect the frontend at desktop and phone widths.

Check the saved content, editing controls, images, and links. If a newer edit is detected, read it before trying again. A save response alone does not prove the page looks right.

You’re done when…

The Breakdance result remains natively editable and the intended save/publication state is verified.

Keep the reference handy.

The docs cover tool details and requirements for this lesson.

You only need the guide for the app or builder you use. Ready to build? Try an Elementor draft or use Gutenberg.