Elementor Tutorial: Build Your First WordPress Page in 15 Minutes

Elementor is the free drag-and-drop page builder I use on every WordPress site I build. If you’ve already gone through my how to make a website guide, you already touched Elementor while customizing a starter template. This tutorial goes deeper: how Elementor works with WordPress and your theme, how to install it, and how to build a hero section completely from scratch: text, images, buttons, backgrounds, animations, and shape dividers.

Nothing skipped, no code required, and about 15 minutes of focused walkthrough. By the end you’ll understand Elementor’s structure well enough to customize any business site, portfolio, blog layout, or store homepage.

Prefer to watch it play out on screen? Here’s the full video, or skip past it and follow the written steps below.

How Elementor Works with WordPress and Your Theme

Every page on a website follows the same skeleton: a header with your logo and navigation, page content in the middle, and a footer at the bottom. The header and footer stay the same across every page on your site. Only the middle, your page content, changes.

WordPress is your site’s control panel. It’s where you manage pages, plugins, themes, and settings, and only you see it when you’re logged in. Your theme (I use Astra) controls the header and footer. Elementor controls everything in between.

Before page builders existed, your theme handled all three layers, and every theme gave you different tools for editing them. That meant switching themes or hacking in custom code the second you hit a limitation, and let's be honest, that's never easy. Page builders like Elementor changed everything. You drag widgets right onto the page, customize them in a convenient toolbar, and watch the changes update live in front of you. The layout and design options are basically endless, it's all up to your imagination, and the best part is it's free.

You’ll also need somewhere to actually host that WordPress site. I use Hostinger on every website I build — it’s reliable, it’s fast, and it’s the one I recommend to beginners without hedging. If you haven’t picked a host yet, our web hosting comparison breaks down every option I’d actually consider.

If that matches what you need, here's the next step:

Install Elementor in WordPress

If Elementor isn’t already on your site, installing it takes under a minute:

1. Go to Plugins → Add Plugin.
2. Search for Elementor.
3. Click Install Now, then Activate.

Once it’s active, you’ll see an Elementor tab in your left sidebar and an Edit with Elementor button on every page. That’s the entire install process. No license key, no setup wizard. It’s consistently one of our best WordPress plugins picks for exactly this reason.

Elementor Structure: Sections, Columns, and Widgets

Open any page and click Edit with Elementor. The left panel is your toolbox; the canvas on the right is your live preview. Everything you change updates in real time.

Elementor builds pages in three layers:

• Sections: outlined in pink; full-width areas, and generally where you start a new one anytime your background changes
• Columns: dotted gray boxes inside a section; control how content is laid out side by side
• Widgets: text, images, buttons, forms, dividers; the actual elements that live inside columns

To start from a blank page, click the plus button, choose Flexbox, and pick a column layout. A two-column structure: text on one side, an image on the other, is the layout most portfolio and business homepages start with.

Spacing and Padding: The Design Detail Most Beginners Skip

A brand-new section is usually too thin to feel like anything. Click the six dots to select the section, open Advanced → Padding, unlink the values, and add space to the top and bottom independently. I typically use somewhere around 150 pixels on a hero section so it fills the screen.

Padding works the same way on sections, columns, and individual widgets. It’s one of the fastest ways to make a template feel custom without touching a single color.

Add and Style Text in Elementor

Drag in a Heading widget and type directly on the canvas, or edit the text in the sidebar. Add a Text Editor widget underneath it for body copy. That’s your basic hero: a heading and a line of supporting text.

Typography lives under Style → Typography. Change the font family, drag the size slider instead of typing a number, and pick a color once you click out of the field. Right-click any widget and choose Duplicate to clone it, faster than dragging a fresh one in from the panel every time.

Add Images to Your Layout

Drag in an Image widget, click Choose Image → Upload Files, and select a file from your computer. A PNG with a transparent background works especially well here. Elementor lets the section’s background show through around the subject instead of boxing it in with a white square.

Resize the image under Style → Width. It’ll resize automatically as you adjust the section’s padding around it, so you rarely need to fight with exact pixel dimensions.

Build a Call-to-Action Button

Drag in a Button widget, change the label to something specific: “Work With Me,” “Shop Now,” whatever fits, and paste your destination link where the placeholder hashtag currently sits.

Elementor separates Normal and Hover states, so style both. I always add a hover animation: Grow is my favorite, it makes the whole button feel a little more alive the second your cursor lands on it. Increase the border radius for rounded corners, and use padding to control the button’s overall size.

Divider Widgets and Visual Hierarchy

Small details are what separate an amateur layout from a polished one. Drag a Divider widget between a heading and body text and you instantly get clean separation without adding real clutter. It’s a five-second addition that makes a section look considered.

Section Backgrounds: Color, Gradient, and Video

Select a section, open Style, and you’ve got three background types to choose from:

