How to Install and Set Up Elementor on WordPress (Step-by-Step 2026)

By /

Introduction: Is Elementor Still the Best Page Builder in 2026?

Elementor remains the most widely used page builder plugin for WordPress by a significant margin — powering over 10 million active websites as of 2026. That dominance has attracted competition: Bricks Builder has earned a passionate following among developers for its cleaner code output, and WordPress’s native block editor (Gutenberg) has matured enough that simple sites no longer require a page builder at all.

So should you use Elementor in 2026? For non-coders, freelancers, and small business owners who need visual control over page design without touching PHP or CSS — yes. Elementor’s drag-and-drop interface, template library, and ecosystem of compatible themes and plugins remain unmatched for its target audience.

Elementor Free vs Elementor Pro

Feature Elementor Free Elementor Pro
Drag-and-drop editor Yes Yes
Basic widgets (text, image, button) Yes Yes
Template library Limited Full (300+ templates)
Theme Builder No Yes
Popup Builder No Yes
WooCommerce widgets No Yes
Form widget No Yes
Dynamic content No Yes
Price Free From $59/year

 

Performance in 2026: Elementor has significantly improved its performance footprint since 2024. The ‘Improved Asset Loading’ feature (covered in Step 5) dramatically reduces CSS bloat, and Elementor’s Core Web Vitals scores on well-optimized sites are now genuinely competitive. The performance stigma from 2021-2022 is largely outdated.

 

Prerequisites Before Installing

  • Hosting: Elementor is resource-intensive relative to a bare WordPress install. Shared hosting plans under ₹150/month (or $2/month) often struggle. Recommended: SiteGround, Hostinger Business, or Cloudways with at least 512MB PHP memory limit. If your host shows memory errors, Elementor will not run reliably.
  • WordPress version: WordPress 6.0 or higher is required. WordPress 6.5+ is recommended for full compatibility with 2026 Elementor releases.
  • Theme: Use Hello Elementor (free, built by the Elementor team and purpose-designed as a blank canvas) or a lightweight theme like Astra or Kadence. Avoid theme frameworks with heavy built-in styling — they conflict with Elementor’s layout system.
  • Backup: Before installing any major plugin, back up your site. Use UpdraftPlus (free) to save a complete backup to Google Drive. This takes 5 minutes and prevents a recoverable situation from becoming a catastrophe.

 

Step 1: Install Elementor (Free Version)

Log into your WordPress admin dashboard (yourdomain.com/wp-admin). Navigate to Plugins > Add New Plugin.

  1. In the search bar, type ‘Elementor Website Builder’ and press Enter.
  2. Locate the official Elementor plugin (publisher: Elementor.com, 5+ million active installs). Click Install Now.
  3. Once installation completes, click Activate.
  4. You will be redirected to the Elementor setup wizard. Do not skip this — it configures essential defaults.

 

Setup Wizard Selections

  • Site type: Choose ‘Blog’ for content sites or ‘Business’ for service/landing pages. This sets default template categories shown in the library.
  • Hello Elementor theme: If prompted to install, do so — it is free and optimal for Elementor builds.
  • Kit import: The wizard offers a starter design kit. You can import one or skip and start from scratch. Importing a kit is the fastest path to a working page layout.

 

Verify It’s Working

Navigate to Pages > Add New. Click ‘Edit with Elementor.’ The Elementor canvas should load — a blue toolbar on the left, a blank canvas in the center. If you see a white screen instead, see the Troubleshooting section.

 

Step 2: Navigating the Elementor Editor

Panel Overview

  • Left panel — Widgets: Contains all draggable elements organized by category: Basic (text, image, button), General, Pro (if installed). Drag any widget onto the canvas to add it.
  • Left panel — Global Settings: Access via the hamburger menu (top-left). Set global fonts and colors here — changes propagate site-wide.
  • Navigator: A tree view of all elements on the current page. Invaluable for selecting nested elements that are difficult to click directly on the canvas.

Drag-and-Drop Basics

Elementor pages are structured in a hierarchy: Sections (full-width rows) contain Columns, which contain Widgets. To build a two-column layout with an image on the left and text on the right, create a Section, set it to two columns, then drag an Image widget into the left column and a Text Editor widget into the right column.

  • Right-click any element to access duplicate, copy style, and delete options.
  • Hold Ctrl (Cmd on Mac) while clicking to multi-select elements.
  • Use the Edit Section (blue) vs Edit Column (grey) handles to target the correct level.

Responsive Editing

Click the responsive icons at the bottom of the left panel (desktop, tablet, phone) to preview and edit your layout at each breakpoint. Any styling change made in tablet or mobile view applies only to that breakpoint — desktop styles cascade down unless overridden.

Saving

Click the green Publish or Update button at the bottom of the left panel. Use the arrow next to it to save as a Draft or Template for reuse across other pages.

 

Step 3: Building Your First Page

Using a Pre-Made Template (Fastest Method)

  1. Click the folder icon in the Elementor editor toolbar (Add Template).
  2. Browse the Pages tab — select a full-page template that matches your use case.
  3. Click Insert. The template loads into your canvas, fully editable.
  4. Replace placeholder text and images with your own content. Publish when ready.

 

