One Page Website

3 min read Updated

You can build a one page website with Corp and Page Builder by SiteOrigin. Each section of the page is a row, and the menu links scroll to each row. View the one page Corp demo.

A one page site with a full width hero under an overlapping header, and a What We Do heading below

Required Plugins

Go to Plugins and check that these plugins are installed and active:

Add the Page

Go to PagesAdd Page and create a page. To make it your home page, publish it, then go to SettingsReading and choose it as your Homepage under Your homepage displays > A static page.

Change the Page Settings

In the Page settings box set the page up for a full width design. See Page Settings.

  • Set Page Layout to No Sidebar.
  • Turn Header Bottom Margin and Footer Top Margin off. This removes the theme margin below the header and above the footer. If a row has its own space at the top or bottom, change that in the row styles.
  • Set Header Overlap to Enabled – Light Text if the first row has a dark image, as it does in our demo.
  • Turn Footer Widgets off if your design does not need them.

Insert the One Pager Layout

Corp has a prebuilt layout called One Pager. It gives you a starting design.

  1. Open Page Builder. In the Classic Editor click the Page Builder tab. In the Block Editor add a SiteOrigin Layout Block.
  2. Click Layouts, then Prebuilt Layouts on the left.
  3. Choose One Pager. Click Insert and then Replace current.

Edit each row and add your own content. You can also build the page from scratch.

Give Each Row an ID

The menu links use row IDs to find each section.

  1. In Page Builder, click the wrench icon of the first row and choose Edit Row.
  2. Open the Attributes section in the right column.
  3. In Row ID type a word for the row, for example about. Use lower case letters, with no spaces.
  4. Click Done. Repeat for each row. Each ID must be different.

Set Up the Menu

  1. Go to AppearanceMenus. If you have no menu, create one and tick Header Menu under Menu Settings. See Menus.
  2. Open Custom Links in the left column. In URL type a hash and a row ID, for example #about. In Link Text type the label.
  3. Click Add to Menu. Repeat for each row, then click Save Menu.

Use the short link, #about, when the menu shows on the one page site only. If the menu also shows on other pages of the site, use the full address, for example:

https://example.com/#about

Corp smooth scrolls to the row when a visitor clicks a menu link. The menu link that the visitor clicks gets the current menu item color. This works when the link points to the ID of a Page Builder row. Corp also accounts for the height of a sticky header when it scrolls.

To smooth scroll from a link outside the main menu, give the link the class corp-scroll:

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

To turn smooth scroll off, use the Disable Smooth Scroll snippet in Advanced Customizations.

Use a Different Menu on the One Page Site

Our demo one page site has a different menu from the rest of the demo site. We used the Conditional Menus plugin for that.

  1. Activate the plugin. Go to AppearanceMenus and create a menu for the one page site. Click Save Menu.
  2. Click the Manage Locations tab. Under Header Menu click + Conditional Menu and choose the menu that you made.
  3. Click + Conditions. On the Pages tab tick the one page site, then click Save. The menu now shows on that page only.
  4. Click Save Changes.
The Manage Locations tab with the Main Menu and a One Page Menu conditional menu under Header Menu
Add a conditional menu in Appearance > Menus > Manage Locations and choose your one page menu.
The Condition dialog with the One Page Demo page ticked on the Pages tab
Add a page condition so that the menu shows on your one page site only.

More Help

We wrote a blog post about a one pager with Corp. It is like this page and has a few more screenshots. Read the blog post.