0.3Discovering the editor
The essentials in 30 seconds
- Canvas = the preview area where you see and build the page live.
- Panel (on the left) = either the widget library (to drag), or the settings of the selected element.
- Core flow: drag a widget → select it → configure it (in the panel).
Through-line — Nadia opens the editor
Nadia clicks "Edit with Elementor" on the joiner's home page. The screen splits: a panel on the left, the page in the center. At first she hunts for things, clicks everywhere. This section gives her the map: where to drop, where to set, how to find an element lost in a busy layout.
Continues case 0.2 — Nadia moves from installing to building.
1. The editor map
The editor has two areas. The canvas (preview) takes the center: it's the page as it will appear, built live. The panel (on the left) has two faces: either the widget library you drag onto the canvas, or the settings of the currently selected element. You switch between them depending on whether you're adding an element or configuring it.
At the bottom of the panel, tools: template library, Navigator (structure navigation), responsive preview, history, save/publish. The Navigator is precious when the page gets complex: it lists all containers and widgets in a tree.
2. The core flow
The fundamental gesture repeats for everything: DRAG a widget from the panel onto the canvas → SELECT it (click) → CONFIGURE it in the panel. Nadia drags a Heading widget, clicks it, and the panel instantly shows its settings (content, style, advanced).
When an element is "lost" in a busy layout, the Navigator lets you find and select it by name in the tree, with no click-hunting. It's one of the first comfort reflexes to build.
🔎 Concrete example — Place a first heading (Nadia's case)
1. Panel → search "Heading" → drag onto the canvas.
2. Click the heading → the panel shows its settings.
3. Content tab: type "Benali Joinery".
→ Need to find a button lost further down? Open the Navigator.Result: you can add and set any element.
Lesson: the Navigator saves huge time on busy pages.
Section vocabulary
- Edit with Elementor
- The button (from a page/post) that opens the visual editor.
Simple example: Nadia clicks "Edit with Elementor" on the home page.
What it is not: staying in the classic WordPress editor (Gutenberg).
Reflex: to design visually, open the Elementor editor.
- Canvas (preview)
- The central area where you see and build the page live, as it will appear.
Simple example: Nadia sees the heading appear right after setting it.
What it is not: imagining the result without seeing it, as in code.
Reflex: what's in the center and looks like the page = the canvas.
- Panel
- The left pane: widget library to drag, or settings of the selected element.
Simple example: the panel switches from widgets to settings when Nadia selects a heading.
What it is not: thinking the panel is a fixed menu.
Reflex: I add → library; I select → settings.
- Navigator (structure)
- The tree of the page's containers and widgets, to navigate and select by structure.
Simple example: Nadia finds a buried button by clicking it in the Navigator.
What it is not: click-hunting an element in a very busy page.
Reflex: element not found by clicking → open the Navigator.
- Core flow
- Drag a widget → select it → configure it: the gesture repeated for every element.
Simple example: Nadia applies the same flow to a heading, an image, a button.
What it is not: looking for a different method for each widget type.
Reflex: always: drag, select, configure.
In practice — Getting your bearings in the editor
- Open a page with "Edit with Elementor".
- Drag a Heading widget onto the canvas, then select it.
- Spot the three settings tabs (Content, Style, Advanced).
- Open the Navigator and spot the page's structure (containers, widgets).
Ready-to-say script — show the editor to the client (30 s)
"Here's the editor: in the center, your page for real; on the left, either the list of elements to add, or the settings of the element I clicked on. I build live, you see the result at once. Nothing is published until I click Publish."
Reassure: the draft isn't online until published.
Copy-paste template — editor landmarks
OPEN: "Edit with Elementor" button
CANVAS: central area (live preview)
LEFT PANEL: library (add) OR settings (configure)
FLOW: drag → select → configure
FIND AN ELEMENT: Navigator (structure tree)
PUBLISH: green button at the bottom of the panelSimple page
Few elements: direct clicking is enough, the Navigator is optional.
Busy page
Many nested containers: the Navigator becomes essential to select precisely.
Narrow screen
Collapse the panel to see the canvas large, then reopen it to set things.
Teamwork
Naming containers in the Navigator helps the team find their way.
✓ Best practices
- Memorize the drag → select → configure flow.
- Use the Navigator on busy pages.
- Only publish once satisfied (the draft isn't online).
✗ Common pitfalls
- Click-hunting an element instead of opening the Navigator.
- Forgetting the panel changes role with context.
- Thinking changes are online before publishing.
Key takeaways
- Canvas = live preview; panel = library or settings.
- Core flow: drag → select → configure.
- Navigator = structure tree to find an element.
- Nothing is published until you click Publish.
48h challenge — apply tomorrow
Open a page in Elementor, add a heading, an image and a button via the drag → select → configure flow, then find each one in the Navigator. 15 minutes, without publishing.
- I can open the editor and spot canvas and panel.
- I apply the drag → select → configure flow.
- I find an element via the Navigator.
Frequently asked questions
Are my changes live right away?
No: you work on a draft. Nothing is published until you click "Publish" (or "Update").
I can't find an element anymore, what do I do?
Open the Navigator (structure icon at the bottom of the panel): it lists all containers and widgets in a tree; click the element to select it.
Can I undo an action?
Yes: the history (at the bottom of the panel) lets you undo/redo and go back to earlier states of the page.
On a very busy home page, Nadia can no longer find the "Request a quote" button. What's the right reflex?