This Elementor WordPress tutorial takes you from a fresh install to a finished, consistent page. You will install the plugin, set up global colors and fonts before you design anything, build a page with containers and widgets, save reusable templates, and add a site-wide header with Theme Builder. Along the way you will see which steps need Elementor Pro and which work with the free plugin. If you first want to know what Elementor is and how it compares with the block editor, read our Elementor overview.
Before you start
You need a self-hosted WordPress site (or a WordPress.com plan that allows plugins), an administrator account, and a current PHP version on your host. Elementor publishes its own requirements, and they change over time, so check them on elementor.com before installing on an older server.
Two habits save trouble on any Elementor WordPress project:
- Take a backup before installing a page builder on an existing site. See our WordPress backup guide.
- Work on staging if the site already has traffic, so half-built pages never appear in public.
Step 1: Install Elementor on WordPress
- In the dashboard, go to Plugins → Add New Plugin.
- Search for “Elementor” and find the plugin by Elementor.com. Confirm it is the official listing, which you can also open directly on the wordpress.org plugin directory.
- Click Install Now, then Activate.
- An onboarding wizard may appear. It can offer to install the Hello theme and connect an Elementor account. You can skip any step and come back later.
- If you bought Elementor Pro, download the Pro plugin from your Elementor account, upload it under Plugins → Add New Plugin → Upload Plugin, activate it, and connect your license. Pro runs alongside the free plugin; it does not replace it.
After activation, a new Elementor menu appears in the dashboard, along with a Templates menu. In Elementor’s settings you can choose which post types can be edited with Elementor; pages and posts are enabled by default.
Step 2: Choose an Elementor-compatible theme
Elementor designs the content area; unless you use Theme Builder, your theme still controls the header, footer, blog templates and archives. That makes the theme choice important.
| Approach | Example themes | Best when |
|---|---|---|
| Minimal canvas | Hello Elementor | You have Pro and will build every template in Theme Builder |
| Lightweight multipurpose | Astra, GeneratePress, Kadence, OceanWP, Blocksy | You want solid headers, footers and blog layouts out of the box |
| Niche theme with an Elementor edition | Industry-specific themes from specialist shops | Your site has a clear niche, such as news or sports |
Look for themes that state Elementor compatibility, offer full-width page templates, and are actively updated. Our Astra guide covers one of the most common pairings. For sports sites, StepFox ships Elementor editions of its sports themes, such as the MMA theme, with stats widgets built in.
Step 3: Set global colors and fonts first
The biggest mistake in any WordPress Elementor build is styling each widget by hand. Six months later nobody can change the brand color without editing hundreds of elements. Set globals first.
- Open any page with Elementor (see Step 4), then open the editor menu and choose Site Settings.
- Under Global Colors, set Primary, Secondary, Text and Accent, and add custom colors for anything else in your palette, such as backgrounds and borders.
- Under Global Fonts, set Primary, Secondary, Text and Accent fonts with sizes, weights and line heights. Keep to one or two font families.
- Under Typography, Buttons and Form Fields, set defaults for body text, headings, links and buttons.
- Under Layout, set the content width and default gaps between widgets.
When you later style a widget, pick colors and fonts from the globe icon rather than typing values. A change in Site Settings then flows through the whole site.
Step 4: Build your first page
- Go to Pages → Add New Page, give the page a title, and click Edit with Elementor. Saving a draft first is fine.
- Open the page settings (the gear icon) and pick a page layout. Elementor Full Width keeps your theme’s header and footer but removes the sidebar and content constraints; Elementor Canvas removes the header and footer entirely, which suits landing pages.
- Click the plus icon on the canvas to add a container and choose a structure, for example one column for a hero or three columns for features.
- Drag widgets from the left panel into the container: a Heading, a Text Editor, a Button, an Image.
- Select any element to edit it in the panel’s Content, Style and Advanced tabs. Advanced holds margin, padding, motion effects and responsive visibility.
- Open the Navigator to see the page structure as a tree. It is the easiest way to select nested elements and rename them so the layout stays understandable.
- Click Publish, then view the page on the front end.
Check every breakpoint
Use the responsive mode switcher to preview tablet and mobile. Settings marked with a device icon can take different values per breakpoint, so you can shrink headings or stack columns on small screens. Values set on desktop cascade down unless you override them, so start on desktop and adjust downward. Finish by testing on a real phone, because the editor preview is an approximation.
Keep the structure lean
Every extra wrapper adds markup. Use the container’s own direction, gap and alignment settings to lay out widgets instead of nesting containers inside containers just for spacing. Fewer layers also make pages easier to edit later.
Step 5: Save and reuse templates
Templates stop you rebuilding the same sections over and over.
- Save a page or section as a template: right-click a container and choose to save it as a template, or use the arrow next to Publish to save the whole page. Saved items appear under the dashboard’s Templates menu.
- Insert a template: click the folder icon on the canvas to open the library, switch to your saved templates, and insert.
- Use the template library: the same window offers ready-made blocks and pages from Elementor. Some require Pro.
- Move templates between sites: export a template as a JSON file and import it on another site.
Remember that an inserted template is a copy. Changing the original later does not update pages where you already inserted it. For content that must stay in sync everywhere, such as a call-to-action banner, Pro offers global widgets and Theme Builder templates.
Step 6: Build a header and footer with Theme Builder
With Elementor Pro you can replace the theme’s header and footer.
- Go to Templates → Theme Builder and add a new Header.
- Design it like any page: a container with the Site Logo widget, a Nav Menu widget and a Button. Create the menu itself first under Appearance → Menus in a classic theme.
- Click Publish. Elementor asks for display conditions; choose Entire Site, and add exclusions if, for example, landing pages should have no header.
- Repeat for the Footer, then optionally for Single Post and Archive templates to control blog layouts.
- For a sticky header, select the header container and use the motion effects settings under Advanced.
Without Pro, rely on your theme’s header and footer settings, which is why the theme choice in Step 2 matters. Some free third-party plugins also add header and footer building on top of Elementor; check that any you choose is actively maintained.
Frequently asked questions
Can I use Elementor and the block editor on the same site?
Yes. Elementor is enabled per page. You can build landing pages in Elementor and write blog posts in the block editor, which is a common and sensible split.
Why does my page look different from the editor?
Usually caching. Clear your caching plugin and any CDN cache, and use Elementor’s tool to regenerate CSS files in its settings. Theme styles that override widgets are the next suspect.
Do I need a child theme with Elementor?
Only if you plan to edit theme files or add custom PHP. Designs built in Elementor are stored in the database, so theme updates do not erase them.
Key takeaways
- Install Elementor on WordPress from Plugins → Add New Plugin; Pro is a separate plugin that runs alongside it.
- Set global colors, fonts and layout in Site Settings before designing any page.
- Build with containers, keep nesting shallow, and check tablet and mobile breakpoints.
- Save sections as templates, but remember inserted templates are copies.
- Theme Builder headers and footers need Pro; without it, choose a theme with strong built-in templates.
Follow these six steps in order and your Elementor WordPress site will stay consistent and easy to change long after launch.
