Home / Developer Tools / Guides / How to set up Elementor
Tutorial · developer tools · updated October 8, 2026
How to set up Elementor: a practical walkthrough
Elementor is a drag-and-drop page builder for WordPress, and setting it up properly saves hours later. This walkthrough covers installation, global styles, your first page, reusable templates and the performance settings worth touching on day one.

Independent analysis. This page may contain affiliate links. Some links here are referral links; if you sign up through one we may earn a reward at no extra cost to you, and it never changes what we recommend. We are an independent publisher and are not affiliated with, endorsed by, or an official partner of any tool mentioned. See our Affiliate Disclosure.
TL;DR
- Install Elementor from the WordPress plugin directory, then activate it.
- Connect a license so the extra widgets and templates become available.
- Set global colours and fonts once, before you build any pages.
- Save repeated layouts as templates instead of rebuilding them.
- Check performance settings and image sizes before you launch.
On this page: What this covers · Before you start · Step 1 — Install and activate the plugin · Step 2 — Connect a license if you need more · Step 3 — Set global colours and fonts · Step 4 — Build your first page · Step 5 — Save reusable templates · Step 6 — Cover performance basics · Choosing how you build · Where this fits in your wider stack
What this covers
Elementor replaces the classic WordPress editor with a visual canvas. You drag widgets onto a page and style them without writing CSS, which is why it is popular with small teams that do not have a full-time developer.
This guide assumes a working WordPress install and administrator access. It walks through a clean setup so your styles, templates and performance settings are sensible from the start rather than patched in later.
Before you start
- A WordPress site on hosting that meets Elementor’s requirements.
- Administrator access to the WordPress dashboard.
- A staging copy if the site is already live and busy.
- Your brand colours and font names written down.
- A recent backup, so a failed experiment costs minutes rather than days.

Step 1 — Install and activate the plugin
- In the dashboard, open Plugins and choose Add New.
- Search for Elementor and locate the plugin by its publisher.
- Install it, then activate it and follow the onboarding prompt.
- Confirm the Elementor menu appears in the sidebar.

Step 2 — Connect a license if you need more
Elementor has a free core plugin and paid plans. If you need the additional widgets, the theme builder and support, connect a license from the account screen inside Elementor. Do not guess at what a plan includes; check the official pricing page and match the tier to the features you actually plan to use.

Step 3 — Set global colours and fonts
Open Site Settings and define your global colours and typography first. Every widget then inherits those values, so a brand refresh later is a handful of edits rather than a hunt through dozens of pages.

Step 4 — Build your first page
- Create a new page and choose Edit with Elementor.
- Pick a container structure that matches the layout you have in mind.
- Drag heading, text and image widgets into the container.
- Style each widget in the panel on the left.
- Preview on a mobile width before you publish.

Step 5 — Save reusable templates
When a section works, save it as a template so you can drop it into future pages. Reusable sections keep spacing and styling consistent, and they cut the time spent rebuilding the same hero or call-to-action block.

Step 6 — Cover performance basics
Page builders add markup, so a few habits keep pages fast: compress images before upload, avoid stacking background videos, and enable the performance features your stack supports. Test with a real page rather than an empty one.

Choosing how you build
A quick way to decide what to install and how much to configure up front.
| Situation What to do Why | ||
|---|---|---|
| New site, no theme yet | Use Elementor with a lightweight theme | Keeps markup lean and lets the builder own the layout |
| Existing site with a custom theme | Add Elementor to specific templates first | Limits risk while you learn the builder |
| Marketing landing pages | Enable the theme builder on paid plans | Lets you design headers and footers without code |
| Tight performance budget | Keep plugins minimal and optimise images | Addresses the main sources of slow pages |
Where this fits in your wider stack
If you are still comparing builders, read the independent Elementor review and the Elementor vs Divi comparison. To see the wider picture, start from the developer tools hub, weigh best website builders for small business, and keep an eye on website performance tools.
Frequently asked
How much does Elementor cost?
Pricing depends on the tier and changes over time, so check the official pricing page for current plans and what each one includes.
Do I need a paid plan to start?
No. The free core plugin covers the basics, while paid plans add widgets, the theme builder and support.
Will Elementor slow down my site?
It adds markup like any builder, but sensible image sizes and a lean plugin stack keep the effect small.
Can I use Elementor with my existing theme?
Yes. You can enable it per page or template, which is a safe way to test it on a live site.

Build your first page with Elementor
Install the plugin, set your globals once and design from there.
Referral link — we may earn a reward if you sign up, at no extra cost to you. We are an independent publisher. See our Affiliate Disclosure.






































































