How to use Elementor

Elementor is the tool you’ll use to edit and build pages on your website. It’s a drag-and-drop builder that lets you control layouts, text, images, and styling — without touching code.

✏️ Editing a Page

Log in to your WordPress admin.
Go to Pages in the left menu.
Hover the page you want → Edit with Elementor.
The Elementor editor opens — click any section, column, or widget to edit.
Make changes → click Update (bottom left).

🧭 Navigator (Your Page Structure Map)

Navigator is one of Elementor’s most useful tools — especially when working on complex pages.

What it does:

Shows a hierarchical list of every section, column, and widget
Lets you select hidden/nested elements that are hard to click
Helps you rename sections for clarity
Speeds up moving, duplicating, or deleting items

How to open it:

Right-click anywhere → Navigator, or
Click the Navigator icon (bottom-left panel), or
Press CMD/CTRL + I

Use it. It keeps the page organised and prevents “lost elements” inside deep layouts.

📱 Mobile & Tablet Responsive Views

Elementor allows you to design responsively across Desktop, Tablet, and Mobile.

Switch views using the icons at the bottom of the Elementor panel.

What you can adjust per device:

Font sizes
Padding & margins
Column layouts
Image sizes
Alignment
Visibility (show/hide on each device)

Important:

A layout that looks perfect on desktop can break on mobile. Always check all three views before publishing.

🔧 Other Useful Tools Inside Elementor

🔄 History (Undo / Redo / Revisions)

Elementor keeps a full history of:

Every action you’ve taken
Every major revision

If something breaks, roll back instantly.

Bottom-left → History

🎨 Global Site Settings

Ensures consistent branding across the site.

Top-left menu (☰) → Site Settings:

Global colours
Global typography
Buttons
Form elements
Theme styles

Avoid overriding global styles unless necessary — consistency = easier maintenance.

🧩 Templates

Templates control reusable elements across the site (headers, footers, blocks, popups).

Found under Templates in WordPress admin.

Useful for:

Reusing layouts
Keeping branding consistent
Editing a design once and updating it everywhere

If you’re not sure whether something is a template or a page, ask first — changing a template affects the entire site.

Elementor’s right-click menu is full of time-savers:

Copy / Paste styles
Copy / Paste entire widgets or sections
Duplicate
Save as template
Rename (helpful inside Navigator)

Most people underuse this — but it’s how you work efficiently in Elementor.

💡 Best Practices

Use Navigator — it keeps layouts clean and prevents nesting chaos.
Check desktop, tablet, and mobile before updating.
Avoid unnecessary extra sections/columns; they slow the site down.
Use global styles instead of styling on individual widgets.
Save often and don’t leave Elementor open in unused tabs.
If something looks wrong, clear cache + used CSS before assuming it’s broken.