What You’ll Need: One-Page Menu in WordPress
- WordPress site (any theme that supports full-width layout)
- Elementor (Free or Pro) or Gutenberg Block Editor
- A menu with anchor links
Step-by-Step Setup Guide: One-Page Menu in WordPress
Create a New Page
Go to Pages → Add New
Name it something like “Home” or “Landing Page”
Set the template to Full Width (or “Elementor Canvas” if using Elementor)
Add Sections with Unique IDs
Each section (e.g., About, Services, Contact) needs a unique HTML ID.
In Elementor:
- Add a section
- Go to Advanced → CSS ID
- Enter an ID like
about,services,contact(no#symbol)
In Gutenberg:
- Add a block (e.g., Group or Cover)
- Click Block → Advanced → HTML Anchor
- Enter the anchor name (e.g.,
about,services,contact)
Create a Custom Menu
Go to Appearance → Menus
Create a new menu called “One-Page Menu”
Add Custom Links:
- URL:
#about - Link Text: “About”
Repeat for each section:#services,#contact, etc.
Save the menu and assign it to the Primary Menu location.
Enable Smooth Scrolling (Optional)
Most modern themes or Elementor Pro support smooth scrolling by default. If not:
- Use a theme that supports it (e.g., Astra, Hello Elementor)
- Or install a lightweight plugin like Simple Smooth Scrolling
No code needed—just activate and test.
Test Your Menu
Visit your page and click each menu item.
It should scroll smoothly to the corresponding section.
Pro Tips: One-Page Menu in WordPress
- Use sticky headers for better UX
- Add scroll offset if your header overlaps content
- Use Elementor’s “Scroll to Anchor” widget for extra control
- Optimize for mobile: collapse menu into hamburger with anchor links
Need Help Designing Your One-Page Menu in WordPress?
If you want expert help building a high-converting one-page layout with Elementor, branded sections, and scroll-triggered CTAs, we offer professional WordPress services tailored for agencies, creators, and service providers.
Let’s build your scroll-perfect site the smart way. Contact us today
