- Add content to your website and create the sections you want to jump to.
- Make sure to add all the content to your onepager and finish the page as far as possible.
- Creating a sections to jump to
- The best solution for this is to use a text module. If you already have a headline you can jump to, within a code module, that’s perfect.
- Make sure to enter the source code view of the text module with this button < >
- Find the paragraph you want to jump to and give it an ID.
- Add unique IDs to every section you want. If you need to jump to an image to a non paragraph element, you can either inspect your website to find the right selector, or you can use the code module to add any HTML item with your custom class.
- Creating menu
- Navigate to ‘Appearance → Menu’.
- Click ‘Create a new menu’.
- Give it a name and click ‘Create Menu’
- One the left, click ‘Custom Links’.
- In our example we’ve created a headline with the ID ‘about’, so the URL we need to use to target that headline is.
‘#about’ (without quotes) - The link text is self-explanatory.
- Click ‘Add to Menu’.
- This is how it should look like:
- Disabling the site transition animation for the new custom links.
- By default the site transition animation will start once you’ve clicked a link within the menu. As we are using a onepager, we need to exclude these custom links from starting the transition.
- Find ‘Screen Options’ in the top right corner of this website.
- Expand it and make sure ‘CSS Classes’ is checked.
- If you take another look at your menu items (expanded), there should now be a new field called ‘CSS Classes (optional)’. Add the class ‘no-transition’ (without quotes) to that field.
- Make sure ‘Top Primary Menu’ is checked and hit ‘Save Menu’.