All About Elementor: Widgets, Templates, Blocks & Extensions

Key Takeaways

• Elementor has 10 million active WordPress installs and powers 13.1% of all websites on the internet (W3Techs, May 2026).
• The free version includes 40+ core widgets and handles most personal and small business sites without requiring Pro.
• Elementor Pro unlocks 100+ widgets, a full Theme Builder and 25+ WooCommerce tools, starting at $59 per year for a single site.
• 59.6% of global web traffic comes from mobile devices (StatCounter, 2025). Responsive controls are built into every Elementor build by default.

Elementor changed how WordPress sites get built. Before it launched in May 2016, customizing a WordPress theme meant hiring a developer or wrestling with shortcodes and PHP template files. Today, 10 million active WordPress installs run Elementor. The plugin accounts for 13.1% of every website indexed on the internet (WordPress.org; W3Techs, May 2026).

This guide walks through what Elementor does, how free and Pro differ and which addons are worth adding. The sections below give you a practical overview based on years of direct experience with the platform.

Is Elementor the Right Page Builder for You?

Elementor works well for the vast majority of WordPress projects including business sites, portfolios and landing pages. It handles blogs and WooCommerce stores equally well. Its 4.5/5 star rating from 7,243 reviews on WordPress.org reflects user satisfaction that has held up across nearly a decade of releases (WordPress.org, 2026). The free tier is a real, functional product. It is not a crippled preview of Pro.

The paid tier makes sense when you need the Theme Builder, WooCommerce tools or form integrations. For headless WordPress builds or sites where raw performance is the only concern, custom development may serve better. For everyone else, Elementor’s balance of speed, flexibility and a shallow learning curve is hard to match in the WordPress ecosystem.

What Is Elementor and How Does It Work?

What Is Elementor?

Elementor is a visual page builder plugin for WordPress, first published on May 30, 2016 by Yoni Luksenberg and Ariel Klikstein. The company is headquartered in Ramat Gan, Israel. It has raised $65 million from Lightspeed Venture Partners and supports the plugin in 64 languages across 150+ countries with a community of 200,000+ members. When you activate the plugin, it adds a visual canvas to your WordPress editor. On any page you choose to edit with Elementor, you get a live drag and drop interface where every change appears on screen the moment you make it.

The Drag and Drop Editor

The canvas is your live page. The panel on the left holds every widget, control and setting. Drag a widget from the panel, drop it onto the canvas and it is placed. Click it to edit its content, style and layout settings. The entire system is visual. You do not need to know HTML or CSS to build a professional site. Custom CSS is available per widget in Pro if you want overrides the UI does not expose.

What makes this faster than it sounds is that the canvas is 1:1 with the published result. There is no publish and refresh loop. You build what ships.

• No coding required: Anyone can design their website with Elementor without any technical knowledge.
• Faster workflow: Real time editing saves time and keeps your project timeline on track.
• Full creative control: A variety of layout and design options lets you experiment without restriction.

Real Time Editing

Real time editing removes the guess and publish cycle that makes traditional WordPress theme customization slow. Adjust a font size and see it update immediately. Drag a button left and watch it move. For client work, this matters because clients can give live feedback during a session without waiting on deployments.

• Instant feedback: View changes the moment you make them and make decisions faster.
• Streamlined workflow: No more switching between editor and preview mode in WordPress.
• Better accuracy: You see exactly what visitors will see before you publish.

Responsive Design Controls

Mobile devices account for 59.6% of global web traffic (StatCounter, 2025). Responsive design is the starting point of any Elementor build, not a final step cleanup. Elementor handles this through three built in breakpoint views: desktop, tablet and mobile. Per breakpoint, you can show or hide elements and change font sizes. You can also adjust column stacking and modify padding to suit your design.

• Device specific adjustments: Tailor the design and layout across different device types to ensure compatibility with every screen.
• Responsive controls: Hide or show elements on particular devices, change column widths and change font sizes for a better mobile experience.
• Preview modes: View how your website appears on different devices by switching between desktop, tablet and mobile views within the editor.

