Elementor for Beginners: Build a WordPress Page Step by Step

Elementor is a free page builder plugin for WordPress: you drag elements onto a page and see the result as you build it, without writing HTML or CSS. This beginner's guide takes you from installing Elementor to publishing your first page, including the settings worth changing first.

Why people use Elementor

You've installed WordPress, picked a theme, and found that making your pages look like the theme demo means editing code. That's the gap Elementor fills.

• The core plugin is free. Elementor Pro adds the theme builder, form widget and more widgets if you need them later.
• You edit on the page itself. What you see in the editor is what visitors see.
• Responsive controls. Switch between desktop, tablet and mobile views and adjust spacing or font sizes for each.
• Templates. Start from a ready-made page or section and swap in your own text and images.

One trade-off to know before you start: pages built with Elementor depend on Elementor. If you deactivate it later, those pages fall back to plain content without their layout. Use it for pages you're happy to keep in Elementor.

The block editor built into WordPress is the alternative. It loads less code but gives you less visual control unless you add block plugins.

Step 1: Install Elementor

1. In your WordPress dashboard, go to Plugins → Add New Plugin.
2. Search for Elementor.
3. Click Install Now, then Activate.

Elementor may open a short setup wizard. You can skip it and come back later.

Step 2: Change the settings that matter

Go to Elementor → Settings.

Elementor moves settings around between versions. If an option below isn't where described, look for it by name on the other tabs of the settings screen.

• General → Post Types: choose where Elementor can be used. Most sites only need Pages. Leave blog posts in the normal editor unless they need custom layouts.
• Disable Default Colors and Disable Default Fonts: tick these if you want your theme's colours and fonts to apply instead of Elementor's defaults.
• Integrations: reCAPTCHA and similar services. Email marketing connections such as Mailchimp and ActiveCampaign come with Elementor Pro's form widget.
• Advanced: leave the CSS print method and editor loader settings on their defaults unless Elementor support asks you to change them.

Elementor → Role Manager lets you stop some user roles, for example Authors or Contributors, from using the Elementor editor, or limit them to editing content only.

Step 3: Set your global colours and fonts first

Before building anything, open any page with Edit with Elementor, then open Site Settings from the editor menu. Set:

• Global Colors: primary, secondary, text and accent.
• Global Fonts: one font for headings and one for body text.
• Layout: content width (1140px by default) and the default gap between elements.

Every widget can use these global values, so changing a colour later updates it across the whole site. It's the biggest time-saver for beginners, and it keeps the site looking consistent. Our guide on creating a consistent web brand covers how to choose those colours and fonts.

Step 4: Build your first page

1. Go to Pages → Add New Page, give the page a title, and click Edit with Elementor.
2. Click the + on the canvas to add a container. Containers hold your widgets and can sit side by side or stacked. Use one for each section of the page: hero, features, testimonials and so on.
3. Drag widgets from the left panel into the container.
4. Click any widget to edit it. The Content, Style and Advanced tabs control what it says, how it looks, and its spacing.
5. Use the responsive mode switcher at the top to check tablet and mobile, and fix anything that looks cramped.
6. Click Publish.

The free widgets you'll use most

Basic

• Heading: titles, with a choice of H1 to H6. Use one H1 per page.
• Text Editor: paragraphs, much like the normal WordPress editor.
• Image: a single image with an optional link.
• Video: embed from YouTube or Vimeo rather than uploading video files to your own server.
• Button: a link styled as a button, with your own colours and hover effect.
• Divider and Spacer: lines and empty space between elements.
• Google Maps: your business location.
• Icon: a single icon, optionally linked.

General

• Image Box and Icon Box: an image or icon with a heading and a short paragraph. Good for feature lists.
• Image Gallery and Image Carousel: groups of images, in a grid or as a slider.
• Icon List: bullet lists with icons.
• Counter and Progress Bar: numbers and bars that animate as the visitor scrolls.
• Testimonial: a quote with the person's name and photo.
• Tabs and Accordion (now nested versions that can hold other widgets): fit more content into less space.
• Social Icons: links to your social profiles.
• Alert: a highlighted notice the visitor can dismiss.
• SoundCloud: embed audio, useful for podcasts.
• Shortcode and HTML: drop in another plugin's shortcode or your own code.
• Menu Anchor: a target for links that jump to a section of the page.
• Sidebar: shows one of your theme's widget areas.

Tips that save time later

• Save sections you reuse, such as a call to action or a contact strip, as templates, so you design them once.
• Be careful with add-on widget packs. Each one loads its own scripts and styles. Our guide to optimizing WordPress theme performance shows how to check what each plugin costs in page speed.
• Keep the design simple: clear headings, one call to action per section, readable text. Website design principles for local business sites covers the basics.

Your next step: build one real page, such as your About page, using only containers, Heading, Text Editor, Image and Button. Once that feels comfortable, try a template and adapt it.

Featured image source