Log in SwiftGrid →
Ultra

Build a One Page Website

3 min read Updated Sep 2026 Ultra

A one page website puts every section on a single page. Menu links scroll to each section. You build it with Ultra and Page Builder by SiteOrigin. See the one page demo.

You need 2 plugins: Page Builder by SiteOrigin and the SiteOrigin Widgets Bundle.

Create the Page

  1. Go to PagesAdd Page and give the page a title.
  2. Set Template to Default template.
  3. In the Page settings box, set Page Layout to No Sidebar. Use Full Width for sections that reach the edges of the screen.
  4. Turn off Header Bottom Margin and Footer Top Margin. The first and last sections then sit against the header and footer.
  5. Publish the page.
  6. To make it your home page, go to SettingsReading, choose A static page and select the page.

Build the Sections

Open the Page Builder tab. Add a row for each section, or start from a prebuilt layout.

To start from a prebuilt layout:

  1. Click Layouts.
  2. Open Layouts Directory on the left and choose a layout.
  3. Click Insert, then Replace current.

To use the layout from the demo, download the JSON file. Then go to Page BuilderLayoutsImport/Export, click Select Import File and choose the file. The demo layout loads 2 images from the Puro demo site: training.jpg in the Hero widget and crossfit.jpg as the background of the row named Headline with Parallax. Replace both with images from your Media Library.

Give Each Row an ID

Each menu link needs a row ID to point to.

  1. Click the wrench icon on a row and choose Edit Row.
  2. Open the Attributes tab.
  3. Enter a short word in Row ID, for example about.
  4. Click Done.
  5. Repeat for each row. Each ID must be unique.

The demo layout already has IDs. Keep them or replace them.

Build the Menu

  1. Go to AppearanceMenus.
  2. Click create a new menu, name it and turn on Primary Menu under Menu location. Click Create Menu.
  3. Open Custom Links in the left column.
  4. In URL, enter a hash and a row ID, for example #about.
  5. In Link Text, enter the label visitors see.
  6. Click Add to Menu. Repeat for each row ID.
  7. Click Save Menu.

Use the full address if the menu also links to other pages. The links then work from any page.

https://example.com/#about

Smooth Scrolling

Menu links scroll smoothly to their row. This uses the Smooth Scroll setting in AppearanceCustomizeTheme SettingsNavigation. Default: on. While visitors scroll, Ultra marks the menu item of the row in view.

A link outside the menu can scroll smoothly too. Give it the class puro-scroll.

<a href="#colophon" class="puro-scroll">Scroll to the footer</a>

Use a Different Menu on the One Page

The demo one page uses a different menu from the rest of the demo site. It uses the Conditional Menus plugin.

  1. Create the one page menu with your custom links.
  2. Go to AppearanceMenusManage Locations.
  3. Under Primary Menu, click + Conditional Menu and choose the one page menu.
  4. Click + Conditions and choose the one page as the condition.
  5. Click Save Changes.
Was this helpful?
Previous Home Page Next Customizer