Pre Designed Templates

The template library includes hundreds of professionally designed full page layouts and section blocks. All are fully editable after import. Import a template that matches your site type, replace the placeholder content with yours and adjust colors and fonts to have a production ready page without building from scratch.

• Wide variety: Find templates for blogs, e-commerce sites, business pages, service pages and portfolios.
• Full customization: Every template is completely editable to fit your brand and content.
• Professional quality: Templates are designed to meet high standards for both aesthetics and functionality.

Widget Library

The free version ships with 40+ core widgets covering the standard elements a business site or blog needs. Elementor Pro extends this to 100+ widgets. Pro adds forms, sliders and price tables. It also includes countdown timers and WooCommerce builders. The Theme Builder covers headers, footers and archive page layouts.

• Versatility: Build a suitable website for any niche using the wide range of widgets available.
• Customization: Every widget is customizable so you can develop your own unique style.
• Integration: Widgets integrate seamlessly with WordPress plugins and tools to extend your site’s capabilities.

Elementor Free vs. Pro

The free tier is not a demo. It is a complete page builder that covers most personal and small business website needs. Pro adds the tools required for advanced builds. The most important additions are the Theme Builder, WooCommerce integration and the Form Builder with external service connections.

The upgrade decision is straightforward. If you need any single item in the Pro column, the subscription pays for itself quickly in hours saved.

WordPress powers 41.9% of all websites; Elementor alone accounts for 13.1% — more than Shopify and Wix combined. Source: W3Techs, May 2026.

How Do You Install Elementor on WordPress?

Installing Elementor takes under five minutes. WordPress powers 41.9% of all websites and its plugin system is designed to make this straightforward (W3Techs, May 2026).

Step by Step Installation Guide

1. Log in to your WordPress dashboard: Add /wp-admin to your domain and sign in with your credentials.
   
2. Go to Plugins then Add New: In the left sidebar, find Plugins and click Add New.
   
3. Search for Elementor: Type “Elementor” in the search bar. Look for “Elementor Website Builder” by Elementor.com with 10+ million installs and a 4.5/5 star rating.
   
4. Click Install Now then Activate: Click Install Now next to the Elementor plugin. Click Activate after the installation finishes.
   
5. Run the setup wizard: Configure your default fonts, global colors and kit preferences. Once active, open any page or post and select “Edit with Elementor” to launch the canvas.

Post Installation Setup

After activation, visit Elementor then Settings to configure your defaults. Spend 10 minutes here before building your first page. Retrofitting global styles to a half built site is unnecessary work.

• Default colors and fonts: Set global brand styles before building anything. Everything you create after inherits them.
• Elementor Canvas template: Enables full width pages without theme headers or sidebars.
• Advanced settings: Configure CSS print method, safe mode and experimental features.

Troubleshooting Installation Issues

Most problems trace to one of three sources.

• Check PHP version: Elementor requires PHP 7.4 or higher. Verify and update this in your hosting control panel.
• Disable conflicting plugins: If the editor does not load, deactivate other plugins one at a time to isolate the conflict.
• Increase memory limit: Add define('WP_MEMORY_LIMIT', '256M'); to your wp-config.php file to solve memory errors.
• Maintenance Mode issue: Sometimes installing plugins can put WordPress in maintenance mode. Read our guide on How to Fix WordPress Maintenance Mode to resolve it.
• 400 Bad Request issue: This occurs because of incorrect URL structure, server settings conflicts or corrupted cookies. Read our solutions guide on How to Fix 400 Bad Request Error in Elementor.

How the Elementor Interface Works

The editor splits into two zones: the canvas on the right and the element panel on the left. The canvas is your live page. The panel holds all widgets, style controls and settings. Click any element on the canvas to open its settings in the panel.

Sections, Columns and Widgets

Every Elementor page follows the same three layer structure.

• Sections: Full width horizontal containers. They are the top level building blocks of the page and can have one or more columns.
  
