Can I build a WordPress site with the free version of Elementor?

Yes, you can build normal pages with the free Elementor plugin, including text, images, buttons, containers, and responsive styling. Features such as advanced Theme Builder controls, some widgets, dynamic content, and certain marketing tools may require Elementor Pro or another plugin. Your theme can also provide its own header, footer, and template controls.

Do I need a special WordPress theme for Elementor?

You do not need a special theme, but you should choose one that is documented as compatible with Elementor. The theme can control parts of the site that Elementor does not replace, including menus, blog archives, headers, and footers. A lightweight theme usually creates fewer styling conflicts and makes troubleshooting easier.

Why does my Elementor design look different on mobile?

Elementor uses responsive settings that are inherited from larger screen sizes, so desktop typography, padding, and widths can affect tablets and phones. Open the responsive device controls, inspect each section and widget, then adjust only the values needed for tablet or mobile. Also check for fixed widths, oversized background images, and long button text.

Why is Elementor stuck on a grey loading screen?

A grey loading screen is usually caused by a plugin or theme conflict, cached or optimised scripts, a browser extension, mismatched Elementor versions, or a server restriction. Try an incognito window and clear caches first, then enable Elementor Safe Mode. If that fixes the editor, deactivate other plugins one at a time to identify the cause.

Should I use a template kit or design every page myself?

Use a template kit when you need a complete site quickly or do not have a settled design system. Design manually when the site has unusual layouts, strict brand requirements, or only a few simple pages. In either case, replace all demo content, remove unused templates, check accessibility basics, and test the finished site on mobile before launch.

How to build a WordPress website with Elementor

Design & Layout Time About 1–3 hours for a basic site 7 steps Updated 17 Sep 2026

The short answer

To build a WordPress site with Elementor, install a compatible theme and the Elementor plugin, create your core pages, then design them with global styles and responsive controls. The manual route is fine for a small site; a starter theme with templates is faster for a polished launch.

The route

01Plan the site structure
02Install a theme and Elementor
03Create the core pages
04Set global styles first
05Build and check each layout
06Test before publishing
07Use templates for the fast route

What you need

A working WordPress installation with administrator access
A domain and hosting account
The Elementor plugin
Brand text, images, colours, and page content

Plan the site structure

List the pages you need before opening the editor. Most small sites start with Home, About, Services or Shop, Blog, and Contact. Decide which page should be the homepage and write the main call to action for each page.

Prepare properly sized images, a logo, contact details, and readable page copy. Replacing demo content is quicker than designing around missing content, but placeholder text often leaves broken spacing behind.

Install a theme and Elementor

In WordPress, go to Appearance and install a theme that works with Elementor. Then open Plugins > Add New, search for Elementor, install it, and activate it.

For a simple manual build, a lightweight compatible theme is enough. Elementor controls the page content, while the theme may still control the site header, footer, blog templates, and some default spacing.

Create the core pages

Go to Pages > Add New and create the pages from your site plan. Set the homepage under Settings > Reading if WordPress is still showing your latest posts on the front page.

Open a page with Edit with Elementor. Add containers or sections, place widgets inside them, and use the Navigator or Structure panel to keep complex pages organised. Save changes regularly and publish only when the page is ready.

Set global styles first

Open Elementor’s Site Settings and define your global fonts, colours, button styling, layout width, and default spacing. Use the global colour and font controls instead of choosing a slightly different value on every widget.

If the theme keeps overriding your design, check Elementor’s settings for the options to disable its default fonts and colours, then clear the site cache or regenerated Elementor files if the live page still shows old styling.

Build and check each layout

Build the homepage first, then reuse its spacing, buttons, and content patterns on the other pages. Keep headings in a logical order, give images useful alternative text, and make links and buttons describe what happens when someone clicks them.

Switch between desktop, tablet, and mobile views before publishing. Responsive values normally inherit from larger screens, so a desktop font size or padding value can make a mobile section too large. Change the value only at the breakpoint that needs it, and hide or rearrange elements that do not suit small screens.

Test before publishing

Preview the site while logged out and test the navigation, logo link, contact form, buttons, search, footer links, and any shop or booking features. Check the homepage on a real phone, not only inside the editor.

If Elementor shows a blank or grey loading screen, try another browser, clear the browser and site cache, and enable Safe Mode under Elementor > Editor > Tools. If Safe Mode works, deactivate plugins one at a time to find the conflict. Mismatched Elementor and Elementor Pro versions, optimisation tools, browser extensions, and theme scripts are common causes.

Use templates for the fast route

The quickest route is to use a theme that includes Elementor templates and responsive layouts, import a suitable starter design, and replace its text, images, colours, and logo. This avoids building every header, hero section, card grid, and footer from an empty canvas.

Outgrid is a suitable option when you want a multi-purpose Elementor theme with pre-built templates, responsive layouts, theme options, and WooCommerce support. Treat imported content as a starting point: remove unused pages, check every responsive breakpoint, and test forms and links before launch.

The fast route

Let Outgrid do it

Multi-purpose theme with Elementor templates and responsive layouts; choose it for launching polished sites faster than designing from scratch.

Get Outgrid

Questions

Can I build a WordPress site with the free version of Elementor?: Yes, you can build normal pages with the free Elementor plugin, including text, images, buttons, containers, and responsive styling. Features such as advanced Theme Builder controls, some widgets, dynamic content, and certain marketing tools may require Elementor Pro or another plugin. Your theme can also provide its own header, footer, and template controls.
Do I need a special WordPress theme for Elementor?: You do not need a special theme, but you should choose one that is documented as compatible with Elementor. The theme can control parts of the site that Elementor does not replace, including menus, blog archives, headers, and footers. A lightweight theme usually creates fewer styling conflicts and makes troubleshooting easier.
Why does my Elementor design look different on mobile?: Elementor uses responsive settings that are inherited from larger screen sizes, so desktop typography, padding, and widths can affect tablets and phones. Open the responsive device controls, inspect each section and widget, then adjust only the values needed for tablet or mobile. Also check for fixed widths, oversized background images, and long button text.
Why is Elementor stuck on a grey loading screen?: A grey loading screen is usually caused by a plugin or theme conflict, cached or optimised scripts, a browser extension, mismatched Elementor versions, or a server restriction. Try an incognito window and clear caches first, then enable Elementor Safe Mode. If that fixes the editor, deactivate other plugins one at a time to identify the cause.
Should I use a template kit or design every page myself?: Use a template kit when you need a complete site quickly or do not have a settled design system. Design manually when the site has unusual layouts, strict brand requirements, or only a few simple pages. In either case, replace all demo content, remove unused templates, check accessibility basics, and test the finished site on mobile before launch.