If you’d like to build a one-page website, Ultra and SiteOrigin Page Builder make the job easy.
Required Plugins
Go to Plugins and confirm that the following plugins are installed and activated.
SiteOrigin Page Builder
SiteOrigin Widgets Bundle
Create the Page
Create the page you’ll be using by going to PagesAdd New. If you’d like this page to be your home page, go to SettingsReading to assign it as your static home page once saved.
Adjust Page Settings
Next, we’ll setup the page design to make it suitable for a full-width one-page website. In the Attributes meta box, set the Template drop-down to Default Template. Next, scroll down to the Page Settings meta box and set the Page Layout to No Sidebar. Finally, disable the Header Bottom Margin and Footer Top Margin settings as we’d like our first and last rows to be flush with the header and footer respectively.
Insert a Page Builder Pre-Built Layout
Click on the Page Builder tab to switch to the Page Builder interface. In this example, we’ll be using a pre-built layout to get started. Click the Layouts button and then Layouts Directory on the left. Select any of the pre-built layouts then click the Insert button bottom right followed by Replace current.
Once inserted you can edit each section of the pre-built layout and insert your own content. You can, of course, build your one-pager from scratch using Page Builder but for this tutorial, we’ll use a pre-built layout to speed things up.
If you’d like to use the layout we’ve used in the demo one-pager, you can download it by right-clicking and saving here. Once the JSON file is saved to your desktop, you can import it from within Page BuilderLayoutsImport/ExportSelect Import File. The pre-built layout, Demo One Pager, uses external images in the Hero widget and in the fourth last row labelled in Page Builder as Headline with Parallax (Edit Row > Design > Background Image). You’ll want to replace these external image URL’s with images from your own Media Library by using the Add Media button. If you want to use the demo images from the pre-built layout then you might consider copying those images to your WordPress Media Library before using the Add Media button to insert them into the Hero widget frame or row design section.
Ready the Page for Navigation
Our page is now setup, albeit with a pre-built layout. Our next task is to ready the page for navigation links that will take the user to each section. We’ll do this by inserting an ID in each row. From the Page Builder interface, edit the first row by clicking the wrench icon on the right then Edit Row. Click the Attributes heading in the right column and locate the Row ID field at the top. Type a word to identify this row by, for example, if your first row had information about the page/service/company you might enter about as the ID. Once inserted, click the Done button at the bottom right of the modal window and repeat this process for each row. Each ID should be unique. If you’re using the One Page Demo pre-built layout, there will be row ID’s already inserted, you can either use the existing ID names or replace them with your own.
Setup the Page Navigation
Go to AppearanceMenus. If you don’t yet have a custom menu created and assigned to Ultra’s primary menu location, click create a new menu, name your menu and use the checkbox at the bottom of the page to assign it to the theme’s Primary Menu location.
To insert links to your page sections, click Custom Links in the left column, in the URL field, insert a hash followed by the name of your first row ID. For example #about, assuming about was the name of your first ID. In the Link Text field, insert the menu item label, this is what users will see. Finally, click Add to Menu. Repeat this process for all of your section IDs. Finally, click Save Menu.
In the above paragraph we used section links as follows:
#about
If other pages are present in your menu you can use the full URL:
http://yourdomain.com/#about
If you’d like to smooth scroll from a link outside of the main menu, simply add the following class to it:
puro-scroll
An example of this class added to a link:
<a href="#colophon" class="puro-scroll">Scroll to the footer</a>
Result
When scrolling the menu will highlight using the current menu item color, the section that’s being viewed. When a link is clicked on, the page will smooth scroll to that section.
Building a One-Pager Within a Larger Site – Different Menus
You might have noticed that our demo one-pager has a different menu to the rest of the demo site. We’ve done that using the plugin Menu Items Visibility Control. To add a new menu for your one page, go to AppearanceMenus and click create a new menu. Name the menu, add Custom Links and Save. Finally, go to AppearanceMenusMenu Locations, click + Conditional Menu and + Conditional Menu, select your one page menu and click + Conditions to select your one-pager as the page display condition.