• Columns: Divisions within sections. Multiple columns can be placed within a section and resized by dragging to create different layouts.
  
• Widgets: Content elements inside columns. Widgets hold text, images, buttons, videos and other content. These are the actual content items that make up your page.
  

Add a section by clicking the “+” icon on the canvas. Add a widget by dragging it from the panel into any column.

Navigator, History Panel and Responsive Mode

• Navigator: Opens as a sidebar showing every page element in a collapsible tree. On complex pages with nested sections, navigating by tree is faster than clicking through layers on the canvas. Drag items in the Navigator to reorder them.
• History panel: Logs every action as a timestamped entry. Click any entry to jump back to that state. It persists for the session.
• Responsive Mode controls: Located at the bottom of the screen. Switch the canvas between desktop, tablet and mobile views. Each view has its own font sizes, padding and element visibility settings. Column stacking behavior also changes per view. Switch views regularly as you build to catch layout issues early.

Mobile devices account for 59.6% of global web traffic, making Elementor’s per-device responsive controls one of its most practically important features. Source: StatCounter, 2025.

What Widgets Does Elementor Include?

Elementor’s widget library covers the full range of standard web elements plus several advanced ones that would otherwise need separate plugins. Here is what each tier includes.

Free Widgets in the Core Package (40+)

The core widget set handles a complete business site or blog without requiring Pro.

• Content: Heading, Text Editor, Image, Video, Button, Divider, Spacer, Google Maps, Icon, Star Rating, Alert
• Structure: Image Box, Icon Box, Accordion, Toggle, Tabs, Counter, Progress Bar, Testimonial
• Social and media: Social Icons, Image Carousel, Basic Gallery, Soundcloud embed
• WordPress native: Posts, Site Title, Site Logo, Page Title, Navigation Menu, Search Form, Sidebar, Read More, Shortcode

For most personal and small business sites, this set covers everything you need.

Adding and Customizing Widgets

Simply drag a widget from the Elementor panel and drop it onto your page. After the widget is added, edit its text, visual appearance and settings using the customization options in the panel.

• Text widget: Add and format text directly on your page.
  
• Heading widget: Add structured headings that give your content hierarchy search engines can read.
  
• Image widget: Add multimedia content and customize its visual appearance.
  
• Video widget: Embed video content from YouTube, Vimeo and other platforms with a few clicks.
  
• Button widget: Create clickable buttons with custom styles and actions.
  

Pro Widgets for Advanced Functionality (100+ total)

Elementor Pro adds to every category with tools for forms, media, WooCommerce, dynamic content and marketing.

• Forms: Build tailored forms for orders, contact, leads and surveys. Create custom fields, configure email marketing integrations and specify what happens when a form is submitted.
  
• Sliders: Add multimedia or text sliders to your page. Adjust navigation, timing and transition effects to fit your design.
  
• Elementor post grid widget: Display blog entries in lists, grids and carousels. Adjust the order, selection and layout to fit the design of your website.
  
• Price Tables: Create a pricing chart for your products or services. Add buttons, prices and features in each column.
  
• Countdown: Add a countdown timer to your promotional events to create urgency.
  
• WooCommerce (25+ widgets): Product Grid, Cart, Checkout and My Account widgets for full store design control. Covered in detail in the WooCommerce section below.
• Dynamic content: Loop Grid, Loop Carousel and Dynamic Tags that pull from ACF or custom field data.

Global Widgets: Build Once, Update Everywhere

Global widgets solve a common problem on large sites. When a CTA block or newsletter form appears on dozens of pages, updating each instance individually takes significant time. With global widgets, you save a widget once and place it on any number of pages. Update it in one place and all instances update at the same time.

1. Create a widget: Insert a widget on your page and make the necessary changes.
2. Save as Global: Right click on the widget and choose “Save as Global.” Name your global widget and save it.
3. Reuse the widget: Drag this global widget from the “Global” area of the Elementor panel to any other page.

How Do Elementor Templates and Blocks Work?

