Elementor Interface Overview
Your Complete Guide to Building Professional Websites Without Coding
Master the #1 WordPress Page Builder
12+ Million Websites Worldwide
MJ
by Mandeep Singh Josan
www.inkspirepixels.com
Why Elementor? The Game-Changer for Non-Tech Business Owners
60% of Indian WordPress websites built after 2022 use Elementor. It turns website building from a technical nightmare into a creative, enjoyable process that anyone can master in hours, not months.
Visual WYSIWYG Editor
See exactly what you're building in real-time, no guessing required.
No Coding Required
Drag, drop, and design like arranging furniture in a room.
Professional Results
Create websites that look like they cost ₹50,000+ for a fraction of the cost.
www.inkspirepixels.com
Getting Started: Your First Page in 3 Simple Steps
01
Clean Your WordPress Workspace
Navigate to Pages → All Pages in WordPress Dashboard. Remove default/sample pages and start with a clean slate.
02
Create Your First Page
Click "Add New" to create a page, name it (e.g., "Home"), then click Publish twice to make it live.
03
Launch Elementor Editor
Click "Edit with Elementor" button (NOT the default WordPress editor). This opens the Elementor interface where the magic happens.
Pro Tip: The "Edit with Elementor" button is your gateway. Bookmark this step mentally—you'll use it every single time you create or edit a page.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Containers: The Foundation of Every Elementor Page
Containers are invisible boxes that hold and organise your content. They're required BEFORE you can add any elements and control how elements are arranged and flow on your page.
www.inkspirepixels.com
Working with Elements: Your Building Blocks
Basic Elements (Free Version)
- Heading – Titles and section headers (H1, H2, H3)
- Text Editor – Paragraphs, descriptions, body content
- Image – Photos, logos, graphics
- Video – Embed YouTube, Vimeo, or upload your own
- Button – Call-to-action links
- Divider – Visual separators between sections
- Spacer – Add vertical spacing
- Google Maps – Location embeds
Pro Elements (Requires Elementor Pro)
- Form Builder – Contact forms, lead capture, surveys
- Portfolio Gallery – Showcase your work
- Pricing Tables – Service packages, product pricing
- Testimonials – Client reviews and social proof
- Advanced widgets – Dynamic content
How to Add Elements
- Click the + (plus) button inside any container
- Drag your desired element from the left panel
- Drop it onto the canvas
- Customise using the settings that appear
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Essential Navigation: The Power of the "E" Menu
Accessing the Main Menu
Click the "E" icon (Elementor logo) in top left corner to reveal key options:
Pro Tip
Set up Global Colours and Fonts BEFORE building your first page. This ensures brand consistency and saves hours of manual updating later.
1
Site Settings ⭐
Global Colours, Global Fonts, Layout, Custom CSS
2
Theme Builder
Design headers, footers, and templates
3
History
View all changes, revert to any previous state
4
User Preferences
Interface colour scheme, UI preferences
www.inkspirepixels.com
Site Settings: Building Your Brand Foundation
Global Colours
Your Brand Palette: Primary, Secondary, Text, and Accent colours. Change one colour, update entire website instantly.
Global Fonts
Typography Standards: Primary Headline, Secondary Headline, Body Text, Accent Font. Professional websites have consistent typography.
Layout Settings
Structure Control: Content Width (1140px standard), Widgets Space, Page Title Display settings.
Custom CSS
Advanced Styling: Add custom code for unique styling. Not required for beginners, but powerful when you're ready.
Action Item: Before building ANY pages, spend 10 minutes setting these up. Your future self will thank you!
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Page-Specific Settings & Controls
Basic Settings
- Page title—edit the page name
- Status—published, draft, pending, private
- Hide title toggle—remove page title from display
Why Hide Titles?
Cleaner design, more professional appearance. Use headings in your design instead.
Additional Features
- Add elements button (+) for quick access
- Page templates—save and reuse designs
- Add new page without leaving Elementor
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Responsive Design: One Website, All Devices
🖥️ Desktop View
Standard computer screens (1200px+ wide). Design your desktop version first. Most detailed, information-rich layout.
📱 Tablet Portrait
iPad and tablet devices (768px-1024px). Test and adjust layouts for medium screens. May need to stack some side-by-side elements.
📱 Mobile View
Smartphones (below 768px). Critical for user experience—60%+ traffic is mobile. Simplified layouts, larger buttons, readable text.
In India, 70%+ of website traffic comes from mobile devices. If your site doesn't work well on mobile, you're losing customers!
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Structure Panel & History: Your Safety Net
Structure Panel (Tree Icon)
Complete hierarchy of your page showing all containers and nested elements in a visual tree structure.
- View entire page organisation at a glance
- Drag and drop elements to reorder them
- Quickly navigate to specific sections
- Delete, duplicate, or move containers easily
Best for: Complex pages with many sections, troubleshooting layout issues, reorganising page structure.
History Panel (Clock Icon)
Every action you take is tracked chronologically with timestamps. Dozens of actions saved per session.
- Click any previous action to revert to that point
- All changes after that point are undone
- Acts as unlimited undo/redo
Lifesaving scenarios: "I deleted something important!", "The page looked better 10 minutes ago", "I want to try something risky but need a backup plan".
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
The Publishing Workflow
Professional Publishing Checklist
- Content reviewed—no typos
- Images optimised—compressed for fast loading
- Links tested—all buttons work
- Desktop view checked
- Tablet view checked
- Mobile view checked
- Preview tested in actual browser
- SEO basics—page title, meta description
Remember: Published pages can always be edited. Your website evolves with your business!
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Get Elementor Page Builder Here.
www.inkspirepixels.com
Quick Reference Guide: Elementor at a Glance
Essential Keyboard Shortcuts
- Ctrl + Z (Cmd + Z on Mac) – Undo last action
- Ctrl + S (Cmd + S on Mac) – Save/Update page
- Ctrl + P (Cmd + P on Mac) – Preview page
- Delete/Backspace – Delete selected element
Interface Cheat Sheet
LEFT PANEL – Elements & Widgets with search bar
TOP BAR – E menu, + Button, Gear icon, Clock, Eye icon, Responsive toggles, Publish button
RIGHT PANEL – Structure & Navigator tree view
CANVAS – Your workspace with + buttons to add containers
Common Beginner Mistakes to Avoid
❌ Skipping Global Colours/Fonts setup
❌ Not testing on mobile devices
❌ Using too many different fonts
❌ Forgetting to save changes
❌ Not using containers
✅ Instead: Set globals first, test mobile, stick to 2-3 fonts, save often, always use containers
www.inkspirepixels.com
Your Next Steps: From Beginner to Confident Builder
1
Week 1 – Interface Mastery
Practise creating containers and adding elements. Build 2-3 simple practice pages. Experiment with different layouts.
Goal: Feel comfortable navigating the interface
2
Week 2 – Design Basics
Set up Global Colours and Fonts for your brand. Create your first real homepage. Learn element styling.
Goal: One complete, professional-looking page
3
Week 3 – Responsive Design
Test and optimise pages for mobile. Understand tablet breakpoints. Adjust layouts for different screen sizes.
Goal: Mobile-friendly website
4
Week 4 – Advanced Features
Explore Pro elements. Create custom headers/footers with Theme Builder. Learn form creation for contact pages.
Goal: Full-featured, multi-page website
www.inkspirepixels.com
Essential Resources
Official Documentation
docs.elementor.com
Video Tutorial Library
Community Support
Elementor Facebook groups
Free Templates
Built-in Elementor library
Practice Exercises
- Recreate your favourite website's homepage
- Design a simple landing page for a fictional business
- Build a 3-page website (Home, About, Contact)
- Experiment with animations and effects
Every Elementor expert started as a beginner staring at a blank canvas. The difference? They practised, made mistakes, and kept building.
www.inkspirepixels.com
Recommended Tools & Discount Links
Please note that the some of the links above (in purple) are my affiliate/referral links. If you make any purchase from my links, you will get extra discounts and i will earn a small amount at no extra cost to you. This revenue will help me continue making quality content for you.
www.inkspirepixels.com