Log in SwiftGrid →
Polestar

One Page Website

3 min read Updated Sep 2026 Polestar

Build a one-page site with Polestar, Page Builder by SiteOrigin and the One Pager prebuilt layout. Menu links then scroll to each section. See the one-page demo.

Add the Page

  1. Install and activate Page Builder by SiteOrigin and the SiteOrigin Widgets Bundle.
  2. Go to PagesAdd Page.
  3. To use it as your home page, go to SettingsReading. Under Your homepage displays, select A static page and choose this page.

Set the Page Settings

In the Page Settings box, make these changes.

  1. Set Page Layout to No Sidebar.
  2. Clear Header Bottom Margin and Footer Top Margin. The theme margins go away. Row padding still applies.
  3. Optional: set Header Overlap to Enabled – Light Text and clear Footer Widgets. The demo uses both.

Insert the One Pager Layout

  1. Click the Page Builder tab above the editor. In the block editor, add a SiteOrigin Layout Block instead.
  2. Click Layouts. Under Prebuilt Layouts, open Theme Defined Layouts and select One Pager.
  3. Open the arrow next to Insert and choose Replace current.
  4. Edit each section and add your own content.

The layout loads its images from purothemes.com. Replace them with images from your Media Library in the Hero widget and in the row with the fixed background. For the row, open Edit RowDesignBackground Image.

Set the Row IDs

Each menu link needs a row with a matching ID. The One Pager layout has IDs on its rows: services, statistics, testimonials, blog, parallax and contact. To add or change an ID:

  1. Open the row settings and click Attributes.
  2. Enter a unique word in Row ID, such as about.
  3. Click Done.

Build the Menu

  1. Go to AppearanceMenus. Create a menu and assign it to the Header Menu location.
  2. In the left column, open Custom Links.
  3. In URL, enter a hash and a row ID, such as #services.
  4. In Link Text, enter the label visitors see.
  5. Click Add to Menu.
  6. Repeat for each row ID, then click Save Menu.

If the menu also links to other pages, use the full address for section links:

https://example.com/#services

Menu links scroll smoothly by default. To get the same scroll from a link outside the menu, add the class puro-scroll.

<a href="#contact" class="puro-scroll">Contact us</a>

While a visitor scrolls, the menu item for the section in view takes the current link color. Set it with Current Link Color in the Navigation settings. That setting needs Polestar Premium. Without it, the item uses the Accent Color.

Use a Different Menu on the One-Page

To show a different menu on the one-page only, use the Conditional Menus plugin.

  1. Create the one-page menu at AppearanceMenus.
  2. Open the Manage Locations tab.
  3. Click + Conditional Menu and select the one-page menu.
  4. Click + Conditions and choose your one-page as the page.
  5. Save the changes.
Was this helpful?