• Classic: a solid color or a background image
• Gradient: a two-color fade, great for adding depth to a hero without a heavy image
• Video: paste in a YouTube link and it plays behind your content on loop

Video backgrounds look impressive, but test them on mobile before you commit. They can drag down your load time. A gradient is the safer default when you want depth without adding weight to the page.

Entrance Animations and Motion Effects

A static page reads as flat. Select a column, go to Advanced → Motion Effects → Entrance Animation, and try Fade In. Click Publish, hit preview, and watch the column animate in as the page loads.

A little motion on a hero column or headline draws the eye without distracting from it. One or two animated elements per section is plenty. Animate everything and it stops feeling intentional.

That clip shows the click path. Keep this tip handy while you do the same on your site.

Shape Dividers Between Sections

A hard line between two sections can feel abrupt. Select a section, open Style → Shape Divider, choose top or bottom, and try a preset like Mountains. Adjust the width and height until the transition looks natural instead of jagged.

This works especially well when a colored hero flows into a plain white section underneath it. The shape divider bridges the two instead of cutting between them.

Elementor’s Built-In Template Library

Building every section from scratch isn’t always necessary. Click the folder icon inside Elementor to browse pre-built blocks and full pages: individual sections you can drop straight into a page and restyle. Free options exist alongside Pro ones, which carry a small Pro badge.

This is different from Astra Starter Templates, which import an entire site at once. Use the block library when you need one new section fast: a pricing strip, a testimonial row, without starting the whole page over.

Is Elementor Free? What You Actually Get With Pro

Elementor’s free version includes the full drag-and-drop editor, every widget covered in this tutorial, background options, entrance animations, and shape dividers. That’s genuinely enough to build and launch a professional site without spending anything.

I love Elementor Pro. It unlocks the full template library, Pro-only widgets like looping carousels, off-canvas menus, and pricing tables, and it gives you a lot more endless options overall. The best part is you can build a custom header and footer with the same drag-and-drop editor, so you're not limited to whatever your theme gives you.

Pro also adds scroll and mouse-tracking motion effects. Turn on 3D tilt and an image rotates as your cursor moves across it, a nice touch on a portfolio hero, best used sparingly on a content-heavy blog page.

You've seen the workflow. Here's how I'd weigh the trade-offs.

Elementor free vs. pro

What you get with Elementor Free — and what you unlock with Pro

Elementor Free

• Drag-and-drop builder Full layout control with sections, columns, and 40+ free widgets.
• Live visual editing See every change in real time as you build.
• Backgrounds, animations, shape dividers Gradient and video backgrounds, entrance animations, and shape dividers are all free.
• Free forever No trial period. The free tier is a permanent product, not a lead magnet.

Elementor Pro adds

• Custom header and footer builder Design your nav bar and footer with drag-and-drop instead of being limited to theme settings.
• Advanced widgets Looping carousel, pricing tables, off-canvas menus, countdown timers, and more.
• Motion effects Scrolling parallax, mouse-tracking 3D tilt, and scale effects that bring pages to life.
• Full template library All of Elementor’s 300+ pre-built page and section templates, including full-page designs.

Ready to try the option that fits? Use the button below.

Does Elementor Work with Any Theme?

Elementor works with just about any properly coded WordPress theme, but it can’t run without one — your theme still controls the header and footer unless you’re on Elementor Pro’s Theme Builder. I use Astra on nearly every project because it’s lightweight and built to work cleanly alongside Elementor from the start.

If you’re comparing page builders instead of committing to Elementor outright, see how it stacks up in our Divi vs Elementor breakdown, or run every platform side by side in our website builder comparison.

What to Build Next

You understand Elementor’s core workflow now. Plug it into whichever site you’re building:

• Business site: services section, testimonials, contact form. Business website guide.
• Portfolio: gallery grid, case studies, an inquiry form. Portfolio guide.
• Blog: post layout, categories, reading-friendly typography. Blog setup guide.
• Online store: product pages, cart, checkout with WooCommerce. Store guide.

Not sure which one fits? Start with the step-by-step website guide, then use the business, portfolio, blog, or store guide above when you know what you’re launching.

Elementor Free vs. Elementor Pro

The free version is enough to learn the builder and ship a solid first site. Pro unlocks Theme Builder (header/footer/single post templates), more widgets, and form/popup tools. Here is the split:

Common Beginner Mistakes in Elementor

Most Elementor headaches come from fighting the structure instead of learning it once. You get sections (full-width bands), columns inside them, and widgets inside columns. When a layout looks wrong, nine times out of ten someone nested widgets directly in a section or stacked three backgrounds in one band when they needed a new section.

Spacing is the other big one. Beginners drag minimum height sliders until a hero looks tall, then wonder why mobile looks broken. Padding on the section (Advanced tab) scales cleaner across breakpoints. Unlink top and bottom values, set something like 120px desktop, then drop it on tablet and phone before you publish.