Elementor’s template library ships hundreds of professionally designed page templates and section blocks. They are organized into two levels that serve different purposes.

Full Page Templates

Page templates are complete layouts for specific page types. These include landing pages, home pages and about pages. Service pages, portfolios and contact pages are also covered. The free Personal Portfolio Elementor template is a good example — it includes a portfolio grid, testimonials, contact section and about page, all ready to edit. Import one with a single click and it places its full section and widget structure onto your canvas. Replace the placeholder text, swap the images and adjust colors to match your brand.

Here is how to use pre designed templates with the Spexo Elementor theme kit.

1. Open the Template Library: In the Elementor editor, click the folder icon to open the template library.
2. Browse Templates: Browse through the available templates and choose one that fits your needs.
3. Insert the template: Click “Insert” to add the template to your page.
4. Customize the template: Use the Elementor editor to adjust the template to match your brand and content.

Block Templates

Blocks are section level templates. A hero section, a testimonial row or a three column feature grid. Each is a self contained block you can import into any existing page. Mix and match blocks to build a custom page quickly without starting from a blank canvas.

1. Open the Blocks Library: Click the folder icon in the Elementor editor to access the blocks library.
2. Browse Blocks: Look over the available blocks and select one that suits your requirements.
3. Insert the block: Click “Insert” to add the block to your page.
4. Customize the block: Use the Elementor editor to adjust the block to fit your content and brand.

Saving and Reusing Custom Templates

Any page or section you build can be saved as a custom template. For developers building multiple similar sites, this is one of Elementor’s most practical features. Once you have dialed in a header layout or a pricing section, save it and reuse it across projects.

• Design your page or section: Use the Elementor editor to build the page or section you want to preserve.
• Save as Template: Click the arrow next to the Publish button and choose “Save as Template.” Name it and save.
• Reuse the template: Access and insert your custom template into other pages via the “My Templates” tab in the template library.

The Best Elementor Addons and Extensions

Elementor’s core and Pro tiers cover most standard requirements. Third party addons extend it further by adding specialized widgets, design effects and integrations not found in the official package. For a full breakdown of how the two relate, see how widgets and addons work together in Elementor. The WordPress.org plugin directory hosts 61,000+ free plugins and Elementor addons are among its most active categories.

Popular Elementor Addons Worth Installing

• Spexo Addons for Elementor: Adds 90+ widgets across several categories including post grids, carousels, mega menus, popup builders and form stylers. These tools fill gaps in Elementor’s default offering for developers who need more granular design control without switching to a heavier solution.
• Crocoblock: The go-to option for data driven sites like real estate listings, job boards and directories. Its JetPlugins suite adds dynamic content capabilities, complex filtering and advanced layout tools that go well beyond standard page building.
• Happy Addons: Known for its cross domain copy paste feature and for preset design styles that apply consistent visual variations quickly.
• Elementor Extras: Focuses on niche visual effects including Timeline, Hotspot and Particle Background. Useful for agency sites that need distinctive aesthetics.

For a full comparison of options, see our guide to the best Elementor addons for WordPress in 2026.

What to Look for Before Installing an Addon

Not all addons are maintained consistently. Before installing one, check the last update date on its WordPress.org listing. Anything over six months without an update is a flag for active maintenance. Review the support forum for unresolved compatibility issues and verify it supports your current PHP and WordPress versions. A poorly maintained addon can introduce performance bottlenecks or security gaps.

WooCommerce and Elementor: Building Your Online Store

WooCommerce powers roughly 1 in 4 online stores worldwide. Paired with Elementor Pro’s dedicated shop widgets, it is the most accessible stack for building a custom online store without writing any code.

Setting Up WooCommerce with Elementor

Elementor WooCommerce addons and widgets give you full design control over your store. Here is how to get started.

1. Install WooCommerce: Install and activate WooCommerce from Plugins then Add New in your WordPress dashboard.
2. Run the WooCommerce setup wizard: Configure your currency, payment methods and shipping options.
3. Add your products: Add products under Products then Add New.
4. Open a page in the Elementor editor: Open any product page, shop page or custom landing page and edit with Elementor.
5. Access WooCommerce widgets: WooCommerce specific widgets appear automatically under the “WooCommerce” category in the panel.

