One page websites do a specific job well: they put every piece of information a visitor needs on a single scroll. No clicking around. No second page. Just hero, about, services, contact, done.
This guide walks through how to create a one page website with Elementor using the free plugin, a lightweight theme, and a handful of widgets from Master Addons where the free Elementor set runs out. By the end, you’ll have a site that scrolls cleanly from top to bottom, with navigation links that jump to each section instead of loading a new page.
If you’re in a hurry, skip to the template kit shortcut near the bottom. If you want to actually understand what you’re building, start from the top.
What Is a One Page Website, and When It Actually Works
A one page website puts all your content on a single URL. Instead of navigating to /about or /services, the menu jumps to anchored sections on the same page.
It works well for:
- Freelancers showcasing a small portfolio
- Event landing pages (wedding, conference, product launch)
- Small service businesses (consultants, barbers, designers)
- Coming-soon pages or MVP announcements
- Personal resumes and portfolios
It works less well for:
- Blogs, which need separate post URLs for SEO
- Online stores with more than a handful of products
- Sites targeting multiple long-tail keywords
If your content can fit into roughly 7-12 sections without feeling crammed, a one pager is probably the right format.
What You Need Before You Start
Three ingredients:
- A WordPress install (self-hosted or on your favorite host).
- Free Elementor and the free Hello Elementor theme. Hello ships without any styling, which is exactly what you want when Elementor is drawing everything.
- The free Master Addons plugin for the widgets Elementor doesn’t include (filterable galleries, pricing tables, info boxes, team carousels, Contact Form 7 styling).
You can build most of this with free Elementor alone, but a few sections get awkward without extra widgets. I’ll flag them as we go.
Pick the Right Theme and Page Template
Install Hello Elementor from Appearance > Themes > Add New. It’s a blank slate: no sidebars, no default styles, no opinions. Elementor draws the entire page.
Once it’s active:
- Create a new page (Pages > Add New).
- Open it in Elementor.
- Click the settings gear at the bottom left, go to Page Layout, and pick Elementor Canvas.
Canvas strips the WordPress header and footer. Your one pager becomes the whole page.
If you want to compare theme options, the best lightweight WordPress themes for Elementor roundup covers alternatives, but Hello is the default for a reason.
The 11 Sections of a One Page Elementor Layout
Most decent one pagers follow the same rhythm. Here’s the stack I use:
- Navigation menu (sticky)
- Hero section
- About
- Services or Features
- Team
- Portfolio or Case Studies
- Pricing
- Testimonials
- Contact form
- Social icons
- Footer
Not every site needs all eleven. A solo freelancer probably skips Team. A B2B consultant might skip Pricing. Pick the ones that actually move your visitor closer to contacting you, and drop the rest.
Build the Navigation Menu
First, create the menu in WordPress: Appearance > Menus > Create a new menu.
Add Custom Links with placeholder URLs. For now, use a hash (#) followed by the section name: #about, #services, #pricing. You’ll wire them up properly at the end, once each section has a matching ID.
Save the menu.
Now, inside Elementor, drop a section at the top with two columns. Put your logo in the left column. For the right column, you have two options:
- Free Elementor: Use the WP Menu widget.
- Master Addons: Use the Navigation Menu widget. It supports mega menu, hover effects, mobile toggle styling, and picks up the menu you just built without extra configuration.
Make the section sticky with Section Settings > Advanced > Motion Effects > Sticky: Top. If you want a full walkthrough, the sticky header in Elementor guide breaks it down.
Design the Hero Section
The hero sets the tone. Keep it short: a promise, a supporting line, a button.
Add a new section right below the menu. Open Section Settings and set:
- Content Width: Full Width
- Height: Fit to Screen
- Vertical Align: Middle
Drop in a large heading, one line of descriptive text, and a button. Use a background image or a solid color in Section Style. A dark overlay helps text readability when the background photo is busy.
If you want a head start, Master Addons ships hero section templates in the Template Library. Import one, swap the copy and image, and you’re done in a few minutes.
Add the About Section
Nothing fancy here. A standard section with two columns:
- Left column: a photo (yours, your team’s, or your workspace)
- Right column: Heading + Text Editor + Button
Point the button’s anchor link at the Services section below (“See what I do”) so visitors who scroll past About still have a clear path forward.
Build the Services Section
This is where the Infobox widget earns its place. Free Elementor has an Icon Box that covers the basics. The free Master Addons Infobox widget adds ready-made style presets, normal and hover backgrounds for the card, and hover colors for the text. Turn on the free Wrapper Link extension if the whole card should be clickable.
Create a section, add a heading (“Services” or “What I Do”), then an inner section split into three or four columns. Drop one Infobox per column.
Each box should answer one question: what’s the service, who it’s for, and what result it delivers. Don’t dump feature lists here. That’s what a dedicated services page is for, and you don’t have one on a one pager.
Add a Team Section
Skip this section if you’re solo.
For 1-4 people: use the Team Member widget. Each member gets a card with photo, name, role, short bio, and social icons.
For larger teams: use the Team Members Carousel. It shows three or four members at a time and scrolls horizontally, which keeps the section visually contained.
Keep all team photos the same crop and aspect ratio. Mismatched head sizes in a grid looks sloppier than you’d expect. See the Team Member widget and Team Members Carousel. For a standalone guide, see how to create a team members section.
Add a Filterable Portfolio
Free Elementor’s Image Gallery is fine for a static grid, but it doesn’t filter by category.
If you want visitors to click “Branding” or “Web” and have the grid reshuffle, you need a filterable gallery. Master Addons has one. It supports category tabs, popup lightbox, ribbons (like “NEW” or “FEATURED” badges), and a metadata overlay on hover.
Setup: drop in the Filterable Gallery widget, upload images, tag each with a category, and style. More context in the Elementor filterable gallery plugins roundup if you want to see how it stacks up against alternatives.
Add Pricing Tables
If you sell productized services or subscriptions, a pricing section converts better than a vague “contact for quote.”
Free Elementor doesn’t have a pricing widget, so this is Master Addons territory. The Pricing Table widget is in the free version and gives you headings, price, feature list with check or cross icons, a badge for the recommended plan, and a CTA button.
Three columns is the sweet spot for one pagers. Visitors eye-scan left to right, and the middle column is where you put the plan you actually want them to pick. Mark it “Most Popular” with a ribbon and style it slightly differently (bolder border, filled button). More pattern tips in the Elementor pricing table widget post.
Add Client Testimonials
Two or three real testimonials beat a wall of fake-looking ones.
Free Elementor’s Testimonial Carousel handles the basic layout. If you want a cleaner single-column version (one big quote that rotates), the Team Members Carousel in Master Addons, oddly enough, also works well here: drop customer photos into the member slots and put the quote in the bio field.
Ask for testimonials that mention a specific outcome (“got 3 clients in the first month”) rather than generic praise (“great to work with”). Specifics are convincing. Vague adjectives are filler.
Add a Contact Form
Install the free Contact Form 7 plugin from the plugin directory. Create a form, grab the shortcode.
In Elementor, drop a Text Editor widget and paste the shortcode. The form will render, but it’ll look plain.
That’s where the Master Addons Contact Form 7 widget takes over. Instead of pasting a shortcode, it lets you style labels, fields, borders, error messages, and the submit button from the Elementor panel. No custom CSS.
Full walkthrough in the Contact Form 7 customization doc. If you want a Font Awesome icon inside the submit button, there’s a separate post on applying Font Awesome icons to CF7 buttons.
Add Social Icons
Free Elementor includes a Social Icons widget. It covers Facebook, X (formerly Twitter), LinkedIn, Instagram, YouTube, and a handful of others. You control color (brand or custom), size, shape (rounded square or circle), and spacing.
Put these above or inside your footer. Keep the count to three or four platforms where you’re actually active. Twelve icons, half of them dead accounts, looks worse than three healthy ones.
Arrange the Footer
On a one pager, the footer can be a single line.
Add a section below the contact form, single column, centered. A short copyright line (© 2026 Your Name. All rights reserved.) does the job. If you need privacy policy or terms links, drop them here too. Nothing else belongs in a one pager footer.
Link the Menu to Each Section (the part most people get wrong)
This is the step that trips beginners up. The menu items you set up at the start (#about, #services, and so on) don’t do anything yet, because the sections have no matching IDs.
Here’s the fix, done once per section:
- Hover over a section, click the six-dot handle in the middle to select it.
- Go to the Advanced tab in the left panel.
- Scroll to CSS ID.
- Type the ID without the hash. So
about, not#about.
Save. Repeat for every section you want the menu to jump to. If you’d rather not wire anchors by hand — say on long blog posts instead of a landing page — a table of contents plugin builds these jump links for you automatically.
Then go back to Appearance > Menus and confirm each menu item’s link is the hash version (#about, #services, #pricing). Save the menu.
Reload the front-end, click a menu item, and the page should smooth-scroll to the matching section. If it jumps abruptly instead of scrolling, the theme is missing the smooth-scroll CSS rule. Add this to Customize > Additional CSS:
html { scroll-behavior: smooth; }Done.
Skip the Manual Work: Start From a Template Kit
If you don’t feel like building eleven sections from scratch, Master Addons ships 30+ full Template Kits, many of them one pagers for specific industries (agency, restaurant, portfolio, SaaS, consultant).
Import a kit, swap the images and copy, adjust colors to match your brand, and you’re live in an afternoon instead of a week. The how to import Elementor templates post covers the import step if you’ve never done it.
This is also how I recommend beginners start. Build from a working template, learn how each section is structured, and then tweak from there.
Speed and Performance Tips for One Page Sites
Since the whole site lives on one URL, that URL has to load every image, font, and script for every visitor. A bloated one pager is a conversion killer.
Quick wins:
- Compress every image before upload (TinyPNG, Squoosh, or a plugin like Imagify).
- Use WebP format where possible. The best WordPress image optimizer plugins roundup covers options.
- Lazy-load below-the-fold images (Elementor handles this by default in modern versions).
- Limit web fonts to two families, max.
- Minify CSS and JS with a caching plugin (LiteSpeed Cache, WP Rocket, or Autoptimize).
More in how to speed up Elementor websites. Master Addons v3 is three times faster than v2 and only loads the widget CSS and JS for widgets actually in use, which matters more on a single-URL site than on a multi-page one.
FAQ
Can I create a one page website with Elementor for free?
Yes. Free Elementor plus the free Hello Elementor theme plus the free Master Addons plugin covers every section in this guide. You don’t need Pro for a one pager unless you want extra widgets or the native theme builder.
What’s the best theme for a one page Elementor site?
Hello Elementor. It ships with zero styling, loads fast, and lets Elementor draw the full page. Any opinionated theme (Astra, GeneratePress) also works, but they add styling you’ll have to override.
How do I make menu links jump to sections instead of loading a new page?
Assign a CSS ID to each section (Section > Advanced > CSS ID, without the hash), then link the menu item to the same name prefixed with a hash. A section ID of about matches a menu URL of #about.
Is a one page website good for SEO?
For a single focused keyword or local intent, yes. For broader SEO covering multiple topics, no. A one pager competes for one primary keyword (the page title). Multi-page sites can target dozens of separate ones.
How long does it take to build a one page site in Elementor?
From scratch, 4-8 hours for a clean build. Starting from a Template Kit, 1-3 hours. Most of the time goes into copy and image selection, not the Elementor work itself.
Wrapping Up
A one page website with Elementor isn’t hard. Pick Hello Elementor, set the page to Canvas, build eleven sections (or fewer), assign CSS IDs, and wire the menu to hash links. Done.
Where Master Addons speeds things up:
- Navigation Menu widget with mega menu and mobile toggle
- Infobox widget for services
- Filterable Gallery for portfolios
- Pricing Table (free) with built-in ribbon and feature list
- Contact Form 7 styling without writing CSS
- Team Members and Team Members Carousel
- 30+ full Template Kits when you want to skip the manual build
Download the free Master Addons plugin and start with whichever section you’re least confident building from scratch. Work outward from there.
Related reading: 100 Best Elementor Addons · How to Import Elementor Templates · Widgets & Extensions · Master Addons Pricing