Global colors and fonts exist for a reason. If every button gets a custom hex code, your site will look like a patchwork quilt by page three. Set Site Settings once, then override only when you mean to. If you are still picking a builder, our Elementor tutorial and builder comparison help you decide before you invest a weekend.

• Editing the wrong layer (column vs widget) and wondering why style changes vanish
• Skipping responsive preview until a client opens the site on iPhone
• Installing five add-on packs before learning core widgets
• Duplicating entire pages instead of saving sections as templates

Performance matters too. Heavy animation on every heading feels slick in the editor and crawls on real phones. Lazy-load big background images, compress PNGs, and keep third-party embeds to a minimum. When the site is live, run through our WordPress speed checklist once a month.

Last mistake: publishing without a staging habit. Click Update, refresh the front end, and click every menu item. Elementor will not stop you from shipping a broken mobile menu or a form that goes nowhere.

Flexbox containers replaced old section habits for many layouts. If a tutorial still says “add a section,” the idea holds: group related widgets, control width, and change backgrounds when the topic changes. Rename sections in the navigator panel so you are not hunting “Section 14” during client revisions.

Forms deserve a test submission on real email, not just a green success banner in the editor. SMTP plugins fix deliverability when contact messages land in spam. Wire that up before you paste the form shortcode on five pages.

How I Structure a Homepage in Practice

I treat a homepage like a stack of jobs, not an art project. Section one is always hero: headline, subhead, one primary button, optional background image with a dark overlay so text stays readable. Section two is proof: logos, a short testimonial strip, or three bullet outcomes. Section three is the offer explained in plain language.

From there I add social proof again (case study or review row), then a FAQ or objection handler, then a final CTA band that repeats the hero button. Footer is global via the theme or Elementor header footer builder if you are on Pro. That rhythm works for service businesses, coaches, and local shops.

Inside each section I keep one idea per column on desktop and let stacks happen naturally on mobile. I build desktop first, then flip to mobile width and tighten padding before I touch font sizes. Pair Elementor with a lightweight theme; our Astra walkthrough shows the combo I use on client sites.

For navigation, I wire the header template once: logo left, menu center or right, phone or book button on the far edge. Inner pages inherit the same header so visitors never feel lost. Blog posts get a simpler hero (title + featured image) so I am not rebuilding chrome every time.

Template library tip: when a section works, right-click and save it. Next homepage you import the hero and CTA bands, swap copy, and you are eighty percent done. That is how you ship fast without every site looking identical, because typography and photography still change the vibe.

If you are comparing Elementor to other builders, read the Divi vs Elementor breakdown before you buy a lifetime license. Both work; pick the workflow that matches how your brain maps layouts.

Above-the-fold copy gets rewritten more than any other block. Keep the hero headline as plain text widget, not baked into a background image, so you can iterate without opening Photoshop. Subheads can be longer; headlines should pass the five-second test with a stranger.

Blog index pages benefit from a simple grid and consistent featured image ratio. Elementor archive templates (Pro) or theme defaults (free) both work if you pick one and stop tweaking category colors every week.

When the homepage ships, schedule a follow-up pass for WordPress performance: compress hero photos, enable lazy load, and delete demo pages you never unpublished. Launch day excitement often hides leftover sample content in the sitemap.

Icon boxes and counters are tempting on every section. Use them once where numbers matter (years in business, clients served) and skip them elsewhere. Visual noise makes real testimonials feel less credible.

Revision history in Elementor saves skin on client projects. Name snapshots before big layout experiments so rollback is one click when the “make logo bigger” request turns into a full hero redesign.

Learn the navigator panel early. It lists every section in order and jumps you to deep blocks without scroll-hunting. Pros live in that panel; beginners who ignore it rebuild the same footer four times.

Widget search in the panel beats scrolling the left sidebar once you know what you need. Type “accordion” or “icon box” and drag from results; saves time on long marketing pages with repeating components.

The free version covers most first sites: text, images, buttons, columns, and basic forms. Learn those widgets before Pro tempts you with motion effects. Click the plus on a column, drop a heading widget, then body copy underneath. That repeat sequence builds muscle memory faster than random drag-and-drop experiments.

Unlink padding values on hero sections, then set top and bottom spacing in the Advanced tab. Typing 150 top and 150 bottom beats dragging minimum height when you want consistent rhythm across breakpoints.

The widget panel is where every Elementor element lives. Drag from here into the pink section outlines.

Column widths control layout balance. This clip shows the drag handles on the canvas.

Once you've seen the panel and the column controls in action, here are the questions people ask most.

That’s the whole toolkit. Sections, columns, widgets, spacing, backgrounds, motion — everything else in Elementor is just this same handful of ideas applied to a different part of the page. Bookmark the video at the top while you build, and come back to this page anytime you forget where a setting lives.