Creating a Onepager

Last Updated: Jun 27, 2017

Creating a onepager


  1. Add content to your website and create the sections you want to jump to.
  1. Make sure to add all the content to your onepager and finish the page as far as possible.
  1. Creating a sections to jump to
  1. 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.
  2. Make sure to enter the source code view of the text module with this button < >
  3. Find the paragraph you want to jump to and give it an ID.
  4. 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.


  1. Creating menu
  1. Navigate to ‘Appearance → Menu’.
  2. Click ‘Create a new menu’.
  3. Give it a name and click ‘Create Menu’
  4. One the left, click ‘Custom Links’.
  5. 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)
  6. The link text is self-explanatory.
  7. Click ‘Add to Menu’.
  8. This is how it should look like:


  1. Disabling the site transition animation for the new custom links.
  1. 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.
  2. Find ‘Screen Options’ in the top right corner of this website.
  3. Expand it and make sure ‘CSS Classes’ is checked.
  4. 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.
  1. Make sure ‘Top Primary Menu’ is checked and hit ‘Save Menu’.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found