Building from Scratch: A Simple Home Page

For a basic Home page, you need four sections: a Hero banner, an About section, a Services/Features row, and a Contact/CTA block.

  • Hero section: Add a Section with a background image. Inside, add a Heading widget with your main value proposition, a Text Editor with a subtitle, and a Button widget linking to your key CTA page.
  • Features row: Add a three-column Section. In each column, place an Icon widget, a Heading, and a Text Editor. This creates a classic icon + title + description feature grid.
  • CTA section: A single-column Section with a contrasting background color, a Heading, and a Button. Keep it simple.

Setting Global Fonts and Colors

Go to Hamburger Menu > Site Settings > Global Colors and Global Fonts. Define your primary, secondary, text, and accent colors here. Set your heading and body font families. These settings ensure visual consistency without manually styling each element — a critical step before building multiple pages.

 

Step 4: Upgrade to Elementor Pro — When & Why

Elementor Free is sufficient for simple pages and blogs. You should upgrade to Elementor Pro when your project requires any of the following:

  • Theme Builder: Design custom headers, footers, single post templates, and archive pages — the features that make a site feel fully designed rather than using the default theme’s structure.
  • Popup Builder: Create email opt-in popups, announcement bars, or slide-in forms without a separate plugin.
  • WooCommerce widgets: If you are building an eCommerce site, Pro’s WooCommerce widget library is essential for styling product pages and checkout flows.
  • Form widget: Build and manage forms (contact, lead generation, multi-step) directly in Elementor without WPForms or Contact Form 7.

Elementor Pro Pricing (April 2026)

Plan Price (Annual) Sites Best For
Essential $59/year 1 site Freelancers building their own site
Advanced $99/year 3 sites Freelancers with a few clients
Expert $199/year 25 sites Agencies and active freelancers
Agency $399/year 1000 sites Large agencies

 

Affiliate link: [Insert Elementor Pro affiliate link — check for current discount codes]

Free alternatives: The free plugins Essential Addons for Elementor and ElementsKit Lite add dozens of additional widgets to Elementor Free, covering many (not all) Pro widget use cases without a paid upgrade.

 

Step 5: Performance Optimization After Install

Enable Elementor’s Built-In Optimizations

Navigate to Elementor > Settings > Performance in your WordPress admin. Enable these settings:

  • Improved Asset Loading: The single most impactful setting. Loads Elementor’s CSS only on pages where it is actually used, rather than injecting it globally. Can reduce home page load time by 0.5-1.5 seconds on non-Elementor pages.
  • Inline CSS for critical elements: Inlines above-the-fold CSS to eliminate render-blocking stylesheets.
  • Optimized DOM output: Reduces wrapper div nesting, improving Core Web Vitals scores.

Caching Plugin Integration

  • LiteSpeed Cache (free): If your host runs LiteSpeed Web Server (Hostinger, A2 Hosting), LiteSpeed Cache is the best free caching plugin available. Enable Page Cache, Image Optimization, and CSS/JS minification. Flush the cache after every Elementor publish.
  • WP Rocket (paid, ~$59/year): The easiest-to-configure caching plugin for non-LiteSpeed hosts. Its Elementor compatibility mode handles cache flush automatically on page saves — a genuine time-saver for active builders.

WP Rocket affiliate link: [Insert WP Rocket affiliate link]

PageSpeed Workflow

  1. Run PageSpeed Insights (pagespeed.web.dev) on your key pages before any optimization.
  2. Enable Elementor’s Performance settings above.
  3. Activate your caching plugin.
  4. Run PageSpeed again and compare. Target 70+ on mobile, 85+ on desktop for a well-built Elementor site.

 

Common Elementor Problems & Fixes

White Screen / Editor Won’t Load

The most common cause is insufficient PHP memory. Open your wp-config.php file (via FTP or cPanel file manager) and add the following line before the line that reads ‘That’s all, stop editing!’:

define(‘WP_MEMORY_LIMIT’, ‘256M’);

If the white screen persists, deactivate all plugins except Elementor (via FTP, rename the plugins folder temporarily) and test.

CSS Not Updating After Edits

Navigate to Elementor > Tools > Regenerate CSS & Data. This forces Elementor to rebuild its stylesheet files, resolving most cases where visual changes saved in the editor are not reflected on the live site.

Plugin Conflicts

If Elementor behaves unexpectedly after installing another plugin, use Elementor’s Safe Mode (Elementor > Help > Enable Safe Mode) to load the editor without other plugins active. This isolates whether a conflict is the cause.

 

Verdict: Should You Use Elementor in 2026?

Best for: Freelancers building client sites, small business owners managing their own website, non-coders who need full design control without hiring a developer.

 

Consider alternatives if: You prioritize the absolute fastest possible page load times (consider Bricks Builder or the native block editor), or if your site is primarily a text blog where design complexity is low (the block editor is genuinely sufficient).

 

Elementor Pro is worth its $59/year Essential price for any freelancer building more than two or three client sites annually — the Theme Builder alone saves hours of work per project. For personal or single-site use, evaluate whether you need Pro features before purchasing.

Scroll to Top