Key WooCommerce Widgets in Elementor Pro

• Product Grid / Archive: Displays products in a filterable grid or list. Control quantity, categories and ordering.
• Product widget: Shows a single product with images, price, description and an add to cart button. Useful for featured product sections on landing pages.
• Cart Widget: A fully customizable shopping cart that can be embedded anywhere on the site.
• Checkout Widget: Controls the checkout page layout and form appearance.
• My Account Widget: Manages the customer account area’s visual structure.

Each widget pulls live WooCommerce data automatically. Prices, stock status and product images stay current without manual updates.

Form Builder Integrations

With the help of Elementor Form Stylers, you can design unique forms for your website and connect them to major services without any extra bridge plugins.

• Connect Elementor forms to MailChimp: New subscribers are added to your list automatically on form submission. This is ideal for growing your email marketing list.
• HubSpot integration: Form submissions create or update contact records directly in HubSpot.
• Zapier integration: Triggers a workflow to send form data to any connected tool like Google Sheets, Notion or Slack.
• Webhook integration: Send form data to custom endpoints via webhooks for processing in external apps or proprietary backend systems.

Configure integrations from the form widget’s “Actions After Submit” settings panel. Most require an API key from the receiving service.

Benefits of Building With Elementor as a WordPress Developer

From direct experience building production WordPress sites with Elementor over several years, the most consistent benefit is that it removes the gap between design intent and delivered result. Traditional WordPress development involves multiple layers. You go from mockup to theme files to browser check to revision before anything ships. Elementor collapses that cycle to a single session.

Design Consistency at Scale

Global widgets and global colors let you update a brand palette or a recurring CTA block across a 50 page site in seconds. A color change, a new CTA style or a revised navigation layout takes seconds rather than a file by file search and replace.

Client Accessibility After Handoff

Clients can update text, swap images and add pages themselves without developer involvement. This genuinely reduces support load on completed projects and makes client handoff much smoother.

Faster Prototyping and Iteration

Page layouts that used to take half a day in custom HTML and CSS take 30 to 60 minutes in Elementor. The saved hours go toward the work that actually requires custom code.

Integration Coverage for Standard Requirements

Elementor Pro connects to WooCommerce, major email services, dynamic data sources and custom post types. Most standard site requirements do not need custom development beyond what Pro provides out of the box.

Tips for Getting Started with Elementor

If you are new to the platform, start with templates and learn from editing before building from scratch.

Start with a Template Kit

Import a complete kit from the Spexo free template library and edit it before building anything from scratch. You will absorb Elementor’s structure by modifying something that already works. This approach is faster than reading documentation.

Set Global Colors and Fonts First

Go to Elementor then Global then Colors and Fonts and enter your brand palette and typography. Everything you build from that point inherits these settings. Retrofitting brand styles to a half built site is unnecessary pain.

Learn the Navigator Early

On any moderately complex page, the Navigator shows every element in a tree view. Open it with the three line icon at the top of the widget panel. It is significantly faster than clicking through nested layers on the canvas.

Test Responsive Behavior as You Build Each Section

Switch to tablet and mobile view after finishing each major section. Catching layout issues mid build is far faster than fixing them on a completed page.

Keep Your Addon Stack Lean

Each addon adds CSS and JavaScript to the editor and sometimes to the front end too. Install only the addons you actively use. A bloated addon stack slows the editor and can affect page load times on the front end.

Frequently Asked Questions About Elementor

Elementor is a flexible and powerful page builder that makes creating WordPress websites faster and more accessible. Its drag and drop canvas, large template library and WooCommerce support give you the tools to build professional sites without writing code. Whether you are a beginner or an experienced developer, Elementor’s combination of ease of use, design flexibility and a robust addon ecosystem makes it a strong choice for any WordPress project.